From 742151ec5e60375af3e0fe3c6db527e4a462c2be Mon Sep 17 00:00:00 2001
From: liuyuan <582976274@qq.com>
Date: Thu, 12 Jun 2025 14:46:28 +0800
Subject: [PATCH] =?UTF-8?q?618=E6=B4=BB=E5=8A=A8=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E5=85=85=E5=80=BC=E3=80=81=E5=A4=A9=E5=8C=BB=E5=B8=81=E3=80=81?=
 =?UTF-8?q?=E7=A7=AF=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/comments/comments.vue                   | 839 +++++++++++++++++
 pages/comments/commentsDetail.vue             | 853 ++++++++++++++++++
 pages/comments/commentsList-old.vue           | 352 ++++++++
 pages/comments/commentsList.vue               | 847 +++++++++++++++++
 .../commonComponents/advertisement.vue        | 251 ++++++
 .../commonComponents/coupon/index.vue         | 287 ++++++
 pages/component/commonComponents/list.vue     | 159 ++++
 pages/peanut/mine.vue                         |   2 +-
 pages/user/persCount.vue                      |  12 +-
 pages/user/points.vue                         |   2 +-
 10 files changed, 3597 insertions(+), 7 deletions(-)
 create mode 100644 pages/comments/comments.vue
 create mode 100644 pages/comments/commentsDetail.vue
 create mode 100644 pages/comments/commentsList-old.vue
 create mode 100644 pages/comments/commentsList.vue
 create mode 100644 pages/component/commonComponents/advertisement.vue
 create mode 100644 pages/component/commonComponents/coupon/index.vue
 create mode 100644 pages/component/commonComponents/list.vue

