zhywpt-sp/subpackage/orders/order-evaluate-product.vue

<!-- 订单-评价 -->
<template>
	<!-- 1,4 -->
	<!-- 产品 -->
	<view class="card" style="padding: 40rpx 30rpx;">
		<view class="title">{{state.orderInfo.productName}}</view>
		<evaluate-star v-model="state.product.score" title="评价得分"></evaluate-star>
		<textarea class="input-box" v-model="state.product.content" placeholder-class="text-hint" :maxlength="300"
			style="height: 260rpx;" placeholder="从多角度评价，可以帮助我们提升服务质量。">
		</textarea>
		<view class="upload-img">
			<form-image @backImg="backImg($event)" @removeImg="removeImg" :isUrl="false" style="width: 100%;"
				:retract="-15"></form-image>
		</view>
	</view>
	<!-- 业务办理满意度评价 -->
	<view class="card">
		<view class="title1">业务办理满意度评价</view>
		<view style="padding: 30rpx 30rpx 45rpx;">
			<evaluate-star v-model="state.handle.score" title="进行评价"></evaluate-star>
			<view class="center as-layout-horizontal">
				<view class="tags as-layout-horizontal">
					<view class="tag" v-for="(item,index) in state.handle.tagList" :key="item">
						{{item.label}}
						<image v-if="state.handle.tagList.length > 1" class="tag-close"
							:src="`${$imgUrl}common/icon-close.png`" @click="removeTag1(item)" />
					</view>
				</view>
				<image :src="`${$imgUrl}common/${state.showTagPop ? 'arror-top.png' : 'arror-down.png'}`"
					style="width: 40rpx;height: 40rpx;" @click="state.showTagPop = !state.showTagPop"></image>
			</view>
			<textarea class="input-box" v-model="state.handle.content" placeholder-class="text-hint"
				style="height: 200rpx;" placeholder="请输入评价内容" :maxlength="300">
			</textarea>
		</view>
	</view>
	<view class="uni-list" style='font-size:32rpx'>
		<view class="uni-list-cell uni-list-cell-pd">
			<view class="uni-list-cell-db">是否匿名</view>
			<switch style="transform:scale(0.7)" @change="switchChange" />
		</view>
	</view>
	<view class="btn">
		<submit-button @submit="publish" title="发布"></submit-button>
	</view>

	<!-- 选择标签弹窗 -->
	<u-popup v-model="state.showTagPop" mode="bottom" height="60%">
		<view v-if="state.showTagPop">
			<tag-popup :selTags="state.handle.tagList" :tagAllList="state.tagAllList"
				@cancel="state.showTagPop = !state.showTagPop" @confirm="confirmSelectTag"></tag-popup>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import evaluateStar from "./components/evaluate-star.vue"
	import { reactive } from "vue";
	import { confirm, msg } from "@/utils/utils";
	import tagPopup from "./components/popup-order-evaluate-tag";
	import { requestNew } from "@/utils/network/request";
	import { orderDetailQuery,orderEvaluateTag, addEvaluation} from "@/utils/network/api";
	import { onLoad } from "@dcloudio/uni-app";

	const state = reactive({
		orderInfo: {} as any, //订单信息
		showTagPop: false, //显示标签选择弹窗
		product: { //产品
			score: 0, //星级得分 最高5分，0.5小数点 2.5分及以下为差评 2.5以上4.0以下为中评 4.0及4.0以上为好评（必选）
			content: '', //评价内容
			imageList: [], //支持拍照上传最多上传9张
		},
		interest: { //产品
			score: 0, //星级得分 最高5分，0.5小数点 2.5分及以下为差评 2.5以上4.0以下为中评 4.0及4.0以上为好评（必选）
			content: '', //评价内容
			imageList: [], //支持拍照上传最多上传9张
		},
		handle: { //办理满意度
			score: 0, //星级得分 最高5分，0.5小数点 2.5分及以下为差评 2.5以上4.0以下为中评 4.0及4.0以上为好评（必选）
			content: '', //评价内容
			tagList: [], //已选择的评价标签列表
		},
		tagAllList: [],
		orderId: "",
		isAnonymity: 1,  //是否匿名
		showTagPop1: false, //第一个弹框
	})

	/* 确认选择tag */
	const confirmSelectTag = (selectTag) => {
		state.showTagPop = !state.showTagPop
		state.handle.tagList = [...selectTag];
	}

	//选择图片
	const backImg = (e : any) => {
		console.log("e", e)
		state.product.imageList = e;
	}
	/* 删除评价标签 满意度*/
	const removeTag1 = (item : any) => {
		state.handle.tagList.map((tag, index) => {
			if (tag.id === item.id) {
				state.handle.tagList.splice(index, 1)
			}
		})
	}
	/* 获取评价标签 */
	const getEnvTag = () => {
		const options = {
			type: 2,
			data: {},
			method: 'POST',
			showLoading: true,
		}
		requestNew(orderEvaluateTag, options).then((res) => {
			console.log("获取评价标签", res)
			state.tagAllList = res
		})
	}
	//删除图片
	const removeImg = (imgList) => {
		state.product.imageList = imgList
	}

	/* 发布 */
	const publish = (e) => {
		addProduct();
	}
	const addProduct = () => {
		if (state.product.score === 0) {
			msg('请对产品进行打分！');
			return;
		}
		if (state.handle.score === 0) {
			msg('业务办理满意度进行打分！');
			return;
		}
		//若不填评价内容，根据打分规则自动填充评价内容 
		//差评展示：默认差评 2.5分及以下
		//中评展示：默认中评 2.5以上4.0以下 
		//好评展示：默认好评 4.0及4.0以上
		if (!state.product.content) {
			if (state.product.score <= 2.5) {
				state.product.content = "默认差评";
			} else if (state.product.score > 2.5 && state.product.score < 4) {
				state.product.content = "默认中评";
			} else {
				state.product.content = "默认好评";
			}
		}
		const options = {
			type: 2,
			data: {
				"orderId": state.orderId,
				"serviceType": "product",
				"score": state.product.score,
				"pictureUrl": state.product.imageList.join(";"),
				"message": '',
				"suggestion": state.product.content,
				"isAnonymity": state.isAnonymity
			},
			method: 'POST',
			showLoading: true,
		}
		console.log("options", options)
		requestNew(addEvaluation, options).then((res) => {
			addProductInterest()
		})
	}
	const addProductInterest = () => {
		//若不填评价内容，根据打分规则自动填充评价内容 
		//差评展示：默认差评 2.5分及以下
		//中评展示：默认中评 2.5以上4.0以下 
		//好评展示：默认好评 4.0及4.0以上
		if (!state.handle.content) {
			if (state.handle.score <= 2.5) {
				state.handle.content = "默认差评";
			} else if (state.handle.score > 2.5 && state.handle.score < 4) {
				state.handle.content = "默认中评";
			} else {
				state.handle.content = "默认好评";
			}
		}
		const tagListArr = [];
		for (var i = 0; i < state.handle.tagList.length; i++) {
			tagListArr.push(state.handle.tagList[i].label)
		}
		const options = {
			type: 2,
			data: {
				"orderId": state.orderId,
				"serviceType": "service",
				"equityId": state.orderInfo.equityId,//权益产品id
				"score": state.handle.score,
				"message": tagListArr.toString(),
				"suggestion": state.handle.content,
				"isAnonymity": state.isAnonymity
			},
			method: 'POST',
			showLoading: true,
		}
		console.log("options", options)
		requestNew(addEvaluation, options).then((res) => {
			confirm('您的评价已发布成功！', () => {
				uni.$emit('refreshOrder');
				uni.navigateBack();
			}, '发布成功', false);
		})
	}

	/* 获取订单详情 */
	const getOrderDetails = (id) => {
		const options = {
			type: 2,
			data: { "id": id },
			method: 'POST',
			showLoading: true,
		}
		requestNew(orderDetailQuery, options).then((res) => {
			state.orderInfo = res;
			console.log("获取订单详情", res, state.orderInfo.equityId)
		})
	}
	// 是否匿名
	const switchChange = (e) => {
		console.log('switch1 发生 change 事件，携带值为', e.detail.value);
		if (e.detail.value == true) {
			state.isAnonymity = 1
		} else {
			state.isAnonymity = 0
		}
	}
	onLoad((option) => {
		console.log("option11111", option)
		getOrderDetails(option.id);
		getEnvTag()
		state.orderId = option.orderId
	})
