xusfood_client/shopping/viewcomment.vue

<template>
	<view class="page-wrap">
		<u-navbar
			title="商品评价"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="content">
			<view class="product u-flex">
				<u--image :showLoading="true" :src="goodsDetails.mainImg" width="180rpx" height="180rpx"></u--image>
				<view class="text">
					<view class="up">
						<view class="name ellipsis-2">{{goodsDetails.goodsName}}</view>
						<view class="info u-flex u-row-between">
							<view class="">
								<text v-if="goodsDetails.specification">{{goodsDetails.specification}}</text>
								<text v-if="goodsDetails.unit">{{goodsDetails.unit}}</text>
							</view>
							<view class="">共{{goodsDetails.quantity}}件</view>
						</view>
					</view>
					<!-- <view class="down u-flex u-row-between">
						<view class="left">
							<text class="price">¥ <text class="price-num">{{goodsDetails.price}}</text></text>
						</view>
					</view> -->
				</view>
			</view>
			<view class="comment">
				<view class="item u-flex u-row-between">
					<view class="left">商品评价</view>
					<view class="right">
						<u-rate count="5" v-model="commentDetails.star" :readonly="true" active-color="#FFBE00" r size="20"></u-rate>
					</view>
				</view>
				<view class="item u-flex u-row-between">
					<view class="left">文字补充</view>
					<view class="right">{{commentDetails.contentText||'暂无补充'}}</view>
				</view>
				<view class="item u-flex u-col-top" :class="{'u-row-between':commentDetails.contentImgs.length<1}">
					<view class="left">图片补充</view>
					<view class="right" style="margin-left: 40rpx;">
						<text v-if="commentDetails.contentImgs.length<1">暂无补充</text>
						<view v-else class="">
							<u-album :urls="commentDetails.contentImgs"></u-album>
							<!-- <u--image 
								v-for="(img,index) in commentDetails.contentImgs" :key="index"
								:showLoading="true" 
								:src="img" 
								width="180rpx" 
								height="180rpx">
							</u--image> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId:'',
				orderDetailId:'',
				goodsDetails:{},
				commentDetails:{contentImgs:[]},
				goodsDetails:{},
			}
		},
		onShow() {
		},
		onLoad(page) {
			this.goodsId = page.goodsId;
			this.orderDetailId = page.orderDetailId;
			this.goodsDetails = JSON.parse(page.goods);
			console.log('this.goodsDetails',this.goodsDetails);
			// this.getGoodsDetails(this.goodsId);
			this.getCommentDetails(this.orderDetailId);
		},
		methods: {
			getGoodsDetails(id){
				this.$u.api.memberGoodDetails({id:id}).then(res=>{
					this.goodsDetails = res.data
					console.log('memberGoodDetails',JSON.parse(JSON.stringify(res.data)));
				}).catch(err=>{
					console.log('getGoodsDetails',err);
				})
			},
			getCommentDetails(id){
				this.$u.api.getOrderDetailComment({orderDetailId:id}).then(res=>{
					this.commentDetails = res.data;
					this.commentDetails.contentImgs = this.commentDetails.contentImgs.split(",");
					console.log('getCommentDetails',JSON.parse(JSON.stringify(res.data)));
				}).catch(err=>{
					console.log('getCommentDetails',err);
				})
			},
		}
	}
</script>
<style>
page{
	background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.content{
	background-color: #fff;
	border-radius: 8rpx;
	padding: 20rpx;
}
.product{
	.info{
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		line-height: 33rpx;
	}
}
.comment{
	.item{
		margin-bottom: 30rpx;
		.left{
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
			line-height: 38rpx;
		}
		.right{
			color: #666;
		}
	}
}
</style>