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 ?state.orderInfo.nickName: ''}}</view>
					<view class="name">{{state.orderInfo.tell ?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="uni-list" style='font-size:32rpx'>
		<view class="uni-list-cell uni-list-cell-pd">
			<view class="uni-list-cell-db">是否匿名</view>
			<switch checked 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.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, orderEvaluateTag, salesmanMsg, addEvaluation, judageSalesman } 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: [],
		orderId: '', //订单ID
		id: '',
		isAnonymity: 1, //是否匿名 默认匿名
	})
	/* 确认选择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) => {
		addService();
	}
	const addService = () => {
		if (state.handle.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 = "默认好评";
			}
		}
		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",
				"score": state.handle.score,
				"message": tagListArr.toString(),
				"suggestion": state.handle.content,
				"isAnonymity": state.isAnonymity
			},
			method: 'POST',
			showLoading: true,
		}
		request(addEvaluation, options).then((res) => {
			// 是否对业务员进行评价
			if (state.haveUser) {
				addStaff();
			} else {
				confirm('您的评价已发布成功！', () => {
					uni.$emit('refreshOrder');
					uni.navigateBack();
				}, '发布成功', false);
			}
		})
	}
	const addStaff = () => {
		if (state.haveUser && state.user.score === 0) {
			msg('请对业务员进行打分！');
			return;
		}
		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 tagListArr = [];
		for (var i = 0; i < state.user.tagList.length; i++) {
			tagListArr.push(state.user.tagList[i].label)
		}
		const options = {
			type: 2,
			data: {
				"orderId": state.orderId,
				"serviceType": "staff",
				"score": state.user.score,
				"message": tagListArr.toString(),
				"suggestion": state.user.content,
				"isAnonymity": state.isAnonymity
			},
			method: 'POST',
			showLoading: true,
		}
		request(addEvaluation, 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 getSalesmanMsg = (id) => {
		const options = {
			type: 2,
			data: { "id": id },
			method: 'POST',
			showLoading: true,
		}
		request(salesmanMsg, options).then((res) => {
			console.log("订单查询业务员简单信息", stringToJson(res.bizContent))
			state.orderInfo = stringToJson(res.bizContent);
		})
	}
	// 获取是否有业务员
	const isSalesman = (orderId) => {
		const options = {
			type: 2,
			data: { "orderId": orderId },
			method: 'POST',
			showLoading: true,
		}
		request(judageSalesman, options).then((res) => {
			console.log("获取是否有业务员", stringToJson(res.bizContent))
			state.haveUser = stringToJson(res.bizContent);
			getSalesmanMsg(state.id);
		})
	}
	/* 获取评价标签 */
	const getEnvTag = () => {
		const options = {
			type: 2,
			data: {},
			method: 'POST',
			showLoading: true,
		}
		request(orderEvaluateTag, options).then((res) => {

			state.tagAllList = stringToJson(res.bizContent);
		})
	}
	// 是否匿名
	const switchChange = (e) => {
		console.log('switch1 发生 change 事件，携带值为', e.detail.value);
		if (e.detail.value) {
			state.isAnonymity = 1
		} else {
			state.isAnonymity = 0
		}
	}
	onLoad((option) => {
		console.log("option", option)
		state.orderId = option.orderId;
		state.id = option.id;
		isSalesman(option.orderId);  //获取是否有业务员
		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;
	}

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