uniapp-ZHSQ/packages/myOrders/orderEvaluate/index.vue

<template>
  <view class="container">
    <!-- 商品图片区域 -->
    <scroll-view class="goods-scroll" scroll-x>
      <view class="goods-list">
        <view class="goods-item" v-for="(item, index) in goods" :key="index">
          <image :src="item.image" class="goods-img"></image>
        </view>
      </view>
    </scroll-view>

    <!-- 评分区域 -->
    <view class="rating-section">
      <!-- 订单编号 -->
      <view class="order-info">
        <text class="order-label">订单编号</text>
        <text class="order-value">38757328485</text>
      </view>
      <view class="rating">
        <view>很差</view>
        <view>差</view>
        <view>一般</view>
        <view>不错</view>
        <view>满意</view>
      </view>
      <!-- 商品品质 -->
      <view class="rating-item">
        <text class="rating-label">商品品质</text>
        <u-rate
          v-model="qualityRating"
          size="40"
          active-color="#FFB400"
          inactive-color="#EEEEEE"
          gutter="60"
        ></u-rate>
      </view>

      <!-- 配送速度 -->
      <view class="rating-item">
        <text class="rating-label">配送速度</text>
        <u-rate
          v-model="speedRating"
          size="40"
          active-color="#FFB400"
          inactive-color="#EEEEEE"
          gutter="60"
        ></u-rate>
      </view>

      <!-- 快递员服务 -->
      <view class="rating-item">
        <text class="rating-label">快递员服务</text>
        <u-rate
          v-model="serviceRating"
          size="40"
          active-color="#FFB400"
          inactive-color="#EEEEEE"
          gutter="60"
        ></u-rate>
      </view>

      <!-- 评价输入 -->
      <view class="comment-section">
        <textarea
          class="comment-input"
          placeholder="亲，可以从其他角度评价商品，可以帮助我们为您提供更好的服务~"
          v-model="comment"
        ></textarea>
      </view>
      <!-- 图片上传 -->
      <view class="upload-section">
        <view class="image-list">
          <view
            class="image-item"
            v-for="(img, index) in imageList"
            :key="index"
          >
            <image :src="img" class="uploaded-img"></image>
            <view class="delete-btn" @click="deleteImage(index)">
              <text class="delete-icon">×</text>
            </view>
          </view>
        </view>
        <view
          class="upload-btn"
          @click="chooseImage"
          v-if="imageList.length < 3"
        >
          <image
            src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/upload.png"
            class="upload-icon"
          ></image>
          <view class="upload-text">上传图片</view>
          <view class="upload-count">({{ imageList.length }}/3)</view>
        </view>
      </view>
      <!-- 提交按钮 -->
      <view class="submit-btn" @click="submitEvaluate">
        <text class="btn-text">提交</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 商品列表
      goods: [
        { image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index1.png" },
        { image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index2.png" },
        { image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index3.png" },
        { image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index4.png" },
        { image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index5.png" },
        { image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index1.png" },
        { image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index2.png" },
        { image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index3.png" },
        { image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index4.png" },
        { image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/order_index5.png" },
      ],
      // 评分数据
      qualityRating: 5,
      speedRating: 0,
      serviceRating: 0,
      // 评价内容
      comment: "",
      // 图片列表
      imageList: [],
    };
  },
  methods: {
    // 选择图片
    chooseImage() {
      if (this.imageList.length >= 3) {
        uni.showToast({
          title: "最多上传3张图片",
          icon: "none",
        });
        return;
      }
      uni.chooseImage({
        count: 3 - this.imageList.length,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          this.imageList = this.imageList.concat(res.tempFilePaths);
        },
      });
    },
    // 删除图片
    deleteImage(index) {
      this.imageList.splice(index, 1);
    },
    // 提交评价
    submitEvaluate() {
      if (!this.comment.trim() && this.imageList.length === 0) {
        uni.showToast({
          title: "请至少填写评价内容或上传图片",
          icon: "none",
        });
        return;
      }
      // 这里添加提交评价的API调用逻辑
      uni.showToast({
        title: "评价提交成功",
        icon: "success",
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
  },
};
</script>

<style>
@import url("./index.css");
</style>