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

<!-- 订单-评价 -->
<template>
	<!-- 业务员办理满意度评价 -->
	<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.showTagPop1 ? 'arror-top.png' : 'arror-down.png'}`"
					style="width: 40rpx;height: 40rpx;" @click="state.showTagPop1 = !state.showTagPop1"></image>
			</view>
			<textarea class="input-box" v-model="state.handle.content" placeholder-class="text-hint"
				style="height: 200rpx;" placeholder="请输入评价内容">
			</textarea>
		</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.nickName ?? ''}}</view>
					<view class="name">{{state.orderInfo.tell ?? ''}}</view>
					<!-- <view class="name">张三</view>
					<view class="name">18712345678</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.showTagPop1" mode="bottom" height="60%">
		<view v-if="state.showTagPop1">
			<tag-popup :selTags="state.handle.tagList" :tagAllList="state.tagAllList" @cancel="state.showTagPop1 = !state.showTagPop1" @confirm="confirmSelectTag1"></tag-popup>
		</view>
	</u-popup>
	
	<!-- 选择标签弹窗 业务员满意度弹框-->
	<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,salesmanMsg } 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, //存在有业务员发起的业务展示业务员评价模块
		showTagPop1:false, //第一个弹框
		showTagPop: false, //显示标签选择弹窗
		handle: { //办理满意度
			score: 0, //星级得分 最高5分，0.5小数点 2.5分及以下为差评 2.5以上4.0以下为中评 4.0及4.0以上为好评（必选）
			content: '', //评价内容
			tagList: [], //已选择的评价标签列表
		},
		user: { //业务员
			score: 0, //星级得分 最高5分，0.5小数点 2.5分及以下为差评 2.5以上4.0以下为中评 4.0及4.0以上为好评（必选）
			content: '', //评价内容
			tagList: [], //已选择的评价标签列表
		},
		tagAllList:[]
	})
    /* 确认选择tag 满意度 */
	const confirmSelectTag1 = (selectTag) => {
		state.showTagPop1 = !state.showTagPop1
		state.handle.tagList = [...selectTag];
	}
	/* 确认选择tag 业务员*/
	const confirmSelectTag = (selectTag) => {
		state.showTagPop = !state.showTagPop
		state.user.tagList = [...selectTag];
	}
    /* 删除评价标签 满意度*/
	const removeTag1 = (item: any) => {
		state.handle.tagList.map((tag, index) => {
			if (tag.id === item.id) {
				state.handle.tagList.splice(index, 1)
			}
		})
	}
	/* 删除评价标签 业务员*/
	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.handle.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.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 = "默认好评";
			}
		}
		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.handle.score,
				'productAppraise':state.handle.content,
				// 'appraisePics':state.handle.imageList.join(";"),
				'staffId':state.orderInfo.openId,  //业务员ID
				'staffName':state.orderInfo.nickName,
				'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) => {
			console.log("stringToJson(res.bizContent)",stringToJson(res.bizContent))
			state.orderInfo = stringToJson(res.bizContent);
			state.haveUser = !isBlank(state.orderInfo.staffId);
		})
	}
	/* 订单查询业务员简单信息 */
	const getSalesmanMsg = (id) => {
		const options = {
			type: 2,
			data: {"id": id},
			method: 'POST',
			showLoading: true,
		}
		request(salesmanMsg, options).then((res) => {
			console.log("stringToJson(res.bizContent)",stringToJson(res.bizContent))
			state.orderInfo = stringToJson(res.bizContent);
			// state.haveUser = !isBlank(state.orderInfo.openId);
			state.haveUser = true;
		})
	}
	/* 获取评价标签 */
	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);
		getSalesmanMsg(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>