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

389
components/commentsList.vue Normal file
View File

@@ -0,0 +1,389 @@
<template>
<view class="">
<view class="box">
<view class="firstLeve flexbox leve" v-for="(item, index) in sayList" :key="index" style="flex-wrap: wrap;">
<view class="imgbox" :style="getBackGround(item.user.avatar)">
<view class="img">
<!-- <image :src="item.user.avatar" mode="aspectFit" style="width: 80rpx; height: 80rpx;"></image> -->
</view>
</view>
<view class="contentBox contentBoxfirstLeve">
<view class="name">
{{item.user.name == '' ? '暂无昵称': item.user.name}}
</view>
<view class="content" v-if="item.content != ''">
<rich-text class="content" :nodes="formatRichText(item.content)"></rich-text>
</view>
<view class="imagesList flexbox" v-if="item.images !=''">
<view class="item" v-for="(item2, index2) in item.imgList" :key="index2">
<image @click="previewImage(item2)" :src="item2" mode="widthFix"
style="width: 80rpx; height: 80rpx;"></image>
</view>
</view>
<view class="others flexbox">
<view class="dianzan flexbox" @click="support('one',index,item)">
<u-icon v-if="item.support" name="heart-fill" color="#ff5500" size="24"></u-icon>
<u-icon v-else name="heart" color="#999" size="24"></u-icon>
<text>{{item.supportCount}}</text>
</view>
<view class="pinglun flexbox" @click="addSay(index,item)">
<!-- <u-icon name="chat-fill" color="#999" size="24"></u-icon> -->
<u-icon name="chat" color="#999" size="24"></u-icon>
<text>{{item.children && item.children.length > 0? item.children.length : 0}}</text>
</view>
<text>{{item.createTime}}</text>
</view>
</view>
<!-- 二级 -->
<view class="boxB" v-if="item.Bchildren && item.Bchildren.length > 0" style="width: 100%;">
<view class=" flexbox leve" v-for="(citem, cindex) in item.Bchildren" :key="cindex">
<view class="imgbox" :style="getBackGround(citem.user.avatar)">
<view class="img">
<image :src="citem.user.avatar" mode="aspectFit"></image>
</view>
</view>
<view class="contentBox">
<view class="name">
{{citem.user.name == '' ? '暂无昵称': citem.user.name}}
</view>
<view class="content" v-if="citem.content != ''">
<rich-text class="content" :nodes="formatRichText(citem.content)"></rich-text>
</view>
<view class="imagesList flexbox" v-if="citem.images !=''">
<view class="item" v-for="(item3, index3) in citem.imgList" :key="index3">
<image @click="previewImage(item3)" :src="item3" mode="widthFix"
style="width: 80rpx; height: 80rpx;"></image>
</view>
</view>
<view class="others flexbox">
<view class="dianzan flexbox" @click="support(index,cindex,citem)">
<u-icon v-if="citem.support" name="heart-fill" color="#ff5500" size="24"></u-icon>
<u-icon v-else name="heart" color="#999" size="24"></u-icon>
<text>{{citem.supportCount}}</text>
</view>
<!-- <view class="pinglun flexbox" @click="addSay(cindex,citem)">
<u-icon name="chat" color="#999" size="24"></u-icon>
<text>{{citem.children && citem.children.length > 0? item.children.length : 0}}</text>
</view> -->
<text style="margin-left: 20rpx;">{{citem.createTime}}</text>
</view>
</view>
</view>
<view class="loadMore" v-show="item.Bchildren.length < item.children.length" @click="showMoreChildren(index,item)">
<text>加载更多追评</text>
</view>
</view>
<!-- end -->
</view>
</view>
</view>
</template>
<script>
export default {
props:['sayList'],
name:"commentsList",
data() {
return {
};
},methods:{
// 加载更多子评论
showMoreChildren(i,val){
console.log('更多评论');
if(val.children.length <= val.Bchildren.length){
uni.showToast({
title:'没有更多了哦',
icon:'none'
})
return
}
let _list = []
let _cc = [...val.children]
_list = _cc.slice(val.Bchildren.length, val.Bchildren.length + 6)
this.sayList[i].Bchildren = this.sayList[i].Bchildren.concat(_list)
},
// 点赞
support(index1,index,val){
console.log(index1,index,val, '点赞');
this.$emit('support',{index1,index,val})
},
getBackGround(src){
return `background: url(${src});background-size: cover;`
},
formatRichText(html) { //控制图片大小
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:40rpx;height:40rpx;display:inline-block;margin:10rpx auto;"');
return newContent;
},
previewImage(url) {
console.log(url)
uni.previewImage({
urls: [url],
longPressActions: {
itemList: ['很抱歉，暂不支持保存图片到本地'],
success: function(res) {
// console.log(res,'+++++')
}
}
});
},
addSay(index,item){
// console.log(index,item,'添加评论')
this.$emit('showSayModule',{index,item})
}
}
}
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.flexbox{display: flex;}
// ::v-deep .contentBox {
// .ql-editor {
// font-size: 26rpx;
// font-style: normal;
// min-height: 50rpx !important;
// padding: 20rpx;
// }
// img {
// width: 20px;
// }
// .u-upload__button {
// margin: 0 auto;
// }
// }
.liuyanBox {
padding: 0 20rpx;
margin-top: 20rpx;
.contentBoxfirstLeve{
width: calc(100% - 70rpx);
}
}
.leve {
margin-bottom: 20rpx;
.imgbox {
border: 1px solid #eee;
margin-right: 10rpx;
width: 60rpx;
height: 60rpx;
border-radius: 100%; overflow: hidden;
}
.contentBox {
font-size: 24rpx;
.name {
color: #999;
@include toe();
}
.content {
color: #333;
font-size: 26rpx;
margin-top: 10rpx;
}
.others {
margin-top: 10rpx;
color: #999;
align-items: center;
.dianzan {
align-items: center;
}
.pinglun {
align-items: center;
margin-left: 10rpx;
margin-right: 20rpx;
}
}
}
}
.firstLeve{padding-bottom: 10rpx; border-bottom: 1px solid #f7f8f9;}
.loadMore{text-align: center; margin-bottom: 20rpx;
text{color: $themeColor; font-size: 26rpx;}
}
.contentBox {
padding: 0 20rpx;
.icon {
width: 80rpx;
justify-content: center;
margin-left: 10rpx;
height: 80rpx;
align-items: center;
border: 1px solid #eee;
border-radius: 50rpx;
}
.addEmoji {
margin-right: 20rpx;
}
.imagesList { margin-top: 20rpx;
.item {
margin-right: 20rpx;
}
}
}
.boxB{margin-left: 60rpx; margin-top: 20rpx; background-color: #f7f8f9;
padding-top: 20rpx; padding-left:10rpx;
.imgbox{
width: 40rpx !important;
height: 40rpx !important;
}
.contentBox{width: calc(100% - 60rpx);}
// .img{ width: 60rpx;
// height: 60rpx;
// image{width:60rpx; height: 60rpx; border-radius: 100%;}
// }
}
.chooseImgType {
margin-top: 20rpx;
.item {
text-align: center;
margin-right: 20rpx;
padding: 10rpx;
box-sizing: border-box;
justify-content: center;
align-items: center;
width: 60px;
border: 1px solid #eee;
height: 60px;
text-align: center;
border-radius: 20rpx;
background-color: #f4f5f7;
// background-color: red;
text {
font-size: 24rpx;
display: inline-block;
width: 100%;
margin-top: -10rpx;
}
.img {
margin: 0 auto;
}
.ss {
line-height: 20rpx;
color: #666;
}
}
}
.sbmitBox {
button {
margin-top: 20rpx;
margin-bottom: 20rpx;
@include theme("btn_bg");
color: #fff;
}
}
.upimgList {
margin-top: 15px;
.item {
border: 1px solid #eee;
padding: 10rpx;
margin-right: 20rpx;
width: 100rpx;
height: 100rpx;
position: relative; overflow: hidden;
image {
width: 100%;
height: 100rpx;
}
span {
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
right: -10px;
top: -10px;
z-index: 1;
border: 1px solid #eee;
border-radius: 20rpx;
background-color: #fff;
line-height: 20px;
font-size: 26rpx;
text-align: center;
}
}
}
.emojiBtn {
.img {
width: 50rpx;
height: 50rpx;
image {
width: 100%;
height: 50rpx;
}
}
}
.editorBox {
width: calc(100vw - 100rpx);
}
.ql-container {
min-height: 50rpx !important;
height: auto !important;
border: 1px solid #eee;
border-radius: 50rpx;
}
.contentBox {
padding: 0 20rpx;
.icon {
width: 80rpx;
justify-content: center;
margin-left: 10rpx;
height: 80rpx;
align-items: center;
border: 1px solid #eee;
border-radius: 50rpx;
}
.addEmoji {
margin-right: 20rpx;
}
.imagesList { margin-top: 20rpx;
.item {
margin-right: 20rpx;
}
}
}
</style>

182
pages/course/courseDetail.vue
View File

@@ -137,83 +137,8 @@
</template> </template>
</uni-section> </uni-section>
<view class="liuyanBox"> <view class="liuyanBox">
<view class="box" v-if="sayList.length > 0"> <view class="" v-if="sayList.length > 0">
<view class="firstLeve flexbox leve" v-for="(item, index) in sayList" :key="index" style="flex-wrap: wrap;"> <commentsList :sayList = "sayList" @support="support" @showSayModule="showSayModule"></commentsList>
<view class="imgbox" :style="getBackGround(item.user.avatar)">
<view class="img">
<image :src="item.user.avatar" mode="aspectFit"></image>
</view>
</view>
<view class="contentBox contentBoxfirstLeve">
<view class="name">
{{item.user.name == '' ? '暂无昵称': item.user.name}}
</view>
<view class="content" v-if="item.content != ''">
<rich-text class="content" :nodes="formatRichText(item.content)"></rich-text>
</view>
<view class="imagesList flexbox" v-if="item.images !=''">
<view class="item" v-for="(item2, index2) in item.imgList" :key="index2">
<image @click="previewImage(item2)" :src="item2" mode="widthFix"
style="width: 80rpx; height: 80rpx;"></image>
</view>
</view>
<view class="others flexbox">
<view class="dianzan flexbox" @click="support('one',index,item)">
<u-icon v-if="item.support" name="heart-fill" color="#ff5500" size="24"></u-icon>
<u-icon v-else name="heart" color="#999" size="24"></u-icon>
<text>{{item.supportCount}}</text>
</view>
<view class="pinglun flexbox" @click="addSay(index,item)">
<!-- <u-icon name="chat-fill" color="#999" size="24"></u-icon> -->
<u-icon name="chat" color="#999" size="24"></u-icon>
<text>{{item.children && item.children.length > 0? item.children.length : 0}}</text>
</view>
<text>{{item.createTime}}</text>
</view>
</view>
<!-- 二级 -->
<view class="boxB" v-if="item.Bchildren && item.Bchildren.length > 0" style="width: 100%;">
<view class=" flexbox leve" v-for="(citem, cindex) in item.Bchildren" :key="cindex">
<view class="imgbox" :style="getBackGround(citem.user.avatar)">
<view class="img">
<image :src="citem.user.avatar" mode="aspectFit"></image>
</view>
</view>
<view class="contentBox">
<view class="name">
{{citem.user.name == '' ? '暂无昵称': citem.user.name}}
</view>
<view class="content" v-if="citem.content != ''">
<rich-text class="content" :nodes="formatRichText(citem.content)"></rich-text>
</view>
<view class="imagesList flexbox" v-if="citem.images !=''">
<view class="item" v-for="(item3, index3) in citem.imgList" :key="index3">
<image @click="previewImage(item3)" :src="item3" mode="widthFix"
style="width: 80rpx; height: 80rpx;"></image>
</view>
</view>
<view class="others flexbox">
<view class="dianzan flexbox" @click="support(index,cindex,citem)">
<u-icon v-if="citem.support" name="heart-fill" color="#ff5500" size="24"></u-icon>
<u-icon v-else name="heart" color="#999" size="24"></u-icon>
<text>{{citem.supportCount}}</text>
</view>
<!-- <view class="pinglun flexbox" @click="addSay(cindex,citem)">
<u-icon name="chat" color="#999" size="24"></u-icon>
<text>{{citem.children && citem.children.length > 0? item.children.length : 0}}</text>
</view> -->
<text style="margin-left: 20rpx;">{{citem.createTime}}</text>
</view>
</view>
</view>
<view class="loadMore" v-show="item.Bchildren.length < item.children.length" @click="showMoreChildren(index,item)">
<text>加载更多追评</text>
</view>
</view>
<!-- end -->
</view>
</view> </view>
<u-divider v-show="status == 2" text="已加载全部"></u-divider> <u-divider v-show="status == 2" text="已加载全部"></u-divider>
<u-divider v-show="status == 3" text="暂无留言数据"></u-divider> <u-divider v-show="status == 3" text="暂无留言数据"></u-divider>
@@ -332,6 +257,7 @@
<script> <script>
// import musicPlay from '@/components/music.vue' // import musicPlay from '@/components/music.vue'
import commentsList from '@/components/commentsList.vue'
import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js' import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue'; import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
import $http from '@/config/requestConfig.js'; import $http from '@/config/requestConfig.js';
@@ -394,6 +320,7 @@
status: 88, status: 88,
loadFlag: false, loadFlag: false,
fatherSay:{}, fatherSay:{},
fatherIndex:null,
supportFlag:false, supportFlag:false,
}; };
}, },
@@ -437,6 +364,7 @@
components: { components: {
// musicPlay // musicPlay
emotion, emotion,
commentsList
}, },
//方法 //方法
@@ -452,24 +380,18 @@
// } // }
}, },
// 评论 // 评论
// 加载更多子评论 showSayModule(data){
showMoreChildren(i,val){ console.log(data,'父级收到值了');
console.log('更多评论'); this.fatherSay = data.item
if(val.children.length <= val.Bchildren.length){ this.fatherIndex = data.index
uni.showToast({ console.log(this.fatherSay,this.fatherIndex,'父级收到值了');
title:'没有更多了哦', this.sayVisible = true
icon:'none'
})
return
}
let _list = []
let _cc = [...val.children]
_list = _cc.slice(val.Bchildren.length, val.Bchildren.length + 6)
this.sayList[i].Bchildren = this.sayList[i].Bchildren.concat(_list)
}, },
// 点赞 // 点赞
support(index1,index,val){ support(data){
console.log(index1,index,val); console.log(data,'父级收到值了吗？');
let _obj = {...data} // index,index1,val
if(this.supportFlag){ if(this.supportFlag){
uni.showToast({ uni.showToast({
title:'操作太快了，歇一下吧~', title:'操作太快了，歇一下吧~',
@@ -478,13 +400,13 @@
return return
} }
this.supportFlag = true this.supportFlag = true
if(!val.support){ if(!_obj.val.support){
$http.request({ $http.request({
url: "common/courseGuestbook/addCourseGuestbookSupport", url: "common/courseGuestbook/addCourseGuestbookSupport",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档 method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: { data: {
"userId": this.userInfo.id, "userId": this.userInfo.id,
"guestbookId":val.id , "guestbookId":_obj.val.id ,
}, },
header: { //默认 无 说明：请求头 header: { //默认 无 说明：请求头
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -496,13 +418,13 @@
title:"点赞成功", title:"点赞成功",
icon:'success' icon:'success'
}) })
if(index1 == 'one'){ // 一级 if(_obj.index1 == 'one'){ // 一级
this.sayList[index].support = true this.sayList[_obj.index].support = true
this.sayList[index].supportCount++ this.sayList[_obj.index].supportCount++
} }
if(index1 != undefined && index1 != null && index1 != 'one'){ if(_obj.index1 != undefined && _obj.index1 != null && _obj.index1 != 'one'){
this.sayList[index1].Bchildren[index].support = true this.sayList[_obj.index1].Bchildren[_obj.index].support = true
this.sayList[index1].Bchildren[index].supportCount++ this.sayList[_obj.index1].Bchildren[_obj.index].supportCount++
} }
this.supportFlag = false this.supportFlag = false
}).catch(e => { }).catch(e => {
@@ -519,7 +441,7 @@
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档 method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: { data: {
"userId": this.userInfo.id, "userId": this.userInfo.id,
"guestbookId":val.id , "guestbookId":_obj.val.id ,
}, },
header: { //默认 无 说明：请求头 header: { //默认 无 说明：请求头
'Content-Type': 'application/json' 'Content-Type': 'application/json'
@@ -532,12 +454,12 @@
icon:'success' icon:'success'
}) })
if(index1 == 'one'){ // 一级 if(index1 == 'one'){ // 一级
this.sayList[index].support = false this.sayList[_obj.index].support = false
this.sayList[index].supportCount-- this.sayList[_obj.index].supportCount--
} }
if(index1 != undefined && index1 != null && index1 != 'one'){ if(_obj.index1 != undefined && _obj.index1 != null && _obj.index1 != 'one'){
this.sayList[index1].Bchildren[index].support = false this.sayList[_obj.index1].Bchildren[_obj.index].support = false
this.sayList[index1].Bchildren[index].supportCount-- this.sayList[_obj.index1].Bchildren[_obj.index].supportCount--
} }
this.supportFlag = false this.supportFlag = false
}).catch(e => { }).catch(e => {
@@ -593,7 +515,7 @@
forUserId = this.fatherSay.user.id forUserId = this.fatherSay.user.id
pid = this.fatherSay.id pid = this.fatherSay.id
} }
console.log(this.fatherSay.cIndex,'this.fatherSay.cIndex'); console.log(this.fatherIndex,'this.fatherIndex');
// return false // return false
$http.request({ $http.request({
url: "common/courseGuestbook/addCourseGuestbook", url: "common/courseGuestbook/addCourseGuestbook",
@@ -630,15 +552,18 @@
_obj.imgList = [] _obj.imgList = []
} }
console.log(this.sayList[this.fatherSay.cIndex],'this.fatherSay.cIndex------------') console.log(this.sayList[this.fatherIndex],'this.fatherSay.cIndex------------')
if(this.fatherSay.cIndex != undefined && this.fatherSay.cIndex != null ){ // 二级 if(this.fatherIndex != undefined && this.fatherIndex != null ){ // 二级
this.sayList[this.fatherSay.cIndex].Bchildren.unshift(_obj) this.sayList[this.fatherIndex].children.push(_obj)
this.sayList[this.fatherIndex].Bchildren.unshift(_obj)
}else{ // 一级 }else{ // 一级
this.sayList.unshift(_obj) this.sayList.unshift(_obj)
console.log(_obj,'_obj返回的一级')
} }
this.sayVisible = false this.sayVisible = false
this.fatherSay = {} this.fatherSay = {}
this.fatherIndex = null
// this.getSayList() // this.getSayList()
// 获得的新实例，插入到数组的前面 // 获得的新实例，插入到数组的前面
@@ -795,7 +720,7 @@
// #ifdef APP-PLUS || MP-WEIXIN || H5 // #ifdef APP-PLUS || MP-WEIXIN || H5
uni.createSelectorQuery().select('#editor').context((res) => { uni.createSelectorQuery().select('#editor').context((res) => {
this.editorCtx = res.context this.editorCtx = res.context
// this.editorCtx.clear() this.editorCtx.clear()
this.editorCtx.setContents(res.context) this.editorCtx.setContents(res.context)
}).exec() }).exec()
// #endif // #endif
@@ -812,6 +737,7 @@
sayclose() { sayclose() {
this.sayVisible = false this.sayVisible = false
this.fatherSay = {} this.fatherSay = {}
this.fatherIndex = null
}, },
goToLearn(){ goToLearn(){
uni.navigateTo({ uni.navigateTo({
@@ -1008,26 +934,7 @@
url: `${url}?id=${id}` url: `${url}?id=${id}`
}); });
}, },
getBackGround(src){
return `background: url(${src});background-size: contain;`
},
formatRichText(html) { //控制图片大小
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:40rpx;height:40rpx;display:inline-block;margin:10rpx auto;"');
return newContent;
},
}, },
}; };
</script> </script>
@@ -1226,17 +1133,6 @@
border-radius: 100%; overflow: hidden; border-radius: 100%; overflow: hidden;
} }
// .img {
// width: 80rpx;
// height: 80rpx;
// border-radius: 100%;
// image {
// width: 100%;
// height: 80rpx;
// }
// }
.contentBox { .contentBox {
font-size: 24rpx; font-size: 24rpx;

10
pages/course/learn.vue
View File

@@ -27,9 +27,11 @@
</view> </view>
<view class="imgcontainer">
<u-tabs :class="['tabList']" @click="" :current="curTagId" <u-tabs :class="['tabList']" @click="" :current="curTagId"
:activeStyle="activeStyle" :scrollable="scrollable" :list="tabList" :activeStyle="activeStyle" :scrollable="scrollable" :list="tabList"
itemStyle="padding-left: 15px; background-color:#fff; padding-right: 15px; height: 50px;"></u-tabs> itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"></u-tabs>
</view>
<view class="box"> <view class="box">
<rich-text v-if="chapter.detail.content" class="content" <rich-text v-if="chapter.detail.content" class="content"
:nodes="formatRichText(chapter.detail.content)"></rich-text> :nodes="formatRichText(chapter.detail.content)"></rich-text>
@@ -82,7 +84,7 @@
color: '#258feb', color: '#258feb',
}, },
tabList:[ tabList:[
{id:1, name:"章节介绍"},{id:2, name:"评论"}, {id:1, name:"章节介绍"},{id:3, name:"本节作业"},{id:2, name:"评论"}
], ],
scrollTop: 0, scrollTop: 0,
courseId: null, courseId: null,
@@ -168,7 +170,9 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/style/mixin.scss'; @import '@/style/mixin.scss';
.imgcontainer {
background-color: $imgBg;
}
.scroll-view_H { .scroll-view_H {
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;

114
pages/course/myCourseLearn.vue
View File

@@ -5,10 +5,12 @@
<z-nav-bar :title="pageTitle ? pageTitle : '课程详情'"></z-nav-bar> <z-nav-bar :title="pageTitle ? pageTitle : '课程详情'"></z-nav-bar>
<view class="containerBg1"> <view class="containerBg1">
<!-- <view class="vipSee"> --> <!-- <view class="vipSee"> -->
<view class="vipSee" v-if="userInfo.vip != 0"> <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> <text>VIP畅学权益生效中</text>
</view> </view>
<view class="courseTitle flexbox" v-if="course.id">
<view class="curseImg flexbox imgcontainer" style="align-items: center;"> <view class="curseImg flexbox imgcontainer" style="align-items: center;">
<image v-if="!course.image" src="/static/nobg.jpg" mode="widthFix"></image> <image v-if="!course.image" src="/static/nobg.jpg" mode="widthFix"></image>
<image v-else :src="course.image" mode="widthFix"></image> <image v-else :src="course.image" mode="widthFix"></image>
@@ -22,7 +24,8 @@
</view> </view>
</view> </view>
</view> </view>
<view class="coursePart flexbox" v-if="librayList.length > 1"> </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" <view :class="['item','flexbox',curId == item.id? 'active': '' ]" v-for="(item, index) in librayList"
:key="index" @click="clicklib(item,index)"> :key="index" @click="clicklib(item,index)">
<u-icon v-if="item.isBuy == 0 && curId == item.id" name="lock" color="#258feb" size="28"></u-icon> <u-icon v-if="item.isBuy == 0 && curId == item.id" name="lock" color="#258feb" size="28"></u-icon>
@@ -162,6 +165,7 @@
loadFlag: false, loadFlag: false,
fatherSay:{}, fatherSay:{},
supportFlag:false, supportFlag:false,
fixed: false,
}; };
}, },
//第一次加载 //第一次加载
@@ -179,7 +183,8 @@
}, },
onPageScroll(e) { onPageScroll(e) {
this.scrollTop = e.scrollTop; this.scrollTop = e.scrollTop;
if (this.scrollTop > 500) { if (this.scrollTop > 100) {
// console.log('高度符合');
this.fixed = true this.fixed = true
} else { } else {
this.fixed = false this.fixed = false
@@ -657,58 +662,12 @@
choosePrice(item) { choosePrice(item) {
console.log(item, 'choosePrice') console.log(item, 'choosePrice')
this.curProId = item.productId 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('用户点击取消');
// }
// }
// });
}, },
chooseChapter(item, index) { chooseChapter(item, index) {
// 检查课程是否已经购买了 是否为试听
if (item.isAudition == 1) {
// 未购买仅试听
// this.getPath(item, index)
uni.navigateTo({ uni.navigateTo({
url: `/pages/course/learn?courseId=${this.course.id}&catalogueId url: `/pages/course/learn?courseId=${this.course.id}&catalogueId
=${this.curId}&chapterId=${item.id}` =${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) { getPath(item, index) {
$http.request({ $http.request({
@@ -803,6 +762,7 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/style/mixin.scss'; @import '@/style/mixin.scss';
.endBox{ .endBox{
// @include theme("vipbtnbg"); // @include theme("vipbtnbg");
background-color: #d3f9e8; background-color: #d3f9e8;
@@ -985,8 +945,25 @@
width: calc(100% - 70rpx); width: calc(100% - 70rpx);
} }
} }
.fixed {
position: fixed; top: 70rpx;
z-index: 1; width: 100%; background-color: #fff;
}
.vipBox{
.vipSee{ @include theme("btn_bg"); color: #fff; padding: 20rpx;} .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 { .leve {
@@ -1000,16 +977,16 @@
border-radius: 100%; overflow: hidden; border-radius: 100%; overflow: hidden;
} }
// .img { .img {
// width: 80rpx; width: 80rpx;
// height: 80rpx; height: 80rpx;
// border-radius: 100%; border-radius: 100%;
// image { image {
// width: 100%; width: 100%;
// height: 80rpx; height: 80rpx;
// } }
// } }
.contentBox { .contentBox {
font-size: 24rpx; font-size: 24rpx;
@@ -1359,6 +1336,7 @@
} }
.btnContainer { .btnContainer {
border-top: 1px solid #cac6e1; border-top: 1px solid #cac6e1;
margin-top: 20rpx; margin-top: 20rpx;
@@ -1407,13 +1385,15 @@
} }
.courseTitle { .courseTitle {
// justify-content: space-between; margin-bottom: 20rpx;
// overflow: hidden; background-color: #fff;
// background-image: url(@/static/bg1.jpg); border-radius: 20rpx;
// background-size: cover; @include ptop_bottm(10px);
// background-repeat: no-repeat; @include pleft_right(10px);
// background-image: linear-gradient(180deg, #cfe0ff 0%, #fff 50%); // color: #fff;
padding: 0 20rpx; border: 2px solid #a3bbe0;
@include mshadow(10px, 1)
.title { .title {
// display: block; // display: block;
font-size: 30rpx; font-size: 30rpx;