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,
  coreVolTeRde
} 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('');

// 评论回显
// onLoad(async (options) => {
//   console.log(options, '》》》》》》 获取传递的 options>>你家吗');
  
//   const res = await coreVolTeRde()
//   console.log(res, '》》》》》》 获取传递的 listData');
// })

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).join(',');
  const volunteerInfoId = IfonForm.value.volunteerInfoId;
  const secondOrderId = IfonForm.value.secondOrderId;
  try {
    const params = {
      ...IfonForm.value,
      userPicture: imageUrls,
      volunteerInfoId: volunteerInfoId,
      secondOrderId: secondOrderId,
    }
    console.log(params, 'params>>>')
    const res = await usersUserFinishOrder(params)
    if (res.code == 200) {
      uni.showToast({
        title: '评价提交成功',
        icon: 'success'
      });
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        })
      }, 2000)
    } else {
      console.log('提交失败')
    }
  } catch (e) {
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'error'
    });
  }

}

onLoad(async (options) => {
  uni.getStorage({
    key: 'orderDetailsData',
    success: function(res) {
      const data = res.data;
      console.log(data, '》》》》》》 获取传递的 listData');

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

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

      // 获取 secondOrderId 从 URL 参数
      const secondOrderId = options.secondOrderId;
      if (secondOrderId) {
        IfonForm.value.secondOrderId = secondOrderId;
      }

      // 获取 volunteerInfoId
      IfonForm.value.volunteerInfoId = data.volunteerInfoId || '';
    },
    fail: function(err) {
      console.error('获取存储数据失败:', err);
      uni.showToast({
        title: '获取数据失败',
        icon: 'error'
      });
    }
  });
});
</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>