xusfood_client/shopping/evaluate.vue

<template>
	<view class="page-wrap">
		<u-navbar
			title="发表评价"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="product u-flex" v-for="(item,index) in orderDetails.detailList" :key="item.id">
			<u--image :showLoading="true" :src="item.mainImg" width="180rpx" height="180rpx"></u--image>
			<view class="text">
				<view class="up">
					<view class="name ellipsis-2">{{item.goodsName}}</view>
					<view class="info">
						{{item.specification}}
						{{item.unit}}
					</view>
				</view>
				<!-- <view class="down u-flex u-row-between">
					<view class="left">
						<text class="price">¥ <text class="price-num">{{item.price}}</text></text>
					</view>
				</view> -->
			</view>
		</view>
		<view class="rate-wrap u-flex">
			<text class="rate-title">商品评价</text>
			<u-rate count="5" v-model="params.star"  active-color="#FFBE00" size="20"></u-rate>
			<text class="rate-text">{{params.star|rateText}}</text>
		</view>
		<u--textarea v-model="params.contentText" height="200rpx" maxlength="200" placeholder="如实描述商品和使用感受，更受欢迎" ></u--textarea>
		<view class="upload-wrap">
			<u-upload
				 width="140rpx"
				 height="140rpx"
			    :fileList="fileList"
				@beforeRead="beforeRead"
			    @afterRead="afterRead"
				@delete="deletePic"
				:previewImage="true"
				multiple
			    name="name"
			    :maxCount="5"
			></u-upload>
		</view>
		<view class="full-btn" @click="submit">提交评价</view>
	</view>
</template>

<script>
	import {uploadImg} from '../utils/uploadImg.js'
	export default {
		data() {
			return {
				id:'',
				params:{
					orderId:'',
					star:5,
					contentText:'',
					contentImgList:[]
				},
				fileList:[],
				orderDetails:{},
				staticUrl:this.$commonConfig.staticUrl,
			}
		},
		onShow() {	
		},
		onLoad(page) {
			console.log('page',page);
			this.params.orderId = page.id;
			this.getOrderDetails(this.params.orderId)
		},
		methods: {
			getOrderDetails(id){
				this.$u.api.orderDetails({id:id}).then(res=>{
					this.orderDetails = res.data
					console.log('orderDetails',JSON.parse(JSON.stringify(res.data)));
				}).catch(err=>{
					console.log('getOrderDetails',err);
				})
			},
			// 新增图片
			async afterRead(event){
				//使用这个封装
				const result = await uploadImg(event,this.fileList)
				// let parseResult = JSON.parse(result.data).data;
				let item = this.fileList[result.fileListLen]
				this.fileList.splice(result.fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '成功',
					url: JSON.parse(result.data).data
				}));
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			submit(){
				this.params.contentImgList = this.fileList.map(item =>{
					console.log('contentImgList===',item);
					if(item.message=='成功'){
						return item.url.url
					}
				});
				this.$u.api.addGoodsComment(this.params).then(res=>{
					console.log('res',res.data);
					uni.showToast({
						title:res.msg,
						complete() {
							uni.navigateBack()
						}
					});
				}).catch(err=>{
					console.log('addGoodsComment',err);
				})
				console.log('params',this.params);
			}
		}
	}
</script>
<style>
page{
	background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.product{
	background-color: #fff;
	margin-bottom: 0;
}
.rate-wrap{
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 20rpx;
	.rate-title{
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		margin-right: 20rpx;
	}
	.rate-text{
		font-size: 26rpx;
		margin-left: 20rpx;
		color: #ccc;
	}
}
.upload-wrap{
	margin-top: 40rpx;
	padding: 20rpx;
	background-color: #fff;
}
</style>