This commit is contained in:
@fawn-nine
2024-06-18 16:39:28 +08:00
parent dc2f278594
commit 93dd4dfd41
5 changed files with 547 additions and 290 deletions

View File

@@ -16,17 +16,17 @@
<view class="" v-if="userInfo.vip != 0">
<view class="" style="width: calc(100% - 170rpx);">
<text class="title">{{course.title}}</text>
</view>
<view class="learnBtn" >
</view>
<view class="learnBtn">
<view>继续学习</view>
</view>
</view>
<view class="" v-else>
<view class="" >
<view class="">
<text class="title">{{course.title}}</text>
</view>
</view>
</view>
</view>
<view class="containerBg" v-if="course.content && course.content != ''">
<view class="prof">
@@ -45,24 +45,34 @@
</view>
</view>
<view :class="['courseList',fold ? 'fold' : '']" v-if="courseList.length > 0">
<!-- 目录是否已经购买 -->
<!-- 0:普通 1超级 2医学 3国学 -->
<view class="endBox" v-if="librayList[curIndex].isBuy == 1 && userMsg.vip == '0'">
<view class="" >
<view class="flexbox" v-if="librayList[curIndex].startTime == null">
<text >当前目录还未开始学习</text><uni-tag type="warning" text="去学习" @click="goToLearn()"></uni-tag>
<!-- 目录是否已经购买 -->
<!-- 0:普通 1超级 2医学 3国学 -->
<view class="endBox" v-if="librayList[curIndex].isBuy == 1 && userMsg.vip == '0'">
<view class="">
<view class="flexbox" v-if="librayList[curIndex].startTime == null">
<text>当前目录还未开始学习</text><uni-tag type="warning" text="去学习" @click="goToLearn()"></uni-tag>
</view>
<view class="flexbox" v-else>
<text>课程观看有效期截止到{{librayList[curIndex].endTime}} </text><uni-tag type="primary"
@click="goToLearn()" text="继续学习"></uni-tag>
</view>
</view>
<view class="flexbox" v-else>
<text >课程观看有效期截止到{{librayList[curIndex].endTime}} </text><uni-tag type="primary" @click="goToLearn()" text="继续学习"></uni-tag>
</view>
<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" />
</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">
<u-icon name="play-circle-fill" color="#2979ff" size="28"></u-icon>
<text>试听{{index2+1}}</text>
</view>
</view>
</view>
</view>
<view class="item" v-for="(item, index) in courseList" :key="index" @click="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" />
</view>
<view class="showAll zhezhe" v-show="fold">
<view class="flexbox icon" @click="tozhankai()"><u-icon class="icon_item" name="arrow-left-double"
color="#258feb" size="28"></u-icon></view>
@@ -134,12 +144,12 @@
<u-icon name="edit-pen" color="#2979ff" size="28"></u-icon>
<text>发布留言</text>
</view>
</template>
</template>
</uni-section>
<view class="liuyanBox">
<view class="" v-if="sayList.length > 0">
<commentsList :sayList = "sayList" @support="support" @showSayModule="showSayModule"></commentsList>
</view>
<commentsList :sayList="sayList" @support="support" @showSayModule="showSayModule"></commentsList>
</view>
<u-divider v-show="status == 2" text="已加载全部"></u-divider>
<u-divider v-show="status == 3" text="暂无留言数据"></u-divider>
<u-divider v-show="status == 1" text="加载中..."></u-divider>
@@ -231,7 +241,9 @@
<view class="upimgList flexbox">
<view class="item" v-for="(item, index) in uploadPicLIst" :key="index">
<image @click="previewImage(item.url)" :src="item.url" mode="widthFix"></image>
<view class="imgbox" style="overflow: hidden;">
<image @click="previewImage(item.url)" :src="item.url" mode="widthFix"></image>
</view>
<span @click="deletePic(item,index)">×</span>
</view>
</view>
@@ -243,7 +255,7 @@
</emotion>
</view>
<view class="sbmitBox">
<button @click="submitSay" type="default"> </button>
<button @click="submitSay" type="default"> </button>
</view>
</view>
@@ -319,9 +331,9 @@
totalP: 0,
status: 88,
loadFlag: false,
fatherSay:{},
fatherIndex:null,
supportFlag:false,
fatherSay: {},
fatherIndex: null,
supportFlag: false,
};
},
//第一次加载
@@ -334,7 +346,7 @@
this.getUserInfo()
this.courseId = e.id
// this.getCateList(this.courseId)
this.getData(e.id)
this.getData(e.id)
this.getSayList()
},
onPageScroll(e) {
@@ -380,127 +392,129 @@
// }
},
// 评论
showSayModule(data){
console.log(data,'父级收到值了');
showSayModule(data) {
console.log(data, '父级收到值了');
this.fatherSay = data.item
this.fatherIndex = data.index
console.log(this.fatherSay,this.fatherIndex,'父级收到值了');
console.log(this.fatherSay, this.fatherIndex, '父级收到值了');
this.sayVisible = true
},
// 点赞
support(data){
console.log(data,'父级收到值了吗?');
let _obj = {...data} // index,index1,val
if(this.supportFlag){
support(data) {
console.log(data, '父级收到值了吗?');
let _obj = {
...data
} // index,index1,val
if (this.supportFlag) {
uni.showToast({
title:'操作太快了,歇一下吧~',
icon:'non'
title: '操作太快了,歇一下吧~',
icon: 'non'
})
return
return
}
this.supportFlag = true
if(!_obj.val.support){
$http.request({
url: "common/courseGuestbook/addCourseGuestbookSupport",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"userId": this.userInfo.id,
"guestbookId":_obj.val.id ,
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
// console.log('sayList =>', res);
uni.showToast({
title:"点赞成功",
icon:'success'
})
if(_obj.index1 == 'one'){ // 一级
this.sayList[_obj.index].support = true
this.sayList[_obj.index].supportCount++
}
if(_obj.index1 != undefined && _obj.index1 != null && _obj.index1 != 'one'){
this.sayList[_obj.index1].Bchildren[_obj.index].support = true
this.sayList[_obj.index1].Bchildren[_obj.index].supportCount++
}
this.supportFlag = false
}).catch(e => {
uni.showToast({
title:"点赞失败",
icon:'error'
})
console.log(e,'e')
this.supportFlag = false
})
}else{
if (!_obj.val.support) {
$http.request({
url: "common/courseGuestbook/cancelCourseGuestbookSupport",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"userId": this.userInfo.id,
"guestbookId":_obj.val.id ,
url: "common/courseGuestbook/addCourseGuestbookSupport",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"userId": this.userInfo.id,
"guestbookId": _obj.val.id,
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
// console.log('sayList =>', res);
uni.showToast({
title:"取消成功",
icon:'success'
})
if(index1 == 'one'){ // 一级
this.sayList[_obj.index].support = false
this.sayList[_obj.index].supportCount--
}
if(_obj.index1 != undefined && _obj.index1 != null && _obj.index1 != 'one'){
this.sayList[_obj.index1].Bchildren[_obj.index].support = false
this.sayList[_obj.index1].Bchildren[_obj.index].supportCount--
}
this.supportFlag = false
}).catch(e => {
uni.showToast({
title:"取消失败",
icon:'error'
.then(res => {
// console.log('sayList =>', res);
uni.showToast({
title: "点赞成功",
icon: 'success'
})
if (_obj.index1 == 'one') { // 一级
this.sayList[_obj.index].support = true
this.sayList[_obj.index].supportCount++
}
if (_obj.index1 != undefined && _obj.index1 != null && _obj.index1 != 'one') {
this.sayList[_obj.index1].Bchildren[_obj.index].support = true
this.sayList[_obj.index1].Bchildren[_obj.index].supportCount++
}
this.supportFlag = false
}).catch(e => {
uni.showToast({
title: "点赞失败",
icon: 'error'
})
console.log(e, 'e')
this.supportFlag = false
})
} else {
$http.request({
url: "common/courseGuestbook/cancelCourseGuestbookSupport",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
"userId": this.userInfo.id,
"guestbookId": _obj.val.id,
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
})
.then(res => {
// console.log('sayList =>', res);
uni.showToast({
title: "取消成功",
icon: 'success'
})
if (index1 == 'one') { // 一级
this.sayList[_obj.index].support = false
this.sayList[_obj.index].supportCount--
}
if (_obj.index1 != undefined && _obj.index1 != null && _obj.index1 != 'one') {
this.sayList[_obj.index1].Bchildren[_obj.index].support = false
this.sayList[_obj.index1].Bchildren[_obj.index].supportCount--
}
this.supportFlag = false
}).catch(e => {
uni.showToast({
title: "取消失败",
icon: 'error'
})
this.supportFlag = false
})
// console.log('888888888888888');
this.supportFlag = false
})
}
},
// 获取内容
getHtml(){
return new Promise((resolve,reject) => {
this.editorCtx.getContents({
success:(res)=>{
resolve(res)
},
fail:(error)=>{
reject(err)
}
})
getHtml() {
return new Promise((resolve, reject) => {
this.editorCtx.getContents({
success: (res) => {
resolve(res)
},
fail: (error) => {
reject(err)
}
})
},
})
},
// 提交
async submitSay() {
async submitSay() {
// await console.log(this.getHtml())
let data = await this.getHtml()
this.htmlContent = data.html
console.log(this.htmlContent,'this.htmlContent--++++');
if (this.htmlContent == '' && this.uploadPicLIst.length == 0) {
let data = await this.getHtml()
this.htmlContent = data.html
console.log(data, this.htmlContent, 'this.htmlContent--++++');
if ((this.htmlContent == '' || this.htmlContent == '<p><br></p>') && this.uploadPicLIst.length == 0) {
uni.showToast({
icon: 'none',
title: '您未输入内容哦'
})
return
}
return false
let images = ''
if (this.uploadPicLIst.length > 0) {
let list = this.uploadPicLIst.map(item => item.url)
@@ -511,11 +525,11 @@
let forUserId = null
let pid = 0
forUserId = this.userInfo.id
if(this.fatherSay.id != undefined){
if (this.fatherSay.id != undefined) {
forUserId = this.fatherSay.user.id
pid = this.fatherSay.id
}
console.log(this.fatherIndex,'this.fatherIndex');
console.log(this.fatherIndex, 'this.fatherIndex');
// return false
$http.request({
url: "common/courseGuestbook/addCourseGuestbook",
@@ -543,36 +557,38 @@
title: '提交成功'
})
}
let _obj = {...res.courseGuestbook}
let _obj = {
...res.courseGuestbook
}
_obj.children = []
_obj.Bchildren = []
if (_obj.images != '') {
_obj.imgList = _obj.images.split(',')
}else{
_obj.imgList = []
}
console.log(this.sayList[this.fatherIndex],'this.fatherSay.cIndex------------')
if(this.fatherIndex != undefined && this.fatherIndex != null ){ // 二级
this.sayList[this.fatherIndex].children.push(_obj)
this.sayList[this.fatherIndex].Bchildren.unshift(_obj)
}else{ // 一级
this.sayList.unshift(_obj)
console.log(_obj,'_obj返回的一级')
}
_obj.imgList = _obj.images.split(',')
} else {
_obj.imgList = []
}
console.log(this.sayList[this.fatherIndex], 'this.fatherSay.cIndex------------')
if (this.fatherIndex != undefined && this.fatherIndex != null) { // 二级
this.sayList[this.fatherIndex].children.push(_obj)
this.sayList[this.fatherIndex].Bchildren.unshift(_obj)
} else { // 一级
this.sayList.unshift(_obj)
console.log(_obj, '_obj返回的一级')
}
this.sayVisible = false
this.fatherSay = {}
this.fatherIndex = null
// this.getSayList()
// 获得的新实例,插入到数组的前面
}).catch(e => {
uni.showToast({
icon: 'error',
title: '提交失败'
})
console.log('提交报错',e);
console.log('提交报错', e);
})
},
// 查询课程的评论
@@ -604,11 +620,11 @@
this.totalP = res.page.total
myList.map((item) => {
if (item.images != '') {
item.imgList = item.images.split(',')
item.imgList = item.images.split(',')
}
if(item.children.length > 0){
item.Bchildren = item.children.slice(0,5)
}else{
if (item.children.length > 0) {
item.Bchildren = item.children.slice(0, 5)
} else {
item.Bchildren = []
}
})
@@ -679,11 +695,6 @@
console.log('insert image success')
}
})
// if (i.emotioni == '[em_98]') {
// } else {
// }
},
chooseImg() {
this.showImgType = true
@@ -726,24 +737,24 @@
// #endif
},
// end
addSay(fIndex,item) {
this.sayVisible = true
if(item){
addSay(fIndex, item) {
this.sayVisible = true
if (item) {
this.fatherSay = item
this.fatherSay.cIndex = fIndex
}
console.log('fatherSay =>',this.fatherSay);
console.log('fatherSay =>', this.fatherSay);
},
sayclose() {
this.sayVisible = false
this.fatherSay = {}
this.fatherIndex = null
},
goToLearn(){
uni.navigateTo({
url: `/pages/course/myCourseLearn?id=${this.course.id}`
})
},
},
goToLearn() {
uni.navigateTo({
url: `/pages/course/myCourseLearn?id=${this.course.id}`
})
},
getData(id) {
$http.request({
url: "sociology/course/getCourseDetail",
@@ -764,9 +775,9 @@
this.catalogueId = this.librayList[0].id
this.curId = this.librayList[0].id
this.curIndex = 0
if(res.data.shopProductList && res.data.shopProductList.length > 0){
if (res.data.shopProductList && res.data.shopProductList.length > 0) {
this.tjProList = res.data.shopProductList
}else{
} else {
this.tjProList
}
this.getChapterList(this.catalogueId)
@@ -812,62 +823,26 @@
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('用户点击取消');
// }
// }
// });
},
chooseChapter(item, index) {
return false
// 检查课程是否已经购买了 是否为试听
async chooseChapter(item, index) {
console.log('获取试听内容')
if (item.isAudition == 1) {
// 未购买仅试听
// this.getPath(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: `本章节不支持试听,购买课程后即可观看`,
// let data = null
this.courseList[index].tryListen = await this.getPath(item, index)
console.log(this.courseList, '1*********')
// uni.navigateTo({
// url: `/pages/course/learn?courseId=${this.course.id}&catalogueId
// =${this.curId}&chapterId=${item.id}`
// })
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
}
},
getPath(item, index) {
$http.request({
async getPath(item, index) {
var datas
await $http.request({
url: "sociology/course/getCourseCatalogueChapterDetail",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
@@ -875,19 +850,13 @@
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
if (res.code == 0) {
// if (res.page.length > 0) {
// this.learnList = res.page
// } else {
// this.learnList = []
// }
}
// console.log(res,'-------------')
}).then((res) => {
datas = res.data.videos
console.log(res);
});
})
return datas
},
clicklib(item, index) {
if (item.id == this.curId) {
@@ -917,6 +886,9 @@
.then(res => {
if (res.code == 0) {
if (res.chapterList.length > 0) {
res.chapterList.map(item => {
item.tryListen = []
})
this.courseList = res.chapterList
// console.log('status', res)
} else {
@@ -929,28 +901,34 @@
});
},
// 跳转
onPageJump(url,id) {
onPageJump(url, id) {
uni.navigateTo({
url: `${url}?id=${id}`
});
},
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.endBox{
.endBox {
// @include theme("vipbtnbg");
background-color: #d3f9e8;
// color: #fff;
font-size: 26rpx; margin: 20rpx 0;
padding: 10rpx 20rpx;
.flexbox{justify-content: space-between;}
font-size: 26rpx;
margin: 20rpx 0;
padding: 10rpx 20rpx;
.flexbox {
justify-content: space-between;
}
}
::v-deep .contentBox {
.ql-editor {
font-size: 26rpx;
font-style: normal;
min-height: 50rpx !important;
@@ -965,22 +943,44 @@
margin: 0 auto;
}
}
.firstLeve{padding-bottom: 10rpx; border-bottom: 1px solid #f7f8f9;}
.loadMore{text-align: center; margin-bottom: 20rpx;
text{color: $themeColor; font-size: 26rpx;}
.firstLeve {
padding-bottom: 10rpx;
border-bottom: 1px solid #f7f8f9;
}
.boxB{margin-left: 60rpx; margin-top: 20rpx; background-color: #f7f8f9;
padding-top: 20rpx; padding-left:10rpx;
.imgbox{
.loadMore {
text-align: center;
margin-bottom: 20rpx;
text {
color: $themeColor;
font-size: 26rpx;
}
}
.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);}
.contentBox {
width: calc(100% - 60rpx);
}
// .img{ width: 60rpx;
// height: 60rpx;
// image{width:60rpx; height: 60rpx; border-radius: 100%;}
// }
}
.chooseImgType {
margin-top: 20rpx;
@@ -1036,7 +1036,12 @@
margin-right: 20rpx;
width: 100rpx;
height: 100rpx;
position: relative; overflow: hidden;
position: relative;
.imgbox {
height: 100rpx;
overflow: hidden;
}
image {
width: 100%;
@@ -1102,7 +1107,9 @@
margin-right: 20rpx;
}
.imagesList { margin-top: 20rpx;
.imagesList {
margin-top: 20rpx;
.item {
margin-right: 20rpx;
}
@@ -1114,14 +1121,19 @@
.liuyanBox {
padding: 0 20rpx;
margin-top: 20rpx;
.contentBoxfirstLeve{
.contentBoxfirstLeve {
width: calc(100% - 70rpx);
}
}
.vipSee{ @include theme("btn_bg"); color: #fff; padding: 20rpx;}
.vipSee {
@include theme("btn_bg");
color: #fff;
padding: 20rpx;
}
.leve {
margin-bottom: 20rpx;
@@ -1130,7 +1142,8 @@
margin-right: 10rpx;
width: 60rpx;
height: 60rpx;
border-radius: 100%; overflow: hidden;
border-radius: 100%;
overflow: hidden;
}
.contentBox {
@@ -1417,7 +1430,8 @@
.item {
padding: 0 20rpx;
font-size: 26rpx;
height: 96rpx;
// min-height: 96rpx;
overflow: hidden;
line-height: 96rpx;
border-bottom: 1px solid #ececec;
@@ -1523,14 +1537,28 @@
margin-bottom: 20rpx;
}
.courseTitle { justify-content: space-between;
.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;
.learnBtn{margin-bottom: 20rpx;width: 150rpx; ;text-align: center; border: 1px solid $themeColor; color: $themeColor; line-height:60rpx; height: 60rpx; font-size: 28rpx; margin-top: 40rpx;}
.learnBtn {
margin-bottom: 20rpx;
width: 150rpx;
;
text-align: center;
border: 1px solid $themeColor;
color: $themeColor;
line-height: 60rpx;
height: 60rpx;
font-size: 28rpx;
margin-top: 40rpx;
}
.price {
color: #ff582e;
font-size: 32rpx;
@@ -1567,7 +1595,9 @@
}
}
}
.shitingLIst{ background-color: #fff; padding:20rpx; margin-bottom: 20rpx;
.item{align-items: center; border: none !important; line-height: 30rpx !important; margin-right: 20rpx;}
}
.flexbox {
display: flex;
}