diff --git a/pages/comments/comments.vue b/pages/comments/comments.vue
new file mode 100644
index 0000000..e1c7d3e
--- /dev/null
+++ b/pages/comments/comments.vue
@@ -0,0 +1,839 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<!-- 顶部导航栏 -->
+			<z-nav-bar :title="productInfo.name+'-书评'"></z-nav-bar>
+		</view>
+		<view class="bookInfo">
+			<!-- <image :src="productInfo.images" mode="aspectFill"></image>
+			<view>
+				<span class="title">{{productInfo.name}}</span>
+				<view class="description" v-if="productInfo.description == ''">暂无简介内容</view>
+				<view class="description">{{productInfo.description}}</view>
+			</view> -->
+			<view class="flexbox" style="margin-bottom: 20px;">
+				<image :src="productInfo.images" mode="aspectFill" class="imageradius bookinfoimage"></image>
+				<view class="bookInfo-inner">
+					<span class="title">{{productInfo.name}}</span>
+					<span class="author" v-if="productInfo.authorName!=''">作者：{{productInfo.authorName}}</span>
+					<!-- <view class="description">{{productInfo.bookdesc}}</view> -->
+
+					<view class="ting-du-mai">
+						<view class="ting-du-mai-item" v-if="productInfo.canListen" @click="toOtherPage(1,productInfo)">
+							听书</view>
+						<view class="ting-du-mai-item" v-if="productInfo.clockIn == 1"
+							@click="toOtherPage(2,productInfo)">读书打卡</view>
+						<view class="ting-du-mai-item" v-if="productInfo.bookType == 0"
+							@click="toOtherPage(3,productInfo)">立即购买</view>
+					</view>
+
+				</view>
+			</view>
+
+			<view class="description" v-if="productInfo.content == ''">暂无简介内容</view>
+			<view class="description" v-else>简介：{{productInfo.content}}</view>
+
+		</view>
+		<view class="mainContent">
+			
+			<view v-if="shupingList.length > 0">
+				<view class="flexbox shuping-topbar">
+					<view class="shuping-topbar-tiao">{{shupingNum || 0}}条书评</view>
+					<view class="shuping-topbar-order">
+						<!-- <view v-for="(item,index) in orderTabs" @click="orderTabCLi(item.value)" :key="index"
+						:class="orderListTab==item.value?'orderdefine ordStyle':'orderdefine'">{{item.name}}</view> -->
+						<view :class="orderListTab==1?'orderdefine ordStyle':'orderdefine'" @click="orderTabCLi(1)">按时间
+						</view>
+						<view style="border-left:2rpx solid #e9e9e9;height:36rpx;"></view>
+						<view :class="orderListTab==2?'orderdefine ordStyle':'orderdefine'" @click="orderTabCLi(2)">按热度
+						</view>
+					</view>
+				</view>
+				<view class="item" @click.stop="toDetail(item)" v-for="(item,index1) in shupingList" :key="index1">
+					
+					
+					<view class="title">{{item.title}}</view>
+					<image class="feng" v-if="item.image" :src="item.image" mode="aspectFill"></image>
+					<view class="description descriptionNew" v-html="item.content">
+						
+					</view>
+					<!-- <image class="feng" v-if="item.image == ''"  src="../../static/icon/home_bg.jpg" mode="aspectFill"></image> -->
+
+					<view class="btns flexbox" style="margin-top:10rpx;">
+						
+						<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
+						<span class="right flexbox opbtns">
+							<image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png" mode="aspectFill"
+								@click.stop="clickLike(item)"></image>
+							<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"
+								@click.stop="clickLike(item)"></image>
+							<view style="color: #C0C4CC;">{{item.contlike}}</view>
+							<!-- <image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click.stop="pinglun(item.id)"></image>
+							<view style="color: #C0C4CC;" @click.stop="pinglun(item.id)">{{item.commentNum}}</view> -->
+							<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill">
+							</image>
+							<view style="color: #C0C4CC;">{{item.commentNum}}</view>
+						</span>
+					</view>
+					<view style="border-bottom:2rpx solid #e9e9e9;height:36rpx;" v-if="index1<shupingList.length-1">
+					</view>
+					<!-- <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';
+	import {
+		checkBookRight
+	} from '@/config/utils';
+	export default {
+		data() {
+			return {
+				orderListTab: 1,
+				orderTabs: [{
+					name: '按时间',
+					value: 1
+				}, {
+					name: '按热度',
+					value: 2
+				}],
+				shupingNum: 0,
+				loadingNow: false,
+				playData: {},
+				isShowEmj: false,
+				emojiIcon: 'cuIcon-emoji',
+				windowWidth: 0,
+				bookid: null,
+				productInfo: {},
+				pingjiaShow: false, //添加评价 
+				Pform: { // 评价表单
+					star: 0,
+					comment: '',
+					img: [],
+					html: ''
+				},
+				emoji: [],
+				Files: [],
+				page: 1,
+				pageSize: 10,
+				total: 0,
+				status: 3,
+				shupingList: [],
+				bfaid: null,
+				newTime:'',
+			}
+		},
+		onPullDownRefresh() {
+			console.log('下拉刷新了')
+			uni.stopPullDownRefresh();
+
+			this.page = 1, // 页码			   
+				this.shupingList = []
+			this.getBookCom(this.orderListTab)
+
+		},
+		onReachBottom() {
+			this.loadingNow = true
+			if (this.page < this.total) {
+				this.page++
+				console.log('加载', this.page)
+				this.status = 0
+				this.getBookCom(this.orderListTab)
+
+			} 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(this.orderListTab)
+		},
+		computed: {
+			...mapState(['userInfo']),
+		},
+		methods: {
+			toOtherPage(e, productInfo) {
+				if (e == 1) {
+					// 跳转到听书
+					uni.navigateTo({
+						url: "../listen/listen?bookid=" + productInfo.id
+					});
+				}
+				if (e == 2) {
+					// 跳转到读书打卡
+					let data = {
+						'userId': this.userInfo.id,
+						'bookId': productInfo.id
+					}
+					checkBookRight(data, res => {
+						console.log(res)
+						if (res.success) {
+							uni.navigateTo({
+								url: '../clock/clock?bookid=' + productInfo.id
+							})
+						} else {
+							uni.showToast({
+								title: '购买本书后方可参与打卡!',
+								icon: 'none'
+							})
+						}
+					})
+
+				}
+				if (e == 3) {
+					// 跳转到购买
+					uni.navigateTo({
+						url: '../bookShop/commodityDetail?id=' + productInfo.id
+					});
+				}
+			},
+			// 切换tab状态
+			orderTabCLi(e) {
+				this.orderListTab = e
+				this.page = 1
+				this.shupingList = []
+				this.getBookCom(this.orderListTab)
+			},
+			clickLike(item) {
+				this.$http
+					.post("forum/articles/chickForumContlike?forum_id=" + item.id, )
+					.then(res => {
+						if (res.code == 0) {
+							uni.showToast({
+								title: '点赞成功！',
+								icon: 'success'
+							})
+							item.contlike++
+						}
+					}).catch((e) => {
+						console.log(e, 'e')
+					})
+			},
+			formatTimeDifferenceFromT(dateTimeT) {
+				dateTimeT=	dateTimeT.replace(/-/g,"/") 
+				console.log("🚀 ~ formatTimeDifferenceFromT ~ dateTimeT:", dateTimeT)
+				const now = new Date();
+				const t = new Date(dateTimeT);
+				console.log("🚀 ~ formatTimeDifferenceFromT ~ t:", t)
+				const differenceInSeconds = Math.floor((now - t) / 1000);
+				console.log("🚀 ~ formatTimeDifferenceFromT ~ differenceInSeconds:", differenceInSeconds)
+
+				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}`;
+					}
+				}
+			},
+			// 书评详情
+			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(flag) {
+				let data = {
+					'page': this.page,
+					'limit': this.pageSize,
+					'bookId': this.bookid,
+					'order': flag
+				}
+				console.log(data, 'data')
+				this.$http
+					.post('forum/articles/getForumByBook', data)
+					.then(res => {
+						console.log(res, '获取成功')
+						this.total = res.page.pages
+						this.shupingNum = res.page.total
+						this.shupingList = this.shupingList.concat(res.page.records)
+						//  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;
+			}
+		}
+	}
+
+	.shuping-topbar {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.shuping-topbar-tiao {
+			font-size: 28rpx;
+			color: #8b8a91;
+		}
+
+		.shuping-topbar-order {
+			width: 280rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.orderdefine {
+				display: inline-block;
+				padding: 20rpx 0 20rpx 0;
+				// margin: 40rpx 0 15rpx 0;
+				width: 230rpx;
+				text-align: center;
+				font-size: 30rpx;
+			}
+
+			.ordStyle {
+				// border-bottom: 4rpx solid #54a966;
+				// color: #54a966;
+				font-weight: bold;
+			}
+		}
+	}
+
+	.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;
+
+		.ting-du-mai {
+			display: flex;
+			justify-content: space-between;
+			align-content: center;
+			font-size: 28rpx;
+			width: 400rpx;
+
+			.ting-du-mai-item {
+				color: deepskyblue;
+				border: 1px solid deepskyblue;
+				border-radius: 6rpx;
+				padding: 4rpx 6rpx;
+			}
+		}
+
+		.imageradius {
+			border-radius: 20rpx;
+			border: 1rpx solid #e9e9e9;
+		}
+
+		.bookinfoimage {
+			width: 100px;
+			height: 100px;
+		}
+
+		.bookInfo-inner {
+			padding-left: 30rpx;
+			box-sizing: border-box;
+			width: calc(100% - 100px);
+
+			.title {
+				font-size: 32rpx;
+				margin-top: 0rpx;
+				margin-bottom: 20rpx;
+				font-weight: 700;
+				display: block;
+			}
+
+			.author {
+				font-size: 30rpx;
+				margin-top: 0rpx;
+				margin-bottom: 20rpx;
+				font-weight: 500;
+				display: block;
+			}
+
+
+		}
+
+		.description {
+			font-size: 28rpx;
+			line-height: 20px;
+			width: 100%;
+			color: #888;
+			padding-left: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			-webkit-line-clamp: 9;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			
+		}
+
+		// 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;
+		padding: 20rpx;
+		border-radius: 20rpx;
+
+		.item {
+			// padding: 10px;
+			margin-bottom: 30rpx;
+			// border: 1px solid #999;
+			box-sizing: border-box;
+			padding-bottom: 20rpx;
+			border-radius: 20rpx;
+			margin-bottom: 20rpx;
+		}
+
+		.feng {
+			margin: 10rpx 20rpx 0 0;
+			height: 160rpx;
+			width: 140rpx;
+			float: left;
+			border-radius: 20rpx;
+			border: 1rpx solid #e9e9e9;
+		}
+
+		.title {
+			font-size: 30rpx;
+			font-weight: 700;
+			color: #000;
+			overflow: hidden;
+		}
+
+		.description {
+			// width: 100%;
+			-webkit-box-orient: vertical;
+			overflow: hidden !important;
+			height:190rpx;
+			color: #666 !important;
+			text-overflow: -o-ellipsis-lastline !important;
+			overflow: hidden !important;
+			text-overflow: ellipsis !important;
+			display: -webkit-box !important;
+			-webkit-line-clamp: 5 !important;
+			line-clamp: 5 !important;
+			-webkit-box-orient: vertical !important;
+			font-size: 26rpx !important;
+			margin-bottom: 20rpx !important;
+			margin-top: 10rpx !important;
+
+			white-space: pre-wrap;
+
+			// height: 172rpx;
+		}
+
+		// .btns{
+		// 	font-size: 24rpx;
+		// 	justify-content: space-between;
+		// 	align-items: center;
+		// 	.time{font-size: 24rpx; color: #666; }
+		// 	.opbtns{
+		// 		.pingjia{margin-left: 10px;}
+		// 	}
+		// }
+
+		.btns {
+			font-size: 22rpx;
+			justify-content: space-between;
+			align-items: center;
+
+			.left {
+				width: 300rpx;
+				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;
+				}
+			}
+		}
+	}
+
+	.mb30 {
+		margin-bottom: 30rpx;
+		overflow: hidden;
+	}
+	.descriptionNew{
+		// overflow: auto;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/comments/commentsDetail.vue b/pages/comments/commentsDetail.vue
new file mode 100644
index 0000000..4df1ac6
--- /dev/null
+++ b/pages/comments/commentsDetail.vue
@@ -0,0 +1,853 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<!-- 顶部导航栏 -->
+			<z-nav-bar title="书评详情"></z-nav-bar>
+		</view>
+		<view class="bookInfo">
+			<!-- <image :src="productInfo.images" mode="aspectFill"></image>
+			<view>
+				<span class="title">{{productInfo.name}}</span>
+				<view class="description">{{productInfo.description}}</view>
+			</view> -->
+			<!-- <view class="flexbox" style="margin-bottom: 20px;">
+				<image :src="productInfo.images" mode="aspectFill" class="imageradius bookinfoimage"></image>
+				<view class="bookInfo-inner">
+					<span class="title">{{productInfo.name}}</span>
+					<span class="author">作者：{{productInfo.authorName}}</span>
+					<view class="description" v-if="productInfo.description == ''">暂无简介内容</view>
+					<view class="description" v-else>简介：{{productInfo.description}}</view>
+				</view>
+			</view>	 -->
+			<view class="item">
+				<view class="title">{{commentInfo.title}}</view>
+				<view style="display:flex;">
+					<image v-if="productInfo.images != ''" class="feng" :src="productInfo.images" mode="aspectFill" style=""  @click="previewImage(productInfo.images)"></image>
+					<image v-if="commentInfo.image != ''" class="feng" :src="commentInfo.image" mode="aspectFill" style=""  @click="previewImage(commentInfo.image)"></image>
+				</view>
+				<!-- <view class="description">
+					
+				</view> -->
+				<view class="btns flexbox">
+					<!-- <span class="time">{{commentInfo.createTime}}</span> -->
+					<span class="flexbox opbtns">
+						<!-- <span class="flexbox" @click="dianzan('1')">
+							<u-icon name="heart" color="#55aa00" size="22"></u-icon>
+							<text>2656</text>
+						</span> -->											
+					</span>
+				</view>
+				<view class="zhengwen" v-html="commentInfo.content">
+				</view>
+				<view class="btns flexbox">
+					<span class="left"></span>
+					<span class="right flexbox opbtns" style="color:#C0C4CC;">
+						{{formatTimeDifferenceFromT(commentInfo.createTime)}}
+					</span>
+				</view>
+				<view class="btns flexbox" style="margin-top:10rpx;">
+					<span class="left" style="color: #C0C4CC;"></span>
+					<span class="right flexbox opbtns">
+						<image class="gzicon" v-if="commentInfo.ilike" src="../../static/icon/gz2.png" mode="aspectFill" @click.stop="clickLikeshuping(commentInfo)"></image>
+						<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill" @click.stop="clickLikeshuping(commentInfo)"></image>
+						<view style="color: #C0C4CC;">{{commentInfo.contlike}}</view>
+						<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click="pinglun()"></image>
+						<view style="color: #C0C4CC;" @click="pinglun()">{{commentInfo.commentNum}}</view>
+					</span>
+				</view>
+			</view>
+			
+		</view>
+		<view class="mainContent">
+			
+			
+			
+					
+		</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">{{item.user.name}}</view>
+					<view class="content" v-html="item.content"></view>
+					<!-- <view class="btns flexbox"> -->
+						<!-- <span class="time">{{formatTimeDifferenceFromT(item.createTime)}}</span> -->
+						<!-- <span class="flexbox opbtns">						
+							<span class="flexbox pingjia" @click="pinglun(item.id)">
+								<u-icon name="chat" color="#888" size="26"></u-icon>							
+							</span>					
+						</span> -->
+					<view class="btns flexbox" style="margin-top:10rpx;">
+						<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
+						<span class="right flexbox opbtns">
+							<image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png" mode="aspectFill" @click.stop="clickLikehuifu(item)"></image>
+							<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill" @click.stop="clickLikehuifu(item)"></image>
+							<view style="color: #C0C4CC;">{{item.contlike}}</view>
+							<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click="pinglun(item)"></image>
+							<view style="color: #C0C4CC;" @click="pinglun(item)">{{item.commentsNum}}</view>
+						</span>
+					</view>
+					<view class="pl-son" v-if="item.comments.length > 0">
+						<view class="pl-son-item" v-for="(item1,index) in item.comments" :key="index">
+							<view class="pl-son-item-content">
+								<text class="pl-son-atob">{{item1.user.name + " 回复 " + item1.puser.name}}：</text>
+								<text v-html="item1.content"></text>
+							</view>
+							<view class="btns flexbox" style="margin-top:10rpx;">
+								<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item1.createTime)}}</span>
+								<span class="right flexbox opbtns">
+									<image class="gzicon" v-if="item1.ilike" src="../../static/icon/gz2.png" mode="aspectFill" @click.stop="clickLikehuifu(item1)"></image>
+									<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill" @click.stop="clickLikehuifu(item1)"></image>
+									<view style="color: #C0C4CC;">{{item1.contlike}}</view>
+									<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill" @click="pinglun(item1)"></image>
+									<!-- <view style="color: #C0C4CC;" @click="pinglun(item1)">{{item1.commentsNum}}</view> -->
+								</span>
+							</view>
+							<view style="border-bottom:2rpx solid #e9e9e9;height:20rpx;" v-if="index<item.comments.length-1"></view>
+						</view>
+					</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">{{Pform.name?("回复："+Pform.name):"添加评论"}}</view>
+				<view style="max-height: 1000rpx;overflow-y: scroll;">				
+					<!-- <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 emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
+   import {
+   	mapState
+   } from 'vuex';
+	export default {
+		data() {
+			return {
+				playData:{},
+				isShowEmj: false,
+				emojiIcon:'cuIcon-emoji',
+				windowWidth:0,
+				bookid:null,
+				bfa_id:null, //书评id
+				productInfo:{},
+				status:3,
+				pingjiaShow:false, //添加评价 
+				Pform:{ // 评价表单
+					//star:0,
+					comment:'',
+					//img:[],
+					html:''
+				},
+				emoji:[],
+				Files:[],
+				commentInfo:{},
+				pPage:1,
+				pTotal:0, // 评论的总条数
+				// pinglunId:null,
+				plList:[],  // 书评的评论list
+			}
+		},
+		onLoad(e) {
+			this.windowWidth = uni.getSystemInfoSync().windowWidth;
+			console.log(e,'onload')
+			this.bookid = e.bookid
+			this.bfa_id = e.bfa_id			
+		},
+		onShow() {
+			this.getProDetail()
+			this.getbookComInfo()
+			this.getCommPL()
+		},
+		onReachBottom() {
+			console.log('到底了')
+			if(this.pPage+1 <= this.pTotal){
+				this.status = 0
+				this.pPage++
+				this.getCommPL()
+			}else{
+				this.status = 3
+			}
+		},
+		computed:{
+			...mapState(['userInfo']),
+		},
+		methods: {
+            formatTimeDifferenceFromT(dateTimeT) {
+                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}`;
+                    }
+                }
+            },
+			// 获得书评回复列表
+			getCommPL(){
+				let data = {
+					'forumId':this.bfa_id,
+					'limit': 5,
+					'page': this.pPage,
+				}
+				console.log(data,'data')				
+				this.$http
+					.post('forum/articles/getCommentByForum', data)
+					.then(res => {						
+						if(res.code == 0){
+							console.log(res,'书评评论')							
+							// this.plList = this.plList.concat(res.page.list)
+							let plList1 = res.page.records
+							this.pTotal = res.page.pages
+							this.status = 3
+							// 评论格式化
+							var newarr = []
+							plList1.forEach((item1)=>{								   
+								item1.content = this.getHtmlComment(item1.content)
+								if(item1.comments && item1.comments.length>0){
+									item1.comments.forEach((item2)=>{
+											item2.content = this.getHtmlComment(item2.content)
+									})
+								}
+								// console.log(pjstr)									
+								newarr.push(item1)
+							
+							})
+							this.plList = this.plList.concat(newarr)
+							console.log('改变格式后', this.plList)
+						}
+					}).catch((e)=>{
+						console.log(e)
+					})
+			},
+			// 获得书评详情
+			getbookComInfo(){
+				this.$http
+					.post(`forum/articles/appinfo/${this.bfa_id}`)
+					.then(res => {
+						if(res.code == 0){
+							console.log(res,'书评详细内容')
+							this.commentInfo = res.BookForumArticlesEntity
+						}
+					}).catch((e)=>{
+						console.log(e)
+					})
+			},
+            clickLikeshuping(item){
+                this.$http
+					.post("forum/articles/chickForumContlike?forum_id=" + item.id,)
+					.then(res => {
+                        if (res.code == 0) {
+                            uni.showToast({
+                                title:'点赞成功！',
+                                icon:'success'
+                            })
+                            
+                            item.contlike++
+                        }
+					}).catch((e)=>{
+						console.log(e,'e')
+					})
+            },
+            clickLikehuifu(item){
+				let data = {
+					comment_id: item.id
+				}
+                this.$http
+					.post("forum/articles/chickCommentConlike", data)
+					.then(res => {
+                        if (res.code == 0) {
+                            uni.showToast({
+                                title:'点赞成功！',
+                                icon:'success'
+                            })
+                            
+                            item.contlike++
+                        }
+					}).catch((e)=>{
+						console.log(e,'e')
+					})
+            },
+			getProDetail(){
+				// 获取商品详情
+				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')
+					})
+			},	
+			// 获得输入的表情数组
+			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(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>');
+				       
+						
+			},
+			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){},
+			
+			// 放大图片
+			previewImage(url) {
+				console.log(url)
+				uni.previewImage({
+					urls: [url]
+				});
+			},
+			// 显示评论框
+			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 != ''){				
+				
+					// let data={
+					// 	'content':this.Pform.comment,
+					// 	'userid':this.userInfo.id,
+					// 	'bookid':this.bookid,
+					// 	'bfaid' : this.bfa_id,
+					// 	// 'id': this.pinglunId
+					// }
+					//  console.log(data,'data')
+
+
+					let data = {
+						forumId : this.bfa_id,
+						userId: this.userInfo.id,
+						content: this.Pform.comment,
+						pid: this.Pform.pid,
+						puserId: this.Pform.puserId,
+					}
+					console.log(data,'提交的评论id')
+					this.$http
+					.post("forum/articles/pushMsgToForum", data)
+					.then(res => {
+                        if (res.code == 0) {
+							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
+							// 第一种情况：1级回复
+							if(comment&&comment.pid == 0){
+								comment.content = this.getHtmlComment(comment.content)
+								console.log('this.userInfo',this.userInfo)
+								comment.user = this.userInfo
+								comment.comments = []
+								this.plList.unshift(comment)
+							}else if(comment&&comment.pid > 0){// 第二种情况：回复第1级回复和回复第2级回复
+
+								for(let i=0;i<this.plList.length;i++){
+									if(this.plList[i].id == comment.pid){
+										
+										comment.content = this.getHtmlComment(comment.content)
+										console.log('this.userInfo',this.userInfo)
+										comment.user = this.userInfo
+										comment.puser = this.plList[i].user
+										// comment.comments = []
+										this.plList[i].comments.push(comment)
+									}
+								}
+							}
+                        }
+					}).catch((e)=>{
+						console.log(e,'e')
+					})
+
+					// $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.getCommPL()
+					// 			this.pingjiaShow = false
+					// 			this.Pform.comment = ''
+					// 			this.pinglunId = null
+					// 		}
+					// 	})
+				}else{
+					uni.showToast({
+						title:'请先输入您的评价内容 ！',
+						icon:'none'
+					})
+				}
+			},
+		},
+		components:{
+			musicPlay,			
+			emotion
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.addPl{padding-top: 0rpx; margin-bottom: 0rpx;}
+	.pinglunMain{
+		.pl-item{
+			margin: 0 0 14rpx 0;
+			padding: 0 0 14rpx 0;
+			border-bottom: 1px solid #f0f0f0;
+			.pl-son{
+				margin: 14rpx 0 14rpx 60rpx;
+				padding: 0 14rpx 14rpx 14rpx;
+				background-color: #f0f0f0;
+				border-radius: 10rpx;
+				.pl-son-item{
+					font-size: 26rpx;
+					padding-top: 28rpx;
+					.pl-son-item-content{
+
+					}
+					.pl-son-atob{
+						color: #a1a1a1;
+					}
+				}
+			}
+		}
+		.plusername{
+			font-size: 26rpx;
+			color: #a1a1a1;
+		}
+		.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;
+				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;}
+			}
+		}
+		
+	}
+	// .mbtns{padding: 5px; background-color: #f4fff5; border-radius: 10px; font-size: 34rpx; color: #8b8a91; margin:15px 0; justify-content: space-between;}
+	/deep/.zhengwen{
+		line-height: 50rpx;
+		font-size: 28rpx;
+		margin-top: 20rpx;
+		img{
+			width: 100% !important;
+		}
+	}
+	.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;
+		
+	// 	view{ padding-left: 30rpx;width: calc(100% - 150rpx); box-sizing: border-box;
+	// 		.title{font-size: 38rpx; margin-top: 20rpx; margin-bottom: 20rpx; display: block;}
+	// 		.description{line-height: 20px; width: 100%;  color:#888; padding-left: 0;}
+	// 		text{margin-left: 10px; line-height: 20px; color: #888; padding-left: 0;}
+	// 	}
+	// 	image{width: 150px; height: 150px;}
+		
+	// }
+	.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;
+		// .imageradius{
+		// 	border-radius: 20rpx;
+		// 	border:1rpx solid #e9e9e9;
+		// }
+		
+		// .bookInfo-inner{ padding-left: 30rpx;  box-sizing: border-box;  width: calc(100% - 150px);
+		// 	.title{font-size: 32rpx; margin-top: 0rpx; margin-bottom: 20rpx;font-weight: 700; display: block;}
+		// 	.author{font-size: 30rpx;margin-top: 0rpx;margin-bottom: 20rpx;font-weight: 500; display: block; }
+
+		// 	.description{
+		// 		font-size: 28rpx;
+		// 		line-height: 20px;
+		// 		width: 100%;
+		// 		color:#888;
+		// 		padding-left: 0;
+		// 		overflow:hidden;
+		// 		text-overflow: ellipsis;
+		// 		-webkit-line-clamp: 9;
+		// 		display: -webkit-box;
+		// 		-webkit-box-orient: vertical;
+		// 	}
+		// }
+		// .bookinfoimage{width: 150px !important;  }
+		
+		// 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;  }
+		
+		.btns{
+			font-size: 22rpx;
+			justify-content: space-between;
+			align-items: center;
+			.left{
+				width: 300rpx;
+				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;}
+			}
+		}
+		
+		.feng{
+			// margin:10rpx 0 0 0;
+			// height: 670rpx;
+			// width: 670rpx;
+			// border-radius: 20rpx;
+			// border:1rpx solid #e9e9e9;
+
+			margin:10rpx 20rpx 0 0;
+            height: 360rpx;
+            width: 280rpx;
+            // float:left;
+            border-radius: 20rpx;
+            border:1rpx solid #e9e9e9;
+		}
+		.item{
+			// padding: 10px;
+			margin-bottom: 30rpx;
+		}
+		// .title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
+		.title{font-size: 32rpx; font-weight: 700; color: #000; overflow: hidden;padding-top: 20rpx;padding-bottom: 10rpx;}
+		.description{
+			overflow: hidden;
+			color: #666;
+			font-size: 28rpx;
+			margin-bottom: 30rpx;
+			margin-top:10rpx;
+		}
+		
+	}
+	.mainContent{
+		background-color: #fff; 
+		padding: 20rpx;
+		border-radius: 20rpx;
+		.item{
+			// padding: 10px;
+			margin-bottom: 30rpx;
+		}
+		.feng{
+			// margin:10rpx 0 0 0;
+			// height: 670rpx;
+			// width: 670rpx;
+			// border-radius: 20rpx;
+			// border:1rpx solid #e9e9e9;
+
+			margin:10rpx 20rpx 0 0;
+            height: 160rpx;
+            width: 140rpx;
+            float:left;
+            border-radius: 20rpx;
+            border:1rpx solid #e9e9e9;
+		}
+		// .title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
+		.title{font-size: 32rpx; font-weight: 500; color: #55aa00; overflow: hidden;padding-top: 20rpx;}
+		.description{
+			overflow: hidden;
+			color: #666;
+			font-size: 28rpx;
+			margin-bottom: 15px;
+			margin-top:5px;
+
+			// overflow: hidden;
+			// color: #666;
+			// text-overflow: -o-ellipsis-lastline;
+			// overflow: hidden;
+			// text-overflow: ellipsis;
+			// display: -webkit-box;
+			// -webkit-line-clamp: 5;
+			// line-clamp: 5;
+			// -webkit-box-orient: vertical;
+			// font-size: 28rpx;
+			// margin-bottom: 15px;
+			// margin-top:5px;
+			// min-height: 186rpx;
+		}
+	}
+	
+	.mb30{margin-bottom: 30rpx; overflow: hidden;}
+</style>
diff --git a/pages/comments/commentsList-old.vue b/pages/comments/commentsList-old.vue
new file mode 100644
index 0000000..2142354
--- /dev/null
+++ b/pages/comments/commentsList-old.vue
@@ -0,0 +1,352 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<!-- 顶部导航栏 -->
+			<z-nav-bar title="书评列表" bgColor="red"></z-nav-bar>
+		</view>
+		<view class="bookInfo" v-for="(productInfo,index) in productList" :key="index">
+			<view class="flexbox" style="margin-bottom: 20px;">
+				<image :src="productInfo.bookimage" mode="aspectFill" class="imageradius bookinfoimage"></image>
+				<view class="bookInfo-inner">
+					<span class="title">{{productInfo.bookName}}</span>
+					<span class="author">作者：{{productInfo.authorName}}</span>
+					<view class="description">简介：{{productInfo.bookdesc}}</view>
+				</view>
+			</view>	
+			<view class="mainContent">
+				<view style="display:flex;justify-content:space-between;">
+					<view style="font-weight: 700;margin:0rpx 0rpx 40rpx;font-size:32rpx;">热门书评</view>
+					<view style="font-weight: 500;margin:0rpx 0rpx 20rpx;font-size:28rpx;color:#8b8a91" @click.stop="toMore(productInfo)">查看更多＞</view>
+				</view>
+				<view v-if="productInfo.shupingList.length > 0">
+					<view class="item" @click.stop="toDetail(item)" v-for="(item,index1) in productInfo.shupingList" :key="index1">
+						
+						<view class="title">{{item.title}}</view>
+						<image class="feng" v-if="item.image" :src="item.image" mode="aspectFill"></image>
+						<view class="description" v-html="item.content">
+						</view>
+						<!-- <image class="feng" v-if="item.image == ''"  src="../../static/icon/home_bg.jpg" mode="aspectFill"></image> -->
+						
+						<view class="btns flexbox">
+							<span class="time">{{item.createTime}}</span>
+							<span class="flexbox opbtns">
+							</span>
+						</view>
+						<view style="border-bottom:2rpx solid #e9e9e9;height:50rpx;" v-if="index1<productInfo.shupingList.length-1"></view>
+					</view>	
+					<!-- <view class="gengduoshuping"  @click.stop="toMore(productInfo)">
+						查看更多
+					</view> -->
+				</view>						
+				<view class="quesheng" v-else>
+					暂无书评内容~
+				</view>
+			</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>
+		<view v-if="status==1" style="padding-bottom: 20rpx;">
+			<u-divider text="全部加载完成"></u-divider>
+		</view>
+		
+		<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:{},
+				emojiIcon:'cuIcon-emoji',
+				windowWidth:0,
+				bookid:null,
+				booklistpage: 1,
+				productList:[],
+				productInfo:{},
+				pingjiaShow:false, //添加评价 
+				Pform:{ // 评价表单
+					star:0,
+					comment:'',
+					img:[],
+					html:''
+				},
+				emoji:[],
+				Files:[],
+				page:1,
+				pageSize:10,
+				total:0,
+				status:3,
+				shupingList:[],
+				bfaid:null,
+			}
+		},
+		onPullDownRefresh() {
+			console.log('下拉刷新了')
+			uni.stopPullDownRefresh(); 
+			  
+			this.booklistpage=1, // 页码			   
+			this.productList = []
+			this.getBookList()
+			   
+		},
+		onReachBottom() {
+			// this.loadingNow = true
+			this.booklistpage++
+			this.getBookList()
+			// 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.getBookList()
+		},
+		computed:{
+			...mapState(['userInfo']),
+		},
+		methods: {
+			// 查看本书更多书评
+			toMore(val){
+				console.log(val,'val')
+				uni.navigateTo({
+					url: '../comments/comments?bookid='+val.bookid,
+				});
+			},
+			// 书评详情
+			toDetail(val){
+				console.log(val,'val')
+				uni.navigateTo({
+					url:'../comments/commentsDetail?bookid='+val.bookid+'&bfa_id='+val.id
+				})
+			},
+			getBookList(){
+				// 获取商品详情
+				uni.showLoading({
+					title: '加载中'
+				});
+				this.$http
+					.post('forum/articles/desc/' + this.booklistpage)
+					.then(res => {	
+						let list = res.descupdatelist.list
+						console.log(list,'list')
+						for(let i=0; i < list.length; i++){
+							let data = {
+								'page': 1,
+								'limit': 3,
+								'bookid' : list[i].bookid
+							}
+							this.$http
+								.post('forum/articles/descupdatelist', data)
+								.then(res => {
+								// this.total = res.page.totalPage
+								// this.shupingList = this.shupingList.concat(res.page.list)
+								list[i].shupingList = res.page.list
+								console.log(res.page.list,'评论获取成功')
+								
+								console.log(list,'list')
+								this.productList.push(list[i])
+								console.log(this.productList,'productList')
+								// this.status = 3
+							}).catch((e)=>{
+									console.log(e,'e')
+								})
+						}
+						if(list.length != 2){
+							this.status = 1
+						} else {
+							this.status = 0
+						}
+						uni.hideLoading();
+					}).catch((e)=>{
+						console.log(e,'e')
+					})
+			},
+			
+			// 显示评论
+			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;}
+	.gengduoshuping{text-align: right; color: #0044ff; 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;
+
+		.imageradius{
+			border-radius: 20rpx;
+			border:1rpx solid #e9e9e9;
+		}
+		
+		.bookInfo-inner{ padding-left: 30rpx;  box-sizing: border-box;  width: calc(100% - 150px);
+			.title{font-size: 32rpx; margin-top: 0rpx; margin-bottom: 20rpx;font-weight: 700; display: block;}
+			.author{font-size: 30rpx;margin-top: 0rpx;margin-bottom: 20rpx;font-weight: 500; display: block; }
+
+			.description{
+				font-size: 28rpx;
+				line-height: 20px;
+				width: 100%;
+				color:#888;
+				padding-left: 0;
+				overflow:hidden;
+				text-overflow: ellipsis;
+				-webkit-line-clamp: 9;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+			}
+		}
+		.bookinfoimage{width: 150px !important;  }
+		
+	}
+	.mainContent{
+		background-color: #fff; 
+		.item{
+			// padding: 10px;
+			margin-bottom: 30rpx;
+			// border: 1px solid #999;
+			box-sizing: border-box;
+			padding-bottom: 20rpx;
+			border-radius: 20rpx;
+			margin-bottom: 20rpx;
+		}
+		.feng{margin:10rpx 0 0 0;height: 200rpx;width: 200rpx;float:right;border-radius: 20rpx;border:1rpx solid #e9e9e9;}
+		.title{font-size: 32rpx; font-weight: 500; 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: 5;
+			line-clamp: 5;
+			-webkit-box-orient: vertical;
+			font-size: 28rpx;
+			margin-bottom: 15px;
+			margin-top:5px;
+			min-height: 144rpx;
+		}
+		.btns{
+			font-size: 24rpx;
+			justify-content: flex-start;
+			align-items: center;
+			.time{font-size: 24rpx; color: #666; }
+			.opbtns{
+				.pingjia{margin-left: 10px;}
+			}
+		}
+	}
+	.mb30{margin-bottom: 30rpx; overflow: hidden;}
+</style>
diff --git a/pages/comments/commentsList.vue b/pages/comments/commentsList.vue
new file mode 100644
index 0000000..e2b9d71
--- /dev/null
+++ b/pages/comments/commentsList.vue
@@ -0,0 +1,847 @@
+<template>
+	<view class="container">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<view class="header">
+			<!-- 顶部导航栏 -->
+			<z-nav-bar title="书评列表"></z-nav-bar>
+			<view class="orderTabs">
+				<view v-for="(item,index) in commentsTabs" @click="commentsTabCLi(item.value)" :key="index"
+					:class="commentsListTab==item.value?'orderdefine ordStyle':'orderdefine'">{{item.name}}</view>
+			</view>
+		</view>
+		<!-- 站位 -->
+		<view class="orderTabs" style="z-index:0;position:unset;">
+			<view class="orderdefine">1</view>
+		</view>
+		<view v-if="commentsListTab == 1">
+			<view v-if="newList.length > 0">
+				<view class="bookInfo" v-for="(item,index) in newList" :key="index">
+					<view class="mainContent">
+						<view class="item" @click.stop="toDetail(item)">
+
+							<view class="title">{{item.title}}</view>
+							<image class="feng" v-if="item.bookimage" :src="item.bookimage" mode="aspectFill"></image>
+							<view class="description" v-html="item.content">
+							</view>
+							<view class="btns flexbox">
+								<span class="left">{{item.bookname}}</span>
+								<span class="right flexbox opbtns" style="color:#3c9cff;">
+									全文
+								</span>
+							</view>
+							<view class="btns flexbox" style="margin-top:10rpx;">
+								<span class="left"
+									style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
+								<span class="right flexbox opbtns">
+									<image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png"
+										mode="aspectFill" @click.stop="clickLike(item)"></image>
+									<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"
+										@click.stop="clickLike(item)"></image>
+									<view style="color: #C0C4CC;">{{item.contlike}}</view>
+									<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png"
+										mode="aspectFill"></image>
+									<view style="color: #C0C4CC;">{{item.commentNum}}</view>
+								</span>
+							</view>
+							<view style="border-bottom:2rpx solid #e9e9e9;height:50rpx;" v-if="index<item.length-1">
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="quesheng" v-else>
+				暂无书评内容~
+			</view>
+		</view>
+		<view v-if="commentsListTab == 2">
+			<view v-if="hotList.length > 0">
+				<view class="bookInfo" v-for="(item,index) in hotList" :key="index">
+					<view class="mainContent">
+						<view class="item" @click.stop="toDetail(item)">
+
+							<view class="title">{{item.title}}</view>
+							<image class="feng" v-if="item.bookimage" :src="item.bookimage" mode="aspectFill"></image>
+							<view class="description" v-html="item.content">
+							</view>
+							<view class="btns flexbox">
+								<span class="left">{{item.bookname}}</span>
+								<span class="right flexbox opbtns" style="color:#3c9cff;">
+									全文
+								</span>
+							</view>
+							<view class="btns flexbox" style="margin-top:10rpx;">
+								<span class="left"
+									style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
+								<span class="right flexbox opbtns">
+									<image class="gzicon" v-if="item.ilike" src="../../static/icon/gz2.png"
+										mode="aspectFill" @click.stop="clickLike(item)"></image>
+									<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"
+										@click.stop="clickLike(item)"></image>
+									<view style="color: #C0C4CC;">{{item.contlike}}</view>
+									<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png"
+										mode="aspectFill"></image>
+									<view style="color: #C0C4CC;">{{item.commentNum}}</view>
+								</span>
+							</view>
+							<view style="border-bottom:2rpx solid #e9e9e9;height:50rpx;" v-if="index<item.length-1">
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="quesheng" v-else>
+				暂无书评内容~
+			</view>
+		</view>
+		<view v-if="commentsListTab == 3">
+			<view class="" style="padding:40rpx 20rpx;">
+				<view class="mytabs flexbox">
+					<view :class="['item','item1', contentShow == 1 ? 'active' :'']" @click="setData(1)">
+						已购图书
+					</view>
+					<view :class="['item','item2', contentShow == 2 ? 'active' :'']" @click="setData(2)">
+						推荐图书
+					</view>
+				</view>
+			</view>
+			<view v-if="bookList.length > 0">
+				<view class="bookInfo3" v-for="(item,index) in bookList" :key="index">
+					<view class="mainContent3">
+						<view class="item">
+							<view class="btns flexbox" @click.stop="toMore(item)">
+								<view class="title">{{item.name}}</view>
+								<view class="pianshuping">{{item.forumNum}}篇书评</view>
+							</view>
+							<image class="feng" v-if="item.images" :src="item.images" mode="aspectFill"
+								@click.stop="toMore(item)"></image>
+							<view class="shupingList">
+								<view class="description" v-for="(item1,index1) in item.forums" :key="index1"
+									@click.stop="toDetail1(item1)">{{item1.title}}</view>
+							</view>
+							<view class="btns flexbox" @click.stop="toMore(item)">
+								<span class="left"></span>
+								<span class="right flexbox opbtns" style="color:#3c9cff;">
+									全部
+								</span>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="quesheng" v-else>
+				暂无书评内容~
+			</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>
+		<view v-if="status==1" style="padding-bottom: 20rpx;">
+			<u-divider text="全部加载完成"></u-divider>
+		</view>
+
+		<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,
+		mapMutations
+	} from 'vuex';
+	import {
+		checkBookRight
+	} from '@/config/utils';
+	export default {
+		data() {
+			return {
+				// loadingNow : false,
+				playData: {},
+				emojiIcon: 'cuIcon-emoji',
+				windowWidth: 0,
+				bookid: null,
+				booklistpage: 1,
+				productList: [],
+				productInfo: {},
+				pingjiaShow: false, //添加评价 
+				Pform: { // 评价表单
+					star: 0,
+					comment: '',
+					img: [],
+					html: ''
+				},
+				emoji: [],
+				Files: [],
+				page: 1,
+				pageSize: 10,
+				total: 0, // 资源的总页数1
+				status: 3,
+				shupingList: [],
+				bfaid: null,
+				commentsTabs: [{
+					name: '书集',
+					value: 3
+				}, {
+					name: '最新',
+					value: 1
+				}, {
+					name: '最热',
+					value: 2
+				}],
+				commentsListTab: 3,
+				newestpage: 1,
+				hotestpage: 1,
+				booksetpage: 1,
+				newList: [],
+				hotList: [],
+				bookList: [],
+				contentShow: 1,
+
+			}
+		},
+		onPullDownRefresh() {
+			console.log('下拉刷新了')
+			uni.stopPullDownRefresh();
+
+			this.newestpage = 1
+			this.hotestpage = 1
+			this.booksetpage = 1
+			this.newList = []
+			this.hotList = []
+			this.bookList = []
+			this.total = 0
+			this.getBookList(this.commentsListTab, false)
+
+		},
+		onReachBottom() {
+			if (this.newestpage + 1 <= this.total || this.hotestpage + 1 <= this.total || this.booksetpage + 1 <= this
+				.total) {
+				this.newestpage++
+				this.hotestpage++
+				this.booksetpage++
+				this.getBookList(this.commentsListTab, false)
+			} else {
+				this.status = 1
+			}
+
+		},
+		onLoad(e) {
+			this.windowWidth = uni.getSystemInfoSync().windowWidth;
+			console.log(e, 'onload')
+			// this.bookid = e.bookid
+			this.getBookList(3, false)
+		},
+		computed: {
+			...mapState(['userInfo']),
+		},
+		methods: {
+			...mapMutations(['setLoadingShow']),
+			setData(e) {
+				this.contentShow = e
+				this.getBookList(this.commentsListTab, true)
+			},
+			formatTimeDifferenceFromT(dateTimeT) {
+				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}`;
+					}
+				}
+			},
+			// 切换tab状态
+			commentsTabCLi(e) {
+				this.commentsListTab = e
+				this.newestpage = 1
+				this.hotestpage = 1
+				this.booksetpage = 1
+				this.total = 0
+				this.newList = []
+				this.hotList = []
+				this.bookList = []
+				this.getBookList(this.commentsListTab, false)
+			},
+			// 查看本书更多书评
+			toMore(val) {
+				// console.log(val,'val')
+				let data = {
+					'userId': this.userInfo.id,
+					'bookId': val.id
+				}
+				checkBookRight(data, res => {
+					console.log(res)
+					if (res.success) {
+						uni.navigateTo({
+							url: '../comments/comments?bookid=' + val.id,
+						});
+					} else {
+						uni.showToast({
+							title: '购买本书后方可查看此内容!',
+							icon: 'none'
+						})
+					}
+				})
+
+			},
+			// 书评详情
+			toDetail(val) {
+				// console.log(val,'val')
+				uni.navigateTo({
+					url: '../comments/commentsDetail?bookid=' + val.bookid + '&bfa_id=' + val.id
+				})
+			},
+			// 判断健全
+			toDetail1(val) {
+				// console.log(val,'val')
+				let data = {
+					'userId': this.userInfo.id,
+					'bookId': val.bookid
+				}
+				checkBookRight(data, res => {
+					console.log(res)
+					if (res.success) {
+						uni.navigateTo({
+							url: '../comments/commentsDetail?bookid=' + val.bookid + '&bfa_id=' + val.id
+						})
+					} else {
+						uni.showToast({
+							title: '购买本书后方可查看此内容!',
+							icon: 'none'
+						})
+					}
+				})
+
+			},
+			clickLike(item) {
+				this.$http
+					.post("forum/articles/chickForumContlike?forum_id=" + item.id, )
+					.then(res => {
+						if (res.code == 0) {
+							uni.showToast({
+								title: '点赞成功！',
+								icon: 'success'
+							})
+
+							item.contlike++
+						}
+					}).catch((e) => {
+						console.log(e, 'e')
+					})
+			},
+			getBookList(flag, tushuflag) {
+				// 根据tab不同，获取最新书评、最热书评、书集列表
+				// uni.showLoading({
+				// 	title: '加载中'
+				// });			
+
+				var httpurl = ""
+				if (flag == 1) {
+					httpurl = "forum/articles/getForumsNew?page=" + this.newestpage + '&limit=10'
+				} else if (flag == 2) {
+					httpurl = "forum/articles/getForumsHot?page=" + this.hotestpage + '&limit=10'
+				} else {
+					if (tushuflag) { // 点击切换已购和推荐
+						this.booksetpage = 1
+						this.bookList = []
+					}
+					if (this.contentShow == 1) {
+						httpurl = "forum/articles/getHasForumsAndBook?page=" + this.booksetpage + '&limit=10&userId=' +
+							this.userInfo.id
+					} else {
+						httpurl = "forum/articles/getBestForumsAndBook?page=" + this.booksetpage + '&limit=10&userId=' +
+							this.userInfo.id
+					}
+				}
+				this.$http
+					.post(httpurl)
+					.then(res => {
+
+						if (flag == 1) {
+							this.newList = this.newList.concat(res.page.records)
+						} else if (flag == 2) {
+							this.hotList = this.hotList.concat(res.page.records)
+						} else {
+							this.bookList = this.bookList.concat(res.page.records)
+						}
+						this.total = res.page.pages
+						console.log(this.newList, 'this.newList')
+						// let list = res.page.records
+						// console.log(list,'list')
+						// for(let i=0; i < list.length; i++){
+						// 	let data = {
+						// 		'page': 1,
+						// 		'limit': 3,
+						// 		'bookid' : list[i].bookid
+						// 	}
+						// 	this.$http
+						// 		.post('forum/articles/descupdatelist', data)
+						// 		.then(res => {
+						// 		// this.total = res.page.totalPage
+						// 		// this.shupingList = this.shupingList.concat(res.page.list)
+						// 		list[i].shupingList = res.page.list
+						// 		console.log(res.page.list,'评论获取成功')
+
+						// 		console.log(list,'list')
+						// 		this.productList.push(list[i])
+						// 		console.log(this.productList,'productList')
+						// 		// this.status = 3
+						// 	}).catch((e)=>{
+						// 			console.log(e,'e')
+						// 		})
+						// }
+						// if(res.page.records.length != 10){
+						// 	this.status = 1
+						// } else {
+						this.status = 0
+						// }						
+						// uni.hideLoading();
+					}).catch((e) => {
+						console.log(e, 'e')
+					})
+			},
+
+			// 显示评论
+			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>
+	// @import '@/style/mixin.scss';
+	.orderTabs {
+		// margin: 70rpx 0 0 0;
+		width: 100%;
+		// padding: 0 3% 3% 3%;
+		position: fixed;
+		// top: 80rpx;
+		background-color: #f7faf9;
+		z-index: 100;
+
+		.orderdefine {
+			display: inline-block;
+			padding: 20rpx 0 20rpx 0;
+			// margin: 40rpx 0 15rpx 0;
+			width: 230rpx;
+			text-align: center;
+			font-size: 30rpx;
+		}
+
+		.ordStyle {
+			// border-bottom: 4rpx solid #54a966;
+			// color: #54a966;
+			font-weight: bold;
+		}
+	}
+
+
+	.flexbox {
+		display: flex;
+	}
+
+	.container {
+		padding: 0 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;
+	}
+
+	.gengduoshuping {
+		text-align: right;
+		color: #0044ff;
+		padding-bottom: 20rpx;
+		padding-top: 20rpx;
+	}
+
+	.bookInfo {
+		justify-content: space-between;
+		// margin-bottom: 15px;
+		background-color: #fff;
+		padding: 20rpx;
+		border: 1px splid #999;
+		box-sizing: border-box;
+		// padding-bottom: 20rpx;
+		border-radius: 20rpx;
+		margin-bottom: 20rpx;
+
+		// .imageradius{
+		// 	border-radius: 20rpx;
+		// 	border:1rpx solid #e9e9e9;
+		// }
+
+		// .bookInfo-inner{ padding-left: 30rpx;  box-sizing: border-box;  width: calc(100% - 150px);
+		// 	.title{font-size: 32rpx; margin-top: 0rpx; margin-bottom: 20rpx;font-weight: 700; display: block;}
+		// 	.author{font-size: 30rpx;margin-top: 0rpx;margin-bottom: 20rpx;font-weight: 500; display: block; }
+
+		// 	.description{
+		// 		font-size: 28rpx;
+		// 		line-height: 20px;
+		// 		width: 100%;
+		// 		color:#888;
+		// 		padding-left: 0;
+		// 		overflow:hidden;
+		// 		text-overflow: ellipsis;
+		// 		-webkit-line-clamp: 9;
+		// 		display: -webkit-box;
+		// 		-webkit-box-orient: vertical;
+		// 	}
+		// }
+		// .bookinfoimage{width: 150px !important;  }
+
+	}
+
+	.mainContent {
+		background-color: #fff;
+
+		.item {
+			// padding: 10px;
+			// margin-bottom: 30rpx;
+			// border: 1px solid #999;
+			box-sizing: border-box;
+			// padding-bottom: 20rpx;
+			border-radius: 20rpx;
+			// margin-bottom: 20rpx;
+		}
+
+		.feng {
+			margin: 10rpx 20rpx 0 0;
+			height: 160rpx;
+			width: 140rpx;
+			float: left;
+			border-radius: 20rpx;
+			border: 1rpx solid #e9e9e9;
+		}
+
+		.title {
+			font-size: 30rpx;
+			font-weight: 700;
+			color: #000;
+			overflow: hidden;
+		}
+
+		/deep/.description {
+			overflow: hidden;
+			color: #666;
+			text-overflow: -o-ellipsis-lastline;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: -webkit-box;
+			-webkit-line-clamp: 5;
+			line-clamp: 5;
+			-webkit-box-orient: vertical;
+			font-size: 26rpx;
+			margin-bottom: 20rpx;
+			margin-top: 10rpx;
+			line-height: 34rpx;
+			height: calc(5 * 34rpx);
+
+			img {
+				width: 100% !important;
+			}
+		}
+
+		.btns {
+			font-size: 22rpx;
+			justify-content: space-between;
+			align-items: center;
+
+			.left {
+				width: 300rpx;
+				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;
+				}
+			}
+		}
+	}
+
+	.mb30 {
+		margin-bottom: 30rpx;
+		overflow: hidden;
+	}
+
+	.bookInfo3 {
+		justify-content: space-between;
+		// margin-bottom: 15px;
+		background-color: #fff;
+		padding: 20rpx;
+		border: 1px splid #999;
+		box-sizing: border-box;
+		// padding-bottom: 20rpx;
+		border-radius: 20rpx;
+		margin-bottom: 20rpx;
+
+		.mainContent3 {
+			background-color: #fff;
+
+			.item {
+				// padding: 10px;
+				// margin-bottom: 30rpx;
+				// border: 1px solid #999;
+				box-sizing: border-box;
+				// padding-bottom: 20rpx;
+				border-radius: 20rpx;
+				// margin-bottom: 20rpx;
+			}
+
+			.feng {
+				margin: 10rpx 20rpx 0 0;
+				height: 240rpx;
+				width: 164rpx;
+				float: left;
+				border-radius: 20rpx;
+				border: 1rpx solid #e9e9e9;
+			}
+
+			.title {
+				font-size: 30rpx;
+				font-weight: 700;
+				color: #000;
+				overflow: hidden;
+			}
+
+			.pianshuping {
+				font-size: 24rpx;
+				color: red;
+			}
+
+			.shupingList {
+				min-height: 212rpx;
+			}
+
+			/deep/.description {
+				overflow: hidden;
+				color: #666;
+				text-overflow: -o-ellipsis-lastline;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-line-clamp: 1;
+				line-clamp: 1;
+				-webkit-box-orient: vertical;
+				font-size: 26rpx;
+				margin-bottom: 20rpx;
+				margin-top: 10rpx;
+
+				img {
+					width: 100% !important;
+				}
+			}
+
+			.btns {
+				font-size: 22rpx;
+				justify-content: space-between;
+				align-items: center;
+
+				.left {
+					width: 300rpx;
+					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;
+					}
+				}
+			}
+		}
+	}
+
+	.mytabs {
+		// background: url('@/static/icon/bgtushu.png') no-repeat left top;
+		height: 80rpx;
+		// margin-bottom: 30rpx;
+
+		.item {
+			border-radius: 10rpx;
+			background-color: #c6ead0;
+			width: 48%;
+			// margin: 0 10rpx;
+			text-align: center;
+			color: #3c7f56;
+			font-size: 36rpx;
+			line-height: 80rpx;
+		}
+
+		.item.active {
+			background-color: #3c7f56;
+			color: #fff;
+		}
+
+		.item1 {
+			margin-right: 20rpx;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/component/commonComponents/advertisement.vue b/pages/component/commonComponents/advertisement.vue
new file mode 100644
index 0000000..d8c98b7
--- /dev/null
+++ b/pages/component/commonComponents/advertisement.vue
@@ -0,0 +1,251 @@
+<template>
+  <view
+    class="container commonPageBox commonDetailPage"
+    style="height: auto !important; padding-bottom: 0 !important"
+  >
+    <u-popup :show="show" v-if="show" mode="center" class="popup_box">
+      <div class="product_image" scroll-y="true" style="position: relative">
+       
+        <swiper
+          :style="{ height: fullHeight }"
+          class="swiper-tall"
+          :indicator-dots="indicatorDots"
+          :autoplay="autoplay"
+          :previous-margin="previousMargin"
+          :next-margin="nextMargin"
+          :circular="circular"
+          @change="change"
+          :current="swiperCurrentIndex"
+        >
+          <swiper-item
+            class="swiper-container"
+            v-for="(img, index) in list"
+            :key="index"
+            :item-id="index"
+            :data-year="index"
+          >
+            <view
+            @click="gotoDetail(img)"
+              class="swiper-item"
+              :style="{
+                background: img ? 'url(' + img.icon + ') center no-repeat' : '',
+                backgroundSize: '100% 100%',
+              }"
+              :animation="animationData[index]"
+            >
+            </view>
+          </swiper-item>
+        </swiper>
+        <view style="display: flex;align-items: center;justify-content: center;">
+           <view @click="close" style="font-weight: bold;background-color: rgba(255, 255, 255, 0.8); color: #333;padding:20rpx 10rpx;width: 200rpx;font-size: 30rpx;border-radius: 40rpx;text-align: center;letter-spacing: 0.5rpx;">
+        关闭
+      </view>
+        </view>
+     
+      
+      </div>
+    </u-popup></view
+  >
+</template>
+
+<script>
+const stopPenetrate = () => {
+  return;
+};
+import { mapState } from "vuex";
+export default {
+  props: ["list"],
+  data() {
+    return {
+      screenHeight: 0,
+      animationData: {
+        0: {},
+        1: {},
+        2: {},
+      },
+      title: "0",
+      indicatorDots: false,
+      autoplay: false,
+      previousMargin: uni.upx2px(82) + "px",
+      nextMargin: uni.upx2px(82) + "px",
+      circular: true,
+      zoomParam: 1.1,
+      swiperCurrentIndex: 0,
+      data: [],
+      max: 0,
+      show: false,
+    };
+  },
+  onShow() {
+    this.show = false;
+  },
+  onLoad() {},
+  onHide() {
+    // this.showSearchList = false
+    // this.searchList = []
+  },
+  computed: {
+    ...mapState(["userInfo"]),
+
+    fullHeight() {
+      const res = uni.getSystemInfoSync();
+      return (
+        res.windowHeight - uni.upx2px(60) - (res.statusBarHeight + 44) + "px"
+      );
+    },
+  },
+  methods: {
+    gotoDetail(v) {
+      console.log("v at line 58:", v);
+      if (v.relationId) {
+        if (v.type == 0) {
+          if (v.shopProduct) {
+            uni.navigateTo({
+              url: `/pages/bookShop/commodityDetail?id=${v.shopProduct.productId}`,
+            });
+          }
+        }
+      }
+      if (v.type == 1) {
+        uni.navigateTo({
+          url: `/pages/peanut/reCharge`,
+        });
+      }
+
+
+      // if (v.type == 2) {
+      //   uni.navigateTo({
+      //     url: `/pages/mine/vip/index`,
+      //   });
+      // }
+
+      this.show = false;
+    },
+    // 放大图片
+    previewImage(url) {
+      console.log(url);
+      uni.previewImage({
+        urls: [url],
+        longPressActions: {
+          itemList: ["很抱歉，暂不支持保存图片到本地"],
+          success: function (res) {
+            // console.log(res,'+++++')
+          },
+        },
+      });
+    },
+    change(e) {
+      this.swiperCurrentIndex = e.detail.current;
+      this.title = e.detail.currentItemId;
+      for (let key in this.animationData) {
+        if (e.detail.currentItemId == key) {
+          this.animation.scale(this.zoomParam).step();
+          this.animationData[key] = this.animation.export();
+        } else {
+          this.animation.scale(1.0).step();
+          this.animationData[key] = this.animation.export();
+        }
+      }
+    },
+    close() {
+      this.show = false;
+    },
+    selectGoods(data) {
+      this.$emit("selectGoods", data);
+    },
+    open() {
+      this.animation = uni.createAnimation();
+      this.animation.scale(this.zoomParam).step();
+      this.animationData[0] = this.animation.export();
+      this.show = true;
+    },
+
+    onHandleClickBuy() {
+      this.$emit("selectGoodsData", this.selectGoodsData);
+      this.$emit("onHandleClickBuy");
+    },
+  },
+  onBackPress() {
+    // #ifdef APP-PLUS
+    plus.key.hideSoftKeybord();
+    // #endif
+  },
+
+  components: {},
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/mixin.scss";
+
+.goods_image {
+  width: 70vw;
+}
+
+.popup_box {
+  padding-top: 30rpx;
+
+  background-color: transparent;
+
+  .popup_content {
+    padding-bottom: 140rpx;
+  }
+  /deep/.list_item {
+    // border-bottom: none;
+
+    border: none !important;
+    box-shadow: none !important;
+  }
+
+  .product_image {
+    width: 100vw;
+
+    max-height: 90vh;
+  }
+}
+/deep/.u-popup__content {
+  background-color: transparent !important;
+}
+/deep/.u-popup__content__close {
+  color: #fff !important;
+}
+.title_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 0;
+  .title_price {
+    color: #ef1224;
+    font-size: 40rpx;
+    font-weight: 700;
+  }
+}
+.swiper-container {
+  display: flex;
+  align-items: center;
+}
+
+.swiper-item {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  height: 858upx;
+  width: 530upx;
+  line-height: 300upx;
+  text-align: center;
+  broder-radius: 6upx;
+  margin-bottom: 50upx;
+}
+
+.swiper-tall {
+  display: flex;
+  align-items: center;
+}
+
+.swiper-title {
+  width: 750upx;
+  text-align: center;
+}
+</style>
diff --git a/pages/component/commonComponents/coupon/index.vue b/pages/component/commonComponents/coupon/index.vue
new file mode 100644
index 0000000..6240537
--- /dev/null
+++ b/pages/component/commonComponents/coupon/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <view>
+    <view v-for="(item, index) in List" :key="index">
+      <view :class="`youhuiItem ${itemClass}`">
+        <view class="centerbg">
+          <view class="centerView" style="position: relative"
+            ><text
+              v-if="source == 'mine'"
+              class="border_radius_10"
+              style="
+                position: absolute;
+                right: 10rpx;
+                top: 10rpx;
+                font-size: 25rpx;
+                /* background-color: #fad4bd; */
+                color: #ed2a2e;
+              "
+              >{{ item.couponEntity.couponRange | couponType }}</text
+            >
+            <view style="color: #fd4347; width: 200rpx">
+              <view
+                style="position: relative; border-right: 1px dashed #fa8277"
+              >
+                <text
+                  style="
+                    font-weight: 700;
+                    font-size: 40rpx;
+                    position: absolute;
+                    top: 20rpx;
+                    left: 0rpx;
+                  "
+                  >￥</text
+                >
+                <text
+                  style="
+                    font-size: 64rpx;
+                    letter-spacing: 0.1px;
+                    font-weight: 700;
+                    margin-left: 40rpx;
+                  "
+                  >{{ item.couponEntity.couponAmount }}</text
+                >
+                <text
+                  v-if="source == 'mine'"
+                  style="
+                    display: block;
+                    color: #333;
+                    font-size: 25rpx;
+                    margin-left: 0rpx;
+                    margin-top: 0rpx;
+                  "
+                  >满{{ item.couponEntity.useLevel }}元可用</text
+                >
+              </view>
+            </view>
+            <view style="width: calc(100% - 220rpx)">
+              <view>
+                <view
+                  style="color: #fd4347; font-size: 44rpx; font-weight: bold;"
+                  >{{
+                    item.couponEntity.couponType == 0 ? "现金" : "折扣"
+                  }}优惠券
+                  
+                  
+                  <!-- <text v-if="source == 'mine'"  style="box-sizing: border-box;padding:4rpx 20rpx;margin-left: 10rpx;font-size: 24rpx;background-color: #fff;border-radius: 24rpx;float: right;">去使用</text> -->
+                  
+                  
+                  
+                  
+                  </view
+                >
+
+                
+                <text
+                  v-if="source != 'goodsDetail'"
+                  style="
+                    display: block;
+                    font-size: 24rpx;
+                    color: #333;
+                    margin-top: 10rpx;
+                  "
+                  >有效期至：{{
+                    item.effectType == 0 ? "永久有效" : item.endTime
+                  }}</text
+                >
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view class="bottombg">
+          <view
+            style="
+              width: 100%;
+              padding: 16rpx 20rpx;
+              box-sizing: border-box;
+
+              margin-right: 6rpx;
+              position: absolute;
+              bottom: 0rpx;
+              text-align: center;
+            "
+          >
+            <view
+              class="title"
+              style="
+                line-height: 34rpx;
+                margin-bottom: 10rpx;
+                color: #fff;
+                font-size: 34rpx;
+                font-weight: bold;
+              "
+            >
+              {{ item.couponEntity.couponName }}
+            </view>
+            <view
+              v-if="item.couponEntity.remark"
+              style="
+                position: absolute;
+                right: 10rpx;
+                bottom: 10rpx;
+                display: flex;
+                align-items: center;
+
+                font-size: 22rpx;
+                color: #fafafa;
+              "
+            >
+              <!-- 详细信息
+                  <u-icon
+                    size="20rpx"
+                    color="#fafafa"
+                    style="color: #fafafa; float: right;margin-left: 4rpx;"
+                    name="arrow-down-fill"
+                  ></u-icon> -->
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <u-collapse
+        v-if="source != 'goodsDetail'&&item.couponEntity.remark"
+        style="
+          margin-top: 0rpx;
+          z-index: 10 !important;
+          background-color: #fafafa;
+          border-bottom-left-radius: 10rpx;
+          border-bottom-right-radius: 10rpx;
+        "
+        :border="false"
+      >
+        <u-collapse-item title="详细信息" name="Docs guide">
+          <view
+            style="
+              font-size: 22rpx;
+              width: 100%;
+              margin-right: 20rpx !important;
+            "
+            >使用说明：{{ item.couponEntity.remark }}</view
+          >
+        </u-collapse-item>
+      </u-collapse>
+    </view>
+  </view>
+</template>
+
+<script>
+import $http from "@/config/requestConfig.js";
+import { mapState } from "vuex";
+export default {
+  props: ["List", "source", "itemClass"],
+  data() {
+    return {};
+  },
+
+  filters: {
+    couponType(type) {
+      // 0无限制 1课程卷 2课程品类卷
+      var str = "";
+      switch (type) {
+        case 0:
+          str = "全场通用";
+          break;
+        case 1:
+          str = "指定课程可用";
+          break;
+        case 2:
+          str = "指定课程品类可用";
+          break;
+      }
+      return str;
+    },
+  },
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.youhuiItem {
+  min-height: 320rpx;
+  position: relative;
+  background: linear-gradient(to top right, #fd4c50, #fe393d);
+
+  border: 1px solid #d9d9d9;
+  border-radius: 10rpx;
+  width: 100%;
+
+  padding: 26rpx;
+  margin: 25rpx 0 0 0;
+  align-items: center;
+  background-color: #fff;
+  font-size: 30rpx;
+}
+
+.centerbg {
+  width: 100%;
+  background-image: linear-gradient(60deg, #ffefd3 0%, #f8be85 100%);
+
+  height: calc(100%);
+  border-radius: 10rpx;
+  padding-bottom: 86rpx;
+
+  box-sizing: border-box;
+}
+
+.centerView {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: 30rpx 20rpx 0 40rpx;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bottombg {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  right: 0;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  background-image: url("@/static/icon/coupon/bottom.png") !important;
+}
+
+.youhuiItem > view {
+}
+
+.youhuiItem.youItem_style {
+  border-color: #fd6004;
+}
+
+::v-deep .u-cell__body {
+  padding-top: 0 !important ;
+  padding-bottom: 0 !important ;
+  z-index: 10 !important ;
+  .u-cell__title-text {
+    color: #333 !important;
+    font-size: 24rpx !important;
+  }
+}
+
+::v-deep .u-collapse-item__content__text {
+  padding: 10rpx 20rpx !important;
+  box-sizing: border-box;
+}
+
+::v-deep.itemCouponClass {
+  min-height: 180rpx !important;
+  .bottombg {
+    .title {
+      font-size: 26rpx !important;
+    }
+  }
+  .centerbg {
+    padding-bottom: 60rpx !important;
+  }
+}
+</style>
diff --git a/pages/component/commonComponents/list.vue b/pages/component/commonComponents/list.vue
new file mode 100644
index 0000000..e9068a3
--- /dev/null
+++ b/pages/component/commonComponents/list.vue
@@ -0,0 +1,159 @@
+<template>
+   
+  <view style="width: 100%; height: 100%">
+    <view v-if="axiosStatus != ''">
+      <scroll-view
+        @scrolltolower="lower"
+        scroll-y="true"
+        class="scroll-Y"
+        v-if="dataList && dataList.length > 0"
+        style="height: 100%"
+      >
+        <view
+          @click="gotoDetail(item, index)"
+          class="scroll-view-item list_item"
+          v-for="(item, index) in dataList"
+          :key="indexKey ? item[indexKey] : item.id"
+          :index="indexKey ? item[indexKey] : index"
+        >
+          <view :class="['titleItem', '']">
+            <slot name="leftSlot" :row="item" :item="item" :index="index">
+            </slot>
+
+            <template v-if="isCondition">
+              <slot name="labelSlot" :row="item" :rowIndex="index"></slot>
+            </template>
+            <template v-else>
+              {{ item[label] }}
+            </template>
+
+            <slot name="rightSlot" :row="item" :rowIndex="index"></slot>
+          </view>
+          <image
+            v-if="!isNoIcon"
+            src="@/static/icon/icon_right.png"
+            class="rightArrow"
+            style=""
+          ></image>
+        </view>
+      </scroll-view>
+      <u-empty
+        v-else-if="noDataIcon && isLoadingHide"
+        :mode="noDataIcon"
+        :icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
+      >
+      </u-empty>
+      <u-divider style="width: 100%" v-else text="暂无数据哦~"></u-divider>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  props: [
+    "indexKey",
+    "dataList",
+    "label",
+    "isCondition",
+    "isNoIcon",
+    "pagination",
+    "noDataIcon",
+    "isLoadingHide",
+    "axiosStatus",
+  ],
+  data() {
+    return {
+      status: "",
+    };
+  },
+  onLoad() {},
+  onShow() {
+    this.status = "";
+  },
+  onHide() {
+    // this.showSearchList = false
+    // this.searchList = []
+  },
+  computed: {
+    ...mapState(["userInfo"]),
+  },
+  methods: {
+    lower() {
+      this.$emit("lower");
+    },
+    gotoDetail(data, index) {
+      this.$emit("hancleClick", data, index);
+    },
+  },
+  onBackPress() {
+    // #ifdef APP-PLUS
+    plus.key.hideSoftKeybord();
+    // #endif
+  },
+  components: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.list_item {
+  width: 100%;
+  padding: 20rpx;
+  font-size: 30rpx;
+  box-sizing: border-box;
+  border-bottom: 1rpx solid #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.list_item :last-child(1) {
+  border-bottom: none;
+}
+
+.scroll-view-item:nth-child(2n-1) {
+  background-color: #f5f5f5 !important;
+}
+
+.rightArrow {
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.scroll-Y {
+  height: 100%;
+}
+
+.scroll-view_H {
+  white-space: nowrap;
+  width: 100%;
+}
+
+.scroll-view-item {
+  // height: 300rpx;
+  // line-height: 300rpx;
+  // text-align: center;
+  // font-size: 36rpx;
+}
+
+.scroll-view-item_H {
+  display: inline-block;
+  width: 100%;
+  // height: 300rpx;
+  // line-height: 300rpx;
+  // text-align: center;
+  // font-size: 36rpx;
+}
+
+.titleItem {
+  width: calc(100%) !important;
+}
+
+/deep/.scroll-view-item:nth-child(2n-1) {
+  background-color: transparent !important;
+}
+
+.list_item:last-child {
+  border-bottom: none !important;
+}
+</style>
diff --git a/pages/peanut/mine.vue b/pages/peanut/mine.vue
index 660606a..ded9e22 100644
--- a/pages/peanut/mine.vue
+++ b/pages/peanut/mine.vue
@@ -1,5 +1,5 @@
 <template>
-  <view style="padding: 0 40rpx; font-size: 28upx">
+  <view style="padding: 0 20rpx; font-size: 28upx">
     <!-- 公共组件-每个页面必须引入 -->
     <public-module></public-module>
     <view style="height: 50rpx"></view>
diff --git a/pages/user/persCount.vue b/pages/user/persCount.vue
index cb51a69..b08eb50 100644
--- a/pages/user/persCount.vue
+++ b/pages/user/persCount.vue
@@ -285,7 +285,7 @@
 	@import '@/style/mixin.scss';
 
 	.ACTable {
-		padding: 20rpx 30rpx;
+		padding: 20rpx;
 
 		.AC_mes {
 			margin-top: 50rpx;
@@ -309,10 +309,9 @@
 		}
 
 		.AC_con {
-			padding: 20rpx;
 			box-shadow: 0 0px 10px 1px #d3d1d133;
 			background-color: #fff;
-			border-radius: 15rpx;
+			border-radius: 0 0 15rpx 15rpx;
 			margin-bottom: 40rpx;
 			font-size: 30rpx;
 
@@ -320,19 +319,22 @@
 				font-size: 42rpx;
 				text-align: left;
 				color: $themeColor;
-				padding: 20rpx 0;
+				padding: 30rpx 20rpx 20rpx;
 			}
 
 			.AC_List {
 				overflow: hidden;
+				padding: 20rpx;
+				border-bottom: 1rpx solid #e0e0e0;
 
 				.AC_title {
 					font-size: 32rpx;
+					font-weight: bold;
 
 					view {
 						float: right;
 						font-size: 34rpx;
-						font-weight: bold;
+						color: #11a669;
 					}
 				}
 
diff --git a/pages/user/points.vue b/pages/user/points.vue
index ebcec05..873761b 100644
--- a/pages/user/points.vue
+++ b/pages/user/points.vue
@@ -380,7 +380,7 @@ export default {
   }
 }
 .Hot {
-  color: #333 !important;
+  color: #11a669 !important;
   font-size: 32rpx;
   font-weight: bold;
 }