ylst-pc/src/views/Creative/components/Create3D.vue

<template>
  <a-modal v-model:visible="visible" :title="title" width="800px" @ok="ok">
    <a-steps v-if="formData.type==CREATIVE_TYPE.THREE_D" :current="step" size="small" style="margin: 0 auto; width: 80%;">
      <a-step title="素材信息" />
      <a-step title="选择环境" />
      <a-step title="选择货架" />
      <a-step title="选择商品" />
    </a-steps>
    <a-steps v-else :current="step" size="small" style="margin: 0 auto; width: 60%;">
      <a-step title="素材信息" />
      <a-step title="选择素材" />
    </a-steps>
    <a-form v-if="step==0" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" style="margin: 40px 0;">
      <a-form-item label="素材名称">
        <a-input v-model:value="formData.title" placeholder="请输入素材名称" />
      </a-form-item>
    </a-form>
    <div v-if="formData.type==CREATIVE_TYPE.THREE_D" style="margin: 20px 0;">
      <div v-if="step==1">
        <ChooseMarerial :type="THREE_D_TYPE.PANORAMA" @change="val => formData.data.panorama = val"/>
      </div>
      <div v-if="step==2">
        <ChooseMarerial :type="THREE_D_TYPE.SHELF" @change="val => formData.data.shelves = val"/>
      </div>
      <div v-if="step==3">
        <ChooseMarerial :type="THREE_D_TYPE.WARE" @change="val => formData.data.wares = val"/>
      </div>
    </div>
    <div v-if="formData.type==CREATIVE_TYPE.MODEL_3D" style="margin: 20px 0;">
      <div v-if="step==1">
        <ChooseMarerial :type="THREE_D_TYPE.CHARTLET" @change="val => formData.data.panorama = val"/>
      </div>
    </div>
    <div v-if="formData.type==CREATIVE_TYPE.RING_360" style="margin: 20px 0;">
      
      <a-form v-if="step==1" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" style="margin: 20px 0;">
        <a-form-item label="上传图片" style="padding-right: 10%;">
          <a-upload :customRequest="onCustomRequest" multiple v-model:file-list="formData.data.fileList" :showUploadList="false">
            <a-button>
              <upload-outlined></upload-outlined>
              上传
            </a-button>
          </a-upload>
          <p class="ant-upload-hint">
            图片格式、大小、数量要求：jpg、png格式，分辨率需保持一致，单个环物素材包最大支持上传500M，不多于40张。建议上传30~40张图片，单个环物素材包50M效果更佳。图片命名：图片名称后缀按照字母/数字升序命名（如，01、02、03…，以此类推，单反拍摄素材名可自动识别）。
          </p>
          <div class="image-list">
            <div class="image-list-item" v-for="(file, index) in formData.data.fileList" :key="index">
              <img :src="file.response?.url" alt="">
              <MinusCircleFilled class="del" @click="formData.data.fileList=formData.data.fileList.filter(x=>x!=file)"/>
            </div>
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup>
import { UploadOutlined, InboxOutlined, MinusCircleFilled } from '@ant-design/icons-vue';
import { CREATIVE_TYPE_S, CREATIVE_TYPE, buildData } from "./Create3D.constant";
import { THREE_D_TYPE } from "./CreateMaterial.constant";
import ChooseMarerial from "./ChooseMarerial.vue"
const { ref, reactive }=require("@vue/reactivity");
import common from "@/api/common.js";
import { createMaterialCenter } from "../api";

const emit = defineEmits(["complete"]);

const title = ref("");

const visible = ref(false);

const step = ref(0);

const formData = ref({
  type: 1,
  title: '',
  cover: '',
  data: {
    panorama: [],
    shelves: [],
    wares: [],
    fileList: [],
  }
});

const onCustomRequest = async (upload) => {
  const data = await common.cosUpload3D(upload.file);
  upload.onSuccess(data);
}

const show = (type) => {
  
  const obj = CREATIVE_TYPE_S.find(x => x.type == type);
  if(!obj) return;

  title.value = obj.name;

  var target = JSON.parse(JSON.stringify(obj));
  target.title = "";
  target.cover = "";
  target.data = {
    panorama: [],
    shelves: [],
    wares: [],
    fileList: [],
  };
  target.version = new Date().getTime();
  formData.value = target;
  step.value = 0;
  visible.value = true;
}

const ok = async () => {
  step.value++;
  if(formData.value.type == CREATIVE_TYPE.THREE_D) {
    if(step.value >= 4) {
      formData.value.data = buildData(formData.value);
      await createMaterialCenter(formData.value);
      visible.value = false;
      emit("complete");
    }
  }
  else {
    if(step.value >= 2) {
      formData.value.data = buildData(formData.value)
      await createMaterialCenter(formData.value);
      visible.value = false;
      emit("complete");
    }
  }
}

defineExpose({
  show
})

</script>

<style scoped lang="scss">
.back{
  cursor: pointer;
}
.ant-upload-drag-icon{
  :deep(svg){
    font-size: 50px!important;
  }
}
.image-list{
  .image-list-item{
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    font-size: 40px;
    img{
      max-width: 100%;
      max-height: 100%;
    }
    .del{
      color: red;
      position: absolute;
      right: -10px;
      top: -10px;
      :deep(*){
        font-size: 20px;
      }
    }
  }
}
</style>