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="500"
			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" 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="500"
    		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" v-if="state.haveUser">
		<view class="title1">业务员</view>
		<view style="padding: 30rpx 30rpx 45rpx;">
			<view class="user as-layout-horizontal">
				<image class="avatar" :src="`${$imgUrl}default_head.png`" mode="aspectFill"></image>
				<view class="user-info">
					<view class="name">{{state.orderInfo.staffName ?? ''}}</view>
					<view class="name">{{state.orderInfo.staffPhone ?? ''}}</view>
				</view>
			</view>
			<evaluate-star v-model="state.user.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.user.tagList" :key="item">
						{{item.label}}
						<image v-if="state.user.tagList.length > 1" class="tag-close"
							:src="`${$imgUrl}common/icon-close.png`" @click="removeTag(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.user.content" placeholder-class="text-hint"
				style="height: 200rpx;" placeholder="请输入评价内容">
			</textarea>
		</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.user.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, isBlank, msg} from "@/utils/utils";
	import tagPopup from "./components/popup-order-evaluate-tag";
	import { request } from "@/utils/network/request";
	import { orderDetail, orderEvaluate,orderEvaluateTag,saleMessage } from "@/utils/network/api";
	import {onLoad} from "@dcloudio/uni-app";
	import { stringToJson } from "@/utils/network/encryption";
	import { getItem, StorageKeys } from "@/utils/storage";

	const state = reactive({
		orderInfo:{} as any, //订单信息
		haveUser: false, //存在有业务员发起的业务展示业务员评价模块
		showTagPop: false, //显示标签选择弹窗
		product: { //产品
			score: 0, //星级得分 最高5分，0.5小数点 2.5分及以下为差评 2.5以上4.0以下为中评 4.0及4.0以上为好评（必选）
			content: '', //评价内容
			imageList: [], //支持拍照上传最多上传9张
		},
		user: { //业务员
			score: 0, //星级得分 最高5分，0.5小数点 2.5分及以下为差评 2.5以上4.0以下为中评 4.0及4.0以上为好评（必选）
			content: '', //评价内容
			tagList: [], //已选择的评价标签列表
		},
		tagAllList:[]
	})

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

	//选择图片
	const backImg = (e: any) => {
		state.product.imageList = e;
	}
	
	//删除图片
	const removeImg = (imgList) => {
		state.product.imageList = imgList
	}

	/* 删除评价标签 */
	const removeTag = (item: any) => {
		state.user.tagList.map((tag, index) => {
			if (tag.id === item.id) {
				state.user.tagList.splice(index, 1)
			}
		})
	}

	/* 发布 */
	const publish = (e) => {
		if (state.product.score === 0) {
			msg('请对产品进行打分！');
			return;
		}
		if (state.haveUser && state.user.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 = "默认好评";
			}
		}
		if (state.haveUser && !state.user.content) {
			if (state.user.score <= 2.5) {
				state.user.content = "默认差评";
			} else if (state.user.score > 2.5 && state.user.score < 4) {
				state.user.content = "默认中评";
			} else {
				state.user.content = "默认好评";
			}
		}
		
		const options = {
			type: 2,
			data: {
				"id": state.orderInfo.id,
				'productScore': state.product.score,
				'productAppraise':state.product.content,
				'appraisePics':state.product.imageList.join(";"),
				'staffId':state.orderInfo.staffId,
				'staffName':state.orderInfo.staffName,
				'staffScore':state.user.score,
				'staffTips':getTagIds().join(';'),
				'staffAppraise':state.user.content,
				'opId':getItem(StorageKeys.OpenId)
			},
			 method: 'POST',
			 showLoading: true,
		}
		request(orderEvaluate,options).then((res)=>{
			confirm('您的评价已发布成功！',()=>{
				uni.$emit('refreshOrder');
				uni.navigateBack();
			},'发布成功',false);
		})
	}
	
	/* 获取业务员标签ID */
	const getTagIds = () => {
		const list = [];
		state.user.tagList.map((tag)=>{
			list.push(tag.id);
		});
		return list;
	}

	/* 获取订单详情 */
	const getOrderDetails = (id) => {
		const options = {
			type: 2,
			data: {"id": id},
			method: 'POST',
			showLoading: true,
		}
		request(orderDetail, options).then((res) => {
			state.orderInfo = stringToJson(res.bizContent);
			state.haveUser = !isBlank(state.orderInfo.staffId);
		})
	}
	
	/* 获取评价标签 */
	const getEnvTag = () => {
		const options = {
			type: 2,
			data: {},
			method: 'POST',
			showLoading: true,
		}
		request(orderEvaluateTag, options).then((res) => {
			state.tagAllList = stringToJson(res.bizContent);
		})
	}
	
	onLoad((option) => {
		getOrderDetails(option.id);
		getEnvTag();
	})
</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;
		}

		.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;
	}
</style>