Merge remote-tracking branch 'remotes/origin/xulu'

pages/talkBook/talkBookDetail.vue

@@ -11,13 +11,16 @@
 				<view class="audiobox">
 					<view class="audioinfo">
 						<image class="audioimg" :src="bookInfo.images" mode="aspectFit"></image>
-						<image class="audioimgstart" v-if="!this.paused" mode="aspectFit" src="../../static/audiostart.png" @click="start"></image>
+						<image class="audioimgstart" v-if="!this.paused" mode="aspectFit"
-						<image class="audioimgstart" v-else mode="aspectFit" src="../../static/audiostop.png" @click="start"></image>
+							src="../../static/audiostart.png" @click="start"></image>
+						<image class="audioimgstart" v-else mode="aspectFit" src="../../static/audiostop.png"
+							@click="start"></image>
 						<view>
 							<view class="audiotitle">{{talkBookDetail.title}}</view>
 							<view class="audioauthor">{{bookInfo.author.authorName}}</view>
 							<view class="audioauthor">{{currentTime+'/'+duration}}秒</view>
-							<slider class="audioslider" block-size="12" v-model="currentTime" :max="duration" @change="changeTime"></slider>
+							<slider class="audioslider" block-size="12" v-model="currentTime" :max="duration"
+								@change="changeTime"></slider>
 							<!-- <view @click="start">点击播放/暂停</view> -->
 						</view>
 					</view>
@@ -25,8 +28,21 @@
 			</view>
 			<view class="content" v-if="talkBookDetail.content != ''" v-html="talkBookDetail.content"></view>
 			<view class="content" v-else></view>
-			<view class="time">
+			<!-- 	<view class="time">
 				<text>{{talkBookDetail.createTime}}</text>
+			</view> -->
+			<view class="zanche flexbox" style="margin-top:15rpx;">
+				<span class="left">{{talkBookDetail.createTime}}</span>
+				<span class="right flexbox opbtns">
+					<image class="gzicon" v-if="contlikeYN" src="../../static/icon/gz2.png" mode="aspectFill"
+						@click.stop="clickLike(talkBookDetail)"></image>
+					<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"
+						@click.stop="clickLike(talkBookDetail)"></image>
+					<view style="color: #C0C4CC;">{{contlike}}</view>
+					<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill"
+						@click="pinglun()"></image>
+					<view style="color: #C0C4CC;" @click="pinglun()">{{pTotal}}</view>
+				</span>
 			</view>
 			<view class="tuijin" v-if="!isBuy && bookInfo.productId != null">
 				<p>觉得这本书还不错？</p>
@@ -52,14 +68,77 @@
 				<view class="">下一章</view>
 			</view> -->
 		</view>
+
+		<view class="pinglunMain">
+			<!-- <u-button class="addPl" type='success' plain @click="pinglun()">添加评论</u-button>
+			<view class="">
+				<view style="font-weight: 700;margin:30rpx 0rpx 30rpx;font-size: 30rpx;color:#55aa00;">精彩热评</view>
+			</view> -->
+			<!-- <h4>~ 精彩热评 ~</h4> -->
+			<view v-if="plList.length > 0">
+				<view class="pl-item" v-for="item in plList" :key="item.id">
+					<view class="plusername">
+						<image :src="item.user.avatar"></image>
+						<span v-if="item.user.nickname!=null">{{item.user.nickname}}</span>
+						<span v-if="item.user.nickname==null">匿名用户</span>
+					</view>
+					<view class="content" v-html="item.content"></view>
+					<view class="btns flexbox" style="margin-top:10rpx;">
+						<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
+						<span class="condelt" @click="deleteCont(item)" v-if="item.deletUse">删除</span>
+					</view>
+
+					<!-- </view> -->
+				</view>
+			</view>
+			<view class="quesheng" v-else>
+				<text>暂无评论内容~</text>
+			</view>
+		</view>
+		<view v-if="status==0" style="text-align: center;">
+			<u-loading-icon style="display: inline-block;"></u-loading-icon>
+			<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
+		</view>
+		<u-divider v-if="status == 1" text="已加载全部评论"></u-divider>
+		<!-- 评论书评对话框 -->
+		<!-- 回复评论对话框 -->
+		<u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
+			<view class="tanchu">
+				<view class="dp_title">添加评论</view>
+				<view style="max-height: 1000rpx;overflow-y: scroll;">
+					<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">
+
+						<view class="flex-sub flexbox">
+							<i @click="showEmj()" :class="emojiIcon"></i>
+							<textarea class="textarea" v-model="Pform.comment" @focus="InputFocus" @blur="InputBlur"
+								@input="textareaBInput" placeholder-style="font-size:24rpx;color:#aaaaaa;"
+								placeholder="请输入您要发送的内容"></textarea>
+						</view>
+						<view class="">
+							<u-button type="success" @click="submitPJ">提交</u-button>
+						</view>
+					</view>
+
+					<view style="position: relative;">
+						<emotion @emotion="handleEmj" :height="220" v-if="isShowEmj" :windowWidth="windowWidth">
+						</emotion>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+
 		<music-play :playData="playData"></music-play>
 		<!-- 公共组件-每个页面必须引入 -->
