deming/pageE/order/Comment.vue

<template>
	<view class="comment">
		<view class="main-container">
			<view class="goods-comment" v-for="(goods, index) in goodsList" :key="index">
				<CommentView :goods="goods" :index="index" @setLocalImage="setLocalImage" @setContent="setContent" @setDescribe="setDescribe"></CommentView>
			</view>
		</view>
		<view class="order-rate">
			<view class="rate">
				<view class="title">物流评分</view>
				<u-rate :count="5" min-count="1" active-color="#FF780F" inactive-color="#CCCCCC" v-model="logistics" gutter="20" size="32"></u-rate>
			</view>
			<view class="rate">
				<view class="title">服务态度</view>
				<u-rate :count="5" min-count="1" v-model="service" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
			</view>
		</view>
		<view class="write-btn" @click="submitComment">发表意见</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
import CommentView from './commentItem';
import common from '@/static/js/common.js'
export default {
	data() {
		return {
			orderId: '',
			count: 3, // 最大图片数量
			logistics: 1, // 物流服务
			service: 1, // 服务态度
			describe: [],
			content: [],
			imageList: [], // 本地图片路径
			goodsList: [],
			uploadImageList: [], // 线上图片名字
			debounce: true, // 防止多次提交
		}
	},
	components: {
		CommentView
	},
	onLoad(option) {
		this.orderId = option.oid;
		this.getOrderInfo(option.oid);
	},
	methods: {
		setLocalImage({ list, index }) {
			this.imageList[index] = list;
		},
		setContent({ content, index }) {
			this.content[index] = content;
		},
		setDescribe({ describe, index }) {
			this.describe[index] = describe;
		},
		uploadImage() {
			let allPromise = [];
			this.imageList.forEach((img, index) => {
				this.uploadImageList[index] = [];
				img.forEach(filePath => {
					let promise = common.uploadFile({
						url: this.$u.http.config.baseUrl + '/Upload/uploadfile',
						name: 'common',
						filePath: filePath,
					})
					promise.then(result => {
						this.uploadImageList[index].push(result.file_name);
					})
					allPromise.push(promise);
				})
			})
			Promise.all(allPromise).then(() => {
				this.addOrderEvaluate();
			})
		},
		// 设初始值
		setModelKey(data) {
			data.forEach(() => {
				this.content.push('');
				this.describe.push(1);
				this.imageList.push([]);
			})
		},
		getOrderInfo(id) {
			this.$u.api.getOrderInfo({
				order_id: id,
			}).then(res => {
				if(res.errCode == 0) {
					this.goodsList = res.data.extend_order_goods;
					// this.goodsList = [{
					// 	"rec_id": 14,
					// 	"order_id": 13,
					// 	"goods_id": 39,
					// 	"goods_name": "自然堂 水润保湿两件套 补水保湿套装",
					// 	"goods_price": "69.40",
					// 	"goods_num": 1,
					// 	"goods_image": "1_2017092202443553519.jpg",
					// 	"goods_pay_price": "43.40",
					// 	"store_id": 1,
					// 	"buyer_id": 3,
					// 	"goods_type": "1",
					// 	"promotions_id": 0,
					// 	"commis_rate": 0,
					// 	"gc_id": 30
					// },
					// {
					// 	"rec_id": 13,
					// 	"order_id": 13,
					// 	"goods_id": 113,
					// 	"goods_name": "舒思盾经络按摩仪数码家用多功能针灸穴位电子理疗腰椎颈椎电疗仪",
					// 	"goods_price": "168.00",
					// 	"goods_num": 1,
					// 	"goods_image": "1_2017092901414663050.jpg",
					// 	"goods_pay_price": "106.00",
					// 	"store_id": 1,
					// 	"buyer_id": 3,
					// 	"goods_type": "1",
					// 	"promotions_id": 0,
					// 	"commis_rate": 0,
					// 	"gc_id": 72
					// }];
					this.setModelKey(this.goodsList);
				}
			})
		},
		verifyParams() {
			let status = true;
			this.goodsList.forEach((_, index) => {
				if(this.$u.test.isEmpty(this.content[index])) {
					this.$u.toast('内容不可为空');
					status = false;
				}
			})
			return status;
		},
		submitComment() {
			// console.log(this.content);
			// console.log(this.describe);
			// console.log(this.imageList);
			this.uploadImage();
		},
		addOrderEvaluate() {
			if(!this.verifyParams()) return false;
			if(!this.debounce) return false;
			let files = [];
			// console.log(this.uploadImageList);
			this.uploadImageList.forEach((item, index) => {
				// 赋默认值
				files[index] = '';
				// console.log(item);
				item.forEach((img, idx) => {
					if(idx < item.length-1) {
						files[index] += img + ',';
					} else {
						files[index] += img;
					}
				})
			})
			let params = {
				id: this.orderId,
				content: this.content,
				scores_one: this.logistics,
				scores_two: this.service,
				scores_three: this.describe,
			};
			if(files.length) {
				Object.assign(params, { file: files })
			}
			// console.log(params);
			this.$u.api.updateOrderEvaluate(params).then(res => {
				if(res.errCode == 0) {
					this.$refs.uToast.show({
						title: res.message,
						back: true,
					})
				} else {
					this.$u.toast(res.message);
					this.debounce = true;
				}
			})
		},
	},
};
</script>
<style lang="scss" scoped>
.comment {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	.main-container {
		margin-bottom: 10rpx;
		.goods-comment {
			background-color: #ffffff;
			padding: 30rpx;
			margin-bottom: 30rpx;
			.goods-info {
				display: flex;
				margin-bottom: 40rpx;
				> image {
					width: 113rpx;
					height: 106rpx;
					border-radius: 5rpx;
					margin-right: 20rpx;
					background-color: antiquewhite;
				}
				.goods-text {
					.goods-name {
						width: 530rpx;
						font-size: 28rpx;
						color: rgba(0,0,51,1);
						margin-bottom: 20rpx;
					}
					.goods-spec {
						max-width: 300rpx;
						box-sizing: content-box;
						padding: 10rpx 15rpx;
						font-size: 24rpx;
						color: rgba(153,153,153,1);
						background:rgba(236,236,236,1);
						border-radius: 6rpx;
						display: inline-block;
					}
				}
			}
			textarea {
				width: 100% !important;
				margin-bottom: 60rpx;
			}
			.slot-btn {
				width: 140rpx;
				height: 140rpx;
				background: rgba(236,236,236,1);
				border-radius: 10rpx;
				text-align: center;
				> image {
					margin-top: 48rpx;
					width: 54rpx;
					height: 49rpx;
				}
			}
		}
	}
	.rate {
		// background-color: #ffffff;
		// padding: 33rpx 30rpx;
		// > view {
			display: flex;
			&:not(:last-child) {
				margin-bottom: 35rpx;
			}
			.title {
				margin-right: 25rpx;
				font-size: 28rpx;
				color: rgba(51,51,51,1);
			}
		// }
	}
	.order-rate {
		background-color: #ffffff;
		padding: 33rpx 30rpx;
	}
	.write-btn {
		margin: 120rpx auto 0;
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,120,15,1);
		border-radius: 46rpx;
		font-size: 36rpx;
		color: rgba(255,255,255,1);
		text-align: center;
		line-height: 98rpx;
	}
}
</style>