chanyiUniapp/pagesB/pages/shop/GoodsEvaluate/index.vue

<template>
	<view class="evaluate-con">
		<view class="goodsStyle acea-row row-between" v-if="orderCon.productInfo">
			<view class="pictrue">
				<image :src="orderCon.productInfo.image" class="image" />
			</view>
			<view class="text acea-row row-between">
				<view class="name line2">{{ orderCon.productInfo.storeName }}</view>
				<view class="money">
					<view>￥{{ orderCon.productInfo.price }}</view>
					<view class="num">x{{ orderCon.cartNum }}</view>
				</view>
			</view>
		</view>
		<view class="score">
			<view class="item acea-row row-middle" v-for="(item, scoreListIndexw) in scoreList" :key="scoreListIndexw">
				<view>{{ item.name }}</view>
				<view class="starsList">
					<text @click="stars(starsIndexn, scoreListIndexw)" v-for="(itemn, starsIndexn) in item.stars"
						:key="starsIndexn" class="iconfont"
						:class="item.index >= starsIndexn ? 'icon-shitixing font-color-red': 'icon-kongxinxing'"></text>
				</view>
				<text class="evaluate">{{item.index === -1 ? "" : item.index + 1 + "分"}}</text>
			</view>
			<view class="textarea">
				<textarea placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~" v-model="expect"></textarea>
				<view class="list acea-row row-middle">
					<view class="pictrue" v-for="(item, uploadPicturesIndex) in uploadPictures"
						:key="uploadPicturesIndex">
						<image :src="item" />
						<text class="iconfont icon-guanbi1 font-color-red"
							@click="uploadPictures.splice(uploadPicturesIndex, 1)"></text>
					</view>
					<view class="pictrue uploadBnt acea-row row-center-wrapper row-column" @tap="chooseImage">
						<text class="iconfont icon-icon25201"></text>
						<view>上传图片</view>
					</view>
				</view>
			</view>
			<view class="evaluateBnt bg-color-red" @click="submit">立即评价</view>
		</view>
	</view>
</template>
<style scoped lang="less">
	.evaluate-con .score .textarea .list .pictrue.uploadBnt {
		border: 1px solid #ddd;
	}
</style>
<script>
	import {
		postOrderProduct,
		postOrderComment
	} from "@/api/store";
	import {
		trim,
		chooseImage
	} from "@/utils";
	import {
		VUE_APP_API_URL
	} from "@/config";
	import {
		required
	} from "@/utils/validate";
	import {
		validatorDefaultCatch
	} from "@/utils/dialog";

	const NAME = "GoodsEvaluate";

	export default {
		name: NAME,
		components: {
			// VueCoreImageUpload
		},
		props: {},
		data: function() {
			return {
				orderCon: {
					cartProduct: {
						productInfo: {}
					}
				},
				scoreList: [{
						name: "商品质量",
						stars: ["", "", "", "", ""],
						index: -1
					},
					{
						name: "服务态度",
						stars: ["", "", "", "", ""],
						index: -1
					}
				],
				uploadPictures: [],
				expect: "",
				unique: ""
			};
		},
		mounted: function() {
			this.unique = this.$yroute.query.id;
			this.getOrderProduct();
		},
		watch: {
			$yroute(n) {
				if (n.name === NAME && this.unique !== n.params.id) {
					this.unique = n.params.id;
					this.$set(this.scoreList[0], "index", -1);
					this.$set(this.scoreList[1], "index", -1);
					this.expect = "";
					this.uploadPictures = [];
					this.getOrderProduct();
				}
			}
		},
		methods: {
			getOrderProduct: function() {
				let that = this,
					unique = that.unique;
				postOrderProduct(unique).then(res => {
					that.orderCon = res.data;
				});
			},
			stars: function(indexn, indexw) {
				this.scoreList[indexw].index = indexn;
			},
			chooseImage() {
				chooseImage(img => {
					this.uploadPictures.push(img);
				});
			},
			async submit() {
				const expect = trim(this.expect),
					product_score =
					this.scoreList[0].index + 1 === 0 ? "" : this.scoreList[0].index + 1,
					service_score =
					this.scoreList[1].index + 1 === 0 ? "" : this.scoreList[1].index + 1;
				try {
					await this.$validator({
						product_score: [
							required("请选择商品质量分数", {
								type: "number"
							})
						],
						service_score: [
							required("请选择服务态度分数", {
								type: "number"
							})
						]
					}).validate({
						product_score,
						service_score
					});
				} catch (e) {
					return validatorDefaultCatch(e);
				}
				postOrderComment({
						productScore: product_score,
						serviceScore: service_score,
						unique: this.unique,
						pics: this.uploadPictures.join(","),
						comment: expect
					})
					.then(() => {
						uni.showToast({
							title: "评价成功",
							icon: "success",
							duration: 2000
						});

						// ? 回跳到上一页
						this.$yrouter.back();

						// ? 默认跳转到详情页
						// this.$yrouter.push({
						// 	path: "/pages/order/OrderDetails/index",
						// 	query: {
						// 		id: this.orderCon.orderId
						// 	}
						// });

						// ? 可选重定向到详情页，这时左上角会有一个返回首页的图标
						// this.$yrouter.reLaunch({
						// 	path: "/pages/home/index",
						// });
					})
					.catch(err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: "none",
							duration: 2000
						});
					});
			}
		}
	};
</script>