From b930cfc0845a1dbdf3e7ce39f67e6e8c42f488d5 Mon Sep 17 00:00:00 2001
From: "@fawn-nine" <1271023382@qq.com>
Date: Tue, 18 Jun 2024 09:02:24 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E5=AD=A6=E4=B9=A0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                     |   10 +-
 pages/course/courseDetail.vue  |   73 +-
 pages/course/myCourseLearn.vue | 1448 ++++++++++++++++++++++++++++++++
 3 files changed, 1506 insertions(+), 25 deletions(-)
 create mode 100644 pages/course/myCourseLearn.vue

diff --git a/pages.json b/pages.json
index c556cdb..f95c581 100644
--- a/pages.json
+++ b/pages.json
@@ -306,7 +306,15 @@
 			"path" : "pages/course/learn",
 			"style" : 
 			{
-				"navigationBarTitleText" : "课程学习",
+				"navigationBarTitleText" : "视频/音频学习播放",
+				"enablePullDownRefresh": true
+			}
+		},
+		{
+			"path" : "pages/course/myCourseLearn",
+			"style" : 
+			{
+				"navigationBarTitleText" : "课程学习页面",
 				"enablePullDownRefresh": true
 			}
 		}		
diff --git a/pages/course/courseDetail.vue b/pages/course/courseDetail.vue
index 4f2b1ef..7a4c912 100644
--- a/pages/course/courseDetail.vue
+++ b/pages/course/courseDetail.vue
@@ -8,8 +8,25 @@
 			<image v-else :src="course.image" mode="widthFix"></image>
 		</view>
 		<view class="containerBg1">
-			<view class="courseTitle" v-if="course.id">
-				<text class="title">{{course.title}}</text>
+			<!-- <view class="vipSee"> -->
+			<view class="vipSee" v-if="userInfo.vip != 0">
+				<text>VIP畅学权益生效中</text>
+			</view>
+			<view class="courseTitle flexbox" v-if="course.id">
+				<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>
+					</view>
+				</view>
+				<view class="" v-else>
+					<view class="" >
+						<text class="title">{{course.title}}</text>
+					</view>	
+				</view>
+				
 			</view>
 			<view class="containerBg" v-if="course.content && course.content != ''">
 				<view class="prof">
@@ -22,8 +39,8 @@
 			<view class="coursePart flexbox" 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>
-					<u-icon v-if="item.isBuy == 0 && curId != item.id" name="lock" color="#fff" size="28"></u-icon>
+					<!-- <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="#fff" size="28"></u-icon> -->
 					<view class="">{{item.title}}</view>
 				</view>
 			</view>
@@ -31,7 +48,15 @@
 			<!-- 目录是否已经购买 -->
 			<!-- 0:普通 1超级 2医学 3国学 -->
 			<view class="endBox" v-if="librayList[curIndex].isBuy == 1 && userMsg.vip == '0'">
-				您的课程观看有效期截止到：2025-06-14  00:00
+				<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>
 				<view class="item" v-for="(item, index) in courseList" :key="index" @click="chooseChapter(item, index)">
 					<text>{{item.title}}</text>
@@ -76,7 +101,7 @@
 								查看更多 >>
 							</template> -->
 			<!-- </uni-section> -->
-			<view class="linkPro">
+			<view class="linkPro" v-if="tjProList.length > 0">
 				<uni-section class="mb-10 graybg" title="相关书籍" type="line">
 					<!-- <template v-slot:right>
 						<span class="more" @click="pageJupm()">查看更多 >></span>
@@ -729,20 +754,11 @@
 						console.log('insert image success')
 					}
 				})
-				if (i.emotioni == '[em_98]') {
-					//匹配最后一个表情符号并删除11。
-					// this.formData.content = this.formData.content.replace(/(\[[^\]]+\]|[\s\S])$/, '');
-					// if (this.emoji.length > 0) {
-					// 	this.emoji = this.emoji.slice(0, -1)
-					// }
-				} else {
-
-					// this.emoji.push({
-					// 	'tag': i.emotion,
-					// 	'name': i.emotioni
-					// })					
-					// this.formData.content += i.emotioni;
-				}
+				// if (i.emotioni == '[em_98]') {
+					
+				// } else {
+					
+				// }
 			},
 			chooseImg() {
 				this.showImgType = true
@@ -784,7 +800,7 @@
 				}).exec()
 				// #endif
 			},
