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

<template>
	<view>
		服务评价
		<up-image :show-loading="true" :src="src" width="80px" height="80px" @click="click"></up-image>
		<view>
			<view>
				<text>服务礼仪：</text>
				<template>
					<up-rate :count="count" v-model="IfonForm.protocolScore"></up-rate>
				</template>
			</view>
			<view>
				<text>着装整洁：</text>
				<template>
					<up-rate :count="count" v-model="IfonForm.clothingScore"></up-rate>
				</template>
			</view>
			<view>
				<text>专业能力：</text>
				<template>
					<up-rate :count="count" v-model="IfonForm.abilityScore"></up-rate>
				</template>
			</view>
			<view>
				<text>服务质量：</text>
				<template>
					<up-rate :count="count" v-model="IfonForm.qualityScore"></up-rate>
				</template>
			</view>
		</view>
		<!-- <up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
			:maxCount="10"></up-upload> -->
		<view class="service-info order-card">
			<!-- <view class="font-title">图片上传</view> -->

			<!-- 回顯 -->
			<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" srcset="">
				</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="请输入评论内容"></up-textarea>
		<up-button type="primary" text="发布" @click="handlButClick"></up-button>
	</view>
</template>
<!-- /** 评分 */
@Excel(name = "服务礼仪")
@ApiModelProperty("服务礼仪")
private Integer protocolScore;

/** 评分 */
@Excel(name = "服装整洁")
@ApiModelProperty("服装整洁")
private Integer clothingScore;

/** 评分 */
@Excel(name = "专业能力")
@ApiModelProperty("专业能力")
private Integer abilityScore;

/** 评分 */
@Excel(name = "服务质量")
@ApiModelProperty("服务质量")
private Integer qualityScore; -->
<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('https://cdn.uviewui.com/uview/album/1.jpg');



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



	// 删除图片
	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);

		try {
			const params = {
				...IfonForm.value,
				images: imageUrls,
			}
			console.log(params, 'params>>>')
			const res = await usersUserFinishOrder(params)
			console.log(res, 'usersUserFinishOrder>>>>>')
			uni.showToast({
				title: '评价提交成功',
				icon: 'success'
			});
		} catch (e) {
			uni.showToast({
				title: '提交失败，请重试',
				icon: 'error'
			});
		}

	}
</script>

<style>
</style>