zm/medicine_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

评论组件化

Browse Source
This commit is contained in:
@fawn-nine
2024-06-18 11:47:37 +08:00
parent b930cfc084
commit dc2f278594
4 changed files with 490 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
pages/course/myCourseLearn.vue
View File

@@ -5,10 +5,12 @@
<z-nav-bar :title="pageTitle ? pageTitle : '课程详情'"></z-nav-bar>
<view class="containerBg1">
<!-- <view class="vipSee"> -->
<view class="vipSee" v-if="userInfo.vip != 0">
<text>VIP畅学权益生效中</text>
</view>
<view :class="[userInfo.vip == 0 ? 'vipBox' : '']" style="padding:0 10px;">
<view class="courseTitle flexbox" v-if="course.id">
<view class="vipSee" v-if="userInfo.vip == 0">
<text>VIP畅学权益生效中</text>
</view>
<view class="curseImg flexbox imgcontainer" style="align-items: center;">
<image v-if="!course.image" src="/static/nobg.jpg" mode="widthFix"></image>
<image v-else :src="course.image" mode="widthFix"></image>
@@ -21,8 +23,9 @@
<!-- <uni-tag type="primary" text=""></uni-tag> -->
</view>
</view>
</view>
<view class="coursePart flexbox" v-if="librayList.length > 1">
</view>
</view>
<view :class="['coursePart','flexbox',fixed ? 'fixed' : '']" v-if="librayList.length > 1">
<view :class="['item','flexbox',curId == item.id? 'active': '' ]" v-for="(item, index) in librayList"
:key="index" @click="clicklib(item,index)">
<u-icon v-if="item.isBuy == 0 && curId == item.id" name="lock" color="#258feb" size="28"></u-icon>
@@ -162,6 +165,7 @@
loadFlag: false,
fatherSay:{},
supportFlag:false,
fixed: false,
};
},
//第一次加载
@@ -179,7 +183,8 @@
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
if (this.scrollTop > 500) {
if (this.scrollTop > 100) {
// console.log('高度符合');
this.fixed = true
} else {
this.fixed = false
@@ -656,59 +661,13 @@
},
choosePrice(item) {
console.log(item, 'choosePrice')
this.curProId = item.productId
// uni.showModal({
// title: '提示',
// cancelText: '再想想',
// content: `您正在购买 ${item.productName}，价格是${item.price}元，是否继续？`,
// success: function(res) {
// if (res.confirm) {
// console.log('用户点击确定');
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// });
this.curProId = item.productId
},
chooseChapter(item, index) {
// 检查课程是否已经购买了 是否为试听
if (item.isAudition == 1) {
// 未购买仅试听
// this.getPath(item, index)
chooseChapter(item, index) {
uni.navigateTo({
url: `/pages/course/learn?courseId=${this.course.id}&catalogueId
=${this.curId}&chapterId=${item.id}`
})
} else if (this.librayList[this.curIndex].isBuy == 1) {
uni.showModal({
title: '提示',
cancelText: '再看看',
confirmText: '去学习',
content: `当前操作即将跳转至学习页面，是否继续？`,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
} else {
uni.showModal({
title: '提示',
cancelText: '知道了',
confirmText: '立即购买',
content: `本章节不支持试听，购买课程后即可观看`,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
}
},
getPath(item, index) {
$http.request({
@@ -803,6 +762,7 @@
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.endBox{
// @include theme("vipbtnbg");
background-color: #d3f9e8;
@@ -985,8 +945,25 @@
width: calc(100% - 70rpx);
}
}
.vipSee{ @include theme("btn_bg"); color: #fff; padding: 20rpx;}
.fixed {
position: fixed; top: 70rpx;
z-index: 1; width: 100%; background-color: #fff;
}
.vipBox{
.courseTitle{position: relative;overflow: hidden;
border: 2px solid #b39aff;
// background-image: linear-gradient(90deg, #ccc3fa 0%, #9fc3fb 100%);
}
}
.vipSee{
position: absolute; right:0; bottom:0;
font-size: 24rpx;
background-image: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
// @include theme("btn_bg");
color: #fff; padding: 10rpx; border-radius: 50rpx 0 0 50rpx;
}
.leve {
@@ -1000,16 +977,16 @@
border-radius: 100%; overflow: hidden;
}
// .img {
// width: 80rpx;
// height: 80rpx;
// border-radius: 100%;
.img {
width: 80rpx;
height: 80rpx;
border-radius: 100%;
// image {
// width: 100%;
// height: 80rpx;
// }
// }
image {
width: 100%;
height: 80rpx;
}
}
.contentBox {
font-size: 24rpx;
@@ -1359,6 +1336,7 @@
}
.btnContainer {
border-top: 1px solid #cac6e1;
margin-top: 20rpx;
@@ -1407,13 +1385,15 @@
}
.courseTitle {
// justify-content: space-between;
// overflow: hidden;
// background-image: url(@/static/bg1.jpg);
// background-size: cover;
// background-repeat: no-repeat;
// background-image: linear-gradient(180deg, #cfe0ff 0%, #fff 50%);
padding: 0 20rpx;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 20rpx;
@include ptop_bottm(10px);
@include pleft_right(10px);
// color: #fff;
border: 2px solid #a3bbe0;
@include mshadow(10px, 1)
.title {
// display: block;
font-size: 30rpx;