播放器雏形

pages/bookShop/commodityDetail.vue

@@ -55,8 +55,25 @@
 				</view>
 			</view>
 			</view>
-			<view v-else>
-				用户评价
+			<view v-else >
+				<!-- 商品评价 -->
+				<view class="" v-if="commentsList && commentsList.length > 0">
+				<view class="pingjiaBox" v-for="(item, index) in commentsList" :key="index">
+					<view class="flexbox">
+						<view class="touxiang">
+							<image :src="item.avatar" mode="aspectFit"></image>
+							<text class="username nowrap ">{{item.name}}</text>
+						</view>
+						<view class="contentBox">
+							<view class="content" v-html="item.content"></view>
+							<text class="time">2023-07-28</text>
+						</view>
+					</view>
+				</view>
+				</view>
+				<view class="quesheng" v-else>
+					<text>暂无评价~</text>
+				</view>
 			</view>
 			<view style="height: 120rpx;"></view>
 		</view>
@@ -103,16 +120,38 @@
 				productInfo: {},
 				productAmount: 1, // 商品数量
 				cartList: [], // 购物车列表
+				commentsList:[], // 评论列表
+				productId:null, // 商品评论
 			}
 		},
-		onLoad(e) {			
-			this.getProDetail(e)
-			this.getComment()
+		onLoad(e) {	
+			this.productId = e.id
+			this.getProDetail(e)			
+			this.getComments()
 		},
 		computed: {
 			...mapState(['userInfo']),
 		},
 		methods: {
+			// 获取评价
+			getComments(){					
+					$http.request({
+						url: "buy/record/All",
+						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档1
+						data: {
+						'bookid': this.productId
+					},
+						header: { //默认 无 说明：请求头
+							'Content-Type': 'application/json'
+						},
+					})
+					.then(res => {
+						console.log(res,'评价')
+						if(res.code == 0){
+							this.commentsList = res.list
+						}
+					})
+			},
 			getProDetail(e){
 				// 获取商品详情
 				uni.showLoading({
@@ -136,12 +175,7 @@
 						}
 						uni.hideLoading();
 					})
-			},
-			
-			// 获取商品评论
-			getComment(){
-				
-			},
+			},			
 			
 			contentButtonClick(e){				
 				this.contentShow = e.index
@@ -333,6 +367,22 @@ formatRichText (html) { //控制小程序中图片大小
 	}
 </script>
 <style lang="scss" scoped>
+	.quesheng{text-align: center; margin-top: 100rpx; color: #8b8a91;}
+	.pingjiaBox{color: #555; margin-bottom: 20rpx;}
+	.flexbox{display: flex;}
+	.contentBox{width: calc(100% - 50px);box-sizing: border-box; padding-left: 20rpx;
+		.content{font-size: 28rpx; line-height: 40rpx;}
+		.time{font-size: 24rpx; color: #999; margin-top: 6rpx; float: right;}
+	}
+	.nowrap {
+				white-space: nowrap;
+				overflow-x: hidden;	           
+	            text-overflow: ellipsis;
+	        }	
+	.touxiang{width:50px; overflow: hidden; text-align: center;
+		image{width:50px !important; padding: 3px; height: 50px !important; border:  1px solid #eee;  border-radius: 64px; overflow: hidden;;}
+		.username{font-size: 24rpx; color: #999; margin-top: 6rpx; }
+	}
 	.xiangqing {
 		overflow: hidden; overflow-x: hidden;
 		img{display: block; max-width: 100%;}