fix: 3D环物联调

src/router/index.js

@@ -48,6 +48,11 @@ const constantRoutes = [
     name: 'editCreative',
     component: () => import(/* webpackChunkName: 'creative' */ '@views/Creative/Creation.vue')
   },
+  {
+    path: '/ring360-preview',
+    name: 'editCreative',
+    component: () => import(/* webpackChunkName: 'creative' */ '@views/Creative/Ring360Preview.vue')
+  },
   {
     path: '/luck',
     name: 'luck',

src/views/Creative/MyCreation.vue

@@ -42,6 +42,9 @@
                     </a>
                     <template #overlay>
                       <a-menu>
+                        <a-menu-item>
+                          <a href="javascript:;" @click="previewer3DRef.show(row)">预览</a>
+                        </a-menu-item>
                         <a-menu-item>
                           <a href="javascript:;" @click="edit(row)">编辑</a>
                         </a-menu-item>
@@ -70,7 +73,7 @@
             在线VR场景搭建，沉浸式业务模拟
           </div>
           <div class="btn">
-            <a-button type="primary">开始创作</a-button>
+            <a-button @click="create3DRef.show(CREATIVE_TYPE.THREE_D)" type="primary">开始创作</a-button>
           </div>
         </div>
         <div v-if="[0, 2].includes(current[0])" class="empty-new">
@@ -82,7 +85,7 @@
             3D环物和产品相结合，可以让消费者看的更加真实
           </div>
           <div class="btn">
-            <a-button type="primary">开始创作</a-button>
+            <a-button @click="create3DRef.show(CREATIVE_TYPE.RING_360)" type="primary">开始创作</a-button>
           </div>
         </div>
         <div v-if="[0, 3].includes(current[0])" class="empty-new">
@@ -94,12 +97,13 @@
             3D交互建模，高可真体感展示
           </div>
           <div class="btn">
-            <a-button type="primary">开始创作</a-button>
+            <a-button @click="create3DRef.show(CREATIVE_TYPE.MODEL_3D)" type="primary">开始创作</a-button>
           </div>
         </div>
       </div>
       <RenameCreation ref="renameCreationRef" @complete="query" />
       <Create3D ref="create3DRef" @complete="query"/>
+      <Previewer3D ref="previewer3DRef" />
     </div>
   </a-spin>
 </template>
@@ -115,11 +119,14 @@ import { currentMock } from "./creation.mock";
 import { CREATIVE_TYPE, CREATIVE_TYPE_S } from "./components/Create3D.constant";
 import { getMaterials, delMaterialCenter } from "./api";
 import { useRouter } from "vue-router";
+import Previewer3D from "./components/Previewer3D/Index.vue"
 
 const router = useRouter();
 
 const renameCreationRef = ref();
 
+const previewer3DRef = ref();
+
 const create3DRef = ref();
 
 const current = ref([0]);

src/views/Creative/Ring360Preview.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <img v-for="(img, index) in imgs" :key="index" :src="img.url" alt="">
+  </div>
+</template>
+
+<script setup>
+const { onMounted, ref }=require("@vue/runtime-core");
+
+import { useRoute } from "vue-router";
+import { getMaterialsById } from "./api";
+
+const route = useRoute();
+
+const imgs = ref([])
+
+
+onMounted(async () => {
+  const res = await getMaterialsById(route.query.id);
+  try{
+    imgs.value = res.data.materials[0].space_json.imgs;
+  }
+  catch(e){
+    console.error(`解析数据出错:` + e)
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/Creative/components/Create3D.constant.js

@@ -952,7 +952,9 @@ const factorys = [
   {
     type: CREATIVE_TYPE.RING_360,
     build: (data) => {
-
+      return {
+        imgs: data.data.fileList.map(x => ({name: x.name, url: x.response.url}))
+      };
     }
   },
   {

src/views/Creative/components/Create3D.vue

@@ -31,6 +31,28 @@
         <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>
 
@@ -40,6 +62,7 @@ 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"]);
@@ -57,10 +80,16 @@ const formData = ref({
   data: {
     panorama: [],
     shelves: [],
-    wares: []
+    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);
@@ -74,7 +103,8 @@ const show = (type) => {
   target.data = {
     panorama: [],
     shelves: [],
-    wares: []
+    wares: [],
+    fileList: [],
   };
   target.version = new Date().getTime();
   formData.value = target;

src/views/Creative/components/Previewer3D/Index.vue

@@ -0,0 +1,23 @@
+<template>
+  <Ring360Previewer ref="ring360PreviewerRef" />
+</template>
+
+<script setup>
+import { ref } from "@vue/reactivity";
+import { CREATIVE_TYPE_S, CREATIVE_TYPE, buildData } from "../Create3D.constant";
+import Ring360Previewer from "./Ring360Previewer.vue";
+
+const ring360PreviewerRef = ref();
+
+defineExpose({
+  show(data){
+    if(data.type == CREATIVE_TYPE.RING_360) {
+      ring360PreviewerRef.value.show(data);
+    }
+  }
+})
+</script>
+
+<style>
+
+</style>

src/views/Creative/components/Previewer3D/Ring360Previewer.vue

@@ -0,0 +1,25 @@
+<template>
+  <a-modal v-model:visible="visible" title="3D环物" width="800px" @ok="ok">
+    <iframe v-if="visible" :src="url" frameborder="0" style="width: 100%; height: 500px;"></iframe>
+  </a-modal>
+</template>
+
+<script setup>
+const { ref }=require("@vue/reactivity");
+
+
+const visible = ref(false);
+
+const url = ref("")
+
+defineExpose({
+  show(data){
+    url.value = `/#/ring360-preview?id=${data.id}`;
+    visible.value = true;
+  }
+})
+</script>
+
+<style>
+
+</style>