From 7df88d4e9ad133140ad1b7e8138a8502859dfe0c Mon Sep 17 00:00:00 2001
From: yanwenlong <yanwenlong@quesoar.com>
Date: Wed, 13 Sep 2023 23:18:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B9=A6=E8=AF=84=E9=83=A8=E5=88=86=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                       |   9 +
 pages/bookscomments/comments.vue | 499 +++++++++++++++++++++++++++++++
 pages/peanut/home.vue            |   4 +-
 3 files changed, 510 insertions(+), 2 deletions(-)
 create mode 100644 pages/bookscomments/comments.vue

diff --git a/pages.json b/pages.json
index 48488f3..068bee2 100644
--- a/pages.json
+++ b/pages.json
@@ -378,6 +378,15 @@
                 "enablePullDownRefresh": false
             }
             
+        }
+        ,{
+            "path" : "pages/bookscomments/comments",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "书评",
+                "enablePullDownRefresh": true
+            }
+            
         }
         ,{
             "path" : "pages/bookShop/settlementBook",
diff --git a/pages/bookscomments/comments.vue b/pages/bookscomments/comments.vue
new file mode 100644
index 0000000..8ab9cba
--- /dev/null
+++ b/pages/bookscomments/comments.vue
@@ -0,0 +1,499 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<!-- 顶部导航栏 -->
+			<z-nav-bar title="书评" bgColor="red"></z-nav-bar>
+		</view>
+		<view class="bookInfo flexbox">
+			<image :src="productInfo.images" mode="aspectFill"></image>
+			<view>
+				<span class="title">{{productInfo.name}}</span>
+				<view class="description">{{productInfo.description}}</view>
+			</view>
+			
+		</view>
+		<view class="mainContent">
+			<view v-if="shupingList.length > 0">
+			<view class="item" @click.stop="toDetail(item)" v-for="(item,index) in shupingList" :key="index">
+				<image class="feng" v-if="item.image == ''"  src="../../static/icon/home_bg.jpg" mode="scaleToFill" style="width: 100%;"></image>
+				<image class="feng" v-else :src="item.image" mode="scaleToFill" style="width: 100%;"></image>
+				<text class="title">{{item.title}}</text>
+				<!-- <view class="description" v-html="item.content">
+					{{item.content}}
+				</view> -->
+				<view class="btns flexbox">
+					<span class="time">{{item.updateTime}}</span>
+					<span class="flexbox opbtns">
+						<!-- <span class="flexbox" @click="dianzan('1')">
+							<u-icon name="heart" color="#55aa00" size="26"></u-icon>
+							<text>2656</text>
+						</span>	 -->
+						<span class="flexbox pingjia" @click.stop="pinglun(item.id)">
+							<u-icon name="chat" color="#55aa00" size="26"></u-icon>
+							<!-- <text>2656</text> -->
+						</span>					
+					</span>
+				</view>
+			</view>	
+			</view>						
+			<view class="quesheng" v-else>
+				暂无书评内容~
+			</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>
+			<view v-if="status==1" style="padding-bottom: 20rpx;">
+				<u-divider text="全部加载完成"></u-divider>
+			</view>
+		</view>
+		<!-- 评价对话框 -->
+		<u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
+			<view class="tanchu">
+				<view class="dp_title">添加评论</view>
+				<view style="max-height: 1000rpx;overflow-y: scroll;">
+					<uni-forms :modelValue="Pform">
+						<!-- 评价图片 -->						
+						<!-- end -->
+								<!-- <uni-forms-item name="comment" label-width="0">
+									<uni-easyinput type="textarea" v-model="Pform.comment" placeholder="请输入您的商品评价"  />
+								</uni-forms-item>		 -->														
+					</uni-forms>
+					<!-- <u-button type="success" @click="submitPJ">提交评价</u-button> -->
+					<!-- 提交 -->
+					<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>
+							<!-- <input type="text" @focus="InputFocus" @blur="InputBlur" v-model="message"  @input="textareaBInput"  placeholder-style="font-size:24rpx;color:#aaaaaa;"  placeholder="请输入您要发送的内容"></input> -->
+							<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>
+	</view>
+</template>
+
+<script>
+	import $http from '@/config/requestConfig.js';
+	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
+   import musicPlay from '@/components/music.vue'
+import { data } from 'jquery';
+   import {
+   	mapState
+   } from 'vuex';
+	export default {
+		data() {
+			return {
+				loadingNow : false,
+				playData:{},
+				isShowEmj: false,
+				emojiIcon:'cuIcon-emoji',
+				windowWidth:0,
+				bookid:null,
+				productInfo:{
+					"id": 199,
+					"name": "华阳经",
+					"authorId": "3",
+					"description": "",
+					"title": "",
+					"isSale": 0,
+					"isVip": 0,
+					"freeChapterCount": 3,
+					"content": "",
+					"type": "1",
+					"price": null,
+					"salePrice": null,
+					"flag": false,
+					"istop": null,
+					"publisherId": "8",
+					"images": "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/2023/09/01/5f0c27571e2544908954f61a31fc3534华阳经-封面_00.png",
+					"imagesList": null,
+					"pid": null,
+					"level": "",
+					"chapterStatus": "2",
+					"contentStatus": "0",
+					"voicesStatus": "0",
+					"splits": "0",
+					"createTime": "2023-09-01 11:18:10",
+					"updateTime": "2023-09-08 14:37:51",
+					"sort": null,
+					"state": 1,
+					"novel": "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/2023/09/01/c19a41e6a88e450cafd9848e611d5b8a华阳经.docx",
+					"delFlag": 0,
+					"publisherName": "辽宁科学技术出版社",
+					"authorName": "吴雄志",
+					"chapterId": null,
+					"chapterName": null,
+					"chapterNum": null,
+					"isBuy": 0,
+					"canListen": true,
+					"clockIn": null
+				},
+				pingjiaShow:false, //添加评价 
+				Pform:{ // 评价表单
+					star:0,
+					comment:'',
+					img:[],
+					html:''
+				},
+				emoji:[],
+				Files:[],
+				page:1,
+				pageSize:10,
+				total:0,
+				status:3,
+				shupingList:[
+					{
+						"id": 18,
+						"title": "华阳经-书评",
+						"userid": 8,
+						"content": "<p>华山之南，复有奇山，名不高山。山不甚高，然不可攀也。其山之下，岷水之滨，有云阳氏，感金光之道，大圣之业，撰用内难伤寒，阴符道经，汇通百家，旁参古今，演绎真言，凡三百六十五条，命之曰《华阳经》，保承圣道，传于无穷，穷于无极也。</p><p><br></p><p>呜呼，上士求道，中士明理，下士困于方术之中。神用无方者，合于道乎？今诸凡夫，妄谈天人，引鬼神群嘲。道外求道，是为不道。云阳子乃生大悲心，出于定中，道其道，名其名，强为之言。然须弥诸境，亦阳气所化。阳气者，自虚无中来。故凡所有象，皆是空华。既是空华，不当强言。虽言非其言，然一言难尽者，一言以蔽之。</p>",
+						"image": "https://ehh-private-01.oss-cn-beijing.aliyuncs.com/2023/09/11/a77d9304c7e04695a78c77988163e576ed346ee47d8e65c913d9987f9214367.jpg",
+						"imagelist": null,
+						"bookid": 199,
+						"createTime": "2023-09-11 09:02:35",
+						"updateTime": "2023-09-11 09:02:35",
+						"contlike": null,
+						"delflag": 0
+					}
+				],
+				bfaid:null,
+			}
+		},
+		onPullDownRefresh() {
+			console.log('下拉刷新了')
+			uni.stopPullDownRefresh(); 
+			  
+				   this.page=1, // 页码			   
+				   this.shupingList = []
+				   this.getBookCom()
+			   
+		},
+		onReachBottom() {
+			this.loadingNow = true			
+			if(this.page < this.total){
+				this.page++
+				console.log('加载',this.page)
+				this.status = 0
+				this.getBookCom()
+				
+			}else{
+				this.status = 1
+				console.log('加载完成了',this.page)
+				return
+			}
+		},
+		onLoad(e) {
+			this.windowWidth = uni.getSystemInfoSync().windowWidth;
+			console.log(e,'onload')
+			this.bookid = e.bookid
+			this.getProDetail(e)
+			this.getBookCom()
+		},
+		computed:{
+			...mapState(['userInfo']),
+		},
+		methods: {
+			// 书评详情
+			toDetail(val){
+				console.log(val,'val')
+				uni.navigateTo({
+					url:'./commentsDetail?bookid='+this.bookid+'&bfa_id='+val.id
+				})
+			},
+			getProDetail(e){
+				// 获取商品详情
+				// uni.showLoading({
+				// 	title: '加载中'
+				// });		
+				//console.log(e.id,'e.id')	
+				// this.$http
+				// 	.post('book/book/appinfo/' + this.bookid + '/' + this.userInfo.id)
+				// 	.then(res => {	
+				// 		console.log(res,'res')
+				// 		this.productInfo = res.book				
+				// 		uni.hideLoading();
+				// 	}).catch((e)=>{
+				// 		console.log(e,'e')
+				// 	})
+			},	
+			// 获得书评
+			getBookCom(){ 
+				let data = {
+					'page': this.page,
+					'limit': this.pageSize,
+					'bookid' : this.bookid
+				}
+				console.log(data,'data')
+				// this.$http
+				// 	.post('forum/articles/descupdatelist', data)
+				// 	.then(res => {
+				// 	console.log(res,'获取成功')
+				// 	this.total = res.page.totalPage
+				// 	this.shupingList = this.shupingList.concat(res.page.list)
+				// 	//  console.log(res,'已购买')
+				// 	this.status = 3
+				// }).catch((e)=>{
+				// 		console.log(e,'e')
+				// 	})
+			},
+			// 获得输入的表情数组
+			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')
+			},
+			
+			// end
+			deleteImg(e){					
+				// var arr = this.Pform.img.slice(0,-1)
+				this.Pform.img.pop()	
+			  //  console.log('删除文件',arr)
+				console.log(this.Pform)
+			},
+			getStar(i){
+				this.Pform.star = i
+			},
+			select(e){
+				 console.log('选择文件：',e)
+				let arr =  e.tempFiles.map(item => {
+					  return {'url':item.url,'name':item.name}
+				  })
+				 this.Pform.img = this.Pform.img.concat(...arr)
+				//this.Pform.img = arr
+				 console.log(this.Pform,'img')				
+			},
+			upSuccess(e){
+				console.log(e)
+			},
+			// 获取html格式的评论1
+			getHtmlComment(){				
+				 // 格式化html
+				 var ss = this.Pform.comment
+				 if(this.emoji.length> 0){
+				 	for (var i = 0; i<this.emoji.length; i++){ 
+				 		if(this.Pform.comment.indexOf(this.emoji[i].name) !== -1 ){						
+				 			//var re = new RegExp(this.emoji[0].name,"g"); //定义正则表达式						
+				 			//第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。						
+				 			// ss = ss.replace(re, ); //第一个参数是正则表达式。
+				 			ss = ss.replace(this.emoji[i].name, this.emoji[i].tag)
+				 			// console.log(ss)					
+				 		}
+				 	}
+				 	this.Pform.html =  ss
+				 }else{
+				 	this.Pform.html =  this.Pform.comment
+				 }
+				//console.log(this.Pform.html,'this.Pform.html')
+			},
+			deletePic() {
+				let that = this
+				that.Pform.img.splice(0, 1)
+				//console.log(that.Pform.img)
+			},
+			afterRead(e) {
+				//console.log(e)
+				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.Pform.img.push({
+								url: JSON.parse(res.data).url
+							})
+						}
+					});
+				}
+			},
+			closePingjia(){
+				this.pingjiaShow = false
+				this.Pform.comment = ''
+				this.Pform.html = ''
+				this.emoji = []
+			},
+			// 点赞
+			dianzan(val){},
+			
+			// 显示评论
+			pinglun(val){
+				this.bfaid = val
+				this.pingjiaShow = true
+			},			
+			// 提交评论
+			submitPJ(){
+				if(this.Pform.comment != ''){	
+					let data={
+						'content':this.Pform.comment,
+						'userid':this.userInfo.id,
+						'bookid':this.bookid,
+						'bfaid': this.bfaid
+					}
+					// console.log(data,'data')
+					$http.request({
+						url: "forum/comment/save",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data,
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					}).then(res => {												
+							if (res.code == 0) {
+								uni.showToast({
+									title:'评论成功！',
+									icon:'success'
+								})
+								
+								this.pingjiaShow = false
+								this.Pform.comment = ''
+								this.pinglunId = null
+							}
+						})
+				}else{
+					uni.showToast({
+						title:'请先输入您的评价内容 ！',
+						icon:'none'
+					})
+				}
+			},
+			},
+		components:{
+			musicPlay,			
+			emotion			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.flexbox{display: flex;}
+	.container{padding: 10px;}
+	.star{display: inline-block; width: 20px; height: 20px;  margin-right: 10rpx;}
+		.starGray{ background : url(../../static/icon/star_greey.png) no-repeat; background-size: contain; }
+		.starLight{ background : url(../../static/icon/star_light.png) no-repeat;  background-size: contain;}
+		.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; }
+	.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;
+			}
+		}}
+	
+	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91; padding-bottom: 20rpx; padding-top: 20rpx;}
+	.bookInfo{
+		justify-content: space-between;
+		margin-bottom: 15px;
+		background-color: #fff;
+		padding:10px;
+		border: 1px splid #999;
+		box-sizing: border-box;
+		padding-bottom: 20rpx;
+		border-radius: 20rpx;
+		margin-bottom: 20rpx;
+		
+		view{ padding-left: 30rpx;  box-sizing: border-box;  width: calc(100% - 150px);
+			.title{font-size: 38rpx; margin-top: 20rpx; font-weight: blod; margin-bottom: 20rpx; display: block;			
+			}
+			.description{line-height: 20px; width: 100%;  color:#888; padding-left: 0;}
+		}
+		image{width: 150px !important;  }
+		
+	}
+	.mainContent{background-color: #fff; 
+	.item{padding: 10px; margin-bottom: 30rpx;}
+		.feng{margin-bottom: 15px; overflow: hidden;}
+		.title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
+		.description{ overflow: hidden; color: #666;
+		text-overflow: -o-ellipsis-lastline;
+		        overflow: hidden;
+		        text-overflow: ellipsis;
+		        display: -webkit-box;
+		        -webkit-line-clamp: 3;
+		        line-clamp: 3;
+		        -webkit-box-orient: vertical;
+			font-size: 28rpx; margin-bottom: 15px; margin-top:5px;
+		}
+		.btns{font-size: 24rpx; justify-content: space-between;
+			.time{font-size: 24rpx; color: #666; }
+			.opbtns{
+				.pingjia{margin-left: 10px;}
+			}
+		}
+	}
+	.mb30{margin-bottom: 30rpx; overflow: hidden;}
+</style>
diff --git a/pages/peanut/home.vue b/pages/peanut/home.vue
index db0a4f5..d09e9a9 100644
--- a/pages/peanut/home.vue
+++ b/pages/peanut/home.vue
@@ -33,10 +33,10 @@
 			</view>			
 			
 			<!-- <view class="hn_cl_tit" @click="onPageJump('../bookShop/bookShopIndex')"> -->			
-			<!-- <view class="hn_cl_tit shuping" @click="onTabJump()">
+			<view class="hn_cl_tit shuping" @click="onPageJump('../bookscomments/comments')">
 				<image src="../../static/icon/home3.png" mode="aspectFit"></image>
 				<text>书评</text>
-			</view> -->
+			</view>
 			
 			<view class="hn_cl_tit chaoshi" @click="onPageJump('../bookShop/classify')">
 				<image src="../../static/icon/home4.png" mode="aspectFit"></image>