|
|
@@ -1,51 +1,59 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <view>
|
|
|
- 服务评价:
|
|
|
- <up-image :show-loading="true" :src="src" width="80px" height="80px" @click="click"></up-image>
|
|
|
+ <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>
|
|
|
- <view>
|
|
|
- <text>服务礼仪：</text>
|
|
|
- <template>
|
|
|
- <up-rate :count="count" v-model="IfonForm.protocolScore" count="5"></up-rate>
|
|
|
- </template>
|
|
|
+
|
|
|
+ <!-- 评分区域 - 修改为星星和文字都在左边 -->
|
|
|
+ <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>
|
|
|
- <text>着装整洁：</text>
|
|
|
- <template>
|
|
|
- <up-rate :count="count" v-model="IfonForm.clothingScore" count="5"></up-rate>
|
|
|
- </template>
|
|
|
+ <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>
|
|
|
- <text>专业能力：</text>
|
|
|
- <template>
|
|
|
- <up-rate :count="count" v-model="IfonForm.abilityScore" count="5"></up-rate>
|
|
|
- </template>
|
|
|
+ <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>
|
|
|
- <text>服务质量：</text>
|
|
|
- <template>
|
|
|
- <up-rate :count="count" v-model="IfonForm.qualityScore" count="5"></up-rate>
|
|
|
- </template>
|
|
|
+ <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="service-info order-card">
|
|
|
- <!-- 回顯 -->
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 图片上传区域 -->
|
|
|
+ <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" srcset="">
|
|
|
+ <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="请输入评论内容"></up-textarea>
|
|
|
- <up-button type="error" text="发布" @click="handlButClick"></up-button>
|
|
|
+ <!-- 文本区域 -->
|
|
|
+ <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>
|
|
|
|
|
|
@@ -67,8 +75,9 @@
|
|
|
|
|
|
const count = ref(4);
|
|
|
const fileList = ref([]);
|
|
|
- const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
|
|
|
-
|
|
|
+ const src = ref('');
|
|
|
+ const projectName = ref('');
|
|
|
+ const volunteerName = ref('');
|
|
|
|
|
|
|
|
|
const IfonForm = ref({
|
|
|
@@ -76,7 +85,7 @@
|
|
|
clothingScore: 0, //服装整洁
|
|
|
abilityScore: 0, //专业能力
|
|
|
qualityScore: 0, //服务质量
|
|
|
- userReview:'',
|
|
|
+ userReview: '',
|
|
|
})
|
|
|
|
|
|
|
|
|
@@ -98,13 +107,13 @@
|
|
|
// 提取所有图片的 URL
|
|
|
const imageUrls = fileList.value.map(item => item.url);
|
|
|
const volunteerInfoId = IfonForm.value.volunteerInfoId;
|
|
|
- const secondOrderId = IfonForm.value.secondOrderId;
|
|
|
+ const secondOrderId = IfonForm.value.secondOrderId;
|
|
|
try {
|
|
|
const params = {
|
|
|
...IfonForm.value,
|
|
|
images: imageUrls,
|
|
|
volunteerInfoId: volunteerInfoId,
|
|
|
- secondOrderId: secondOrderId,
|
|
|
+ secondOrderId: secondOrderId,
|
|
|
}
|
|
|
console.log(params, 'params>>>')
|
|
|
const res = await usersUserFinishOrder(params)
|
|
|
@@ -128,25 +137,129 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
-onLoad(async (options) => {
|
|
|
- const data = JSON.parse(decodeURIComponent(options.data));
|
|
|
- console.log(data, '》》》》》》 获取传递的 listData'); // 获取传递的 listData
|
|
|
+ onLoad(async (options) => {
|
|
|
+ const data = JSON.parse(decodeURIComponent(options.data));
|
|
|
+ console.log(data, '》》》》》》 获取传递的 listData');
|
|
|
|
|
|
- const secondOrderList = data.secondOrderList || [];
|
|
|
-
|
|
|
- // 获取第一个 secondOrderId
|
|
|
- const secondOrderId = secondOrderList.length > 0 ? secondOrderList[0].secondOrderId : null;
|
|
|
+ // 设置图片
|
|
|
+ if (data.volunteerInfo?.volunteerPicture) {
|
|
|
+ src.value = data.volunteerInfo.volunteerPicture;
|
|
|
+ } else {
|
|
|
+ src.value = '/static/default-avatar.png';
|
|
|
+ }
|
|
|
|
|
|
- // 如果 secondOrderId 存在，则设置到 IfonForm 中
|
|
|
- if (secondOrderId) {
|
|
|
- IfonForm.value.secondOrderId = secondOrderId;
|
|
|
- }
|
|
|
+ // 设置项目名称和志愿者姓名
|
|
|
+ projectName.value = data.volunteerInfo?.projectName || '未知项目';
|
|
|
+ volunteerName.value = data.volunteerInfo?.name || '未知姓名';
|
|
|
|
|
|
- // 获取 volunteerInfoId
|
|
|
- const volunteerInfoId = data.volunteerInfo?.volunteerInfoId || data.volunteerInfoId;
|
|
|
- IfonForm.value.volunteerInfoId = volunteerInfoId;
|
|
|
-});
|
|
|
+ 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>
|
|
|
+<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>
|
贾宇博