zhywpt-sp/subpackage/after-sale/add-equity/equity-product-evaluation.vue

<template>
	<!-- 权益产品评价 -->

	<view class="card" style="padding: 40rpx 30rpx;">
		<view class="title">权益产品评价</view>
		<!-- <evaluate-star v-model="state.interest.score" title="评价得分"></evaluate-star> -->
		<view class="evaluate-star">
			<view class="evaluate_title" v-if="title">{{title}}</view>
			<view class="star-row">
				<view class="star-box" v-for="(item,index) in total" @click="changeRate(index)" :key="index"
					:style="style">
					<image class="star-img" :src="`${$imgUrl}common/whole_star.png`" v-if="whole-0.5>index" />
					<image :class="['star-img',whole-0.5>index?'star-hide':'']" :src="`${$imgUrl}common/half_star.png`"
						v-if="half && whole>index" />
					<image class="star-img" :src="`${$imgUrl}common/empty_star.png`" v-if="whole<=index" />
				</view>
			</view>
		</view>
		<textarea class="input-box" v-model="state.interest.content" placeholder-class="text-hint" :maxlength="300"
			style="height: 260rpx;" placeholder="从多角度评价，可以帮助我们提升服务质量。">
		</textarea>
		<view class="upload-img">
			<form-image @backImg="backImgInterest($event)" @removeImg="removeImgInterest" :isUrl="false"
				style="width: 100%;" :retract="-15"></form-image>
		</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.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 "@/subpackage/orders/components/evaluate-star.vue"
	import { reactive, onMounted, ref } from "vue";
	import { confirm, isBlank, msg } from "@/utils/utils";
	import tagPopup from "@/subpackage/orders/components/popup-order-evaluate-tag";
	import { request } from "@/utils/network/request";
	import { orderDetail, addEvaluation, addProductInterestApi } 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, //订单信息
		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张
		},
		user: { //业务员
			score: 0, //星级得分 最高5分，0.5小数点 2.5分及以下为差评 2.5以上4.0以下为中评 4.0及4.0以上为好评（必选）
			content: '', //评价内容
			tagList: [], //已选择的评价标签列表
		},
		tagAllList: [],
		orderId: "",
		haveInterestsProduct: false,  //是否有权益产品
		isAnonymity: 0,  //是否匿名
		equityId: "",
		id: ""
	})
	const props = defineProps({
		//双向绑定数据
		modelValue: {
			type: Number,
			default: 0
		},
		//评分总数
		total: {
			type: Number,
			default: 5
		},
		//评分名称
		title: {
			type: String,
			default: ''
		},
		//星星大小rpx
		size: {
			type: Number,
			default: 48
		}
	})

	const whole = ref(0)
	const half = ref(false)
	const sum = ref(0)
	let style = reactive({})

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

	//选择图片
	const backImg = (e : any) => {
		console.log("e", e)
		state.product.imageList = e;
	}

	//删除图片
	const removeImg = (imgList) => {
		state.product.imageList = imgList
	}
	//选择图片权益产品
	const backImgInterest = (e : any) => {
		state.interest.imageList = e;
	}

	//删除图片
	const removeImgInterest = (imgList) => {
		state.interest.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) => {
		addProductInterest();
	}
	const addProductInterest = () => {
		if (state.interest.score === 0) {
			msg('请对权益产品进行打分！');
			return;
		}
		//若不填评价内容，根据打分规则自动填充评价内容 
		//差评展示：默认差评 2.5分及以下
		//中评展示：默认中评 2.5以上4.0以下 
		//好评展示：默认好评 4.0及4.0以上
		if (!state.interest.content) {
			if (state.interest.score <= 2.5) {
				state.interest.content = "默认差评";
			} else if (state.interest.score > 2.5 && state.interest.score < 4) {
				state.interest.content = "默认中评";
			} else {
				state.interest.content = "默认好评";
			}
		}
		const options = {
			type: 2,
			data: {
				"orderId": state.orderId,
				"serviceType": "equity",
				"equityId": state.equityId,//权益产品id
				"score": state.interest.score,
				"pictureUrl": state.interest.imageList.join(";"),
				"message": '',
				"suggestion": state.interest.content,
				"isAnonymity": state.isAnonymity  //是否匿名
			},
			method: 'POST',
			showLoading: true,
		}
		console.log("options", options)
		request(addEvaluation, options).then((res) => {
			addProductInterestRequest()
		})
	}

	/* 完成评价掉接口 */
	const addProductInterestRequest = () => {
		const options = {
			type: 2,
			data: { "id": state.id },
			method: 'POST',
			showLoading: true,
		}
		request(addProductInterestApi, options).then((res) => {
			confirm('您的评价已发布成功！', () => {
				uni.$emit('refreshOrder');
				uni.navigateBack();
			}, '发布成功', false);
		})
	}
	// 是否匿名
	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)
		state.equityId = option.equityId
		state.id = option.id
		state.orderId = option.orderId
	})
	onMounted(() => {
		style = {
			width: props.size + 'rpx',
			height: props.size + 'rpx',
		}
	})
	const changeRate = (e) => {
		var a = e++
		sum.value++

		if (sum.value === 1) {
			whole.value = e - 0.5
			half.value = true
			sum.value = -1
		} else {
			half.value = false
			whole.value = e++
		}
		state.interest.score = whole.value
		console.log("whole.value", e, whole.value)
	}
</script>

<style>
	page {
		background-color: #EEF7F7;
		padding-bottom: 50rpx;
	}
</style>
<style lang="scss" scoped>
	/* 点评星级 */
	.evaluate-star {
		width: 100%;
		display: flex;
		align-items: center;

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

		.star-row {
			display: flex;
			align-items: center;

			.star-box {
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;

				.star-img {
					width: 100%;
					height: 100%;
				}

				.star-hide {
					display: none;
				}
			}
		}
	}

	.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>