frontend-app/pages/order_package/evaluate/evaluate.vue

<template>
  <view class="content">
    <TopSafe></TopSafe>
    <Header title="发表评价" />

    <view class="setting-view">
      <!-- 评价核心白底卡片容器 -->
      <view class="review-card">
        <!-- 商品信息模块 -->
        <view class="product-section">
          <image class="product-img" :src="mainGraph" mode="aspectFill"></image>
          <view class="product-detail">
            <text class="product-title">{{ title }}</text>
            <text class="product-spec">规格：{{ goodsSpece }}</text>
          </view>
        </view>

        <!-- 信任度评分模块 -->
        <view class="rating-section">
          <text class="rating-label">信任度</text>
          <view class="stars-box">
            <text
              v-for="index in 5"
              :key="index"
              class="star-icon"
              :class="{ active: index <= rating }"
              @click="setRating(index)"
              >★</text
            >
          </view>
        </view>

        <!-- 评价输入框模块 -->
        <view class="comment-section">
          <textarea
            class="comment-textarea"
            v-model="commentText"
            placeholder="您的评价可以帮助更多的人哦"
            maxlength="100"
            placeholder-class="placeholder-style"
          />
          <view class="word-counter">已输入{{ commentText.length }}/100</view>
        </view>

        <!-- 照片/视频上传模块 -->
        <view class="upload-section">
          <view class="upload-grid">
            <!-- 已上传媒体预览 -->
            <view
              class="upload-item"
              v-for="(item, idx) in mediaList"
              :key="idx"
            >
              <image
                :src="item"
                mode="aspectFill"
                class="uploaded-media"
              ></image>
              <view class="delete-btn" @click="deleteMedia(idx)">×</view>
            </view>

            <!-- 上传触发按钮 -->
            <view
              class="upload-btn"
              @click="chooseMedia"
              v-if="mediaList.length < 9"
            >
              <text class="plus-icon">+</text>
              <text class="upload-text">上传照片/视频</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部固定发表评价按钮 -->
    <view class="bottom-action-bar">
      <button class="submit-review-btn" @click="submitReview">发表评价</button>
    </view>

    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script>
import { addOrderReviews } from "@/api/product.js";
import { uploadImage, uploadImg } from "@/api/common.js";
import { IMG_TYPE } from '@/utils/enumUtils.js';
import { BASE_URL, Authorization } from '@/utils/config.js';
import Header from "@/components/common/header.vue";
import TopSafe from "@/components/common/top-safe.nvue";
import MyBtn from "@/components/common/my-btn.vue";
import { getStorageFun, TOKEN_NAME,clear } from '@/utils/auth.js';

