引入日历前

App.vue

@@ -19,24 +19,32 @@ export default {
 				Vue.prototype.winHeight=res.screenHeight
 			}
 		})
+		
 		// 取出播放列表
 		uni.getStorage({
 			key: 'playData',
 			success: function (res) {
 				console.log(res.data,'取出的本地数据');
-				music.setList(res.data.myList)
+				if(res.data.myList.length<=0){
+					store.commit('setUserInfo',{'playVisible': false})	
+				}else{
+				   music.setList(res.data.myList,'',store.state.userInfo.playIndex)
 				// music.setCoverImg(res.data.fengImg)
-				store.commit('setUserInfo',res.data)
+					store.commit('setUserInfo',res.data)				
+				}
 				store.commit('setUserInfo',{'playFlag': false});  // 设置播放按钮状态为暂停
 				store.commit('setUserInfo',{'currentTime': 0});
+				
 			},
 			fail:function(e){ 
 				console.log('本地无数据');
 				music.setList([])
+				store.commit('setUserInfo',{'playingInfo': {'bookid':0,'chapterId':0}});
+				store.commit('setUserInfo',{'playVisible': false})	
 				// music.setCoverImg('../../static/icon/x1.jpg')
 				store.commit('setUserInfo',{
 					'myList':[],
-					'fengImg':'../../static/icon/x1.jpg'
+					'fengImg':'../../static/icon/fengziIcon.jpg'
 				})
 				store.commit('setUserInfo',{'playFlag': false});
 				store.commit('setUserInfo',{'currentTime': 0});

bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue

@@ -80,7 +80,8 @@
 				const list = Array.from({length:100}, (v,k) => k)
 				let index = list.indexOf(res)
 			//	return `<img src="https://maishijie.com.cn/view/img/bkhumor-emoji/${index}.gif" align="middle">`
-				return `<img src="https://www.nuttyreading.com/emojis/emojis/qq/${res}" width="24px" align="middle">`
+				// return `<img src="https://www.nuttyreading.com/emojis/emojis/qq/${res}" width="24px" align="middle">`
+				return "https://www.nuttyreading.com/emojis/emojis/qq/"+res
 				
 				
 			}

components/z-navigation/z-navigation.vue

@@ -33,10 +33,10 @@
 						text: '首页'
 					},
 					{
-						pagePath: 'pages/peanut/shopping',
+						"pagePath": "pages/library/library",
-						iconPath: 'static/tab/icon2_n.png',
+						"iconPath": "static/tab/icon3_n.png",
-						selectedIconPath: 'static/tab/icon2_y.png',
+						"selectedIconPath": "static/tab/icon3_y.png",
-						text: '购物车'
+						"text": "我的图书"
 					},
 					// {
 					// 	pagePath: 'pages/peanut/bookshelf',
@@ -46,8 +46,8 @@
 					// },
 					{
 						pagePath: 'pages/bookShop/orderList',
-						iconPath: 'static/tab/icon3_n.png',
+						iconPath: 'static/tab/icon2_n.png',
-						selectedIconPath: 'static/tab/icon3_y.png',
+						selectedIconPath: 'static/tab/icon2_y.png',
 						text: '我的订单'
 						
 					},

pages.json

@@ -352,6 +352,60 @@
             }
             
         }
+        ,{
+            "path" : "pages/listen/listenNotBuy",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "未购买的详情",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/comments/comments",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "书评1",
+                "enablePullDownRefresh": true
+            }
+            
+        }
+        ,{
+            "path" : "pages/comments/commentsDetail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "书评详情1",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/bookShop/settlementBook",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "book购买1",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/library/library",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "我的图书",
+                "enablePullDownRefresh": true
+            }
+            
+        }
+        ,{
+            "path" : "pages/clock/clock",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "读书打卡",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
@@ -373,11 +427,17 @@
 				"selectedIconPath": "static/tab/icon1_y.png",
 				"text": "首页"
 			},
+			// {
+			// 	"pagePath": "pages/peanut/shopping",
+			// 	"iconPath": "static/tab/icon2_n.png",
+			// 	"selectedIconPath": "static/tab/icon2_y.png",
+			// 	"text": "购物车"
+			// },
 			{
-				"pagePath": "pages/peanut/shopping",
+				"pagePath": "pages/library/library",
-				"iconPath": "static/tab/icon2_n.png",
+				"iconPath": "static/tab/icon3_n.png",
-				"selectedIconPath": "static/tab/icon2_y.png",
+				"selectedIconPath": "static/tab/icon3_y.png",
-				"text": "购物车"
+				"text": "我的图书"
 			},
 			// {
 			// 	"pagePath": "pages/peanut/bookshelf",
@@ -387,15 +447,15 @@
 			// },
 			{
 				"pagePath": "pages/bookShop/orderList",
-				"iconPath": "static/tab/icon3_n.png",
+				"iconPath": "static/tab/icon2_n.png",
-				"selectedIconPath": "static/tab/icon3_y.png",
+				"selectedIconPath": "static/tab/icon2_y.png",
 				"text": "我的订单"
 			},
 			{
 				"pagePath": "pages/peanut/mine",
 				"iconPath": "static/tab/icon4_n.png",
 				"selectedIconPath": "static/tab/icon4_y.png",
-				"text": "我的"
+				"text": "我"
 			}
 		]
 	},

pages/bookShop/bookShopType.vue