-		<public-module></public-module>		
+		<public-module></public-module>
 	</view>
 </template>
 
 <script>
+	import $http from '@/config/requestConfig.js';
+	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
+	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
 	import musicPlay from '@/components/music.vue'
+
 	import {
 		mapState,
 		mapMutations
@@ -71,6 +150,10 @@
 					method: 'pause'
 				},
 				audioShow: false,
+				isShowEmj: false,
+				emojiIcon: 'cuIcon-emoji',
+				emoji: [],
+				windowWidth: 0,
 				voicesImg: '',
 				isBuy: false,
 				playData: {},
@@ -86,7 +169,22 @@
 				audio: null,
 				duration: 10,
 				currentTime: 0,
-				paused: false
+				paused: false,
+				emojiIcon: 'cuIcon-emoji',
+				isShowEmj: false,
+				status: 3,
+				pingjiaShow: false, //添加评价
+				Pform: { // 评价表单
+					//star:0,
+					comment: '',
+					//img:[],
+					html: ''
+				},
+				contlike: 0,
+				contlikeYN: false,
+				pPage: 1,
+				pTotal: 0, // 评论的总条数
+				plList: [], // 书评的评论list
 			}
 		},
 		onLoad(e) {
@@ -101,6 +199,8 @@
 		onShow() {
 			this.getBookInfo()
 			this.getTalkBookDetail()
+			this.getCommPL()
+			this.getGoodNum()
 		},
 		onHide() {
 			// console.log('onHide----',this.paused)
@@ -116,37 +216,68 @@
 		},
 		methods: {
 			...mapMutations(['setUserInfo']),
-			start(){
+			start() {
 				this.initAudio() // 开始播放
 			},
-			initAudio(){
+			formatTimeDifferenceFromT(dateTimeT) {
-				this.audio.onTimeUpdate(()=>{
+				const now = new Date();
+				const t = new Date(dateTimeT);
+				const differenceInSeconds = Math.floor((now - t) / 1000);
+
+				if (differenceInSeconds <= 3600) {
+					const minutes = Math.floor(differenceInSeconds / 60);
+					return `${minutes} 分钟前`;
+				} else if (differenceInSeconds <= 86400) {
+					const hours = Math.floor(differenceInSeconds / 3600);
+					return `${hours} 小时前`;
+				} else if (differenceInSeconds <= 2592000) {
+					const days = Math.floor(differenceInSeconds / 86400);
+					return `${days} 天前`;
+				} else {
+					const currentYear = now.getFullYear();
+					const tYear = t.getFullYear();
+					if (currentYear === tYear) {
+						const month = t.getMonth() + 1;
+						const day = t.getDate();
+						return `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
+					} else {
+						const year = t.getFullYear();
+						const month = t.getMonth() + 1;
+						const day = t.getDate();
+						return `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
+					}
+				}
+			},
+			initAudio() {
+				this.audio.onTimeUpdate(() => {
 					this.duration = this.audio.duration.toFixed()
 					this.currentTime = this.audio.currentTime.toFixed()
 				})
-				this.audio.onPause(()=>{ // 用于被听书组件打断时，设置播放icon状态
+				this.audio.onPause(() => { // 用于被听书组件打断时，设置播放icon状态
 					this.paused = false
 					// console.log('onPause----------',this.paused)
 				})
 				this.paused = this.audio.paused
 				// console.log('paused',this.paused)
-				if(this.paused){
+				if (this.paused) {
 					this.audio.play()
-				}else{
+				} else {
 					this.audio.pause()
 				}
 			},
-			updateTime(e){
+			updateTime(e) {
 				this.currentTime = e.detail.currentTime.toFixed()
 				this.duration = e.detail.duration.toFixed()
 			},
-			changeTime(e){
+			changeTime(e) {
 				this.audio.seek(e.detail.value) // 设置播放位置
 			},
-			audioPlay(){
+			audioPlay() {
-				console.log('播放讲书',this.$music)				
+				console.log('播放讲书', this.$music)
-				this.$music.setCloseBgm()	 // 关闭听书音频
+				this.$music.setCloseBgm() // 关闭听书音频
-				this.setUserInfo({'playFlag': false})				
+				this.setUserInfo({
+					'playFlag': false
+				})
 			},
 			// 购买
 			gotoBuy() {
@@ -199,7 +330,7 @@
 							this.talkBookDetail = res.bookTeach
 
 							this.audio.src = this.talkBookDetail.voices // 设置播放资源路径
-							this.audio.onCanplay((e)=>{
+							this.audio.onCanplay((e) => {
 								this.duration = this.audio.duration.toFixed() // 初始化进度条和音频秒数
 							})
 
@@ -215,9 +346,304 @@
 						this.audioShow = true
 					})
 			},
+
+			// 表情
+			showEmj() {
+				let bool = !this.isShowEmj;
+				if (bool) {
+					this.emojiIcon = 'cuIcon-keyboard';
+				} else {
+					this.emojiIcon = 'cuIcon-emoji';
+				}
+
+				this.isShowEmj = bool;
+				this.$emit('show')
+			},
+			InputBlur(e) {
+
+			},
+			InputFocus(e) {
+				this.isShowEmj = false;
+				this.emojiIcon = 'cuIcon-emoji';
+				this.$emit('foc')
+			},
+
+			// 获取点赞数和是否点赞
+			getGoodNum() {
+
+				this.$http
+					.post("book/teach/getLikeCount?teachId=" + this.teachId)
+					.then(res => {
+						if (res.code == 0) {
+							this.contlike = res.count
+						}
+					}).catch((e) => {
+						console.log(e, 'e')
+					})
+
+				this.$http
+					.post("book/teach/ifLike?teachId=" + this.teachId)
+					.then(res => {
+						if (res.code == 0) {
+							this.contlikeYN = res.flag
+						}
+					})
+					.catch((e) => {
+						console.log(e, 'e')
+					})
+
+
+			},
+
+			// 获得书评回复列表
+			getCommPL() {
+
+				$http.request({
+						url: "book/teach/getCommentList",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data: {
+							'teachId': this.teachId,
+							'limit': 5,
+							'page': this.pPage,
+						},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})
+					.then(res => {
+						console.log(res, '书评评论')
+						// this.plList = this.plList.concat(res.page.list)
+						let plList1 = res.page.records
+						this.pTotal = res.page.total
+						this.status = 3
+						// 评论格式化
+						var newarr = []
+						plList1.forEach((item1) => {
+							item1.content = this.getHtmlComment(item1.content)
+							if (item1.userId == this.userInfo.id) {
+								item1.deletUse = true
+							} else {
+								item1.deletUse = false
+							}
+							newarr.push(item1)
+						})
+						this.plList = this.plList.concat(newarr)
+						console.log('改变格式后', this.plList)
+
+					}).catch(e => {
+						console.log(e, 'e')
+					});
+
+			},
+
+			// 获取html格式的评论1
+			getHtmlComment(comment) {
+				// 格式化html
+				//	 console.log(comment,'comment')
+				// 这里处理 链接   换行符
+				let replacedStr = comment.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
+					// console.log(item, index)
+					var indexss = emojiList1.findIndex(item1 => item1.alt === item)
+					// console.log(indexss, 'indexss')
+					return '<img src="https://www.nuttyreading.com/emojis/emojis/qq/' + emojiList1[indexss].url +
+						'" width="18rpx">';
+				});
+				// console.log(replacedStr,'replacedStr')
+				return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');
+			},
+
+			// 点赞
+			clickLike(item) {
+				this.$http
+					.post("book/teach/addOrCancelLike?teachId=" + this.teachId)
+					.then(res => {
+						if (res.code == 0) {
+							uni.showToast({
+								title: res.msg,
+								icon: 'success'
+							})
+							this.getGoodNum()
+						}
+					}).catch((e) => {
+						console.log(e, 'e')
+					})
+			},
+
+			// 显示评论框
+			pinglun(val) {
+				console.log('pinglun-val', val)
+				if (val && val.user && val.user.id && val.puser && val.puser.id) {
+					this.Pform.name = val.user.name || ''
+					this.Pform.pid = val.pid
+					this.Pform.puserId = val.user.id || ''
+				} else if (val && val.user && val.user.id) {
+					this.Pform.name = val.user.name || ''
+					this.Pform.pid = val.id
+					this.Pform.puserId = val.user.id || ''
+				} else {
+					// this.pinglunId = val || null
+					this.Pform.pid = ''
+					this.Pform.puserId = ''
+				}
+				this.pingjiaShow = true
+			},
+			// 提交评论
+			submitPJ() {
+				if (this.Pform.comment != '') {
+					$http.request({
+							url: "book/teach/addComment",
+							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+							data: {
+								teachId: this.teachId,
+								content: this.Pform.comment,
+								puserId: 0,
+							},
+							header: { //默认 无 说明：请求头
+								'Content-Type': 'application/json'
+							},
+						})
+						.then(res => {
+							uni.showToast({
+								title: '评论成功！',
+								icon: 'success'
+							})
+							// this.getCommPL()
+							this.pingjiaShow = false
+							this.Pform.comment = ''
+							this.Pform.name = ''
+							this.Pform.pid = ''
+							this.Pform.puserId = ''
+							// this.pinglunId = null
+
+							// 把回复的评论拼进this.plList回复列表中
+							let comment = res.comment
+
+							// comment.content = this.getHtmlComment(comment.content)
+							// console.log('this.userInfo', this.userInfo)
+							// comment.user = this.userInfo
+							// comment.comments = []
+							// this.plList.unshift(comment)
+
+							this.plList = []
+							this.pPage = 1
+							this.getCommPL()
+
+
+						}).catch(e => {
+							console.log(e, 'e')
+						});
+
+				} else {
+					uni.showToast({
+						title: '请先输入您的评价内容 ！',
+						icon: 'none'
+					})
+				}
+			},
+
+			// 删除评论
+			deleteCont(item) {
+
+				uni.showModal({
+					title: '提示',
+					content: '确定要删除评论吗？',
+					confirmText: "确定",
+					cancelText: "取消",
+					success: function(res) {
+						let _this = this
+						if (res.confirm) {
+							_this.$http
+								.post("book/teach/delComment?commentId=" + item.id)
+								.then(res => {
+									if (res.code == 0) {
+										uni.showToast({
+											title: '删除成功',
+											icon: 'success'
+										})
+								
+										_this.plList = []
+										_this.pPage = 1
+										_this.getCommPL()
+									}
+								}).catch((e) => {
+									console.log(e, 'e')
+								})
+						}
+					}.bind(this)
+				});
+
+			},
+
+
+			closePingjia() {
+				this.pingjiaShow = false
+				this.Pform.comment = ''
+				this.Pform.html = ''
+				this.emoji = []
+			},
+
+			// 获得输入的表情数组
+			handleEmj(i) {
+				console.log(i, 'i---------');
+				this.inputValue = i
+				// console.log(this.inputValue);
+				if (i.emotioni == '[em_98]') {
+					//匹配最后一个表情符号并删除11。
+					this.Pform.comment = this.Pform.comment.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
+					})
+					// console.log(this.emoji,'this.emoji')
+					this.Pform.comment += i.emotioni;
+					/// this.Pform.html += i.emotion
+				}
+			},
+
+			textareaBInput(e) {
+				console.log(e, 'e')
+				this.Pform.comment = e.detail.value
+				/// this.Pform.html = e.detail.value
+			},
+			showEmj() {
+				let bool = !this.isShowEmj;
+				if (bool) {
+					this.emojiIcon = 'cuIcon-keyboard';
+				} else {
+					this.emojiIcon = 'cuIcon-emoji';
+				}
+
+				this.isShowEmj = bool;
+				this.$emit('show')
+			},
+
+			InputBlur(e) {
+
+			},
+			InputFocus(e) {
+				this.isShowEmj = false;
+				this.emojiIcon = 'cuIcon-emoji';
+				this.$emit('foc')
+			},
+
+			onReachBottom() {
+				console.log('到底了')
+				if (this.pPage + 1 <= this.pTotal) {
+					this.status = 0
+					this.pPage++
+					this.getCommPL()
+				} else {
+					this.status = 3
+				}
+			},
 		},
 		components: {
-			musicPlay
+			musicPlay,
+			emotion
 		},
 	}
 </script>
@@ -291,6 +717,9 @@
 
 	.btn {
 		margin-right: 20rpx;
+		font-size: 22rpx;
+		justify-content: space-between;
+		align-items: center;
 
 		text {
 			display: inline-block;
@@ -302,43 +731,214 @@
 			border-radius: 5px;
 		}
 	}
-	// 自定义播放器样式
+
-	.audiobox{
+
-		border:  2rpx solid #d6d5d5;
+	.zanche {
-		border-radius: 8px;
+		font-size: 22rpx;
-		.audioinfo{
+		justify-content: space-between;
+		align-items: center;
+
+		.left {
+			width: 300rpx;
+			color: #999;
+			font-size: 24rpx;
+		}
+
+		.right {
+			width: 300rpx;
 			display: flex;
-			.audioimg{
+			justify-content: flex-end;
+			align-items: center;
+		}
+
+		.gzicon {
+			margin: 0 0 0 20rpx;
+			height: 40rpx;
+			width: 40rpx;
+			// float:left;
+			// border-radius: 20rpx;
+			// border:1rpx solid #e9e9e9;
+		}
+
+		.opbtns {
+			.pingjia {
+				margin-left: 10px;
+			}
+		}
+	}
+
+	// 自定义播放器样式
+	.audiobox {
+		border: 2rpx solid #d6d5d5;
+		border-radius: 8px;
+
+		.audioinfo {
+			display: flex;
+
+			.audioimg {
 				padding: 10rpx;
 				width: 180rpx;
 				height: 220rpx;
 				border-radius: 5px;
 			}
-			.audioimgstart{
+
+			.audioimgstart {
 				position: absolute;
 				padding: 20rpx;
 				width: 180rpx;
 				height: 220rpx;
 				border-radius: 5px;
 			}
-			.audiotitle{
+
+			.audiotitle {
 				padding: 10rpx;
 				font-size: 28rpx;
 				text-align: left;
 			}
-			.audioauthor{
+
+			.audioauthor {
 				padding: 4rpx;
 				font-size: 24rpx;
 				text-align: left;
 				color: #999;
 			}
-			.audioslider{
+
+			.audioslider {
 				width: 400rpx;
 			}
 		}
-		
+
-		
+
 	}
 
 	// .opbtn{font-size: 14rpx;}
+	.pinglunMain {
+		.pl-item {
+			margin: 0 0 14rpx 0;
+			padding: 0 0 14rpx 0;
+			border-bottom: 1px solid #f0f0f0;
+
+			.condelt {
+				color: #fd6004;
+			}
+
+		}
+
+		.plusername {
+			font-size: 26rpx;
+			color: #a1a1a1;
+
+			image {
+				width: 40rpx;
+				height: 40rpx;
+				border-radius: 20rpx;
+				display: inline-block;
+				margin-right: 15rpx;
+				vertical-align: sub;
+			}
+		}
+
+		.content {
+			margin: 30rpx 0rpx;
+			line-height: 40rpx;
+			color: #000;
+			font-size: 30rpx;
+		}
+
+		background-color: #fff;
+		padding: 10px;
+
+		// h4{color: #55aa00; font-size: 40rpx;  margin:30rpx 0 ; text-align: center;}
+		.time {
+			color: #888;
+			font-size: 24rpx;
+		}
+
+		.btns {
+			font-size: 22rpx;
+			// justify-content: space-between;
+			align-items: center;
+
+			.left {
+				// width: 300rpx;
+				margin-right: 20rpx;
+				color: #a1a1a1;
+			}
+
+			.right {
+				width: 300rpx;
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+			}
+
+			.gzicon {
+				margin: 0 0 0 20rpx;
+				height: 40rpx;
+				width: 40rpx;
+				// float:left;
+				// border-radius: 20rpx;
+				// border:1rpx solid #e9e9e9;
+			}
+
+			.opbtns {
+				.pingjia {
+					margin-left: 10px;
+				}
+			}
+		}
+
+	}
+
+	.quesheng {
+		text-align: center;
+		color: #8b8a91;
+		padding-bottom: 20rpx;
+		padding-top: 20rpx;
+	}
+
+	.tanchu {
+		padding: 40rpx 30rpx 40rpx 30rpx;
+		position: relative;
+
+
+		.dp_title {
+			font-size: 32rpx;
+			margin-bottom: 50rpx;
+			color: #555;
+			text-align: center;
+			font-weight: bold;
+		}
+
+		.dp_add {
+			position: absolute;
+			top: 40rpx;
+			right: 30rpx;
+			font-size: 22rpx;
+			background-color: #fd6004;
+			color: #fff;
+			border-radius: 10rpx;
+			padding: 5rpx 10rpx;
+
+			.u-icon {
+				display: inline-block;
+				margin-right: 5rpx;
+			}
+		}
+	}
+
+	.cuIcon-emoji {
+		background: url(../../static/biaoqing.png) no-repeat;
+		background-size: contain;
+		display: block;
+		margin-right: 20rpx;
+		width: 30px;
+	}
+
+	.cuIcon-keyboard {
+		background: url(../../static/biaoqing.png) no-repeat;
+		background-size: contain;
+		display: block;
+		width: 30px;
+	}
 </style>