leromro-mini/pages_classify/pages/orderItem/userComment.vue

<template>
	<view class="container">
		<!-- 服务评价标题（固定在最上方） -->
		<view class="evaluation-title">服务评价:</view>

		<!-- 图片和信息区域 -->
		<view class="info-section">
			<up-image :show-loading="true" :src="src" width="80px" height="80px" @click="click"
				class="info-image"></up-image>
			<view class="info-text">
				<text class="project-name">服务类型：{{ projectName }}</text>
				<text class="volunteer-name">姓名：{{ volunteerName }}</text>
			</view>
		</view>

		<!-- 评分区域 - 修改为星星和文字都在左边 -->
		<view class="rating-section">
			<view class="rating-item">
				<text class="rating-label">服务礼仪：</text>
				<up-rate :count="count" v-model="IfonForm.protocolScore" count="5" class="rating-stars"></up-rate>
			</view>
			<view class="rating-item">
				<text class="rating-label">着装整洁：</text>
				<up-rate :count="count" v-model="IfonForm.clothingScore" count="5" class="rating-stars"></up-rate>
			</view>
			<view class="rating-item">
				<text class="rating-label">专业能力：</text>
				<up-rate :count="count" v-model="IfonForm.abilityScore" count="5" class="rating-stars"></up-rate>
			</view>
			<view class="rating-item">
				<text class="rating-label">服务质量：</text>
				<up-rate :count="count" v-model="IfonForm.qualityScore" count="5" class="rating-stars"></up-rate>
			</view>
		</view>



		<!-- 图片上传区域 -->
		<view class="upload-section">
			<view class="upload-box">
				<view class="upload-img-item" v-for="(item, index) in fileList" :key="item.url">
					<view class="delete-icon" @click="deletePic(index)">
						<up-icon name="close-circle-fill" color="#f64a1f" size="18"></up-icon>
					</view>
					<img class="upload-img" :src="item.url" :alt="item.fileName">
				</view>
				<img src="/static/img/upload.png" alt="" class="upload-img" @click="uploadClick('img')"
					v-if="fileList.length < 10">
			</view>
		</view>
		<!-- 文本区域 -->
		<up-textarea v-model="IfonForm.userReview" placeholder="请输入评论内容" class="comment-textarea"></up-textarea>
		<!-- 发布按钮 -->
		<view class="button-section">
			<up-button type="error" text="发布" @click="handlButClick" class="submit-button"></up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		usersUserFinishOrder
	} from "@/api/userList.js";
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		wxUploadFile
	} from '@/utils/wxRequest.js'


	const count = ref(4);
	const fileList = ref([]);
	const src = ref('');
	const projectName = ref('');
	const volunteerName = ref('');


	const IfonForm = ref({
		protocolScore: 0, //服务礼仪
		clothingScore: 0, //服装整洁
		abilityScore: 0, //专业能力
		qualityScore: 0, //服务质量
		userReview: '',
	})



	// 删除图片
	const deletePic = (event) => {
		fileList.value.splice(event.index, 1);
	};



	const uploadClick = async (type) => {
		const res = await wxUploadFile(type);
		fileList.value = [...fileList.value, ...res];
		console.log('xxxxres', res, fileList.value);
	}

	const handlButClick = async () => {
		// 提取所有图片的 URL
		const imageUrls = fileList.value.map(item => item.url);
		const volunteerInfoId = IfonForm.value.volunteerInfoId;
		const secondOrderId = IfonForm.value.secondOrderId;
		try {
			const params = {
				...IfonForm.value,
				images: imageUrls,
				volunteerInfoId: volunteerInfoId,
				secondOrderId: secondOrderId,
			}
			console.log(params, 'params>>>')
			const res = await usersUserFinishOrder(params)
			if (res.code == 200) {
				uni.navigateTo({
					url: '/pages/classify'
				})
				uni.showToast({
					title: '评价提交成功',
					icon: 'success'
				});
			} else {
				console.log('提交失败')
			}
		} catch (e) {
			uni.showToast({
				title: '提交失败，请重试',
				icon: 'error'
			});
		}

	}

	onLoad(async (options) => {
		const data = JSON.parse(decodeURIComponent(options.data));
		console.log(data, '》》》》》》 获取传递的 listData');

		// 设置图片
		if (data.volunteerInfo?.volunteerPicture) {
			src.value = data.volunteerInfo.volunteerPicture;
		} else {
			src.value = '/static/default-avatar.png';
		}

		// 设置项目名称和志愿者姓名
		projectName.value = data.volunteerInfo?.projectName || '未知项目';
		volunteerName.value = data.volunteerInfo?.name || '未知姓名';

		const secondOrderList = data.secondOrderList || [];
		// 获取第一个 secondOrderId
		const secondOrderId = secondOrderList.length > 0 ? secondOrderList[0].secondOrderId : null;
		// 如果 secondOrderId 存在，则设置到 IfonForm 中
		if (secondOrderId) {
			IfonForm.value.secondOrderId = secondOrderId;
		}
		// 获取 volunteerInfoId
		const volunteerInfoId = data.volunteerInfo?.volunteerInfoId || data.volunteerInfoId;
		IfonForm.value.volunteerInfoId = volunteerInfoId;
	});
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.evaluation-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.info-section {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.info-image {
		margin-right: 20rpx;
	}

	.info-text {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.project-name,
	.volunteer-name {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.rating-section {
		margin-bottom: 30rpx;
	}

	.rating-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.rating-label {
		font-size: 28rpx;
		margin-right: 15rpx;
		min-width: 120rpx;
		/* 保持标签宽度一致 */
	}

	.rating-stars {
		margin-left: 0;
		/* 移除左边距，使星星紧贴文字 */
	}

	.comment-textarea {
		margin-bottom: 20rpx;
	}

	.upload-section {
		margin-bottom: 30rpx;
	}

	.upload-box {
		display: flex;
		flex-wrap: wrap;
	}

	.upload-img-item {
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.delete-icon {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		z-index: 1;
	}

	.upload-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
	}

	.button-section {
		display: flex;
		justify-content: flex-end;
	}

	.submit-button {
		width: 200rpx;
	}
</style>