@@ -41,10 +41,12 @@
 		<view style="padding-bottom: 20rpx;">
 			<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
 		</view>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	import {
 		mapState
@@ -52,6 +54,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				scrollTop: 0,
 				status: 3,
 				shopScreen: {
@@ -130,6 +133,9 @@
 		computed: {
 			...mapState(['userInfo']),
 		},
+		components: {
+			musicPlay
+		},
 		//方法
 		methods: {
 			// 获取列表数据

pages/bookShop/classify.vue

@@ -62,10 +62,12 @@
 		<view>
 			<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
 		</view>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	import {
 		mapState
@@ -73,6 +75,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				highlight: '', // 高亮下标
 				current: 0,
 				twocurrent:0,
@@ -116,6 +119,9 @@
 		      this.utabs = true
 		    }, 200)
 		},
+		components: {
+			musicPlay
+		},
 		methods: {
 			onPageScroll(e) {
 				this.scrollTop = e.scrollTop;

pages/bookShop/classifyAll.vue

@@ -7,14 +7,17 @@
 				<text>{{item.name}}</text>
 			</view>
 		</view>
+		<music-play :playData="playData"></music-play>
 	</view>
 
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	export default {
 		data() {
 			return {
+				playData:{},
 				oneLevel: [],
 			}
 		},
@@ -33,6 +36,9 @@
 					this.oneLevel = arr
 				})
 		},
+		components: {
+			musicPlay
+		},
 		methods: {
 			// 点击分类跳转
 			getTowLevel(e) {

pages/bookShop/commodityDetail.vue

@@ -27,6 +27,12 @@
 			</view>
 			<!-- 详情 + 评价1 -->
 			<view v-if="contentShow == 0">
+				<!-- <view class="tingshuList">
+					<h4>赠送内容：</h4>
+					<view class="item flexbox">
+						<text>中医免疫学</text><u-icon name="volume" color="#71d5a1" size="24">立即试听</u-icon>
+					</view>
+				</view> -->
 			<view class="bookInfo" >
 				<u-row customStyle="margin-bottom: 10px">
 					<u-col ><span>书名：{{productInfo.productName}}</span></u-col>					
@@ -65,8 +71,32 @@
 							<text class="username nowrap ">{{item.name}}</text>
 						</view>
 						<view class="contentBox">
-							<view class="content" v-html="item.content"></view>
+							<view class="mb30">
-							<text class="time">2023-07-28</text>
+								<span :class="['star',item.starlevel >= 1 ? 'starLight':'starGray']"></span>
+								<span :class="['star',item.starlevel >= 2 ? 'starLight':'starGray']"></span>
+								<span :class="['star',item.starlevel >= 3 ? 'starLight':'starGray']"></span>								
+								<span :class="['star',item.starlevel >= 4 ? 'starLight':'starGray']"></span>								
+								<span :class="['star',item.starlevel >= 5 ? 'starLight':'starGray']"></span>
+							</view>
+							
+							<div class="pjimgs flexbox">
+								<view class="item" v-for="(item1,index) in item.images">
+									<image v-if="item1.length > 10" @click="previewImage(item1)"  :src="item1" mode="aspectFill" style="width:100%; height: 50px;"></image>
+								</view>	
+								
+							</div>
+							<view class="content" v-html="item.phtml"></view>
+							<text class="time">{{item.createdate}}</text>
+						</view>						
+					</view>
+					<!-- 显示追平 -->
+					<view class="zhuiping item" v-if="item.zphtml != ''" style="padding-left: 50px;">
+						<h5 style="color: #dbdbdb; margin:10px;">追评内容：</h5>
+						<view class="flexbox">							
+							<view class="contentBox">
+								<view class="content" v-html="item.zphtml"></view>
+								<text class="time">{{item.followUpdate}}</text>
+							</view>						
 						</view>
 					</view>
 				</view>
@@ -79,10 +109,13 @@
 		</view>
 		<uni-goods-nav class="goods_nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
 			@buttonClick="buttonClick" />
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
+	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
 	import $http from '@/config/requestConfig.js';
 	import {
 		mapState
@@ -91,6 +124,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				contentShow:0,
 				options: [{
 					icon: 'cart',
@@ -111,7 +145,7 @@
 						name: '商品详情'
 					},
 					{
-						name: '商品评论'
+						name: '商品评价'
 					}
 				],
 				// 轮播图数据
@@ -128,11 +162,38 @@
 			this.productId = e.id
 			this.getProDetail(e)			
 			this.getComments()
+			// console.log(emojiList1,'emojiList1')
 		},
 		computed: {
 			...mapState(['userInfo']),
 		},
+		components: {
+			musicPlay
+		},
 		methods: {
+			// 放大图片
+			previewImage(url){
+				console.log(url)
+				uni.previewImage({
+					urls: [url]
+				});
+			},
+			// 获取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>');
+				       
+						
+			},
 			// 获取评价
 			getComments(){					
 					$http.request({
@@ -146,9 +207,34 @@
 						},
 					})
 					.then(res => {						
-						console.log(res,'评价')
 						if(res.code == 0){
-							this.commentsList = res.list
+							console.log(res.list, 'res.list')
+							this.commentsList = res.list.map(item => {
+								var imgList = []
+								if(item.images !== null){
+									imgList = item.images.split(',')
+									item.images = imgList
+									return item
+								}else {
+									return item
+								}								
+							})
+							// 评论格式化							
+							var newarr = []
+							this.commentsList.forEach((item1)=>{	
+								   var pjstr = ''
+								   var zpstr = ''
+									pjstr = this.getHtmlComment(item1.content)
+									item1.followUpcontent == '' ? zpstr = '' : zpstr = this.getHtmlComment(item1.followUpcontent)									
+									//console.log(pjstr,'99999999999----------')
+									 item1.phtml = pjstr
+									 item1.zphtml = zpstr
+									 newarr.push(item1)
+							
+							})
+							this.commentsList = newarr
+							// console.log(this.commentsList,'评价+++++')							
+							// this.commentsList = res.list
 						}
 					})
 			},
@@ -157,6 +243,7 @@
 				uni.showLoading({
 					title: '加载中'
 				});		
+				console.log(e.id,'e.id')	
 				this.$http
 					.post('/book/shopproduct/info/' + e.id)
 					.then(res => {					
@@ -367,6 +454,17 @@ formatRichText (html) { //控制小程序中图片大小
 	}
 </script>
 <style lang="scss" scoped>
+	.tingshuList{margin-top: 20rpx;
+	}
+	.pjimgs{ margin: 10px 0;flex-wrap: wrap; display: flex; justify-content: space-between;
+		.item{width: 23%;  margin-right: 10px; 
+		image{ }
+		}
+		
+	}
+	.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;}
 	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
 	.pingjiaBox{color: #555; margin-bottom: 20rpx;}
 	.flexbox{display: flex;}

pages/bookShop/commoditySearch.vue

@@ -44,13 +44,16 @@
 				<u-back-top :scroll-top="scrollTop"></u-back-top>
 			</view>
 		</view>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	export default {
 		data() {
 			return {
+				playData:{},
 				scrollTop: 0,
 				totalPage: 0,
 				status: 3,
@@ -130,6 +133,9 @@
 		onShow() {
 			this.getHistory()
 		},
+		components: {
+			musicPlay
+		},
 		//方法
 		methods: {
 			// 获取缓存

pages/bookShop/deliverDetail.vue

@@ -28,11 +28,13 @@
 			<image src="../../static/icon/kongbai.png" ></image>
 			<text>- 暂无物流信息 -</text>
 		</view>
+		<music-play :playData="playData"></music-play>
 		<!-- <u-loading color="red" :show="loading"></u-loading> -->
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	// import Loading from '../../'
 	import {
@@ -42,6 +44,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				loading: false,
 				orderId: null,
 				deliverDetails: [{
@@ -61,6 +64,9 @@
 		computed: {
 			...mapState(['userInfo']),
 		},
+		components:{
+			musicPlay
+		},
 		methods: {
 			// 复制到剪切板
 			copyData(data){

pages/bookShop/orderLCont.vue

@@ -52,7 +52,7 @@
 					<view class="orderOper" >
 						<view  style="width: 100%; text-align: right;">						
 							<view   @click.stop="pingji(item.productId)" class="opCan" >评价</view>
-							<view   @click.stop="pingji(item.productId)" class="opCan" >追加评价</view>
+							<view   @click.stop="showZhuiping(item.productId)" class="opCan" >追评</view>
 						</view>
 						
 					</view>
@@ -119,7 +119,9 @@
 		<!-- 对话框 -->
 		<u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
 			<view class="tanchu">
-				<view class="dp_title">添加评价</view>
+				<view class="dp_title" v-if="pjType != 'zhuiping'">添加评价</view>
+				<view class="dp_title" v-else>添加追评</view>
+				
 				<view style="max-height: 1000rpx;overflow-y: scroll;">
 					<uni-forms :modelValue="Pform">
 						<!-- 评价图片 -->						
@@ -132,19 +134,14 @@
 					<!-- 提交 -->
 					<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">	
 																
-						<view class="mb20">
+						<view class="mb30" v-if="pjType != 'zhuiping'">
-							<view v-html="Pform.html">								
-							</view>
-													
-						</view>
-						<view class="mb30">
 							<span :class="['star',Pform.star>=1 ? 'starLight': 'starGray']" @click="getStar(1)"></span>
 							<span :class="['star',Pform.star>=2 ? 'starLight': 'starGray']" @click="getStar(2)"></span>
 							<span :class="['star',Pform.star>=3 ? 'starLight': 'starGray']" @click="getStar(3)"></span>
 							<span :class="['star',Pform.star>=4 ? 'starLight': 'starGray']" @click="getStar(4)"></span>
 							<span :class="['star',Pform.star>=5 ? 'starLight': 'starGray']" @click="getStar(5)"></span>
 						</view>
-						<view class="mb30">
+						<view class="mb30" v-if="pjType != 'zhuiping'">
 							<!-- <uni-file-picker :auto-upload="false" ref="files" @delete="deleteImg" limit="5" @success="upSuccess" @select="select" v-model="Pform.img" fileMediatype="image" :image-styles="imageStyles"/> -->
 							<u-upload :fileList="Pform.img" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="4"
 								width="80" height="80" :previewFullImage="true">
@@ -157,7 +154,8 @@
 						</view>
 						<view class="">
 						<!-- <button class="cu-btn bg-gradual-blue shadow-blur">发送</button> -->
-						<u-button type="success" @click="submitPJ">提交评价</u-button>
+						<u-button type="success" @click="submitPJ" v-if="pjType != 'zhuiping'">提交评价</u-button>
+						<u-button type="success" @click="zhuiping" v-else>提交追评</u-button>
 						</view>
 					</view>
 							
@@ -165,13 +163,14 @@
 						<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 musicPlay from '@/components/music.vue'
 	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
 	import $http from '@/config/requestConfig.js';
 	import {
@@ -184,12 +183,12 @@
 	export default {
 		data() {
 			return {
+			playData:{},
 			title: 'Hello',
 			isShowEmj: false,
 			emojiIcon:'cuIcon-emoji',
 			message: '',			
 			
-			
 				windowWidth:0,
 				windowHeight:500,
 				Pform:{ // 评价表单
@@ -221,7 +220,9 @@
 				}], // 物流详情信息全部
 				deliverDetailsLength: null,
 				emoji:[],
-				Files:[]
+				Files:[],
+				pjType:'',
+				
 			}
 		},
 		onLoad(e) {
@@ -236,15 +237,17 @@
 			this.getOrderList()
 		},
 		components:{
-			emotion
+			emotion,
+			musicPlay
 		},
 		computed: {
 			...mapState(['userInfo']),
 		},
 		
 		methods: {		
+			// 获得输入的表情数组
 			handleEmj(i) {
-				console.log(i,'i'); 
+			 console.log(i,'i---------'); 
 				this.inputValue = i
 				// console.log(this.inputValue);
 				if(i.emotioni == '[em_98]') {
@@ -260,6 +263,42 @@
 					/// this.Pform.html += i.emotion
 				}
 			},
+			showZhuiping(val){
+				this.pjType = 'zhuiping'
+				this.pingjiaShow = true
+				this.productID = val
+			},
+			// 追加评论
+			zhuiping(){					
+				let data = {
+					//'oid':'',
+					'userId': this.userInfo.id,
+					'bookid': this.productID,
+					'conTent': this.Pform.comment
+				}
+				console.log(data,'data')
+				$http.request({
+					url: "user/followUp/userFollowUp",
+					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.pjType = ''
+							this.productID = null,
+							this.Pform.comment = ''
+							this.Pform.html = ''
+							this.emoji = []
+						}
+					})
+			},
 			textareaBInput(e) {
 				console.log(e,'e')
 				this.Pform.comment = e.detail.value
@@ -309,22 +348,22 @@
 			},
 			// 获取html格式的评论1
 			getHtmlComment(){				
-				var ss = this.Pform.comment
+				 // 格式化html
-				if(this.emoji.length> 0){
+				 var ss = this.Pform.comment
-					for (var i = 0; i<this.emoji.length; i++){ 
+				 if(this.emoji.length> 0){
-						if(this.Pform.comment.indexOf(this.emoji[i].name) !== -1 ){						
+				 	for (var i = 0; i<this.emoji.length; i++){ 
-							//var re = new RegExp(this.emoji[0].name,"g"); //定义正则表达式						
+				 		if(this.Pform.comment.indexOf(this.emoji[i].name) !== -1 ){						
-							//第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。						
+				 			//var re = new RegExp(this.emoji[0].name,"g"); //定义正则表达式						
-							// ss = ss.replace(re, ); //第一个参数是正则表达式。
+				 			//第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。						
-							ss = ss.replace(this.emoji[i].name, this.emoji[i].tag)
+				 			// ss = ss.replace(re, ); //第一个参数是正则表达式。
-							// console.log(ss)					
+				 			ss = ss.replace(this.emoji[i].name, this.emoji[i].tag)
-						}
+				 			// console.log(ss)					
-					}
+				 		}
-					this.Pform.html =  ss
+				 	}
-				}else{
+				 	this.Pform.html =  ss
-					this.Pform.html =  this.Pform.comment
+				 }else{
-				}
+				 	this.Pform.html =  this.Pform.comment
-				 
+				 }
 				//console.log(this.Pform.html,'this.Pform.html')
 			},
 			deletePic() {
@@ -360,30 +399,16 @@
 			// 提交评价
 			submitPJ(){
 				if(this.Pform.comment != ''){					
-					// 格式化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
-					}
 					
 					let data={
 						'userid':this.userInfo.id,
 						'orderSn': this.orderSn,
 						'bookid': this.productID,
-						'content': this.Pform.html,	
+						// 'content': this.Pform.html,	
+						'content': this.Pform.comment,
 						'starLevel':this.Pform.star,
-						'images':this.Pform.img
+						'images':this.Pform.img,
+						// 'emoji':this.emoji  // 表情数组
 					}
 					// console.log(data,'data')
 					$http.request({
@@ -416,6 +441,7 @@
 			// 添加评价
 			pingji(id){
 				console.log(id)
+				this.pjType = ''
 				this.productID = id
 				this.pingjiaShow = true
 			},
@@ -482,6 +508,7 @@
 				this.$http
 					.post(`book/buyorder/appGetOrderInfo/${this.orderType}?orderId=${this.orderID}`)
 					.then(res => {
+						console.log(res,'res')
 						this.orderContet = res.buyOrder
 						this.productIDs = res.buyOrder.products.map(item => {
 							return item.productId

pages/bookShop/orderList.vue

@@ -70,11 +70,12 @@
 			</view>
 		</view>
 <z-navigation></z-navigation>
-
+<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	import {
 		setPay,
@@ -86,6 +87,7 @@ import {
 	export default {
 		data() {
 			return {
+				playData:{},
 				orderTabs: [{
 					name: '全部',
 					value: 9
@@ -123,6 +125,9 @@ import {
 			this.getOrderList()
 			uni.stopPullDownRefresh()
 		},
+		components:{
+			musicPlay			
+		},
 		methods: {
 			...mapMutations(['setUserInfo']),
 			// 获得操作系统

pages/bookShop/settlement.vue

@@ -192,11 +192,12 @@
 			</view>
 		</u-popup>
 
-
+	<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	import {
 		setPay,
@@ -209,7 +210,7 @@
 		data() {
 			return {
 				isAndorid:true,  // 操作系统
-				
+				playData:{},
 				typeId: 0,
 				shangIDNum: 0,
 				cartIDNum: [],
@@ -300,6 +301,9 @@
 		computed: {
 			...mapState(['userInfo']),
 		},
+		components:{
+			musicPlay
+		},
 		methods: {
 			// 获得操作系统
 			getOS(){

pages/clock/clock.vue

@@ -0,0 +1,126 @@
+<template>
+	<view>
+		<view class="top">
+			<z-nav-bar title="读书打卡"></z-nav-bar>
+			<uni-calendar 
+				:insert="true"
+				:lunar="true" 
+				:start-date="'2019-3-2'"
+				:end-date="'2019-5-20'"
+				@change="change"
+				 />
+		</view>
+		<music-play :playData="playData"></music-play>
+		<z-navigation></z-navigation>
+	</view>
+</template>
+
+<script>
+	import musicPlay from '@/components/music.vue'
+	function getDate(date, AddDayCount = 0) {
+			if (!date) {
+				date = new Date()
+			}
+			if (typeof date !== 'object') {
+				date = date.replace(/-/g, '/')
+			}
+			const dd = new Date(date)
+	
+			dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
+	
+			const y = dd.getFullYear()
+			const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
+			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
+			return {
+				fullDate: y + '-' + m + '-' + d,
+				year: y,
+				month: m,
+				date: d,
+				day: dd.getDay()
+			}
+		}
+	export default {
+		data() {
+			return {
+				playData:{},
+				showCalendar: false,
+				info: {
+									lunar: true,
+									range: true,
+									insert: false,
+									selected: []
+								}
+			}
+		},
+		onReady() {
+					this.$nextTick(() => {
+						this.showCalendar = true
+					})
+					// TODO 模拟请求异步同步数据
+					setTimeout(() => {
+						this.info.date = getDate(new Date(),-30).fullDate
+						this.info.startDate = getDate(new Date(),-60).fullDate
+						this.info.endDate =  getDate(new Date(),30).fullDate
+						this.info.selected = [{
+								date: getDate(new Date(),-3).fullDate,
+								info: '打卡'
+							},
+							{
+								date: getDate(new Date(),-2).fullDate,
+								info: '签到',
+								data: {
+									custom: '自定义信息',
+									name: '自定义消息头'
+								}
+							},
+							{
+								date: getDate(new Date(),-1).fullDate,
+								info: '已打卡'
+							}
+						]
+					}, 2000)
+				},
+		methods: {
+				open() {
+								this.$refs.calendar.open()
+							},
+							close(){
+								console.log('弹窗关闭');
+							},
+							change(e) {
+								console.log('change 返回:', e)
+								// 模拟动态打卡
+								if (this.info.selected.length > 5) return
+								this.info.selected.push({
+									date: e.fulldate,
+									info: '打卡'
+								})
+							},
+							confirm(e) {
+								console.log('confirm 返回:', e)
+							},
+							monthSwitch(e) {
+								console.log('monthSwitchs 返回:', e)
+							}
+				
+		},
+		components: {
+			musicPlay
+		},
+	}
+</script>
+
+<style lang="scss">
+	.example-body {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+	.calendar-button {
+		flex: 1;
+		font-weight: bold;
+		font-size: 32rpx;
+	}
+</style>
+

pages/comments/comments.vue

@@ -0,0 +1,438 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<!-- 顶部导航栏 -->
+			<z-nav-bar title="书评" bgColor="red"></z-nav-bar>
+		</view>
+		<view class="bookInfo flexbox">
+			<image :src="productInfo.images" mode="aspectFill"></image>
+			<view>
+				<span class="title">{{productInfo.name}}</span>
+				<view class="description">{{productInfo.description}}</view>
+			</view>
+			
+		</view>
+		<view class="mainContent">
+			<view v-if="shupingList.length > 0">
+			<view class="item" @click.stop="toDetail(item)" v-for="(item,index) in shupingList" :key="index">
+				<image class="feng" v-if="item.image == ''"  src="../../static/icon/home_bg.jpg" mode="scaleToFill" style="width: 100%;"></image>
+				<image class="feng" v-else :src="item.image" mode="scaleToFill" style="width: 100%;"></image>
+				<text class="title">{{item.title}}</text>
+				<!-- <view class="description" v-html="item.content">
+					{{item.content}}
+				</view> -->
+				<view class="btns flexbox">
+					<span class="time">{{item.updateTime}}</span>
+					<span class="flexbox opbtns">
+						<!-- <span class="flexbox" @click="dianzan('1')">
+							<u-icon name="heart" color="#55aa00" size="26"></u-icon>
+							<text>2656</text>
+						</span>	 -->
+						<span class="flexbox pingjia" @click.stop="pinglun(item.id)">
+							<u-icon name="chat" color="#55aa00" size="26"></u-icon>
+							<!-- <text>2656</text> -->
+						</span>					
+					</span>
+				</view>
+			</view>	
+			</view>						
+			<view class="quesheng" v-else>
+				暂无书评内容~
+			</view>
+			<view v-if="status==0" style="text-align: center;">
+				<u-loading-icon style="display: inline-block;"></u-loading-icon>
+				<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
+			</view>
+			<view v-if="status==1" style="padding-bottom: 20rpx;">
+				<u-divider text="全部加载完成"></u-divider>
+			</view>
+		</view>
+		<!-- 评价对话框 -->
+		<u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
+			<view class="tanchu">
+				<view class="dp_title">添加评论</view>
+				<view style="max-height: 1000rpx;overflow-y: scroll;">
+					<uni-forms :modelValue="Pform">
+						<!-- 评价图片 -->						
+						<!-- end -->
+								<!-- <uni-forms-item name="comment" label-width="0">
+									<uni-easyinput type="textarea" v-model="Pform.comment" placeholder="请输入您的商品评价"  />
+								</uni-forms-item>		 -->														
+					</uni-forms>
+					<!-- <u-button type="success" @click="submitPJ">提交评价</u-button> -->
+					<!-- 提交 -->
+					<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">	
+											
+						<view class="flex-sub flexbox">							
+							<i @click="showEmj()" :class="emojiIcon" ></i>
+							<!-- <input type="text" @focus="InputFocus" @blur="InputBlur" v-model="message"  @input="textareaBInput"  placeholder-style="font-size:24rpx;color:#aaaaaa;"  placeholder="请输入您要发送的内容"></input> -->
+							<textarea class="textarea"  v-model="Pform.comment" @focus="InputFocus" @blur="InputBlur" @input="textareaBInput" placeholder-style="font-size:24rpx;color:#aaaaaa;"  placeholder="请输入您要发送的内容"></textarea>
+						</view>
+						<view class="">				
+						<u-button type="success" @click="submitPJ">提交</u-button>
+						</view>
+					</view>
+							
+					<view style="position: relative;">
+						<emotion @emotion="handleEmj" :height="220" v-if="isShowEmj" :windowWidth="windowWidth"></emotion>
+					</view>
+				</view>				
+			</view>
+		</u-popup>
+		<music-play :playData="playData"></music-play>
+	</view>
+</template>
+
+<script>
+	import $http from '@/config/requestConfig.js';
+	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
+   import musicPlay from '@/components/music.vue'
+import { data } from 'jquery';
+   import {
+   	mapState
+   } from 'vuex';
+	export default {
+		data() {
+			return {
+				loadingNow : false,
+				playData:{},
+				isShowEmj: false,
+				emojiIcon:'cuIcon-emoji',
+				windowWidth:0,
+				bookid:null,
+				productInfo:{},
+				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.page=1, // 页码			   
+				   this.shupingList = []
+				   this.getBookCom()
+			   
+		},
+		onReachBottom() {
+			this.loadingNow = true			
+			if(this.page < this.total){
+				this.page++
+				console.log('加载',this.page)
+				this.status = 0
+				this.getBookCom()
+				
+			}else{
+				this.status = 1
+				console.log('加载完成了',this.page)
+				return
+			}
+		},
+		onLoad(e) {
+			this.windowWidth = uni.getSystemInfoSync().windowWidth;
+			console.log(e,'onload')
+			this.bookid = e.bookid
+			this.getProDetail(e)
+			this.getBookCom()
+		},
+		computed:{
+			...mapState(['userInfo']),
+		},
+		methods: {
+			// 书评详情
+			toDetail(val){
+				console.log(val,'val')
+				uni.navigateTo({
+					url:'./commentsDetail?bookid='+this.bookid+'&bfa_id='+val.id
+				})
+			},
+			getProDetail(e){
+				// 获取商品详情
+				uni.showLoading({
+					title: '加载中'
+				});		
+				//console.log(e.id,'e.id')	
+				this.$http
+					.post('book/book/appinfo/' + this.bookid + '/' + this.userInfo.id)
+					.then(res => {	
+						console.log(res,'res')
+						this.productInfo = res.book				
+						uni.hideLoading();
+					}).catch((e)=>{
+						console.log(e,'e')
+					})
+			},	
+			// 获得书评
+			getBookCom(){ 
+				let data = {
+					'page': this.page,
+					'limit': this.pageSize,
+					'bookid' : this.bookid
+				}
+				console.log(data,'data')
+				this.$http
+					.post('forum/articles/descupdatelist', data)
+					.then(res => {
+					console.log(res,'获取成功')
+					this.total = res.page.totalPage
+					this.shupingList = this.shupingList.concat(res.page.list)
+					//  console.log(res,'已购买')
+					this.status = 3
+				}).catch((e)=>{
+						console.log(e,'e')
+					})
+			},
+			// 获得输入的表情数组
+			handleEmj(i) {
+			 console.log(i,'i---------'); 
+				this.inputValue = i
+				// console.log(this.inputValue);
+				if(i.emotioni == '[em_98]') {
+					//匹配最后一个表情符号并删除11。
+					this.Pform.comment = this.Pform.comment.replace(/(\[[^\]]+\]|[\s\S])$/, '');
+					if(this.emoji.length > 0){
+						this.emoji = this.emoji.slice(0,-1)
+					}
+				} else {
+					this.emoji.push({'tag' : i.emotion, 'name':i.emotioni})	
+					// console.log(this.emoji,'this.emoji')
+					this.Pform.comment += i.emotioni;
+					/// this.Pform.html += i.emotion
+				}
+			},
+			textareaBInput(e) {
+				console.log(e,'e')
+				this.Pform.comment = e.detail.value
+				/// this.Pform.html = e.detail.value
+			},
+			showEmj() {
+				let bool = !this.isShowEmj;
+				if(bool) {
+					this.emojiIcon = 'cuIcon-keyboard';
+				} else {
+					this.emojiIcon = 'cuIcon-emoji';
+				}
+				
+				this.isShowEmj = bool;
+				this.$emit('show')
+			},			
+			InputBlur(e){
+				
+			},
+			InputFocus(e){
+				this.isShowEmj = false;
+				this.emojiIcon = 'cuIcon-emoji';
+				this.$emit('foc')
+			},
+			
+			// end
+			deleteImg(e){					
+				// var arr = this.Pform.img.slice(0,-1)
+				this.Pform.img.pop()	
+			  //  console.log('删除文件',arr)
+				console.log(this.Pform)
+			},
+			getStar(i){
+				this.Pform.star = i
+			},
+			select(e){
+				 console.log('选择文件：',e)
+				let arr =  e.tempFiles.map(item => {
+					  return {'url':item.url,'name':item.name}
+				  })
+				 this.Pform.img = this.Pform.img.concat(...arr)
+				//this.Pform.img = arr
+				 console.log(this.Pform,'img')				
+			},
+			upSuccess(e){
+				console.log(e)
+			},
+			// 获取html格式的评论1
+			getHtmlComment(){				
+				 // 格式化html
+				 var ss = this.Pform.comment
+				 if(this.emoji.length> 0){
+				 	for (var i = 0; i<this.emoji.length; i++){ 
+				 		if(this.Pform.comment.indexOf(this.emoji[i].name) !== -1 ){						
+				 			//var re = new RegExp(this.emoji[0].name,"g"); //定义正则表达式						
+				 			//第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。						
+				 			// ss = ss.replace(re, ); //第一个参数是正则表达式。
+				 			ss = ss.replace(this.emoji[i].name, this.emoji[i].tag)
+				 			// console.log(ss)					
+				 		}
+				 	}
+				 	this.Pform.html =  ss
+				 }else{
+				 	this.Pform.html =  this.Pform.comment
+				 }
+				//console.log(this.Pform.html,'this.Pform.html')
+			},
+			deletePic() {
+				let that = this
+				that.Pform.img.splice(0, 1)
+				//console.log(that.Pform.img)
+			},
+			afterRead(e) {
+				//console.log(e)
+				let that = this
+				for (var i=0; i< e.file.length; i++) {
+					//console.log(i,e.file[i].url)
+					uni.uploadFile({
+						url: this.$baseUrl + 'oss/fileoss',
+						filePath: e.file[i].url,
+						//files:e.file,
+						 name: 'file',
+						formData: {},
+						success: (res) => {
+							that.Pform.img.push({
+								url: JSON.parse(res.data).url
+							})
+						}
+					});
+				}
+			},
+			closePingjia(){
+				this.pingjiaShow = false
+				this.Pform.comment = ''
+				this.Pform.html = ''
+				this.emoji = []
+			},
+			// 点赞
+			dianzan(val){},
+			
+			// 显示评论
+			pinglun(val){
+				this.bfaid = val
+				this.pingjiaShow = true
+			},			
+			// 提交评论
+			submitPJ(){
+				if(this.Pform.comment != ''){	
+					let data={
+						'content':this.Pform.comment,
+						'userid':this.userInfo.id,
+						'bookid':this.bookid,
+						'bfaid': this.bfaid
+					}
+					// console.log(data,'data')
+					$http.request({
+						url: "forum/comment/save",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+						data,
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					}).then(res => {												
+							if (res.code == 0) {
+								uni.showToast({
+									title:'评论成功！',
+									icon:'success'
+								})
+								
+								this.pingjiaShow = false
+								this.Pform.comment = ''
+								this.pinglunId = null
+							}
+						})
+				}else{
+					uni.showToast({
+						title:'请先输入您的评价内容 ！',
+						icon:'none'
+					})
+				}
+			},
+			},
+		components:{
+			musicPlay,			
+			emotion			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.flexbox{display: flex;}
+	.container{padding: 10px;}
+	.star{display: inline-block; width: 20px; height: 20px;  margin-right: 10rpx;}
+		.starGray{ background : url(../../static/icon/star_greey.png) no-repeat; background-size: contain; }
+		.starLight{ background : url(../../static/icon/star_light.png) no-repeat;  background-size: contain;}
+		.cuIcon-emoji {
+			background : url(../../static/biaoqing.png) no-repeat; background-size: contain;  display: block; margin-right: 20rpx;
+	width: 30px; 	}
+	.cuIcon-keyboard{background : url(../../static/biaoqing.png) no-repeat; background-size: contain;  display: block;
+	width: 30px; }
+	.tanchu {
+		padding: 40rpx 30rpx 40rpx 30rpx;
+		position: relative;
+	
+	
+		.dp_title {
+			font-size: 32rpx;
+			margin-bottom: 50rpx;
+			color: #555;
+			text-align: center;
+			font-weight: bold;
+		}
+	
+		.dp_add {
+			position: absolute;
+			top: 40rpx;
+			right: 30rpx;
+			font-size: 22rpx;
+			background-color: #fd6004;
+			color: #fff;
+			border-radius: 10rpx;
+			padding: 5rpx 10rpx;
+	
+			.u-icon {
+				display: inline-block;
+				margin-right: 5rpx;
+			}
+		}}
+	
+	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91; padding-bottom: 20rpx; padding-top: 20rpx;}
+	.bookInfo{justify-content: space-between; margin-bottom: 15px; background-color: #fff; padding:10px; border: 1px splid #999;
+		
+		view{ padding-left: 30rpx;  box-sizing: border-box;  width: calc(100% - 150px);
+			.title{font-size: 38rpx; margin-top: 20rpx; font-weight: blod; margin-bottom: 20rpx; display: block;			
+			}
+			.description{line-height: 20px; width: 100%;  color:#888; padding-left: 0;}
+		}
+		image{width: 150px !important;  }
+		
+	}
+	.mainContent{background-color: #fff; 
+	.item{padding: 10px; margin-bottom: 30rpx;}
+		.feng{margin-bottom: 15px; overflow: hidden;}
+		.title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
+		.description{ overflow: hidden; color: #666;
+		text-overflow: -o-ellipsis-lastline;
+		        overflow: hidden;
+		        text-overflow: ellipsis;
+		        display: -webkit-box;
+		        -webkit-line-clamp: 3;
+		        line-clamp: 3;
+		        -webkit-box-orient: vertical;
+			font-size: 28rpx; margin-bottom: 15px; margin-top:5px;
+		}
+		.btns{font-size: 24rpx; justify-content: space-between;
+			.time{font-size: 24rpx; color: #666; }
+			.opbtns{
+				.pingjia{margin-left: 10px;}
+			}
+		}
+	}
+	.mb30{margin-bottom: 30rpx; overflow: hidden;}
+</style>

pages/comments/commentsDetail.vue

@@ -0,0 +1,444 @@
+<template>
+	<view class="container">
+		<view class="header">
+			<!-- 顶部导航栏 -->
+			<z-nav-bar title="书评详情" bgColor="red"></z-nav-bar>
+		</view>
+		<view class="bookInfo flexbox">
+			<image :src="productInfo.images" mode="aspectFill"></image>
+			<view>
+				<span class="title">{{productInfo.name}}</span>
+				<view class="description">{{productInfo.description}}</view>
+			</view>
+			
+		</view>
+		<view class="mainContent">
+			
+			<view class="item">
+				<image v-if="commentInfo.image != ''" class="feng" :src="commentInfo.image" mode="scaleToFill" style=""></image>
+				<text class="title">{{commentInfo.title}}</text>
+				<!-- <view class="description">
+					
+				</view> -->
+				<view class="mbtns flexbox">
+					<span class="time">{{commentInfo.updateTime}}</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>
+			
+					
+		</view>
+		<view class="pinglunMain" >
+			<u-button class="addPl" type='success' plain @click="pinglun()">添加评论</u-button>
+			<h4>~ 精彩热评 ~</h4>
+			<view v-if="plList.length > 0">
+			<view class="item mb30" v-for="item in plList" :key="item.id">
+				<view class="content" v-html="item.phtml"></view>
+				<view class="btns flexbox">
+					<span class="time">{{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>
+			</view>
+			</view>
+			<view class="quesheng" v-else>
+				<text>暂无评论内容~</text>
+			</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;">				
+					<!-- <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:{},
+				pingjiaShow:false, //添加评价 
+				Pform:{ // 评价表单
+					//star:0,
+					comment:'',
+					//img:[],
+					html:''
+				},
+				emoji:[],
+				Files:[],
+				commentInfo:{},
+				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
+			this.getProDetail(e)
+			this.getbookComInfo()
+			this.getCommPL()
+		},
+		computed:{
+			...mapState(['userInfo']),
+		},
+		methods: {
+			// 获得书评评论列表
+			getCommPL(){
+				let data = {
+					'bfa_id':this.bfa_id,
+					'limit': 5,
+					'page': 1,
+				}
+				console.log(data,'data')
+				this.$http
+					.post('forum/comment/list', data)
+					.then(res => {						
+						if(res.code == 0){
+							console.log(res,'书评评论')
+							this.plList = res.page.list
+							
+							// 评论格式化
+							var newarr = []
+							this.plList.forEach((item1)=>{	
+								   var pjstr = ''
+								   //var zpstr = ''
+									pjstr = this.getHtmlComment(item1.content)
+									//item1.followUpcontent == '' ? zpstr = '' : zpstr = this.getHtmlComment(item1.followUpcontent)									
+									//console.log(pjstr,'99999999999----------')
+									 item1.phtml = pjstr
+									 console.log(pjstr)
+									// item1.zphtml = zpstr
+									 newarr.push(item1)
+							
+							})
+							this.plList = 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)
+					})
+			},
+			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')
+					})
+			},	
+			// 获得输入的表情数组
+			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){},
+			
+			// 显示评论框
+			pinglun(val){
+				console.log(val)
+				this.pinglunId = val || null
+				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')
+					$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: 20rpx; margin-bottom: 20rpx;}
+	.pinglunMain{
+		
+		.content{margin-bottom: 15px; line-height: 40rpx; color: #666; }
+		background-color: #fff; padding: 10px;
+		h4{color: #55aa00; font-size: 40rpx;  margin:30rpx 0 ; text-align: center;}
+		.time{color: #888; font-size: 24rpx;}
+		.btns{
+			color: #666;  justify-content: space-between;
+		}
+		
+	}
+	.mbtns{padding: 5px; background-color: #f4fff5; border-radius: 10px; font-size: 34rpx; color: #8b8a91; margin:15px 0; justify-content: space-between;}
+	.zhengwen{line-height: 50rpx; font-size: 30rpx;}
+	.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;}
+	.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;}
+		
+	}
+	.mainContent{background-color: #fff; 
+	.item{padding: 10px; margin-bottom: 30rpx;}
+		.feng{margin-bottom: 15px; overflow: hidden;}
+		.title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
+		.description{ overflow: hidden; color: #666;
+			font-size: 28rpx; margin-bottom: 15px; margin-top:5px;
+		}
+		.btns{font-size: 24rpx; justify-content: space-between;
+			.time{font-size: 24rpx; color: #888; }
+			.opbtns{
+				.pingjia{margin-left: 10px;}
+			}
+		}
+	}
+	.mb30{margin-bottom: 30rpx; overflow: hidden;}
+</style>

pages/library/library.vue

@@ -0,0 +1,438 @@
+<template>
+	<view>
+		<!-- 公共组件-每个页面必须引入 -->
+		<!-- <public-module></public-module>	 -->	
+		<z-nav-bar title="我的图书"></z-nav-bar>
+		<view class="home_bg" >
+			<image src="../../static/icon/home_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
+			<view class="search_box" @click="onPageJump('./searchFor')">
+				<text class="icon_search"></text>
+				<text class="prompt">搜索...</text>
+			</view>
+		</view>
+		<view class="contentButton">
+			<u-tabs :scrollable="false" bg-color="#d4d4d4" active-color="#2979ff" inactive-color="#606266" bar-height="10" :list="contentButtonList" @click="contentButtonClick" lineWidth="42" :inactiveStyle="{fontSize:'32rpx'}" :activeStyle="{color: '#303133',fontWeight: 'bold', transform: 'scale(1.01)'}"></u-tabs>
+		</view>
+		<view class="listenList" v-if="bookList.length > 0">
+			<view class="wrap" v-if="contentShow == 0">				 
+					<u-row gutter="16" justify="flex-start">
+						<u-col span="6" v-for="(item,index) in bookList" :key="index">
+							<view class="flexbox listenItem">
+								<view class="info">
+									<view class="videoBox demo-layout bg-purple" @click="goToListenFree(item)">
+										<image :src="item.image" mode="scaleToFill" ></image>
+										
+									</view>									
+								</view>
+								<view class="btns">
+									<view class="item flexbox" @click="">
+										<u-icon name="bookmark" color="#55aaff" size="24"></u-icon>
+										<text>读 书</text>
+									</view>
+									<view class="item flexbox" @click="goToListenFree(item)">
+										<u-icon name="volume" color="#71d5a1" size="24"></u-icon>
+										<text>听 书</text>
+									</view>
+									<view class="item flexbox" @click="goPingshu(item.bookId)">
+										<u-icon name="chat" color="#fcbd71" size="24"></u-icon>
+										<text>评 书</text>
+									</view>
+								</view>
+							</view>
+							<view class="bookName">{{item.bookName}}</view>							
+						</u-col>						
+					</u-row>					
+				</view>			
+				<view class="wrap" v-if="contentShow == 1">					
+						<u-row gutter="16" justify="flex-start">
+							<u-col span="6"  v-for="(item,index) in tjBookLIst" :key="index">
+								<view class="flexbox listenItem">
+									<view class="info">
+										<view class="videoBox demo-layout bg-purple" @click="goDetail(item)">
+											<image :src="item.productImages" mode="scaleToFill" ></image>											
+										</view>
+									</view>
+									<view class="btns">
+										<view class="item flexbox" @click="">
+											<u-icon name="bookmark" color="#55aaff" size="24"></u-icon>
+											<text>读 书</text>
+										</view>
+										<view class="item flexbox" @click="goToListen(item)">
+											<u-icon name="volume" color="#71d5a1" size="24"></u-icon>
+											<text>听 书</text>
+										</view>
+										<view class="item flexbox" @click="wgGoPingshu(item)">
+											<u-icon name="chat" color="#fcbd71" size="24"></u-icon>
+											<text>评 书</text>
+										</view>
+									</view>
+								</view>
+								<view class="bookName">{{item.productName}}</view>
+							</u-col>						
+						</u-row>						
+					</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">
+				<u-divider text="全部加载完成"></u-divider>
+			</view>
+		</view>
+		<view class="shuwuLink">
+			<image @click="" src="../../static/icon/shuwu.jpg" mode="aspectFit"></image>
+		</view>
+		<music-play :playData="playData"></music-play>
+		<z-navigation></z-navigation>
+	</view>
+</template>
+
+<script>
+	 import musicPlay from '@/components/music.vue'
+	import {
+		mapState
+	} from 'vuex';
+	export default {
+		data() {
+			return {
+				showEbook:false,
+				playData:{},
+				loadingNow : false,
+				bookList:[],
+				contentShow:0,
+				page:1, // 页码
+				status: 3,
+				ygtotalPage:1,
+				tjPage:1,
+				tjTotalPage:1,
+				tjBookLIst:[],
+				contentButtonList: [{
+						name: '已购图书'
+					},
+					{
+						name: '推荐图书'
+					}
+				],
+			}
+		},
+		onLoad() {
+			this.getListDate()
+			this.getfreeBook()
+		},
+		onPullDownRefresh() {
+			console.log('下拉刷新了')
+			uni.stopPullDownRefresh(); 
+			   if(this.contentShow == 0){
+				   this.page=1, // 页码			   
+				   this.bookList = []
+				   this.getfreeBook()
+			   }
+			   else if(this.contentShow == 1){
+			   	this.tjPage=1, // 页码
+			   	this.tjBookLIst = []
+			   	this.getListDate()
+			   }
+		},
+		onReachBottom() {
+			this.loadingNow = true
+			console.log('到底了')
+			
+			if(this.contentShow == 0){	
+				//console.log(this.page , this.ygtotalPage)
+				if(this.page < this.ygtotalPage){	
+					this.page++
+					console.log('加载',this.page)
+					this.status = 0
+					this.getfreeBook()
+					
+				}else{
+					this.status = 1
+					console.log('加载完成了',this.page)
+					return
+				}
+				
+			}else if(this.contentShow == 1){				
+				if(this.tjPage < this.tjTotalPage){
+					this.tjPage++
+					console.log('加载',this.tjPage)
+					this.status = 0
+					this.getListDate()
+					
+				}else{
+					this.status = 1
+					console.log('加载完成了',this.tjPage)
+					return
+				}
+			}
+		},
+		components:{
+			musicPlay
+		},
+		computed: {
+			...mapState(['userInfo'])
+		},
+		methods: {	
+			// 未购买图书，评书跳转
+			wgGoPingshu(item){
+				console.log('未购买评书',item)
+				if(item.bookId == null || item.bookId.length <= 0){
+					//uni.showModal()
+					uni.showModal({
+						title: '提示',
+						showCancel:false,
+						content: '当前未关联图书信息，请联系联系管理员',
+						success: function (res) {
+							if (res.confirm) {
+								console.log('好的');
+							} 
+						}
+					});
+				}else{
+					uni.navigateTo({
+						 url: '../comments/comments?bookid='+item.bookId[0],
+						// url:'../bookShop/commodityDetail'
+						
+					});
+				}
+			},
+			// 跳转到评书
+			goPingshu(val){
+				console.log('评书',val)
+				uni.navigateTo({
+					 url: '../comments/comments?bookid='+val,
+					// url:'../bookShop/commodityDetail'
+					
+				});
+			},			
+			contentButtonClick(e){
+				this.contentShow = e.index
+			},
+			// 获取已购买书籍
+			getfreeBook(){
+				this.$http
+					.post('book/userebookbuy/buylist', {
+					// .post('book/buyorderdetail/querybuy', {
+						'id': this.userInfo.id,
+						'page':this.page,
+						'limit':10
+					})
+					.then(res => {
+						
+						if(res.code == 0){
+							this.ygtotalPage = res.page.totalPage
+							this.bookList = this.bookList.concat(res.page.list)
+							 console.log(res,'已购买')
+							this.status = 3
+						}					
+						
+					});
+			},
+			
+			// 获取推荐图书（未购买）
+			getListDate(){
+				this.loadingNow = false
+				// 获取书架列表
+				this.$http
+					.post('book/shopproduct/booklist', {
+						'userId': this.userInfo.id,
+						'limit':10,
+						'page':this.tjPage
+					})
+					.then(res => {
+						console.log(res)
+						if(res.code == 0){
+							this.tjTotalPage = res.pages.totalPage
+							var arr = []
+							if(res.pages.list.length > 0){
+								for (var i=0; i<res.pages.list.length; i++ ) {
+									var booidArr = []
+									if(res.pages.list[i].bookId != null){
+										booidArr = res.pages.list[i].bookId.split(',')										
+										//res.pages.list[i].bookId = booidArr
+										console.log(booidArr,'booidArr')
+										res.pages.list[i].bookId = booidArr
+									}else{
+										res.pages.list[i].bookId = []
+									}
+							}							
+							console.log(res.pages.list,'res.pages.list')
+							// var arr = res.pages.list							
+							 this.tjBookLIst = this.tjBookLIst.concat(res.pages.list)
+							// console.log(res)
+							this.status = 3
+						}	}			
+						
+					});
+			},
+			// 跳转详情页
+			goDetail(item) {
+				console.log(item,'goDetail-----')
+				uni.navigateTo({
+					url: '../bookShop/commodityDetail?id=' + item.productId
+				});
+			},
+			goToListen(item){				
+				if(item.bookId == null || item.bookId.length <= 0){
+					//uni.showModal()
+					uni.showModal({
+						title: '提示',
+						showCancel:false,
+						content: '当前图书暂不支持试听',
+						success: function (res) {
+							if (res.confirm) {
+								console.log('好的');
+							} 
+						}
+					});
+				}else{
+					uni.navigateTo({						
+						url: "../listen/listen?bookid="+item.bookId[0]						
+					});
+				}				
+			},
+			// 跳转到听书详情
+			goToListenFree(item){
+				console.log(item,'item')
+				uni.navigateTo({
+					// url: "./musicbg?bookid="+item.bookid+"&fengImg="+item.image    // 后台播放版本
+					 url: "../listen/listen?bookid="+item.bookId+"&fengImg="+item.image   // 前台播放版本
+					// url: "./bgMusix"
+				});
+			},
+			// 跳转11
+			onPageJump(url) {
+				uni.navigateTo({
+					url: url
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import '@/style/mixin.scss';
+	.listenItem{
+		.btns{margin-top: 60rpx; margin-left: 20rpx;   font-size: 34rpx; justify-content: space-between;
+			.item{ margin-bottom:30rpx;}
+		}
+		.info{width: 50%;
+		image{width:100% ; height: 280rpx; border-radius: 20rpx;}
+		}
+	}
+	.shuwuLink{ padding: 0 20rpx;
+		image{border-radius: 30rpx;}
+	}
+	.contentButton{margin:50rpx 0;}
+	
+	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
+	.bookName{	 margin-top:10rpx;	display: block;  
+		white-space: nowrap;	 font-weight: bold;				
+		overflow-x: hidden;
+		text-overflow: ellipsis;
+		font-size: 30rpx; color: #333; padding: 10rpx 0;
+	}
+	// .videoBox{position: relative;}
+	
+	.playButton{position: absolute; z-index: 1; right: 4px; bottom: 4px;  padding: 5px; border-radius: 100%;  }
+	uni-image {
+	    width:auto !important;
+	    height: 350rpx;
+	}
+	.u-row{flex-wrap: wrap;}
+	.u-col{overflow: hidden;  margin-bottom: 30rpx; overflow: hidden;}
+	.listenList{padding: 10rpx; box-sizing: border-box; width: calc(100% - 10rpx);}
+	.flexbox{display: flex;}
+	.scroll-Y {
+			height: 300rpx;
+		}
+		.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: 60%;
+			height: 300rpx;
+			line-height: 300rpx;
+			text-align: center;
+			font-size: 36rpx;
+		}
+	.head_line {
+		margin: 50rpx 0;
+	
+	
+		b {
+			display: inline-block;
+			width: 12rpx;
+			height: 40rpx;
+			background-color: #54a966;
+			vertical-align: bottom;
+			margin: 0 20rpx 0 0;
+		}
+	
+		text {
+			font-size: 32rpx;
+			font-weight: bold;
+		}
+	
+		i {
+			float: right;
+			font-style: normal;
+			color: #8b8a91;
+			font-size: 24rpx;
+			margin: 5rpx 35rpx 0 0;
+		}
+	}
+	.home_bg {
+		background-image: url('@/static/icon/home_bg.jpg');
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: cover;
+		padding: 100rpx 0 40rpx 0;
+		position: relative;
+	
+		.icon_hua_1 {
+			margin: 0 auto;
+			width: 150rpx;
+			height: 150rpx;
+		}
+	
+		.search_box {
+			width: 90%;
+			height: 64upx;
+			background-color: #fff;
+			border-radius: 32upx;
+			display: flex;
+			align-items: center;
+			padding: 0upx 40upx;
+			position: absolute;
+			margin-left: -46%;
+			left: 50%;
+			bottom: -40rpx;
+			box-shadow: 0 0px 10px 1px #54a96633;
+	
+			.prompt {
+				color: #cccccc;
+	
+			}
+	
+			.icon_search {
+				background-image: url('@/static/icon/map_ic_search.png');
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: cover;
+				width: 29upx;
+				height: 28upx;
+				margin-right: 20upx;
+			}
+		}
+	}
+</style>

pages/listen/home.vue

@@ -2,24 +2,71 @@
 	<view>
 		<!-- 公共组件-每个页面必须引入 -->
 		<public-module></public-module>		
-		<!-- <z-nav-bar title="我的订单"></z-nav-bar> -->
+		<z-nav-bar title="我的听书"></z-nav-bar>
-		<z-nav-bar title="悦耳听书"></z-nav-bar>
+		<view class="home_bg" >
+			<image src="../../static/icon/home_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
+			<view v-if="showEbook" class="search_box" @click="onPageJump('./searchFor')">
+				<text class="icon_search"></text>
+				<text class="prompt">搜索...</text>
+			</view>
+		</view>
+		<view class="contentButton">
+			<u-tabs :scrollable="false" bg-color="#d4d4d4" active-color="#2979ff" inactive-color="#606266" bar-height="10" :list="contentButtonList" @click="contentButtonClick" lineWidth="42" :inactiveStyle="{fontSize:'32rpx'}" :activeStyle="{color: '#303133',fontWeight: 'bold', transform: 'scale(1.01)'}"></u-tabs>
+		</view>
 		<view class="listenList" v-if="bookList.length > 0">
-			<view class="wrap">
+			<view class="wrap" v-if="contentShow == 0">				 
 					<u-row gutter="16" justify="flex-start">
-						<u-col span="4" @click="goToListen(item)" v-for="(item,index) in bookList" :key="index">
+						<u-col span="4" v-for="(item,index) in bookList" :key="index">
-							<view class="videoBox demo-layout bg-purple">
+							<view class="videoBox demo-layout bg-purple" @click="goToListenFree(item)">
 								<image :src="item.image" mode="scaleToFill" ></image>
 								<u-icon class="playButton" name="play-circle" color="#54a966" size="28"></u-icon>
 							</view>
 							<text class="bookName">{{item.bookName}}</text>
+							<view class="btns flexbox">
+								<view class="item flexbox" @click="goToListenFree(item)">
+									<u-icon name="volume" color="#71d5a1" size="24"></u-icon>
+									<text>听 书</text>
+								</view>
+								<view class="item flexbox" @click="goPingshu(item.bookId)">
+									<u-icon name="chat" color="#fcbd71" size="24"></u-icon>
+									<text>评 书</text>
+								</view>
+							</view>
 						</u-col>						
 					</u-row>					
 				</view>			
+				<view class="wrap" v-if="contentShow == 1">					
+						<u-row gutter="16" justify="flex-start">
+							<u-col span="4"  v-for="(item,index) in tjBookLIst" :key="index">
+								<view class="videoBox demo-layout bg-purple" @click="goDetail(item)">
+									<image :src="item.productImages" mode="scaleToFill" ></image>
+									<u-icon class="playButton" name="play-circle" color="#54a966" size="28"></u-icon>
+								</view>
+								<text class="bookName">{{item.productName}}</text>
+								<view class="btns flexbox">
+									<view class="item flexbox" @click="goToListen(item)">
+										<u-icon name="volume" color="#71d5a1" size="24"></u-icon>
+										<text>听 书</text>
+									</view>
+									<view class="item flexbox" @click="wgGoPingshu(item)">
+										<u-icon name="chat" color="#fcbd71" size="24"></u-icon>
+										<text>评 书</text>
+									</view>
+								</view>
+							</u-col>						
+						</u-row>						
+					</view>	
 		</view>
-		<view class="quesheng" v-else>
+		<view>
-			<text>暂无听书数据~</text>
+			<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">
+				<u-divider text="全部加载完成"></u-divider>
+			</view>
 		</view>
+		
 		<music-play :playData="playData"></music-play>
 		<!-- <z-navigation></z-navigation> -->
 	</view>
@@ -33,21 +80,75 @@
 	export default {
 		data() {
 			return {
+				showEbook:false,
 				playData:{},
 				loadingNow : false,
-				bookList:[]
+				bookList:[],
+				contentShow:0,
+				page:1, // 页码
+				status: 3,
+				ygtotalPage:1,
+				tjPage:1,
+				tjTotalPage:1,
+				tjBookLIst:[],
+				contentButtonList: [{
+						name: '已购图书'
+					},
+					{
+						name: '推荐图书'
+					}
+				],
 			}
 		},
 		onLoad() {
 			this.getListDate()
+			this.getfreeBook()
 		},
 		onPullDownRefresh() {
 			console.log('下拉刷新了')
 			uni.stopPullDownRefresh(); 
+			   if(this.contentShow == 0){
+				   this.page=1, // 页码			   
+				   this.bookList = []
+				   this.getfreeBook()
+			   }
+			   else if(this.contentShow == 1){
+			   	this.tjPage=1, // 页码
+			   	this.tjBookLIst = []
+			   	this.getListDate()
+			   }
 		},
 		onReachBottom() {
 			this.loadingNow = true
 			console.log('到底了')
+			
+			if(this.contentShow == 0){	
+				//console.log(this.page , this.ygtotalPage)
+				if(this.page < this.ygtotalPage){	
+					this.page++
+					console.log('加载',this.page)
+					this.status = 0
+					this.getfreeBook()
+					
+				}else{
+					this.status = 1
+					console.log('加载完成了',this.page)
+					return
+				}
+				
+			}else if(this.contentShow == 1){				
+				if(this.tjPage < this.tjTotalPage){
+					this.tjPage++
+					console.log('加载',this.tjPage)
+					this.status = 0
+					this.getListDate()
+					
+				}else{
+					this.status = 1
+					console.log('加载完成了',this.tjPage)
+					return
+				}
+			}
 		},
 		components:{
 			musicPlay
@@ -56,39 +157,142 @@
 			...mapState(['userInfo'])
 		},
 		methods: {	
+			// 未购买图书，评书跳转
+			wgGoPingshu(item){
+				console.log('未购买评书',item)
+				if(item.bookId == null || item.bookId.length <= 0){
+					//uni.showModal()
+					uni.showModal({
+						title: '提示',
+						showCancel:false,
+						content: '当前未关联图书信息，请联系联系管理员',
+						success: function (res) {
+							if (res.confirm) {
+								console.log('好的');
+							} 
+						}
+					});
+				}else{
+					uni.navigateTo({
+						 url: '../comments/comments?bookid='+item.bookId[0],
+						// url:'../bookShop/commodityDetail'
+						
+					});
+				}
+			},
+			// 跳转到评书
+			goPingshu(val){
+				console.log('评书',val)
+				uni.navigateTo({
+					 url: '../comments/comments?bookid='+val,
+					// url:'../bookShop/commodityDetail'
+					
+				});
+			},			
+			contentButtonClick(e){
+				this.contentShow = e.index
+			},
 			// 获取已购买书籍
 			getfreeBook(){
 				this.$http
-					.post('book/bookshelf/getUserBookshelf', {
+					.post('book/userebookbuy/buylist', {
-						'userId': this.userInfo.id
+					// .post('book/buyorderdetail/querybuy', {
+						'id': this.userInfo.id,
+						'page':this.page,
+						'limit':9
 					})
 					.then(res => {
+						
 						if(res.code == 0){
-							this.bookList = res.userBookshelf
+							this.ygtotalPage = res.page.totalPage
-							console.log(res)
+							this.bookList = this.bookList.concat(res.page.list)
+							 console.log(res,'已购买')
+							this.status = 3
 						}					
 						
 					});
 			},
+			
+			// 获取推荐图书（未购买）
 			getListDate(){
 				this.loadingNow = false
 				// 获取书架列表
 				this.$http
-					.post('book/bookshelf/getUserBookshelf', {
+					.post('book/shopproduct/booklist', {
-						'userId': this.userInfo.id
+						'userId': this.userInfo.id,
+						'limit':9,
+						'page':this.tjPage
 					})
 					.then(res => {
+						console.log(res)
 						if(res.code == 0){
-							this.bookList = res.userBookshelf
+							this.tjTotalPage = res.pages.totalPage
-							console.log(res)
+							var arr = []
-						}					
+							if(res.pages.list.length > 0){
+								for (var i=0; i<res.pages.list.length; i++ ) {
+									var booidArr = []
+									if(res.pages.list[i].bookId != null){
+										booidArr = res.pages.list[i].bookId.split(',')										
+										//res.pages.list[i].bookId = booidArr
+										console.log(booidArr,'booidArr')
+										res.pages.list[i].bookId = booidArr
+									}else{
+										res.pages.list[i].bookId = []
+									}
+							}
+							
+							// res.pages.list.map((item) => {																		
+							// 		var ids = item.bookId.split(",")									
+							// 		item.bookId = ids									
+							// 		console.log(ids)
+							// 		console.log(item,666)
+							// 	    arr.push(item)
+							// 		console.log(arr,888)
+							// 	})
+							//	console.log(arr,444)
+							// }else{
+							// 	arr = []
+							// }
+							console.log(res.pages.list,'res.pages.list')
+							// var arr = res.pages.list							
+							 this.tjBookLIst = this.tjBookLIst.concat(res.pages.list)
+							// console.log(res)
+							this.status = 3
+						}	}			
 						
 					});
 			},
+			// 跳转详情页
+			goDetail(item) {
+				console.log(item,'goDetail-----')
+				uni.navigateTo({
+					url: '../bookShop/commodityDetail?id=' + item.productId
+				});
+			},
 			goToListen(item){				
+				if(item.bookId == null || item.bookId.length <= 0){
+					//uni.showModal()
+					uni.showModal({
+						title: '提示',
+						showCancel:false,
+						content: '当前图书暂不支持试听',
+						success: function (res) {
+							if (res.confirm) {
+								console.log('好的');
+							} 
+						}
+					});
+				}else{
+					uni.navigateTo({						
+						 url: "./listen?bookid="+item.bookId[0]						
+					});
+				}				
+			},
+			// 跳转到听书详情
+			goToListenFree(item){
 				uni.navigateTo({
 					// url: "./musicbg?bookid="+item.bookid+"&fengImg="+item.image    // 后台播放版本
-					 url: "./listen?bookid="+item.bookid+"&fengImg="+item.image   // 前台播放版本
+					 url: "./listen?bookid="+item.bookId+"&fengImg="+item.image   // 前台播放版本
 					// url: "./bgMusix"
 				});
 			},
@@ -104,6 +308,10 @@
 
 <style lang="scss" scoped>
 	@import '@/style/mixin.scss';
+	.contentButton{margin: 20rpx 0;}
+	.btns{margin-top: 15rpx; background-color: #f1f1f1; border-radius: 10rpx; font-size: 28rpx; justify-content: space-between;
+		
+	}
 	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
 	.bookName{		
 		white-space: nowrap;					
@@ -119,7 +327,7 @@
 	    height: 350rpx;
 	}
 	.u-row{flex-wrap: wrap;}
-	.u-col{overflow: hidden; height: 210px; margin-bottom: 30rpx; }
+	.u-col{overflow: hidden; height: 250px; margin-bottom: 30rpx; }
 	.listenList{padding: 10rpx; box-sizing: border-box; width: calc(100% - 10rpx);}
 	.flexbox{display: flex;}
 	.scroll-Y {

pages/listen/listen.vue

@@ -28,9 +28,9 @@
 								{{item.title}} >
 							</p>
 						</view>
-						<view class="price">
+						<!-- <view class="price">
 							<text class="light">￥98.00</text>
-						</view>
+						</view> -->
 						
 					</view>
 				</view>
@@ -72,7 +72,7 @@
 				<view >
 					<view 
 					:class="[item.sort == 1 && isBuy == false ? 'graytitle' : '', 
-					userInfo.playingInfo.bookid == item.bookid && userInfo.playingInfo.chapterId == item.chapterId ? 'playing' : '']" @click="listenOne(item)">{{item.chapterName}} &nbsp;&nbsp;
+					userInfo.playingInfo.bookid==item.bookid && userInfo.playingInfo.chapterId == item.chapterId ? 'playing' : '']" @click="listenOne(item, index)">{{item.chapterName}}&nbsp;&nbsp;
 					<uni-tag v-if="item.sort == 0 && isBuy == false" class="tag" size="small" :inverted="true" text="试听" type="success" />
 					<!-- <image  class="playingFig" src="/static/playingGif.gif" mode="aspectFill"></image>	 -->
 					</view>					
@@ -81,7 +81,7 @@
 		</view>	
 		
 		<music-play :playData="playData"></music-play>
-		<z-navigation></z-navigation>
+		<!-- <z-navigation></z-navigation> -->
 		</view>
 	</view>
 </template>
@@ -152,9 +152,9 @@
 		},
 		//第一次加载
 		onLoad(e) {
+			console.log('------------------')
 			// 隐藏原生的tabbar
-			// console.log(e,'e')
+			 console.log(e,'e')			
-			
 			uni.hideTabBar();			
 			this.bookid = e.bookid
 			//console.log(this.userInfo.playFlag,'this.userInfo.playFlag')			
@@ -189,14 +189,39 @@
 							}
 							console.log(res,'res基本信息')
 						}).catch((error)=>{
-							console.log(error.msg)
+							console.log(error)
 						})
+			},
+			plays() { // 播放音频
+			    this.muteBgMusic = !this.muteBgMusic
+			    console.log(this.muteBgMusic,this.muteBgMusic?'已关闭音乐####':'已开启音乐####');      
+			    
+				
 			},
 			addMusicList(){
-				this.playData = {
+				
-					'myList' : this.libLIst,
+				if (this.userInfo.playFlag) {
-					// 'fengImg' : this.fengImg,						
+				    // 暂停
+				  //  this.$music.playBgm({mute:true})	
+				//	this.$bgm.pause()
+					uni.showToast({
+						title:'已经在播放音频',
+						icon:'none'
+					})
+				} else {
+				    // 播放
+				    // this.$music.playBgm({mute:false})
+					if(this.$bgm._options.src == ''){
+						this.$music.playBgm({mute:false})
+					}else{
+						this.$bgm.play()
+						}
 				}
+				
+				// this.playData = {
+				// 	'myList' : this.libLIst,
+				// 	// 'fengImg' : this.fengImg,						
+				// }
 				// 显示播放组件				
 				this.setUserInfo({'playVisible':true})
 				uni.setStorage({
@@ -211,14 +236,41 @@
 			},
 			
 			// 播放单个音频
-			listenOne(item){
+			listenOne(item,index){
-				console.log('点击了1')
+				
-				if(this.$bgm._options.src == ''){
+				console.log('点击了',index)				
-					this.$music.playBgm({mute:false})
+				
-					this.$music.setOneMusic(item)	
+				if(this.libLIst.length > 0){
-				}else{
+					this.setUserInfo({'playIndex': index})
-					this.$music.setOneMusic(item)
+				    this.$music.setList(this.libLIst,'autoPlay',index)
-				}	
+					this.setUserInfo({'playVisible': true})
+					uni.setStorage({
+						key: 'playVisible',
+						data: true,
+						success: function () {
+							console.log('success');
+						}
+					});
+				// this.fengImg = newVal.fengImg
+				
+				// 本地存储播放列表
+				uni.setStorage({
+					key: 'playData',
+					data: {'myList':this.libLIst},
+					success: function () {
+						console.log('success');
+					}
+				});
+				// 系统暂存
+				this.setUserInfo({'myList':this.libLIst})
+				// if(this.$bgm._options.src == ''){
+				//     this.$music.playBgm({mute:false})					
+				// 	this.$music.setList(item,index)	
+				// 	// this.$bgm.play()
+				// 	// console.log(this.userInfo,'$bgm')
+				// }else{					
+				// 	this.$music.setOneMusic(item)
+			  }	
 			},
 			
 			// 购买
@@ -379,14 +431,11 @@
 								this.libLIst = res.BookCatalogue
 								// this.fengImg = res.images
 								this.isBuy = res.buy								
-								// if(this.userInfo.playFlag){
-								// 	console.log('有内容在播放，不获取内容',)
-								// 	return  
-									
-								// }else{
-									// this.getListenRate()
-								// }
 							}else{								
+								uni.showToast({
+									title:'暂无可听章节哦~',
+									icon:'none'
+								})
 								setTimeout(()=>{
 									uni.navigateBack({ // 返回上一页
 										delta: 1
@@ -394,7 +443,9 @@
 								},2000)
 							}
 						}
-					}).catch((e)=>{})
+					}).catch((e)=>{
+						console.log(e.msg)
+					})
 			},
 			// 获取音频数据
 			listen(e,index){

pages/listen/listenNotBuy.vue

@@ -0,0 +1,592 @@
+<template>
+	<!--父组件-->
+	
+	<view class="container">
+		<!-- <view class="mini"></view> -->
+		<view>
+		<z-nav-bar title="悦耳听书"></z-nav-bar>
+		<!-- 基本信息 -->
+		<view class="book_neir">
+			<view class="flexbox info">
+				<view class="item">
+					<image class="bn_img" :src="bookInfo.images"
+						mode="widthFix"></image>
+				</view>
+				<!-- <img :src="bookInfo.images" class="bn_img"> -->
+				<view class="item">
+					<!-- <b class="leiXing" v-if="bookInfo.isVip==1" style="background: #c79119;">VIP</b>
+					<b class="leiXing" v-if="bookInfo.isVip==2" style="background: #c74119;">付费</b> -->
+					<view class="bn_nes">						
+						<view style="font-weight: bold;margin-bottom: 30rpx;">
+							{{bookInfo.name}}
+						</view>
+						<view style="color: #9b9b9b;font-size: 28rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 38rpx;">
+							<p @click="onAuCHJump(bookInfo.authorId,1)" style="margin-bottom: 20rpx;">
+								{{bookInfo.authorName}} [著] >
+							</p>
+							<p @click="onAuCHJump(item.id,2)" v-for="item in this.bookInfo.publisherNIList">
+								{{item.title}} >
+							</p>
+						</view>
+						<view class="price">
+							<text class="light">￥98.00</text>
+						</view>
+						
+					</view>
+				</view>
+			</view>			
+			<!-- 按钮组 -->
+			<view class="btns">
+				<!-- 已购买组 -->
+				<view class="home_nar flexbox" v-if="isBuy">
+					<view class="hn_cl_tit yigoumai" >
+						<image src="../../static/icon/yigou.png" mode="aspectFit"></image>
+						<text>已购买</text>
+					</view>
+					<view class="hn_cl_tit chaoshi" @click="addMusicList">
+						<image src="../../static/icon/shiting.png" mode="aspectFit"></image>
+						<text>立即听书</text>
+					</view>
+				</view>
+				<!-- 试听组 -->
+				<view class="home_nar flexbox" v-else> 
+					<view class="hn_cl_tit shiting" @click="buyBook">
+						<image src="../../static/icon/goumai.png" mode="aspectFit"></image>
+						<text>立即购买</text>
+					</view>
+					<view class="hn_cl_tit chaoshi" @click="addMusicList">
+						<image src="../../static/icon/shiting.png" mode="aspectFit"></image>
+						<text>立即试听</text>
+					</view>
+				</view>
+				
+			</view>
+		</view>
+		<!-- end -->
+		<!-- 
+			sort:0   可以听
+			sort:1   不可以听
+		 -->
+		<view class="playList" >
+			<view class="item" v-for="(item,index) in libLIst" :key="index" >
+				<view >
+					<view 
+					:class="[item.sort == 1 && isBuy == false ? 'graytitle' : '', 
+					userInfo.playingInfo.bookid == item.bookid && userInfo.playingInfo.chapterId == item.chapterId ? 'playing' : '']" @click="listenOne(item)">{{item.chapterName}}&nbsp;&nbsp;
+					<uni-tag v-if="item.sort == 0 && isBuy == false" class="tag" size="small" :inverted="true" text="试听" type="success" />
+					<!-- <image  class="playingFig" src="/static/playingGif.gif" mode="aspectFill"></image>	 -->
+					</view>					
+				</view>
+			</view>			
+		</view>	
+		
+		<music-play :playData="playData"></music-play>
+		<z-navigation></z-navigation>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+    // import textScroll from '@/components/textScroll/index.vue'
+	// import cxAdudioPlay from '@/components/cx-audio-play/cx-audio-play.vue'
+	 import musicPlay from '@/components/music.vue'
+	 import $http from '../../config/requestConfig';
+	 import {
+	 	mapState,mapMutations
+	 } from 'vuex';
+	export default {
+		components: {
+			//  cxAdudioPlay,
+			// textScroll,
+			musicPlay
+		},
+		data() {
+			return {
+				isBuy:false,  // true 已购买，false 未购买
+				playData:{},
+				stopPlay:false,    // 关闭音频
+				jia:false,    // 下一I首
+				forceRefresh:true,
+				current:0,
+				bookInfo:{}, // 书籍详情
+				bookid:null,  // 书籍id
+				playid:null, // 正在播放的章节id
+				playchapName:'', // 正在播放的章节名称
+				playIndex:null,     // 正在播放的序号值
+				currentTime:{
+					time:0,
+					flag:''
+				},
+				pageTab:[
+					{name: '正在播放'},
+					{name: '播放列表'}
+				],
+				fengImg:'', // 播放封面
+				libLIst:[
+					// {
+					// 	name:"第二章",
+					// 	url: 'https://ehh-private-01.oss-cn-beijing.aliyuncs.com/2023/07/14/6c6d7f7b947c4dc18881e8682b4dc36a2ce742.mp3'
+					// },
+					
+				], // 书籍目录
+				videoList: [], //音频文件				
+				BsNav: [ //倍数-自定义
+					{
+						id: 1.0,
+						bs: '1.0'
+					}, {
+						id: 1.5,
+						bs: '1.5'
+					}, {
+						id: 2.0,
+						bs: '2.0'
+					}
+				],
+				orderPlayBtn:false,     // 是否开启按顺序播放
+				LibVisible:false,
+				boardRemark: '',
+				StyleSheet:'font-size:36rpx; text-align:center',
+				jian:false,   // 上一曲切换
+			}
+		},
+		//第一次加载
+		onLoad(e) {			
+			// 隐藏原生的tabbar
+			 console.log(e,'e')			
+			uni.hideTabBar();			
+			this.bookid = e.bookid
+			//console.log(this.userInfo.playFlag,'this.userInfo.playFlag')			
+			 this.getLibList()	
+			 // this.getBookInfo()
+			 this.getProDetail()
+			
+		},
+		created() {
+			
+		},
+		onShow() {	
+		//	console.log(this.userInfo.orderPlayBtn,'初始化')
+			if(this.userInfo.orderPlayBtn != undefined){
+				this.orderPlayBtn = this.userInfo.orderPlayBtn
+			}
+			
+		},
+		computed: {
+			...mapState(['userInfo'])
+		},
+		methods: {
+			...mapMutations(['setUserInfo']),
+			getProDetail(e){
+				// 获取商品详情
+				uni.showLoading({
+					title: '加载中'
+				});	
+						console.log(this.bookid,'getProDetail')
+				this.$http
+					.post('/book/shopproduct/info/' + this.bookid)
+					.then(res => {	
+						console.log(res,'商品详情')
+						this.bookInfo = res.shopProduct						
+						uni.hideLoading();
+					}).catch((e)=>{
+						console.log(e)
+					})
+			},
+			getBookInfo(){
+				// 获取书本基本信息
+					this.$http
+						.post('book/book/appinfo/' + this.bookid + '/' + this.userInfo.id)
+						.then(res => {
+							if(res.code == 0){
+								this.bookInfo = res.book
+							}else{
+								console.log(res.msg)
+							}
+							console.log(res,'res基本信息')
+						}).catch((error)=>{
+							console.log(error)
+						})
+			},
+			addMusicList(){
+				this.playData = {
+					'myList' : this.libLIst,
+					// 'fengImg' : this.fengImg,						
+				}
+				// 显示播放组件				
+				this.setUserInfo({'playVisible':true})
+				uni.setStorage({
+					key: 'playVisible',
+					data: true,
+					success: function () {
+						console.log('success');
+					}
+				});
+				
+				// console.log(this.playData,'this.playData')
+			},
+			
+			// 播放单个音频
+			listenOne(item){
+				console.log('点击了1')
+				if(this.$bgm._options.src == ''){
+				    this.$music.playBgm({mute:false})					
+					this.$music.setOneMusic(item)	
+					// this.$bgm.play()
+					console.log(this.userInfo,'$bgm')
+				}else{
+					
+					this.$music.setOneMusic(item)
+				}	
+			},
+			
+			// 购买
+			buyBook(){
+				uni.showModal({
+						title: '提示',
+						cancelText: '暂不购买',
+						confirmText:'立即购买',
+						content: '确定花费￥95元购买本书电子版吗？',
+						success: function (res) {
+							if (res.confirm) {
+								console.log('用户点击确定');
+							} 
+						}
+					});
+			},
+			
+			// 信息介绍跳转
+			onAuCHJump(id, e) {
+				uni.navigateTo({
+					url: '../eBook/bookMessage?Id=' + id + '&typ=' + e
+				});
+			},
+			// 获取听书进度
+			getListenRate(){
+				// this.forceRefresh = false
+				let data = {
+					bookId: this.bookid,
+					userId: this.userInfo.id,
+				}
+				$http.request({
+					url: "book/listening/getReadRate",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data,
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					 console.log(res,'历史记录')
+					if(res.readRate.chapterId){   // 有听书进度时
+						this.playid = res.readRate.chapterId
+						this.currentTime.time = res.readRate.precent
+						this.currentTime.flag = 'init'	
+						
+						// this.forceRefresh = true
+						for (var i =0; i<this.libLIst.length; i++) {
+							if(res.readRate.chapterId == this.libLIst[i].chapterId){
+								this.playIndex = i								
+							}
+						}						
+					    // this.playIndex = res.readRate.id - 1
+						// console.log('有内容',this.playIndex)
+						 this.playIndex >= this.libLIst.length - 1 ? this.jia = true : this.jia = false
+						 this.playIndex > 0 ? this.jian = true : this.jian = false
+						 
+						// this.firstListen()
+						
+							
+					}else{ // 没有听书进度时
+						// this.listen(this.libLIst[0],0)
+					}
+									
+					
+				})
+			},
+			// 第一次加载音乐播放器
+			firstListen(){
+				this.forceRefresh = false				
+				this.$http
+					.post('book/bookchaptercontent/appBooksChapterContent', {
+						'userId': this.userInfo.id,
+						'bookid': this.bookid,
+						'id': this.playid
+					})
+					.then(res => {						
+						//this.tmpChapter.text = res.bookCatalogue
+						if(res.code == 0){							
+							 if(res.bookCatalogue.voices[0] != null){
+								// console.log('走这')
+								this.videoList = []								
+								this.boardRemark = res.bookCatalogue.chapter[0]
+								this.fengImg = res.image								
+								this.videoList.push({'recorPath':res.bookCatalogue.voices[0]})
+								// console.log(res.bookCatalogue.voices[0],'path')
+								this.forceRefresh = true
+							}else{
+								uni.showToast({
+									title:'暂无可播放音频~',
+									icon:'none',
+									duration:2000
+								})
+								setTimeout(()=>{									
+									uni.navigateBack({ // 返回上一页
+										delta: 1
+									});
+								},2000)
+							}
+						}
+					}).catch((e)=>{})
+			},
+			// 存储播放进度
+			saveRate(val){				
+				this.$http
+					.post('book/listening/save', {						
+						'userId': this.userInfo.id,
+						'bookId': this.bookid,
+						'chapterId': this.playid,
+						'chapterName':this.playchapName ,
+						'precent': Math.ceil(val),
+						//'contentId'
+					})
+					.then(res => {						
+						if(res.code == 0){
+							console.log(res,'存储完成')
+						}
+					}).catch((e)=>{})
+			},
+			// 播放上一首
+			playPrev(val){
+				console.log('播放上一首')
+				this.playIndex -= 1
+				//console.log(this.playIndex)
+				this.currentTime.time = 0
+				this.currentTime.flag = ''	
+				this.listen(this.libLIst[this.playIndex],this.playIndex)
+			},
+			// 顺序播放开关
+			orderPlay(val){
+				this.setUserInfo({orderPlayBtn:val})
+				console.log(this.userInfo.orderPlayBtn)
+				this.orderPlayBtn = val
+				console.log(val,'orderPlay')
+			},
+			// 显示播放列表
+			showLib(e){
+				console.log(e)
+				this.LibVisible = true
+			},
+			// 选择章节
+			choseMusic(item, index){	
+				this.currentTime.time = 0
+				this.currentTime.flag = ''
+				this.listen(item,index)
+				this.LibVisible = false
+			},
+			// 获取章节列表
+			getLibList(){				
+				this.$http
+					.post('book/book/getBookCatalogue', {
+						'userid': this.userInfo.id,
+						'bookid': this.bookid,
+						// 'id': this.playid
+					})
+					.then(res => {						
+						if(res.code == 0){
+							console.log(res,999)
+							if(res.BookCatalogue.length > 0){
+								this.libLIst = res.BookCatalogue
+								// this.fengImg = res.images
+								this.isBuy = res.buy
+								// if(this.userInfo.playFlag){
+								// 	console.log('有内容在播放，不获取内容',)
+								// 	return  
+									
+								// }else{
+									// this.getListenRate()
+								// }
+							}else{
+								setTimeout(()=>{
+									uni.navigateBack({ // 返回上一页
+										delta: 1
+									});
+								},2000)
+							}
+						}
+					}).catch((e)=>{
+						console.log(e)
+					})
+			},
+			// 获取音频数据
+			listen(e,index){
+				console.log(this.currentTime,'this.currentTime')
+				// console.log(e,'playchapName')
+				this.playid = e.chapterId
+				this.playIndex = index
+				this.playchapName = e.chapterName
+				this.playIndex >= this.libLIst.length - 1 ? this.jia = true : this.jia = false
+				this.playIndex > 0 ? this.jian = true : this.jian = false
+				// console.log(this.jian,45454545)
+				this.forceRefresh = false
+				this.$http
+					.post('book/bookchaptercontent/appBooksChapterContent', {
+						'userId': this.userInfo.id,
+						'bookid': this.bookid,
+						'id': this.playid
+					})
+					.then(res => {						
+						//this.tmpChapter.text = res.bookCatalogue
+						if(res.code == 0){
+							// console.log(res)
+							 if(res.bookCatalogue.voices[0] != null && res.bookCatalogue.voices[0].length> 15){
+								// console.log('走这')
+								
+								this.videoList = []								
+								this.boardRemark = res.bookCatalogue.chapter[0]
+								this.fengImg = res.image								
+								this.videoList.push({'recorPath':res.bookCatalogue.voices[0]})
+								 console.log(res.bookCatalogue.voices[0],'path')
+								this.forceRefresh = true
+							}else{
+								this.forceRefresh = true
+								uni.showToast({
+									title:'暂无可播放音频,加载下一章',
+									icon:'none',
+									duration:2000
+								})
+								setTimeout(()=>{
+									if(this.playIndex+1 >= this.libLIst.length){
+										// this.stopPlay = true
+										uni.showToast({
+											title:'本书已全部播放完毕',
+											icon:'none',
+											duration:2000
+										})
+									}else{
+										this.listen(this.libLIst[this.playIndex],this.playIndex)
+									}
+								},2000)
+								
+							}
+						}
+					}).catch((e)=>{})
+			},
+			// 下一首
+			xiayishou(){
+				console.log('加载下一首')
+				if(this.playIndex + 1 <= this.libLIst.length-1){
+					this.playIndex += 1	
+					this.saveRate(0)
+					this.currentTime.time = 0
+					this.currentTime.flag = ''	
+					this.listen(this.libLIst[this.playIndex],this.playIndex)
+				}else{
+					this.jia = false
+					uni.showToast({
+						title:"音频已经播放完毕！",
+						icon:"none"
+					})
+				}
+			},
+			TabChange(e){
+				// tab 切换
+				this.current = e.index
+				// console.log(e)
+			}
+		},		
+		
+		
+		// watch:{
+		// 	list: {
+		// 	        handler (newName, oldName) {
+		// 	            console.log(newName)
+		// 	        },
+		// 	        immediate: true
+		// 	    }
+		// }
+	}
+</script>
+
+<style lang="less">
+	.playingFig{ width:100rpx; height:100rpx; display: inline-block; vertical-align: middle;}
+	.price{ margin-top: 160rpx; overflow: hidden;
+		.light{font-size: 50rpx; font-weight: bold; color: #f05654;}
+	}
+	.charType{display: inline; width:20px !important;}
+	.graytitle{color: #999;}
+	.yigoumai{background-color: #ffc773;}
+	.shiting{background-color:#f47983 ; }
+	.playing{color: #1daa5c;}
+	.chaoshi{background-color:#1daa5c ; }
+	.home_nar{margin: 30rpx 0; justify-content: space-between;}
+	.hn_cl_tit {
+		 width: 48%;
+		text-align: center;			 
+		 border-radius: 20rpx ;	padding-top: 10rpx;	
+		// line-height: 110upx;
+		display: flex;
+		align-content: center;
+		justify-content: center;
+		image {
+			
+			width: 80upx;
+			height: 80upx;
+			display: inline-block;
+			// margin: 0 auto;
+			// margin: 0 20rpx;
+		}
+		text{height: 100upx; display:inline-block; line-height: 80upx; color: #fff; font-size: 38rpx;}
+	}
+	.flexbox{display: flex;}
+	.book_neir{ margin-top: 80rpx; padding: 20rpx;
+		.bn_img{width:300rpx !important;}
+	}
+	.info{overflow: hidden;width: 100%;}
+	.book_neir {
+		margin: 20rpx 0 0 0;
+		position: relative;
+	
+		.item{display: inline-block; float: left; width: 50%; overflow: hidden;}
+		.bn_img {
+			float: left;
+			width: 250upx;
+			height: 320upx;
+		}
+	
+		.bn_nes {
+			float: left;
+			font-size: 36rpx;
+			margin-left: 40rpx;
+	
+			view {
+				margin: 20rpx 0 0 0;
+			}
+		}
+	
+		.leiXing {
+			display: block;
+			padding: 5rpx 10rpx;
+			border-radius: 10rpx;
+			text-align: center;
+			color: #fff;
+			font-weight: normal;
+			background: #27b386;
+			position: absolute;
+			left: -15upx;
+			top: 10upx;
+			font-size: 16rpx;
+		}
+	}
+	.container{background-color: #fff; }
+	.playTitle{width: 80%; margin: 20rpx auto; margin-top: 50rpx;}
+	.libTitle{font-size:40rpx; margin:40rpx 0; display: block; text-align: center;}
+	.tanchu{	padding: 40rpx 30rpx 40rpx 30rpx; }
+	.playList{padding: 20rpx; color: #666; }
+	.playList .item{display: block;line-height:80rpx;  white-space: nowrap;					
+		overflow-x: hidden; font-size: 36rpx; 
+		text-overflow: ellipsis;}
+	.tag{margin-left: 20rpx;}	
+	.playNow{color: #27b386;}	
+	.pageTabBox{width:150px; margin: 20rpx auto; font-size:60rpx;}	
+	.cxAdudioPlay{position:fixed; bottom: 150rpx; left:0; }
+</style>

pages/listen/music.js

@@ -1,138 +0,0 @@
-export default [{
-	id: 1,			 //ID
-	musicName: "美人谷",		 //歌名
-	musicArtist: "阿兰",	 //歌手
-	musicAlbum: "美人谷",//专辑
-	musicAlbumID: 1,	 //专辑ID
-	musicAlbumURl: "https://p1.music.126.net/byZ9hvAI2r20WBnuB-S_ng==/109951163069341151.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0",																		 //专辑图片路径
-	musicPath: "https://music.163.com/song?id=1454732243&userid=306770142",		 //路径
-	musicYear: "2017-10-27",	 //发布年份
-	musicDuration: 281000, //时长
-	size: 3436481,		 //文件大小
-	favour: false,
-	lyric: `[ti:美人谷]
-[ar:阿兰]
-[al:十念]
-
-[by:天龙888]
-[00:00.00]美人谷 - 阿兰
-[00:05.00]
-[00:07.95]词：毛慧
-[00:09.09]曲：阿兰/毛慧
-[00:11.31]编曲：叶月/王晨
-[00:13.57]制作人：毛慧
-[00:15.76]录音：张生磊（记忆时刻录音棚）
-[00:17.45]
-[00:38.13]越过山河的神秘
-[00:41.03]一幕自然的洗礼
-[00:44.18]看见山川出云泽被着大地
-[00:49.76]
-[00:50.59]雨顺菁华自天际
-[00:53.69]花随鱼翔潜水底
-[00:57.44]可有语言能形容的美丽
-[01:02.62]
-[01:03.44]如此熟悉的声音
-[01:06.38]莫名安全的气息
-[01:09.45]这是谁安排了我们的相聚
-[01:14.87]
-[01:15.84]没有前世的际遇
-[01:18.93]怎会有心灵相犀
-[01:22.48]任日夕月落耳鬓无语
-[01:28.34]
-[01:31.72]如果道路很遥远
-[01:35.19]你是否会愿意
-[01:38.44]等春播秋忙
-[01:40.34]夏耕冬藏
-[01:41.83]平凡的神谕
-[01:44.69]如果你看到我的心
-[01:47.84]就能看到自己
-[01:51.06]我会陪你一同醉去
-[01:57.00]
-[02:47.58]采撷飘来的飞絮
-[02:50.56]点缀纯净的天宇
-[02:53.73]谁让万物轮转都不会死去
-[02:58.84]
-[03:00.04]穿越最远的距离
-[03:03.14]唤醒沉睡的记忆
-[03:06.91]我的爱在这里等你
-[03:11.88]
-[03:12.74]如果道路很遥远
-[03:16.20]你是否会愿意
-[03:19.49]等春播秋忙
-[03:21.35]夏耕冬藏
-[03:22.89]平凡的神谕
-[03:25.78]如果你看到我的心
-[03:28.98]就能看到自己
-[03:32.01]我会陪你一同醉去
-[03:37.11]
-[03:38.01]如果时间很遥远
-[03:41.46]你是否会愿意
-[03:44.66]等朝花夕拾
-[03:46.57]缤纷舞尽
-[03:48.16]神灵的游戏
-[03:50.96]如果你能找到我心
-[03:54.19]就能找到自己
-[03:57.32]因为我的爱已随你而去
-[04:04.55]
-[04:06.88]lrc歌词编辑：天龙 QQ：26092798`
-}, {
-	id: 2,
-	musicName: "朝暮",
-	musicArtist: "阿兰",
-	musicAlbum: "朝暮",
-	musicAlbumID: 2,
-	musicAlbumURl: "https://p1.music.126.net/hB5AqPeXTg5Q-5BsyLiCwg==/109951164325877834.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0",
-	musicPath: "https://music.163.com/song?id=1454732243&userid=306770142",
-	musicYear: "2019-08-28",
-	musicDuration: 247000,
-	size: 3022101,
-	favour: false,
-	lyric: `[ti:朝暮]
-[ar:阿兰]
-[al:朝暮]
-[by:]
-[offset:0]
-[00:00.22]朝暮 - 阿兰
-[00:01.15]词：林乔
-[00:01.75]曲：罗力威
-[00:02.55]编曲：郭峻江
-[00:03.47]制作人：郭峻江
-[00:04.87]人声监制/录音：张生磊
-[00:07.01]吉他录制：金天
-[00:08.23]弦乐录制：国际首席爱乐乐团
-[00:10.57]混音工程师：李嘉佳
-[00:12.15]混音工作室：记忆时刻
-[00:13.96]母带制作：玉霖@麦合星臣
-[00:15.87]出品：阿兰工作室
-[00:40.33]天雨润酥街 我遥遥 又怅羡
-[00:45.02]莫非清风转 你茫茫 化流年
-[00:49.84]落晖别有涟 撑纸伞
-[00:53.07]徐徐踱步犹犹几夜
-[00:59.55]跃上星宿间 我幽幽 洒心愿
-[01:04.26]月华徒倚圆 你返返 在何年
-[01:09.88]若祈愿苍天 聚散一眸间
-[01:18.76]朝朝若相盼 暮暮若相唤
-[01:23.60]何何你再伴 流流萤扑扇
-[01:28.28]长啸复琴弹 歌待欢
-[01:33.33]怎负花尽看 惹泪低惋
-[01:38.24]朝朝若相盼 暮暮若相唤
-[01:42.79]何何你再伴 红红烛窗婉
-[01:47.46]天涯再远端 近思眷
-[01:52.53]岁月终会换 执手彼岸 相挽
-[02:01.92]天雨润酥街 我遥遥 又怅羡
-[02:06.74]莫非清风转 你茫茫 化流年
-[02:11.65]落晖别有涟 撑纸伞
-[02:14.62]徐徐踱步犹犹几夜
-[02:21.26]跃上星宿间 我幽幽 洒心愿
-[02:26.02]月华徒倚圆 你返返 在何年
-[02:31.51]若祈愿苍天 聚散一眸间
-[03:02.02]朝朝若相盼 暮暮若相唤
-[03:06.76]何何你再伴 流流萤扑扇
-[03:11.51]长啸复琴弹 歌待欢
-[03:16.43]怎负花尽看 惹泪低惋
-[03:21.39]朝朝若相盼 暮暮若相唤
-[03:25.87]何何你再伴 红红烛窗婉
-[03:30.67]天涯再远端 近思眷
-[03:35.71]岁月终会换 执手彼岸 相挽
-[03:45.25]岁月终会换 执手彼岸 相挽`
-}]

pages/listen/setListen.vue

@@ -23,7 +23,7 @@
 			return {
 				playData:{},	
 				formData:{},
-				playerVisible:false
+				// playerVisible:false
 				// playerVisible:this.userInfo.playVisible
 			}
 		},
@@ -36,7 +36,18 @@
 			musicPlay
 		},
 		computed:{
-			...mapState(['userInfo'])
+			...mapState(['userInfo']),
+			// boardRemark(){
+			// 	return this.userInfo.playTitle
+			// 	// console.log(this.userInfo, 'this.userInfo')
+			// 	},
+			playerVisible(){
+				if(this.userInfo.playVisible){
+					return this.userInfo.playVisible
+				}else{
+					return false
+				}
+			}
 		},
 		methods: {
 				...mapMutations(['setUserInfo']),

pages/peanut/aboutUs.vue

@@ -21,13 +21,16 @@
 		<view class="prof">
 			<p>一款线上电子书APP，包含医学类、国学类、文学类、中医古籍等各种类型。3D仿真翻页、护眼模式等阅读技术，打造舒适阅读体验。图文混排，AI人声读书听书。部分电子书也有对应的纸质书，给予用户更多的阅读选择。</p>
 		</view>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	export default {
 		data() {
 			return {
+				playData:{},
 				versionCode:null,
 				versionName:null
 			}
@@ -35,6 +38,9 @@
 		onLoad() {
 			this.getAppInfo()
 		},
+		components:{
+			musicPlay	
+		},
 		methods: {
 			// 获取版本信息
 			getAppInfo(){

pages/peanut/bookshelf.vue

@@ -93,15 +93,13 @@
 				</view>
 			</view>
 		</view>
-
-
-
-
 		<z-navigation></z-navigation>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	import {
 		mapState
@@ -109,6 +107,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				bookNum: null, // 
 				topX: '', //x轴
 				leftY: '', //y轴
@@ -142,6 +141,9 @@
 			uni.stopPullDownRefresh()
 		},
 		//方法
+		components:{
+			musicPlay		
+		},
 		methods: {
 			getData() {
 				this.bokMesDet.userId = this.userInfo.id

pages/peanut/home.vue

@@ -10,28 +10,26 @@
 		</view>
 		<!-- <view class="home_nar" v-if="showEbook"> -->
 		<view class="home_nar">	
-				<view class="hn_cl_tit chaoshi" @click="onPageJump('../bookShop/classify')">
+				<view class="hn_cl_tit shuguan" @click="onPageJump('../clock/clock')">
-					<image src="../../static/icon/home_bar_2.png" mode="aspectFit"></image>
+					<image src="../../static/icon/daka.png" mode="aspectFit"></image>
-					<text>读书</text>
+					<text>读书打卡</text>
 				</view>	
+						
 			<view  class="hn_cl_tit dianzishu" @click="onPageJump('../listen/home')">
-				<image src="../../static/icon/home_bar_1.png" mode="aspectFit"></image>
+				<image src="../../static/icon/ting11.png" mode="aspectFit"></image>
 				<text>听书</text>
 			</view>			
-			<!-- <view  class="hn_cl_tit dianzishu" @click="onPageJump('../eBook/bookList')">
-				<image src="../../static/icon/home_bar_1.png" mode="aspectFit"></image>
-				<text>电子书</text>
-			</view> -->
-			<!-- <view class="hn_cl_tit" @click="onPageJump('../bookShop/bookShopIndex')"> -->
 			
-			<!-- <view class="hn_cl_tit" @click="onGoing()">
+			<!-- <view class="hn_cl_tit" @click="onPageJump('../bookShop/bookShopIndex')"> -->			
-				<image src="../../static/icon/home_bar_3.png" mode="aspectFit"></image>
+			<view class="hn_cl_tit shuping" @click="onTabJump()">
-				讲书
+				<image src="../../static/icon/pingshu1.png" mode="aspectFit"></image>
+				<text>书评</text>
+			</view>
+			
+			<view class="hn_cl_tit chaoshi" @click="onPageJump('../bookShop/classify')">
+				<image src="../../static/icon/home_bar_2.png" mode="aspectFit"></image>
+				<text>图书馆</text>
 			</view>		
-			<view class="hn_cl_tit" @click="onGoing()">
-				<image src="../../static/icon/home_bar_4.png" mode="aspectFit"></image>
-				论文集
-			</view> -->
 		</view>
 
 		<view class="home_lunbo">
@@ -88,9 +86,9 @@
 			</view>
 		</view>
 
-		<view class="head_line" v-if="showEbook">
+		<view class="head_line" >
 			<b></b>
-			<text>新书上架</text>
+			<text>新书上市</text>
 			<i @click="onBookMore('New')">查看更多 ></i>
 		</view>
 
@@ -112,7 +110,11 @@
 			</view>
 			<br clear='both'>
 		</view>
+		<!--按类型 类型推荐 -->
+		<view class="tuijianView">
 			
+		</view>
+		<!-- end -->
 		<view class="head_line" v-if="showEbook">
 			<b></b>
 			<text>限时特价</text>
@@ -177,7 +179,8 @@
 						{{item.productName}}
 					</view>
 					<view class="goodsPrice">
-						￥{{item.price}}
+						<span class="price">￥{{item.price}}</span>
+						<span class="Salesnum">已售：{{item.sumSales}} 件</span>
 					</view>
 				</view>
 			</view>
@@ -473,6 +476,7 @@
 				this.$http
 					.post('book/shopproduct/appGetList?limit=30&page=1&istop=1')
 					.then(res => {
+						console.log(res.page.list,'首页商品')
 						this.goodsList = res.page.list
 					})
 			},
@@ -611,35 +615,35 @@
 		}
 	}
 
-	.home_nar {
+	.home_nar { padding-bottom: 20rpx;
-		margin: 60rpx 50rpx 0 50rpx;
+		margin: 30rpx 20rpx; justify-content: space-between;
 		display: flex;
 		color: #333;
 		.dianzishu{  margin-right:10rpx;	
-			background-color: #d6ffda; border: 2px solid #bae9bf;  margin-left:10rpx;
+			background-color:#f8d6f4 ;  border: 2px solid #edcce9;
 		}
 		.chaoshi{background-color:#fff2d8 ;  border: 2px solid #ede6d3;	}
-		.hn_cl_tit {
+		.shuping{ background-color: #d6ffda; border: 2px solid #bae9bf;}
-			width: 50%;
+		.shuguan{ background-color:#e3f9f9 ;  border: 2px solid #d7eced; }
+		.hn_cl_tit { padding-bottom: 10rpx;
+			width: 23%;
 			text-align: center;			 
 			 border-radius: 20rpx ;	padding-top: 10rpx;	
 			// line-height: 110upx;
-			display: flex;
+			//display: flex;
 			align-content: center;
 			justify-content: center;
 			image {
 				
 				width: 110upx;
-				height: 110upx;
+				height:110upx;
-				display: inline-block;
+				display: block;
-				// margin: 0 auto;
+				margin: 0 auto;
-				// margin: 0 20rpx;
+				margin: 0 20rpx;
 			}
-			text{height: 100upx; display:inline-block; line-height: 100upx; font-size: 34rpx;}
+			text{ display:block;  font-size: 34rpx;}
 		}
 		
-		.hn_cl_tit:nth-child(1),
-		.hn_cl_tit:nth-child(4) {}
 
 	}
 
@@ -929,9 +933,12 @@
 				.goodsPrice {
 					font-size: 30rpx;
 					margin: 5rpx 0 0 3rpx;					
-					color: #bf0c0c;
+					display: flex; justify-content: space-between;
-					font-weight: bold;
+					.price{
-
+						font-weight: bold;
+						color: #bf0c0c;
+					}
+					.Salesnum{color: #9b9b9b;}
 				}
 			}
 		}

pages/peanut/mine.vue

@@ -59,7 +59,7 @@
 				<text>我的订单</text>
 			</view>
 			<view class="nav_list" @click="onPageJump('../listen/home')">
-				<text>我的听书</text>
+				<text>我的图书</text>
 			</view>
 			<view class="nav_list" @click="onPageJump('../listen/setListen')">
 				<text>听书设置</text>

pages/peanut/myComments.vue

@@ -10,7 +10,19 @@
 						<text class="username nowrap ">{{item.name}}</text>
 					</view> -->
 					<view class="contentBox">
-						<view class="content">{{ item.content }}<br/></view>
+						<view class="mb30">
+							<span :class="['star',item.starlevel >= 1 ? 'starLight':'starGray']"></span>
+							<span :class="['star',item.starlevel >= 2 ? 'starLight':'starGray']"></span>
+							<span :class="['star',item.starlevel >= 3 ? 'starLight':'starGray']"></span>								
+							<span :class="['star',item.starlevel >= 4 ? 'starLight':'starGray']"></span>								
+							<span :class="['star',item.starlevel >= 5 ? 'starLight':'starGray']"></span>
+						</view>
+						<div class="pjimgs flexbox">
+							<view class="item" v-for="(item1,index) in item.images">
+								<image v-if="item1.length > 10" @click="previewImage(item1)"  :src="item1" mode="aspectFill" style="width:100%; height: 50px;"></image>
+							</view>								
+						</div>
+						<view class="content" v-html="item.phtml"></view>
 						<text class="time">订单编号：{{ item.orderSn }}</text>
 						<text class="time">发布时间：{{ item.createDate }}</text>
 					</view>
@@ -22,10 +34,13 @@
 			</view>
 		</view>
 		<z-navigation></z-navigation>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
+	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
 	import $http from '@/config/requestConfig.js';
 	import {
 		mapState
@@ -33,6 +48,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				commentsList:[]
 			}
 		},
@@ -42,7 +58,33 @@
 		computed:{
 			...mapState(['userInfo']),
 		},
+		components:{
+			musicPlay	
+		},
 		methods: {
+			// 获取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>');
+				       
+						
+			},
+			// 放大图片
+			previewImage(url){
+				console.log(url)
+				uni.previewImage({
+					urls: [url]
+				});
+			},
 			// 获取评价列表
 			getComments(){				
 					$http.request({
@@ -58,7 +100,29 @@
 					.then(res => {
 						console.log(res,'评价')
 						if(res.code == 0){
-							this.commentsList = res.Allevaluations
+							this.commentsList = res.Allevaluations.map(item => {
+								var imgList = []
+								if(item.images !== null){
+									imgList = item.images.split(',')
+									item.images = imgList
+									return item
+								}else {
+									return item
+								}								
+							})
+							
+							var newarr = []
+							this.commentsList.forEach((item1)=>{	
+								   var pjstr = ''
+									pjstr = this.getHtmlComment(item1.content)
+									//console.log(pjstr,'99999999999----------')
+									 item1.phtml = pjstr
+									// console.log(item1.phtml,'item1.phtml')
+									 newarr.push(item1)
+							
+							})
+							this.commentsList = newarr
+							// this.commentsList = res.Allevaluations
 						}
 					})
 			},
@@ -67,6 +131,15 @@
 </script>
 
 <style lang="scss" scoped>
+	.pjimgs{ margin: 10px 0;flex-wrap: wrap; display: flex; justify-content: space-between;
+		.item{width: 23%;  margin-right: 10px; 
+		image{ }
+		}
+		
+	}
+	.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;}
 	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
 	.container{margin-top: 10rpx; background-color: #fff; padding:20rpx; border-top:#f1f1f1 1px solid ;}
 

pages/peanut/opeVip.vue

@@ -96,10 +96,12 @@
 				</view>				
 			</view>
 		</u-popup>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	import {
 		mapState
@@ -111,6 +113,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				xieyiShow : false,
 				xieyi:{
 					title:'',
@@ -159,6 +162,9 @@
 		computed: {
 			...mapState(['userInfo']),
 		},
+		components:{
+			musicPlay	
+		},
 		//方法
 		methods: {
 			showXieyi(){

pages/peanut/reCharge.vue

@@ -72,10 +72,12 @@
 				</view>
 			</view>
 		</u-popup>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	import {
 		checkIapOrder
@@ -97,6 +99,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				xieyi: {
 					title: '',
 					content: ''
@@ -158,6 +161,9 @@
 		computed: {
 			...mapState(['userInfo']),
 		},
+		components:{
+			musicPlay	
+		},
 		//方法
 		methods: {
 			...mapMutations(['setUserInfo']),			

pages/peanut/reCharge1.vue

@@ -72,10 +72,12 @@
 				</view>
 			</view>
 		</u-popup>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	// import {  // 引入ios支付
 	//     Iap,
@@ -94,6 +96,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				xieyi: {
 					title: '',
 					content: ''
@@ -153,7 +156,10 @@
 		computed: {
 			...mapState(['userInfo']),
 		},
-		//方法
+		components:{
+			musicPlay	
+		},
+		//方法1
 		methods: {
 			showXieyi() {
 				this.$http

pages/peanut/searchFor.vue

@@ -56,13 +56,16 @@
 				<u-back-top :scroll-top="scrollTop"></u-back-top>
 			</view>
 		</view>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	export default {
 		data() {
 			return {
+				playData:{},
 				scrollTop: 0,
 				totalPage: 0,
 				status: 3,
@@ -142,6 +145,9 @@
 		onShow() {
 			this.getHistory()
 		},
+		components:{
+			musicPlay	
+		},
 		//方法
 		methods: {
 			// 获取缓存

pages/peanut/shopping.vue

@@ -44,10 +44,12 @@
 		<public-module></public-module>
 
 		<z-navigation></z-navigation>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	import {
 		mapState
@@ -55,6 +57,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				totalPrice: 0, // 总价
 				all: false, // 是否全选
 				isCartDelShow: false, // 是否展示删除按钮
@@ -79,6 +82,9 @@
 		computed: {
 			...mapState(['userInfo']),
 		},
+		components:{
+			musicPlay		
+		},
 		//方法
 		methods: {
 			// 获取购物车列表

pages/user/addAddress.vue

@@ -44,11 +44,12 @@
 		<u-modal :show="deleteShow" content="你确定要删除地址吗？" :showCancelButton="true" @cancel="deleteShow=false"
 			@confirm="deleteSub">
 		</u-modal>
-
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	import {
 		mapState
@@ -56,6 +57,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				addreShow: false, //是否显示
 				columns: [], //省份数据显示，三级联动需要三维数组，展示初始数据
 				columnData: [], //市数据
@@ -137,6 +139,9 @@
 		onReady() {
 			this.$refs.addForm.setRules(this.rules)
 		},
+		components:{
+			musicPlay	
+		},
 		methods: {
 			// 三级联动
 			initDataPicker() {

pages/user/address.vue

@@ -35,16 +35,19 @@
 				+ 添加收货地址
 			</view>
 		</view>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	   import musicPlay from '@/components/music.vue'
 	import {
 		mapState
 	} from 'vuex';
 	export default {
 		data() {
 			return {
+				playData:{},
 				addressList: []
 			}
 		},
@@ -54,6 +57,9 @@
 		computed: {
 			...mapState(['userInfo']),
 		},
+		components:{
+			musicPlay		
+		},
 		methods: {
 			getUserAddress() {
 				this.$http

pages/user/bindPhone.vue

@@ -20,10 +20,12 @@
 			</view>
 		</view>
 		<view class="registeredBut bindAccountBut"><button @click="onSubmit">立即绑定</button></view>
+	<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 var clear;
 import { mapState, mapMutations } from 'vuex';
 import socket from '@/config/socket';
@@ -33,6 +35,7 @@ import {publicShare} from '@/config/utils';
 export default {
 	data() {
 		return {
+			playData:{},
 			logoUrl: '',
 			readonly: false,
 			codeText: '获取验证码',
@@ -49,6 +52,9 @@ export default {
 	},
 	//页面显示
 	onShow() {},
+	components:{
+		musicPlay
+	},
 	//方法
 	methods: {
 		...mapMutations(['setUserInfo']),

pages/user/forget.vue

@@ -22,14 +22,17 @@
 			<input type="password" v-model="confirmPassword" placeholder="请确认密码" />
 		</view>
 		<view class="btn_box"><button @click="onSubmit">提 交</button></view>
+	<music-play :playData="playData"></music-play>
 	</view>
 </template>
 <script>
+	import musicPlay from '@/components/music.vue'
 import md5 from '@/plugins/md5';
 var clear;
 export default {
 	data() {
 		return {
+			playData:{},
 			//手机号账号
 			phone: '',
 			// 密码
@@ -48,6 +51,10 @@ export default {
 	onLoad(e) {},
 	//页面显示
 	onShow() {},
+	components:{
+		musicPlay		
+					
+	},
 	//方法
 	methods: {
 		//获取验证码

pages/user/healthLog.vue

@@ -14,10 +14,12 @@
 			<button @click="getCode">{{codeText}}</button>
 		</view>
 		<view class="btn_box"><button @click="onSubmit">提 交</button></view>
+	<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	 import musicPlay from '@/components/music.vue'
 	import md5 from '@/plugins/md5';
 	var clear;
 	import store from '@/store';
@@ -29,6 +31,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				//手机号账号
 				phone: '',
 				// 密码
@@ -56,6 +59,9 @@
 			// 隐藏原生的tabbar
 			uni.hideTabBar();
 		},
+		components:{
+			musicPlay	
+		},
 		//方法
 		methods: {
 			// 显示手机号

pages/user/persCount.vue

@@ -98,10 +98,12 @@
 			</view>
 
 		</view>
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	 import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	import {
 		mapState
@@ -109,6 +111,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				tab_list: [{
 					name: '疯币',
 				}, {
@@ -189,6 +192,9 @@
 			this.getData();
 			this.getCourpe();
 		},
+		components:{
+			musicPlay	
+		},
 		//方法
 		methods: {
 			// 获取

pages/user/persData.vue

@@ -103,10 +103,12 @@
 		<!-- <view class="btn_box">
 			<button @click="chosePassword" class="active">登 录</button>
 		</view> -->
+		<music-play :playData="playData"></music-play>
 	</view>
 </template>
 
 <script>
+	import musicPlay from '@/components/music.vue'
 	import $http from '@/config/requestConfig.js';
 	import {
 		mapState
@@ -114,6 +116,7 @@
 	export default {
 		data() {
 			return {
+				playData:{},
 				userMes: {
 					id: '',
 					age: '',
@@ -154,6 +157,9 @@
 			uni.hideTabBar();
 			this.getData();
 		},
+		components:{
+			musicPlay	
+		},
 		//方法
 		methods: {
 			// 获取

utils/music.js

@@ -11,6 +11,7 @@ bgm.coverImgUrl = ''
 bgm.oldIndex = 0     // 前面一首的播放索引
 bgm.playIndex = 0
 bgm.playing = false   // 播放进行时
+store.state.userInfo.playIndex !== undefined ? bgm.playIndex = store.state.userInfo.playIndex : bgm.playIndex = 0
 var music = {
 	// 
     //mute 表示是否是播放，，默认不播放
@@ -20,6 +21,7 @@ var music = {
         if(mute){			
             bgm.pause()				
         }else{	
+			
 			// bgm.src = bgm.musicList[bgm.playIndex].url			
 			// 判断播放列表是否空			
 			if(bgm.musicList.length == 0){				
@@ -27,7 +29,7 @@ var music = {
 					title: '提示',
 					showCancel:false,
 					confirmText:'好的',
-					content: '请先添加音频到播放列表，再点播放键开始听书',
+					content: '请先选择要播放的音频',
 					success: function (res) {
 						if (res.confirm) {
 							console.log('用户点击确定');
@@ -40,8 +42,11 @@ var music = {
 			}
 			// 没有就添加添加url到播放器，播放新的
 			if(bgm.src == ''){	
-			    store.state.userInfo.playIndex !== undefined ? bgm.playIndex = store.state.userInfo.playIndex : bgm.playIndex = 0
+				console.log(bgm.playIndex,'播放的索引',store.state.userInfo.playIndex)
-				// console.log(bgm.playIndex,'初始化播放index');	
+				store.commit('setUserInfo',{'playTitle': bgm.musicList[bgm.playIndex].chapterName})
+				store.commit('setUserInfo',{'fengImg': bgm.musicList[bgm.playIndex].images})
+				store.commit('setUserInfo',{'playingInfo': bgm.musicList[bgm.playIndex]})
+				console.log(store.state.userInfo,'chapterName',bgm.playIndex)
 				this.getChartUrl()				
 			}else{				
 				// 如果有正在播放的url，暂停改为播放				
@@ -84,14 +89,15 @@ var music = {
 		})
 		bgm.onCanplay(() => {
 			// 可以播放时
+			// console.log('可以播放时')
 			uni.hideLoading()
 			this.saveIndex()
-			store.commit('setUserInfo',{'duration':bgm.duration})				
+			// store.commit('setUserInfo',{'duration':bgm.duration})				
-			store.commit('setUserInfo',{'playTitle': bgm.title})
+			// store.commit('setUserInfo',{'playTitle': bgm.title})
-			store.commit('setUserInfo',{'fengImg': bgm.coverImgUrl})
+			// store.commit('setUserInfo',{'fengImg': bgm.coverImgUrl})
-			store.commit('setUserInfo',{'playFlag': true})
+			// store.commit('setUserInfo',{'playFlag': true})
-			store.commit('setUserInfo',{'playingInfo': bgm.musicList[bgm.playIndex]})		
+			// store.commit('setUserInfo',{'playingInfo': bgm.musicList[bgm.playIndex]})		
-			
+			console.log(store.state.userInfo.playingInfo,'chapterName2222',bgm.playIndex)
 		})
 		bgm.onEnded(() => {		
 			console.log('播放完毕了',bgm.playing)
@@ -100,9 +106,11 @@ var music = {
 		}) 
     },
 	// 添加播放列表
-	setList(list,op){		
+	setList(list,op,playindex){		
 		bgm.musicList = list
-		bgm.playIndex = 0
+		
+		playindex ? bgm.playIndex = playindex : bgm.playIndex = 0
+		console.log(bgm.playIndex,'playindex')
 		store.commit('setUserInfo',{'playingInfo': {}})			
 		if(op == 'autoPlay'){
 			if(bgm._options.src == ''){
@@ -123,7 +131,7 @@ var music = {
 				'bookid': bgm.musicList[bgm.playIndex].bookid,
 				'chapterid': bgm.musicList[bgm.playIndex].chapterId
 			}
-			// console.log(data,'data')
+			 console.log(data,'data')
 			$http.post('book/bookchaptercontent/appBooksChapterContent', data)
 			.then(res => {
 				console.log(res,'res')
@@ -142,7 +150,7 @@ var music = {
 						bgm.title = ''
 						bgm.coverImgUrl = ''						
 						// this.setCoverImg('../../static/icon/x1.jpg')
-						// bgm.pause()						
+						bgm.stop()						
 						uni.showToast({
 							title:'音频地址异常',
 							icon:'error',
@@ -155,9 +163,9 @@ var music = {
 				}
 				console.log(res.bookCatalogue,'单章节信息')
 			}).catch((e)=>{				
-			//	bgm.pause()
+			   // bgm.pause()
 				bgm.playIndex = bgm.oldIndex				
-				bgm.stop()
+				// bgm.stop()
 				store.commit('setUserInfo',{'playFlag': false})
 				uni.showModal({
 						title: '提示',
@@ -167,14 +175,22 @@ var music = {
 						success: function (res) {
 							if (res.confirm) {
 								console.log('用户点击确定');
+								uni.navigateTo({
+									url: '../bookShop/settlementBook?type=2&list=' + data.bookid
+								});
 							} 
 						}
 					});
 			})		
 	},
-	// 存储播放index
+	// 存储播放信息
 	saveIndex(){
 		store.commit('setUserInfo',{'playIndex': bgm.playIndex})
+		store.commit('setUserInfo',{'duration':bgm.duration})
+		store.commit('setUserInfo',{'playTitle': bgm.title})
+		store.commit('setUserInfo',{'fengImg': bgm.coverImgUrl})
+		store.commit('setUserInfo',{'playFlag': true})
+		store.commit('setUserInfo',{'playingInfo': bgm.musicList[bgm.playIndex]})		
 	},	
 	// 存储播放
 	saveTimes(){
@@ -240,44 +256,15 @@ var music = {
 				console.log('success');
 			}
 		});	
-		// 先检查列表里是否存在item，避免重复添加
+		
-		// 存在就不添加，找到对应的index,通过参数获得url
+		bgm.playIndex = bgm.musicList.findIndex(function(info){
-		// 不存在就添加进列表，直接切换下一章节		
-		var has = false
-		for (var i = 0; i < bgm.musicList.length;  i++) {
-			if(item.chapterId == bgm.musicList[i].chapterId && item.bookid == bgm.musicList[i].bookid){
-				has = true
-				break 
-			}
-		}		
-		if(has){
-			bgm.playIndex = bgm.musicList.findIndex(function(info){
 			//	console.log(info,'info')
 			    if(item.chapterId == info.chapterId && item.bookid == info.bookid ){
 					return info;
 				}
 			})	
-			console.log(bgm.playIndex,'bgm.playIndex')	
+		console.log(bgm.playIndex,'bgm.playIndex')				
-			
+		this.getChartUrl()
-			this.getChartUrl()
-			
-		}else{
-			bgm.musicList.push(item) // 添加到播放目录
-			var newVal ={ // 本地播放数据更新				
-				'myList' : bgm.musicList,				
-			}
-			uni.setStorage({
-				key: 'playData',
-				data: newVal,
-				success: function () {
-					console.log('success');
-				}
-			});
-			bgm.playIndex = bgm.musicList.length - 2
-			console.log(bgm.playIndex,'bgm.playIndex')
-			// this.getChartUrl()
-		    this.setPlayIndex('next')
-		}
 		
 	},