export default {
  components: { Header, TopSafe, MyBtn },
  data() {
    return {
      rating: 0, // 评分星级
      commentText: "", // 评价内容
      mediaList: [], // 已上传的图片/视频列表
      goodsId: "", // 商品id
      evalId: "", // 订单id
      title: "", // 商品标题
      mainGraph: "", // 商品主图
      goodsSpece: "", // 商品规格
      goodsId: "", // 店铺id
    };
  },
  onShow() {},
  onLoad(options) {
    this.evalId = options.id;
    this.goodsId = options.goodsId;
    this.title = options.title;
    this.mainGraph = options.mainGraph;
    this.goodsSpece = options.goodsSpece;
  },
  methods: {
    // 设置评分
    setRating(val) {
      this.rating = val;
    },
    // 调起系统相册/相机选择媒体
    chooseMedia() {
      let that = this;
      uni.chooseImage({
        count: 1, // 默认9，设置图片的数量
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // 成功选择图片后
          const filePath = res.tempFilePaths[0]; // 获取文件路径
          that.uploadFile(filePath);
        },
      });
    },
    // 删除选中的媒体文件
    deleteMedia(idx) {
      this.mediaList.splice(idx, 1);
    },
    uploadFile(url) {
      uni.showLoading({
        title: "图片上传中...",
      });
      const that = this;
      const token = getStorageFun(TOKEN_NAME); // 获取token, 根据实际情况调整获取方式
      // 成功则返回文件的本地临时文件路径
      uni.uploadFile({
        url: BASE_URL + uploadImg, // 替换为你的上传接口URL
        filePath: url,
        name: "file",
        formData: {
          type: IMG_TYPE.COMMON,
        },
        header: {
          Authorization: Authorization,
          "HSM-AUTH": token ? token : "",
        },
        success: (uploadFileRes) => {
          const data = JSON.parse(uploadFileRes.data);
		  console.log('data',data)
          if (data.bizcode === 100) {
            that.mediaList.push(data.data.accessUrl);
          } else {
            uni.showToast({
              title: "图片上传失败",
              icon: "none",
              mask: true,
              duration: 3000,
            });
          }
        },
        fail: (uploadFileErr) => {
          uni.showToast({
            title: "图片上传失败",
            icon: "none",
            mask: true,
            duration: 3000,
          });
        },
        complete: (res) => {
          // 请求完成以后做一些事情
          uni.hideLoading();
        },
      });
    },

    // 提交评价
    async submitReview() {
      if (this.rating === 0) {
        this.$refs.uToastRef.show({
          message: "请为商品信任度评分",
          type: "warning",
        });
        return;
      }
      if (!this.commentText.trim()) {
        this.$refs.uToastRef.show({
          message: "请输入您的评价内容",
          type: "warning",
        });
        return;
      }

      // 评价订单
      const params = {
        orderId: this.evalId,
        rating: this.rating,
        goodsId: this.goodsId,
        content: this.commentText,
        images: this.mediaList.join(","),
      };
      console.log("评价参数", params);
      const resp = await addOrderReviews(params);
      if (resp && resp.bizcode === 100) {
        this.$refs.uToastRef.show({ message: "评价成功", type: "success" });
        uni.navigateBack({ delta: 1 });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #f7f7f7;
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
}

.setting-view {
  width: 100%;
  height: calc(
    100vh - 220rpx - var(--status-bar-height)
  ); /* 留出底部按钮区域空间 */
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  box-sizing: border-box;
}

/* 核心内容白底卡片样式 */
.review-card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 36rpx 24rpx;
  margin-top: 24rpx;
  box-sizing: border-box;
}

/* 商品模块 */
.product-section {
  display: flex;
  margin-bottom: 40rpx;

  .product-img {
    width: 156rpx;
    height: 156rpx;
    flex-shrink: 0;
  }

  .product-detail {
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1;

    .product-title {
      font-size: 28rpx;
      color: #111111;
      font-weight: bold;
      line-height: 38rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .product-spec {
      font-size: 24rpx;
      color: #aaaaaa;
      margin-top: 16rpx;
    }
  }
}

/* 信任度评分模块 */
.rating-section {
  display: flex;
  align-items: center;
  margin-bottom: 48rpx;

  .rating-label {
    font-size: 28rpx;
    color: #333333;
    margin-right: 32rpx;
    font-weight: 500;
  }

  .stars-box {
    display: flex;
    align-items: center;

    .star-icon {
      font-size: 42rpx;
      color: #e5e5e5;
      margin-right: 20rpx;
      transition: color 0.15s ease;
      cursor: pointer;

      &.active {
        color: #7934f6; /* 选中状态呈现高亮蓝 */
      }
    }
  }
}

/* 评价输入框模块 */
.comment-section {
  position: relative;
  width: 100%;
  margin-bottom: 32rpx;

  .comment-textarea {
    width: 100%;
    height: 180rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    box-sizing: border-box;
  }

  .placeholder-style {
    color: #cccccc;
    font-size: 28rpx;
  }

  .word-counter {
    text-align: right;
    font-size: 24rpx;
    color: #bbbbbb;
    margin-top: 8rpx;
  }
}

/* 媒体文件上传模块 */
.upload-section {
  width: 100%;

  .upload-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }

  .upload-item {
    position: relative;
    width: 200rpx;
    height: 200rpx;

    .uploaded-media {
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }

    .delete-btn {
      position: absolute;
      top: -12rpx;
      right: -12rpx;
      width: 36rpx;
      height: 36rpx;
      background-color: rgba(0, 0, 0, 0.5);
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
    }
  }

  .upload-btn {
    width: 200rpx;
    height: 200rpx;
    background-color: #f7f8fa;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .plus-icon {
      font-size: 52rpx;
      color: #999999;
      line-height: 1;
      margin-bottom: 12rpx;
      font-weight: 300;
    }

    .upload-text {
      font-size: 20rpx;
      color: #999999;
    }
  }
}

/* 底部操作固定栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  z-index: 99;

  .submit-review-btn {
    width: 100%;
    height: 88rpx;
    background: #7f32ff; /* 高度还原UI图中的核心紫色 */
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;

    &::after {
      border: none;
    }
  }
}
</style>