VAVABUY/pages/repo/components/buyBackModel.vue

<template>
  <Popup ref="popRef" title="申请回购" isClose closeOnClickOverlay>
    <template #content>
      <view class="popup-content">
        <!-- 图片上传 -->
        <view class="image-section">
          <view class="section-title">
            <trans _t="上传图片" />
          </view>
          <imageUpload v-model="imageList" :maxCount="maxImages" multiple />
        </view>
        <view class="image-section">
          <view class="section-title _required">
            <trans _t="上传视频" />
          </view>
          <videoUpload v-model="videoUrl" />
        </view>
      </view>
    </template>
    <template #footer>
      <view class="popup-footer">
        <view class="btn-group">
          <view class="btn cancel-btn" @click="close">
            <trans _t="取消" />
          </view>
          <view class="btn submit-btn" @click="submitReview">
            <trans _t="提交" />
          </view>
        </view>
      </view>
    </template>
  </Popup>
</template>

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

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

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

const popRef = ref(null);
const reviewContent = ref("");
const imageList = ref([]);

const videoUrl = ref([]);

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

// 打开弹框
const open = (data = {}) => {
  popRef.value && popRef.value.open();
  // 重置数据
  videoUrl.value = [];
  imageList.value = [];
};

// 关闭弹框
const close = () => {
  popRef.value && popRef.value.close();
  emit("close");
};

// 提交评价
const submitReview = async () => {
  let images = "";
  let videos = "";
  if (imageList.value.length) {
    images = imageList.value.map((item) => item.url).join(",");
  }
  if (videoUrl.value.length) {
    videos = videoUrl.value.map((item) => item.url).join(",");
  } else {
    return Toast("请上传视频");
  }

  try {
    const submitData = {
      pid: props.id,
      video: videos,
      images: images,
    };

    const res = await SHOP_SUBMIT_BUYBACK(submitData);
    Toast(res.msg).then(() => {
      TimeOut(() => {
        close();
        emit("submit", submitData);
      });
    });
  } catch (error) {
    console.error("提交评价失败:", error);
    Toast(error.msg || "提交失败，请重试");
  }
};

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

<style lang="less" scoped>
.popup-content {
  flex: 1;
  overflow-y: auto;
}

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

  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16rpx;
    &._required {
      &::before {
        content: "";
        margin-right: 0rpx;
      }
    }
  }
}

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

.popup-footer {
  padding: 24rpx 32rpx;

  .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>