-			// end
+			// end			
 			addSay(fIndex,item) {				
 				this.sayVisible = true				 
 				if(item){
@@ -796,7 +812,12 @@
 			sayclose() {
 				this.sayVisible = false
 				this.fatherSay = {}
-			},			
+			},	
+					goToLearn(){
+						uni.navigateTo({
+							url: `/pages/course/myCourseLearn?id=${this.course.id}`
+						})
+					},
 			getData(id) {
 				$http.request({
 						url: "sociology/course/getCourseDetail",
@@ -1018,6 +1039,7 @@
 		// color: #fff;
 	font-size: 26rpx; margin: 20rpx 0;
 	padding: 10rpx 20rpx;
+	.flexbox{justify-content: space-between;}
 	}
 	::v-deep .contentBox {
 		.ql-editor {
@@ -1190,6 +1212,9 @@
 		}
 	}
 
+.vipSee{ @include theme("btn_bg"); color: #fff; padding: 20rpx;}
+	
+	
 	.leve {
 		margin-bottom: 20rpx;
 
@@ -1602,14 +1627,14 @@
 		margin-bottom: 20rpx;
 	}
 
-	.courseTitle {
+	.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;}
 		.price {
 			color: #ff582e;
 			font-size: 32rpx;
diff --git a/pages/course/myCourseLearn.vue b/pages/course/myCourseLearn.vue
new file mode 100644
index 0000000..2868379
--- /dev/null
+++ b/pages/course/myCourseLearn.vue
@@ -0,0 +1,1448 @@
+<template>
+	<view>
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<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="courseTitle flexbox" v-if="course.id">
+				<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>
+				</view>
+				<view class="" style="width: calc(100% - 180rpx);">
+					<view class="">
+						<text class="title">{{course.title}}</text>
+						<br/>
+						<text style="color: #55aaff; padding-left: 10rpx; font-size: 26rpx;" @click="onPageJump('/pages/course/courseDetail',course.id)">课程介绍 >></text>
+						<!-- <uni-tag type="primary" text=""></uni-tag> -->
+					</view>				
+				</view>
+			</view>			
+			<view class="coursePart flexbox" 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>
+					<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="['courseList',fold ? 'fold' : '', librayList[curIndex].isBuy == 1 ? '' : 'lock']" 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="去学习"></uni-tag>
+					</view>
+					<view class="flexbox" v-else>
+						<text >课程观看有效期截止到：2025-06-14  00:00 </text><uni-tag type="primary" text="继续学习"></uni-tag>
+					</view>					
+				</view>
+				
+			</view>
+				<view class="item" v-for="(item, index) in courseList" :key="index" @click="chooseChapter(item, index)">
+					<text>{{item.title}}</text>
+					
+				</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>
+					<text>查看全部</text>
+				</view>
+				<view class="showFew zhezhe" v-show="!fold">
+					<view class="flexbox icon" @click="toZhedie()"><u-icon class="icon_item1" name="arrow-left-double"
+							color="#258feb" size="28"></u-icon></view>
+					<text>收 起</text>
+				</view> -->								
+				<view class="buyBox flexbox" v-if="librayList[curIndex].isBuy == 0">
+					<!-- 普通未购买 -->
+					<view class="item">
+						<text>您未购买此目录课程或已到期，购买后或开通 <text style="font-weight: bold;">超级VIP</text> 即可学习本目录课程</text> <view class="tag-view">
+							<uni-tag text="购买课程" type="warning" /> <uni-tag style="margin-left: 20rpx;" text="开通VIP" type="success" />
+						</view> 
+					</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 completionBg" title="学习进度" type="line" v-if="librayList.length > 0 && librayList[curIndex].completion > 0">
+				<view class="progress-box">
+				<progress :percent="librayList[curIndex].completion" show-info stroke-width="3" />
+				</view>				
+			</uni-section>
+			<view>
+				<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
+					:iconStyle="iconStyle"></u-back-top>
+			</view>
+			<!-- </view> -->
+			<!-- 评论弹出 -->			
+			<public-module></public-module>
+			<z-navigation></z-navigation>
+			<!-- <music-play :playData="playData"></music-play> -->
+		</view>
+	</view>
+</template>
+
+<script>
+	// import musicPlay from '@/components/music.vue'
+	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
+	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
+	import $http from '@/config/requestConfig.js';
+	var clear;
+	import {
+		mapState
+	} from 'vuex';
+	export default {
+		data() {
+			return {
+				playData: {},
+				catalogueId: null,
+				// fixed: false,
+				bgiStyle: {
+					background: '#fff'
+				},
+				iconStyle: {
+					fontSize: '40rpx',
+					fontWeight: 'bold',
+					color: '#258feb',
+				},
+				tjProList: [],
+				userMsg: {}, // 用户信息
+				scrollTop: 0,
+				activeStyle: {
+					color: '#333',
+					fontWeight: 'bold',
+					transform: 'scale(1.2)',
+					// backgroundColor: '#258feb'
+
+				},
+				pricespop: false,
+				subList: [],
+				scrollable: false,
+				pageTitle: null,
+				courseList: [],
+				course: {},
+				librayList: [], // 目录列表
+				curId: null,
+				curIndex: 0,
+				proPriceList: [],
+				fold: false,
+				curProId: null,
+				sayVisible: false,
+
+				// 评论
+				readOnly: false,
+				formats: {},
+				htmlContent: '', // 内容
+				showEmoji: false,
+				showImgType: false,
+				showEdit: false,
+				showPicsList: false,
+				windowWidth: 0,
+				uploadPicLIst: [], // 上传的图片列表
+				courseId: null,
+				sayList: [],
+				pPage: 1,
+				totalP: 0,
+				status: 88,
+				loadFlag: false,
+				fatherSay:{},
+				supportFlag:false,
+			};
+		},
+		//第一次加载
+		onLoad(e) {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+			this.windowWidth = uni.getSystemInfoSync().windowWidth;
+			// this.pageTitle = e.title
+			console.log(e, '传入分类id')
+			this.getUserInfo()
+			this.courseId = e.id
+			// this.getCateList(this.courseId)
+			this.getData(e.id)			
+			// this.getSayList()
+		},
+		onPageScroll(e) {
+			this.scrollTop = e.scrollTop;
+			if (this.scrollTop > 500) {
+				this.fixed = true
+			} else {
+				this.fixed = false
+			}
+		},
+		computed: {
+			...mapState(['userInfo'])
+		},
+		//页面显示
+		onShow() {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+
+		},
+		onReachBottom() {
+			console.log('触底');
+			// if (this.status != 2) {
+			// 	this.pPage++
+			// 	this.getSayList()
+			// }
+		},
+		components: {
+			// musicPlay
+			emotion,
+
+		},
+		//方法
+		methods: {
+			getUserInfo() {
+				// 用户详情
+				// if (this.userInfo.id != undefined) {
+				this.$http
+					.post('book/user/info/' + this.userInfo.id)
+					.then(res => {
+						this.userMsg = res.user
+					});
+				// }
+			},
+			// 评论
+			// 加载更多子评论
+			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);				
+				if(this.supportFlag){
+					uni.showToast({
+						title:'操作太快了，歇一下吧~',
+						icon:'non'
+					})
+					return 
+				}
+				this.supportFlag = true
+				if(!val.support){
+				$http.request({
+					url: "common/courseGuestbook/addCourseGuestbookSupport",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data: {
+						  "userId": this.userInfo.id,
+						   "guestbookId":val.id ,
+						},
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				})				
+				.then(res => {
+					// console.log('sayList =>', res);	
+					uni.showToast({
+						title:"点赞成功",
+						icon:'success'
+					})
+					if(index1 == 'one'){ // 一级
+						this.sayList[index].support = true
+						this.sayList[index].supportCount++
+					}
+					if(index1 != undefined && index1 != null && index1 != 'one'){
+						this.sayList[index1].Bchildren[index].support = true
+						this.sayList[index1].Bchildren[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":val.id ,
+							},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})				
+					.then(res => {
+						// console.log('sayList =>', res);	
+						uni.showToast({
+							title:"取消成功",
+							icon:'success'
+						})
+						if(index1 == 'one'){ // 一级
+							this.sayList[index].support = false
+							this.sayList[index].supportCount--
+						}
+						if(index1 != undefined && index1 != null && index1 != 'one'){
+							this.sayList[index1].Bchildren[index].support = false
+							this.sayList[index1].Bchildren[index].supportCount--
+						}
+						this.supportFlag = false
+					}).catch(e => {
+						uni.showToast({
+							title:"取消失败",
+							icon:'error'
+						})
+						 // console.log('888888888888888');
+						this.supportFlag = false
+					})
+				}
+				
+			},
+			// 获取内容
+			getHtml(){
+					return new Promise((resolve,reject) => {
+						this.editorCtx.getContents({
+							success:(res)=>{
+								resolve(res)
+							},
+							fail:(error)=>{
+								reject(err)
+							}
+						})
+					})
+					
+				},			
+			// 提交
+			 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) {
+					uni.showToast({
+						icon: 'none',
+						title: '您未输入内容哦'
+					})
+					return
+				}
+				let images = ''
+				if (this.uploadPicLIst.length > 0) {
+					let list = this.uploadPicLIst.map(item => item.url)
+
+					images = list.join()
+				}
+				console.log(images, 'images')
+				let forUserId = null
+				let pid = 0
+				forUserId = this.userInfo.id
+				if(this.fatherSay.id != undefined){
+					forUserId = this.fatherSay.user.id
+					pid = this.fatherSay.id
+				}
+				console.log(this.fatherSay.cIndex,'this.fatherSay.cIndex');
+				// return false
+				$http.request({
+					url: "common/courseGuestbook/addCourseGuestbook",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data: {
+						"type": 0, //类型0课程1章节
+						"courseId": this.courseId,
+						"chapterId": "",
+						"pid": pid,
+						"userId": this.userInfo.id,
+						"forUserId": forUserId,
+						"content": this.htmlContent, //内容
+						"images": images //图片的合集，逗号分隔
+					},
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					if (res.code == 0) {
+						this.htmlContent = ''
+						this.uploadPicLIst = []
+						this.editorCtx.clear()
+						uni.showToast({
+							icon: 'success',
+							title: '提交成功'
+						})
+					}
+					let _obj = {...res.courseGuestbook}
+					_obj.children = []
+					_obj.Bchildren = []
+					if (_obj.images != '') {
+											_obj.imgList = _obj.images.split(',')									
+										}else{
+											_obj.imgList = []
+										}
+										
+										console.log(this.sayList[this.fatherSay.cIndex],'this.fatherSay.cIndex------------')
+										if(this.fatherSay.cIndex != undefined && this.fatherSay.cIndex != null ){ // 二级
+											this.sayList[this.fatherSay.cIndex].Bchildren.unshift(_obj)
+											
+										}else{ // 一级
+											this.sayList.unshift(_obj)
+										}					
+					this.sayVisible = false
+					this.fatherSay = {}
+					// this.getSayList()
+					// 获得的新实例，插入到数组的前面
+					
+				}).catch(e => {
+					uni.showToast({
+						icon: 'error',
+						title: '提交失败'
+					})
+					console.log('提交报错',e);
+				})
+			},
+			// 查询课程的评论
+			getSayList() {
+				if (this.loadFlag) {
+					console.log('有未完成的进程');
+					return
+				}
+				this.loadFlag = true
+				this.status = 1
+				$http.request({
+					url: "common/courseGuestbook/getCourseGuestbookList",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data: {
+						"limit": 15,
+						"page": this.pPage,
+						"courseId": this.courseId,
+						"chapterId": "",
+						"userId": this.userInfo.id //登陆人id，用与判断评论是否被登陆人点赞
+					},
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					console.log('sayList =>', res);
+					if (res.code == 0) {
+						if (res.page.records.length > 0) {
+							let myList = res.page.records
+							this.totalP = res.page.total
+							myList.map((item) => {
+								if (item.images != '') {
+									item.imgList = item.images.split(',')									
+								}
+								if(item.children.length > 0){
+									item.Bchildren = item.children.slice(0,5)
+								}else{
+									item.Bchildren = []
+								}
+							})
+							this.sayList = this.sayList.concat(myList)
+							console.log('this.sayList处理后 =》 ', this.sayList)
+							if (res.page.pages > this.pPage) {
+								this.status = 0
+							} else {
+								this.status = 2
+							}
+						} else {
+							this.status = 3 // 暂无数据
+						}
+					}
+					this.loadFlag = false
+				}).catch(e => {
+					console.log('获取留言失败');
+					this.loadFlag = false
+				})
+			},
+			previewImage(url) {
+				console.log(url)
+				uni.previewImage({
+					urls: [url],
+					longPressActions: {
+						itemList: ['很抱歉，暂不支持保存图片到本地'],
+						success: function(res) {
+							// console.log(res,'+++++')
+						}
+					}
+				});
+			},
+			deletePic(val, i) {
+				console.log('删除图片');
+				this.uploadPicLIst.splice(i, 1)
+			},
+			addPic(e) {
+				console.log('添加图片');
+				let that = this
+				for (var i = 0; i < e.file.length; i++) {
+					//console.log(i,e.file[i].url)
+					uni.uploadFile({
+						url: this.$baseUrl + 'oss/fileoss',
+						filePath: e.file[i].url,
+						//files:e.file,
+						name: 'file',
+						formData: {},
+						success: (res) => {
+							that.uploadPicLIst.push({
+								url: JSON.parse(res.data).url
+							})
+							// this.showPicsList = true
+							console.log(that.uploadPicLIst, 'that.uploadPicLIst')
+						},
+						fail: (error) => {
+							console.log('上传失败', error)
+						}
+					});
+				}
+			},
+			// 获得输入的表情数组
+			handleEmj(i) {
+				console.log(i, 'i---------');
+				this.editorCtx.insertImage({
+					src: i.emotion,
+					alt: '图像',
+					success: function() {
+						console.log('insert image success')
+					}
+				})
+				if (i.emotioni == '[em_98]') {
+					//匹配最后一个表情符号并删除11。
+					// this.formData.content = this.formData.content.replace(/(\[[^\]]+\]|[\s\S])$/, '');
+					// if (this.emoji.length > 0) {
+					// 	this.emoji = this.emoji.slice(0, -1)
+					// }
+				} else {
+
+					// this.emoji.push({
+					// 	'tag': i.emotion,
+					// 	'name': i.emotioni
+					// })					
+					// this.formData.content += i.emotioni;
+				}
+			},
+			chooseImg() {
+				this.showImgType = true
+				this.showEdit = true
+				uni.hideKeyboard() // 隐藏键盘
+			},
+			editEditor() {
+				this.showImgType = false
+				this.showEdit = false
+				this.showEmoji = false
+				// 显示键盘
+			},
+			closeEmoji() {
+				this.showEmoji = false
+				this.showEdit = false
+			},
+			addEmoji() {
+				this.showEmoji = true
+				this.showImgType = false
+				// this.showEdit = true
+			},
+			onStatusChange(e) {
+				const formats = e.detail
+				this.formats = formats
+			},
+			readOnlyChange() {
+				this.readOnly = !this.readOnly
+			},
+			onEditorReady() {
+				// // #ifdef MP-BAIDU
+				// this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
+				// // #endif
+
+				// #ifdef APP-PLUS || MP-WEIXIN || H5
+				uni.createSelectorQuery().select('#editor').context((res) => {
+					this.editorCtx = res.context
+					// this.editorCtx.clear()
+					this.editorCtx.setContents(res.context)
+				}).exec()
+				// #endif
+			},
+			// end
+			addSay(fIndex,item) {				
+				this.sayVisible = true				 
+				if(item){
+					this.fatherSay = item
+					this.fatherSay.cIndex = fIndex
+				}
+				console.log('fatherSay =>',this.fatherSay);
+			},
+			sayclose() {
+				this.sayVisible = false
+				this.fatherSay = {}
+			},			
+			getData(id) {
+				$http.request({
+						url: "sociology/course/getCourseDetail",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {
+							"id": id
+						},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})
+					.then(res => {
+						if (res.code == 0) {
+							this.course = res.data.course
+							this.pageTitle = this.course.title
+							this.librayList = res.data.catalogues
+							if (this.librayList.length > 0) {
+								this.catalogueId = this.librayList[0].id
+								this.curId = this.librayList[0].id
+								this.curIndex = 0
+								if(res.data.shopProductList && res.data.shopProductList.length > 0){
+									this.tjProList = res.data.shopProductList
+								}else{
+									this.tjProList
+								}
+								this.getChapterList(this.catalogueId)
+							}
+						}
+
+					}).catch(e => {
+						console.log(e, '获取目录数据报错')
+					});
+
+			},
+			goBuy() {
+				$http.request({
+						url: "sociology/product/getProductListForCourse",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {
+							"id": this.curId
+						},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})
+					.then(res => {
+						if (res.code == 0) {
+							if (res.productList.length > 0) {
+								this.proPriceList = res.productList
+								this.curProId = this.proPriceList[0].productId
+							} else {
+								this.proPriceList = []
+							}
+						}
+
+					}).catch(e => {
+						console.log(e, '获取商品列表报错')
+					});
+
+				this.pricespop = true
+			},
+			closePup() {
+				this.pricespop = false
+				this.proPriceList = []
+			},
+			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) {				
+				// 检查课程是否已经购买了 是否为试听
+				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: `本章节不支持试听，购买课程后即可观看`,
+
+						success: function(res) {
+							if (res.confirm) {
+								console.log('用户点击确定');
+							} else if (res.cancel) {
+								console.log('用户点击取消');
+							}
+						}
+					})
+				}
+			},
+			getPath(item, index) {
+				$http.request({
+					url: "sociology/course/getCourseCatalogueChapterDetail",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data: {
+						"id": item.id
+					},
+					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,'-------------')
+
+				});
+			},
+			clicklib(item, index) {				
+				if (item.id == this.curId) {
+					return
+				}
+				this.curIndex = index
+				this.curId = item.id
+				this.getChapterList(item.id)
+			},
+			toZhedie() {
+				this.fold = true
+			},
+			tozhankai() {
+				this.fold = false
+			},
+			getChapterList(id) {
+				$http.request({
+						url: "sociology/course/getCourseCatalogueChapterList",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {
+							"id": id
+						},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})
+					.then(res => {
+						if (res.code == 0) {
+							if (res.chapterList.length > 0) {
+								this.courseList = res.chapterList
+								// console.log('status', res)
+							} else {
+								this.courseList = []
+							}
+						}
+
+					}).catch(e => {
+						console.log(e, '获取章节列表数据报错')
+					});
+			},
+			// 跳转
+			onPageJump(url,id) {
+				uni.navigateTo({
+					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>
+<style lang="scss" scoped>
+	@import '@/style/mixin.scss';
+	.endBox{ 
+		// @include theme("vipbtnbg");
+		background-color: #d3f9e8;
+		// color: #fff;
+	font-size: 26rpx; margin: 20rpx 0;
+	padding: 10rpx 20rpx;
+	.flexbox{justify-content: space-between;}
+	}
+	::v-deep .progress-box{
+		.uni-progress-bar{height: 10rpx !important; background-color: #fff !important;}
+	}
+	::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;
+		}
+	}
+	.firstLeve{padding-bottom: 10rpx; border-bottom: 1px solid #f7f8f9;}
+	.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);}
+		// .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;
+			}
+		}
+	}
+
+	// 
+
+	.liuyanBox {
+		padding: 0 20rpx;
+		margin-top: 20rpx;
+		.contentBoxfirstLeve{
+			width: calc(100% - 70rpx);
+		}
+	}
+
+.vipSee{ @include theme("btn_bg"); color: #fff; padding: 20rpx;}
+	
+	
+	.leve {
+		margin-bottom: 20rpx;
+
+		.imgbox {
+			border: 1px solid #eee;
+			margin-right: 10rpx;
+			width: 60rpx;
+			height: 60rpx;
+			border-radius: 100%; overflow: hidden;
+		}
+
+		// .img {
+		// 	width: 80rpx;
+		// 	height: 80rpx;
+		// 	border-radius: 100%;
+
+		// 	image {
+		// 		width: 100%;
+		// 		height: 80rpx;
+		// 	}
+		// }
+
+		.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;
+				}
+			}
+		}
+	}
+	.progress-box{padding: 20rpx; padding-top: 10rpx;}
+	.showFew {
+		.icon_item1 {
+			-moz-transform: rotate(90deg);
+			-webkit-transform: rotate(90deg);
+		}
+	}
+
+	.showAll {
+		.icon_item {
+			-moz-transform: rotate(-90deg);
+			-webkit-transform: rotate(-90deg);
+		}
+	}
+
+	.fold {
+		// 折叠状态
+		height: 800rpx;
+		overflow: hidden;
+	}
+
+	.linkPro {
+		.more {
+			font-size: 24rpx;
+			color: #666;
+		}
+	}
+
+	.zhezhe {
+		text-align: center;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 20rpx;
+		z-index: 1;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		background-position: left bottom;
+		background-image: url(@/static/zhedieBg.png);
+		background-repeat: repeat-x;
+
+		.icon {
+			justify-content: center;
+		}
+
+		text {
+			color: $themeColor ;
+			font-size: 26rpx;
+		}
+	}
+	.completionBg{background-image: url(@/static/bg1.jpg);}
+	.graybg {
+		background-color: $containerColor;
+	}
+
+	.scroll-view_H {
+		background-color: #fff;
+		white-space: nowrap;
+		padding: 10rpx;
+		margin-top: 12rpx;
+
+		.item {
+			padding: 10rpx;
+			overflow: hidden;
+			display: inline-block;
+			padding-bottom: 0;
+			width: 210rpx !important;
+			margin-right: 8rpx;
+			border-radius: 10rpx;
+
+
+			image {
+				display: block;
+				width: 100%;
+				height: 260rpx;
+			}
+
+
+			.bookName {
+				display: block;
+				margin-top: 6rpx;
+				color: #666;
+				font-size: 24rpx;
+				white-space: nowrap;
+				overflow-x: hidden;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+	}
+
+	.proListPrice {
+		text-align: center;
+
+		.title {
+			font-size: 28rpx;
+			margin: 10px 0;
+		}
+
+		.list {
+			padding: 0 10px;
+			padding-bottom: 20rpx;
+
+			.item {
+				font-size: 26rpx;
+				color: #333;
+				margin-bottom: 10rpx;
+				line-height: 80rpx;
+				border-radius: 50rpx;
+				border: 1px solid #eee;
+			}
+
+			.item.active {
+				color: $themeColor;
+				border: 1px solid $themeColor;
+			}
+
+			.item:last-child {
+				// border-bottom: none
+			}
+		}
+
+		.tbn {
+			justify-content: center;
+		}
+
+		.buybtn {
+			background-color: #00d8df;
+			margin: 0;
+			margin-right: 20rpx;
+
+			text {
+				color: #fff;
+			}
+		}
+
+		.saveBtnss {
+			align-items: center;
+			justify-content: center;
+			height: 80rpx;
+
+			// width: 46%;
+			overflow: hidden;
+			border-radius: 50rpx;
+
+			text {
+				padding-left: 10rpx;
+				font-size: 28rpx;
+
+			}
+		}
+
+		.gouwuche {
+			border: 1px solid #666;
+			padding-right: 20rpx;
+
+			text {
+				// color: #fff;
+			}
+		}
+	}
+
+	.vipBtn {
+		@include theme("vipbtnbg");
+		border-radius: 100rpx;
+		justify-content: center;
+		width: 150px;
+		color: #fff;
+		margin: 10rpx auto;
+	}
+
+	.buyBox {
+		position:absolute;
+		z-index: 2;
+		height: 800rpx;
+		bottom: 100rpx;
+		left: 0;
+		top: 0;
+		justify-content: center; align-items: center;
+		padding: 20rpx 10rpx;
+		width: 100%;
+		font-size: 28rpx;		
+		background: rgba(255, 255, 255, 0.9);
+
+		.item {
+			width: 100%;
+			text-align: center;
+			line-height:60rpx !important; border: none !important;
+						text{
+							white-space: wrap !important;
+						}
+		}
+
+		.tbn {
+			align-items: center;
+		}
+
+		.buybtn {
+			color: #fff;
+		}
+	}
+
+	.supermarketBox {
+		@include pleft_right(5px) .borderbb {
+			background-image: linear-gradient(180deg, #468aff 0%, #46c0ff 100%);
+			@include pleft_right(10px);
+			border-radius: 20rpx;
+			@include ptop_bottm(10px);
+			@include mshadow(10px, 1);
+
+		}
+
+		.name {
+			font-size: 24rpx;
+			@include toe();
+			margin-top: 10rpx;
+		}
+
+		.price {
+			// text-align: center;
+			font-size: 26rpx;
+			font-weight: bold;
+			color: $themeColor;
+			padding-top: 10rpx;
+		}
+
+		.tips {
+			margin-top: 10px;
+			background-color: #e9f0ff;
+			padding: 5px;
+			border-radius: 5px;
+			font-size: 24rpx;
+
+
+			text {
+				font-weight: bold;
+				color: $themeColor;
+			}
+		}
+
+	}
+
+	.curseImg {width:150rpx;
+			height: 100rpx; margin-right: 20rpx;
+		image {
+			width:150rpx;
+			height: 200rpx;
+		}
+	}
+
+	.courseList {
+		position: relative;
+		overflow: hidden;
+		// background-color: #fff;
+		// padding: 0 20rpx;
+		background-image: linear-gradient(0deg, #e9f0ff 0%, #fbfbff 100%);
+
+		.item {
+			padding: 0 20rpx;
+			font-size: 26rpx;
+			height: 96rpx;
+			line-height: 96rpx;
+			border-bottom: 1px solid #ececec;
+
+			text {
+				@include toe()
+			}
+		}
+	}
+	.courseList.lock{height: 800rpx; overflow: hidden; position: relative;}
+
+	.containerBg1 {
+		// border-top: 1px solid #fff;
+		margin-top: 20rpx;
+		// position: relative;
+		z-index: 1;
+		// border-radius: 30rpx 30rpx 0 0;
+		// background-color: #fff;
+		overflow: hidden;
+	}
+
+	.containerBg {
+		background-color: $containerColor;
+		overflow: hidden;
+		padding: 0 20rpx
+	}
+
+	.buyBox {}
+
+	.coursePart {
+		margin-top: 20rpx;
+		margin-top: 20rpx;
+		padding: 0 20rpx;
+		padding-top: 20rpx;
+		// background-image: url(@/static/bg1.jpg);		
+		// background-image: linear-gradient(180deg, #cfe0ff 0%, #fff 50%);
+		background-color: $themeColor;
+
+		.item {
+			justify-content: center;
+			align-items: center;
+			color: #fff;
+			width: 100%;
+			text-align: center;
+			padding: 20rpx 0;
+			font-size: 28rpx;
+			view {}
+		}
+
+		.item.active {
+			background-color: #fbfbff;
+			color: $themeColor;
+			border-radius: 20rpx 20rpx 0 0;
+		}
+
+	}
+
+	.btnContainer {
+		border-top: 1px solid #cac6e1;
+		margin-top: 20rpx;
+		padding-top: 20rpx;
+		justify-content: space-between;
+
+
+
+		margin-bottom: 20rpx;
+	}
+
+	.buybtn {
+		border-radius: 100rpx;
+		justify-content: center;
+		width: 150px;
+		margin: 10rpx auto;
+		@include theme("btn_bg")
+	}
+
+	.priceBox {
+		background: rgba(255, 255, 255, 0.8);
+		border-radius: 20rpx;
+		padding: 10px;
+		margin-bottom: 10px;
+		justify-content: space-between;
+		// border-top: 1rpx solid #e7e7e7;
+		// border-bottom: 1rpx solid #e7e7e7;
+		padding: 10px 0;
+
+		.price {
+			width: 100%;
+			text-align: center;
+		}
+
+		.price:first-child {
+			border-right: 1px solid #cac6e1;
+		}
+	}
+
+	.prof {
+		font-size: 26rpx;
+		line-height: 50rpx;
+		padding: 10rpx 0;
+		color: #333;
+		margin-bottom: 20rpx;
+	}
+
+	.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;
+		.title {
+			// display: block;
+			font-size: 30rpx;
+			margin-top: 40rpx;
+			margin-bottom: 20rpx;
+		}
+
+		.saveBtn {
+			align-items: center;
+			justify-content: center;
+			height: 80rpx;
+			background-color: #00d8df;
+			// width: 46%;
+			overflow: hidden;
+			border-radius: 30rpx;
+
+			text {
+				padding-left: 10rpx;
+				font-size: 28rpx;
+				color: #fff;
+			}
+		}
+	}
+
+	.flexbox {
+		display: flex;
+	}
+
+	.imgcontainer {
+		background-color: $imgBg;
+	}
+</style>
\ No newline at end of file