课程说明云点播

This commit is contained in:
@fawn-nine
2024-06-19 16:10:36 +08:00
parent 93dd4dfd41
commit de7e4fb7d7
11 changed files with 4291 additions and 261 deletions

View File

@@ -34,7 +34,7 @@
<view class="" v-html="course.content">
</view>
</view>
</view>
</view>
<!-- <view class="containerBg"> -->
<view class="coursePart flexbox" v-if="librayList.length > 1">
<view :class="['item','flexbox',curId == item.id? 'active': '' ]" v-for="(item, index) in librayList"
@@ -43,6 +43,24 @@
<!-- <u-icon v-if="item.isBuy == 0 && curId != item.id" name="lock" color="#fff" size="28"></u-icon> -->
<view class="">{{item.title}}</view>
</view>
</view>
<view class="buyBox flexbox" v-if="this.librayList.length > 0 && this.librayList[this.curIndex].isBuy == 0">
<!-- 普通未购买 -->
<view class="item" style="font-size: 24rpx;">
<text>您还未购买此课程目录开通 <text style="font-weight: bold;">超级VIP</text>或购买课程均可观看课程</text>
</view>
<view class="item tbn flexbox">
<view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')">
<u-icon name="bag" color="#fff" size="28"></u-icon>
<text>立即购买</text>
</view>
<view class="saveBtn vipBtn flexbox" @click="goBuy('halfFee')">
<uni-icons type="vip" size="28" color="#fff"></uni-icons>
<text>开通超级VIP</text>
</view>
</view>
</view>
<view :class="['courseList',fold ? 'fold' : '']" v-if="courseList.length > 0">
<!-- 目录是否已经购买 -->
@@ -57,13 +75,14 @@
@click="goToLearn()" text="继续学习"></uni-tag>
</view>
</view>
</view>
<uni-section style="background: transparent;" title="章节列表" type="line"></uni-section>
<view class="item" v-for="(item, index) in courseList" :key="index" >
<view class="" @click.stop="chooseChapter(item, index)">
<text >{{item.title}}</text>
<uni-tag v-if="item.isAudition == 1" style="margin-left: 10rpx;" :inverted="true" text="试听"
size="mini" type="primary" />
size="mini" type="primary" />
</view>
<view class="flexbox shitingLIst" style="" v-if="item.tryListen.length > 0">
<view class="item flexbox" v-for="(item2,index2) in item.tryListen" :key="index2">
@@ -83,27 +102,6 @@
color="#258feb" size="28"></u-icon></view>
<text> </text>
</view>
<view class="video_audio_audition_list">
<!-- 试听视频/音频列表 -->
</view>
<view class="buyBox flexbox" v-if="this.librayList[this.curIndex].isBuy == 0">
<!-- 普通未购买 -->
<view class="item">
<text>您还未购买此课程开通 <text style="font-weight: bold;">超级VIP</text> 购买课程 均可观看课程</text>
</view>
<view class="item tbn flexbox">
<view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')">
<u-icon name="bag" color="#fff" size="28"></u-icon>
<text>立即购买</text>
</view>
<view class="saveBtn vipBtn flexbox" @click="goBuy('halfFee')">
<uni-icons type="vip" size="28" color="#fff"></uni-icons>
<text>开通超级VIP</text>
</view>
</view>
</view>
</view>
<u-divider v-else text="暂无数据"></u-divider>
<!-- <uni-section class="mb-10" title="教学体系" type="line"> -->
@@ -629,7 +627,7 @@
}
})
this.sayList = this.sayList.concat(myList)
console.log('this.sayList处理后 =》 ', this.sayList)
// console.log('this.sayList处理后 =》 ', this.sayList)
if (res.page.pages > this.pPage) {
this.status = 0
} else {
@@ -821,11 +819,10 @@
this.proPriceList = []
},
choosePrice(item) {
console.log(item, 'choosePrice')
// console.log(item, 'choosePrice')
this.curProId = item.productId
},
async chooseChapter(item, index) {
console.log('获取试听内容')
async chooseChapter(item, index) {
if (item.isAudition == 1) {
// 未购买仅试听
// let data = null
@@ -918,7 +915,7 @@
background-color: #d3f9e8;
// color: #fff;
font-size: 26rpx;
margin: 20rpx 0;
// margin: 20rpx 0;
padding: 10rpx 20rpx;
.flexbox {
@@ -1349,19 +1346,22 @@
}
.buyBox {
position: fixed;
z-index: 2;
bottom: 100rpx;
left: 0;
// position: fixed;
// z-index: 2;
// bottom: 100rpx;
// left: 0;
@include pleft_right(4px);
// @include mshadow(10px, 1);
padding: 20rpx 10rpx;
width: 100%;
font-size: 28rpx;
flex-wrap: wrap;
background: rgba(255, 255, 255, 0.9);
background-image: linear-gradient(60deg, #e0e9f6 0%,#ece6fa 30%,#d7e8f0 60%, #fff 100%);
// background: rgba(255, 255, 255, 0.9);
.item {
width: 100%;
text-align: center;
text-align: center; line-height: 70rpx !important;
}
@@ -1423,6 +1423,7 @@
.courseList {
position: relative;
padding-bottom: 50px;
// background-color: #fff;
// padding: 0 20rpx;
background-image: linear-gradient(0deg, #e9f0ff 0%, #fbfbff 100%);