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

<template>
  <view class="container">

    <!-- 评分区域 -->
    <view class="rating-section">
      <!-- 订单编号 -->
      <view class="order-info">
        <text class="order-label">订单编号</text>
        <text class="order-value">{{ itemObj.order_no }}</text>
      </view>
      <view class="goods">
        <view>
          <image :src="itemObj.commodity_order_item_list[0].commodity_pic" class="goodsImg"></image>
        </view>
        <view class="rating">
          <view>很差</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://static.hshuishang.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>
import { picUrl, NavgateTo, request } from "../../../utils";
import { apiArr } from "../../../api/afterSale";

export default {
  data() {
    return {
      // 评分数据
      qualityRating: 0,
      speedRating: 0,
      serviceRating: 0,
      // 评价内容
      comment: "",
      // 图片列表
      imageList: [],
      itemObj: {},
    };
  },
  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;
      }
      const params = {
        order_id: this.itemObj.id,
        goods_id: this.itemObj.commodity_order_item_list[0].goods_id,
        user_id: uni.getStorageSync("userId"),
        quality_score: this.qualityRating,
        speed_score: this.speedRating,
        service_score: this.serviceRating,
        user_review: this.comment,
        review_image: this.imageList,
      }
      request(apiArr.createReview, "POST", params).then((res) => {
        uni.showToast({
          title: "评价提交成功",
          icon: "success",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      });
    },
  },
  onLoad(options) {
    this.itemObj = JSON.parse(decodeURIComponent(options.item));
  },
};
</script>

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