VAVABUY/pages/dashboard/components/ReviewPopup.vue

<template>
  <up-popup
    v-model:show="visible"
    mode="bottom"
    :round="20"
    :closeable="true"
    :closeOnClickOverlay="true"
    @close="onClose"
  >
    <view class="review-popup">
      <view class="popup-header">
        <trans class="title" _t="商品评价" />
      </view>

      <view class="popup-content">
        <!-- 评价内容 -->
        <view class="review-section">
          <view class="section-title">
            <trans _t="评价内容" />
          </view>
          <up-textarea
            v-model="reviewContent"
            :placeholder="t('分享你的使用感受，帮助其他买家选择')"
            :maxlength="500"
            :count="true"
            :autoHeight="true"
            :minHeight="120"
          ></up-textarea>
        </view>

        <!-- 图片上传 -->
        <view class="image-section">
          <view class="section-title">
            <trans _t="上传图片" />
          </view>
          <imageUpload v-model="imageList" :maxCount="maxImages" multiple />
        </view>

        <!-- 评分 -->
        <!-- <view class="rating-section">
          <view class="section-title">商品评分</view>
          <view class="rating-wrapper">
            <up-rate
              v-model="rating"
              :count="5"
              :size="20"
              activeColor="#ff6b35"
              inactiveColor="#e4e7ed"
              :readonly="false"
            ></up-rate>
            <text class="rating-text">{{ getRatingText(rating) }}</text>
          </view>
        </view> -->
      </view>

      <view class="popup-footer">
        <view class="btn-group">
          <view class="btn cancel-btn" @click="onClose">
            <trans _t="取消" />
          </view>
          <view class="btn submit-btn" @click="submitReview">
            <trans _t="提交" />
          </view>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { Toast } from "@/utils";
import { t } from "@/locale";
import { SHOP_ADD_COMMENTS } from "@/api";
import imageUpload from "@/components/imageUpload";

const props = defineProps({
  // 评价ID
  id: {
    type: [String, Number],
    default: "",
  },
  maxImages: {
    type: Number,
    default: 6,
  },
});

const emit = defineEmits(["close", "submit"]);

const visible = ref(false);
const reviewContent = ref("");
const imageList = ref([]);
const rating = ref(5);

// 是否可以提交
const canSubmit = computed(() => {
  return reviewContent.value.trim().length > 0 && imageList.value.length;
});

// 打开弹框
const open = (data = {}) => {
  visible.value = true;
  // 重置数据
  reviewContent.value = "";
  imageList.value = [];
};

// 关闭弹框
const onClose = () => {
  visible.value = false;
  emit("close");
};

// 提交评价
const submitReview = async () => {
  let images = "";
  if (imageList.value.length) {
    images = imageList.value.map((item) => item.url).join(",");
  }

  try {
    const submitData = {
      orderid: props.id,
      content: reviewContent.value.trim(),
      images: images,
    };

    const res = await SHOP_ADD_COMMENTS(submitData);

    Toast(res.msg);
    emit("submit", submitData);
    onClose();
  } catch (error) {
    console.error("提交评价失败:", error);
    Toast(error.msg || "提交失败，请重试");
  }
};

// 暴露方法
defineExpose({
  open,
  close: onClose,
});
</script>

<style lang="less" scoped>
.review-popup {
  background: var(--light);
  border-radius: 20rpx 20rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  padding: 32rpx 32rpx 0;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;

  .title {
    font-size: 32rpx;
    font-weight: 600;
    color: var(--text);
    line-height: 80rpx;
  }
}

.popup-content {
  flex: 1;
  padding: 32rpx;
  overflow-y: auto;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  margin-bottom: 32rpx;

  .product-img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 12rpx;
  }

  .product-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;

    .product-title {
      font-size: 28rpx;
      font-weight: 600;
      color: var(--text);
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-spec {
      font-size: 24rpx;
      color: var(--text-02);
    }
  }
}

.review-section,
.image-section,
.rating-section {
  margin-bottom: 32rpx;

  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16rpx;
  }
}

.image-upload {
  .upload-tip {
    font-size: 24rpx;
    color: var(--text-02);
  }
}

.rating-wrapper {
  display: flex;
  align-items: center;
  gap: 16rpx;

  .rating-text {
    font-size: 28rpx;
    color: var(--text);
  }
}

.popup-footer {
  padding: 24rpx 32rpx;
  border-top: 1px solid #f0f0f0;

  .btn-group {
    display: flex;
    gap: 16rpx;

    .btn {
      flex: 1;
      height: 88rpx;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      font-weight: 600;
    }

    .cancel-btn {
      background: #f5f5f5;
      color: var(--text);
    }

    .submit-btn {
      background: var(--black);
      color: var(--light);

      &.disabled {
        background: #ccc;
        color: #999;
      }
    }
  }
}
</style>