</script>

<style>
	page {
		background-color: #EEF7F7;
		padding-bottom: 50rpx;
	}
</style>
<style lang="scss" scoped>
	.card {
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0px 0px 6rpx 2rpx rgba(223, 223, 223, 0.3);
		margin: 30rpx;

		.title {
			text-align: center;
			font-size: 32rpx;
			color: #333333;
			padding-bottom: 30rpx;
		}

		.upload-img {
			margin-top: 10rpx;
		}

		.rate {
			.rate-label {
				font-size: 28rpx;
				color: #333333;
				padding-right: 20rpx;
			}
		}

		.input-box {
			width: 100%;
			border: 1px solid #DCDCDC;
			border-radius: 10rpx;
			background-color: #F3F3F3;
			padding: 30rpx;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			/*Firefox*/
			-webkit-box-sizing: border-box;
			/*Safari*/
			margin-top: 30rpx;
		}

		.text-hine {
			color: #999999;
			font-size: 26rpx;
		}

		.title1 {
			font-size: 30rpx;
			color: #333333;
			border-bottom: 1px solid #DCDCDC;
			padding: 30rpx;
		}

		.title1 {
			font-size: 30rpx;
			color: #333333;
			border-bottom: 1px solid #DCDCDC;
			padding: 30rpx;
		}

		.user {
			margin-bottom: 40rpx;

			.avatar {
				width: 140rpx;
				height: 160rpx;
				background-color: #F3F3F3;
				border-radius: 10rpx;

			}

			.user-info {
				margin-left: 40rpx;
				margin-top: 28rpx;

				.name {
					font-size: 28rpx;
					color: #333333;

					&:last-child {
						margin-top: 40rpx;
					}
				}
			}
		}

		.center {
			margin-top: 40rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #DCDCDC;

			.tags {
				flex-wrap: wrap;

				.tag {
					border-radius: 28rpx;
					background-color: #F3F3F3;
					padding: 0rpx 20rpx;
					border: 1px solid #DCDCDC;
					margin-right: 18rpx;
					margin-bottom: 15rpx;
					color: #333333;
					font-size: 26rpx;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					height: 57rpx;

					&:last-child {
						margin-right: 0rpx;
						margin-bottom: 0px;
					}

					.tag-close {
						width: 32rpx;
						height: 32rpx;
						margin-left: 15rpx;
					}
				}
			}
		}
	}

	.btn {
		margin: 60rpx 40rpx 0rpx;
	}

	.uni-list-cell {
		display: flex;
		margin: 10rpx auto;
		width: 90%;
		justify-content: space-between;
		align-items: center;
	}
</style>