From 7a5288e4a63f43d0b2912c999ecdd1f41dada4c8 Mon Sep 17 00:00:00 2001
From: wam <525987762@qq.com>
Date: Sat, 24 Dec 2022 15:21:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=81=94=E8=B0=83=E7=99=BD=E6=A8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           | 11 ++--
 .../view/AddWareWithSeparateTextureDemo.vue   | 54 +++++++++++++++----
 .../components/editor/TabListCommodity.vue    | 19 +++++--
 .../editor/TabListCommodityRelTexture.vue     | 21 ++++++--
 .../shelves-vue/components/editor/Toolbar.vue |  5 +-
 src/views/Creative/CreationModel.vue          | 39 ++++++++++++++
 .../{Creation.vue => CreationScene.vue}       |  0
 src/views/Creative/MyCreation.vue             | 24 ++++++---
 .../Creative/components/Create3D.constant.js  | 18 ++++++-
 src/views/Creative/components/Create3D.vue    | 22 +++++++-
 .../components/CreateMaterial.constant.js     | 35 +++++++-----
 .../Creative/components/CreateMaterial.vue    | 17 +++---
 12 files changed, 208 insertions(+), 57 deletions(-)
 create mode 100644 src/views/Creative/CreationModel.vue
 rename src/views/Creative/{Creation.vue => CreationScene.vue} (100%)

diff --git a/src/router/index.js b/src/router/index.js
index 7fba63d9..aa623ed1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -44,9 +44,14 @@ const constantRoutes = [
   },
   
   {
-    path: '/edit-creative',
-    name: 'editCreative',
-    component: () => import(/* webpackChunkName: 'creative' */ '@views/Creative/Creation.vue')
+    path: '/edit-creative-scene',
+    name: 'editCreativeScene',
+    component: () => import(/* webpackChunkName: 'creative' */ '@views/Creative/CreationScene.vue')
+  },
+  {
+    path: '/edit-creative-model',
+    name: 'editCreativeModel',
+    component: () => import(/* webpackChunkName: 'creative' */ '@views/Creative/CreationModel.vue')
   },
   {
     path: '/ring360-preview',
diff --git a/src/views/Creative/3d/crossyo/shelves-vue-demo/view/AddWareWithSeparateTextureDemo.vue b/src/views/Creative/3d/crossyo/shelves-vue-demo/view/AddWareWithSeparateTextureDemo.vue
index b073a68a..2e859c2b 100644
--- a/src/views/Creative/3d/crossyo/shelves-vue-demo/view/AddWareWithSeparateTextureDemo.vue
+++ b/src/views/Creative/3d/crossyo/shelves-vue-demo/view/AddWareWithSeparateTextureDemo.vue
@@ -12,7 +12,7 @@
                     <TabListCommodity @clickThumb="clickThumbCommodity" @add="addCommodity" @remove="removeCommodity" />
                 </div>
                 <div class="yo-main">
-                    <SceneSeparateTexturePreviewer :selCommodity="selCommodity" :selTexture="selTexture" />
+                    <SceneSeparateTexturePreviewer ref="ss" :selCommodity="selCommodity" :selTexture="selTexture" />
                 </div>
                 <div class="right">
                     <TabListCommodityRelTexture :relCommodity="selCommodity" @clickThumb="clickThumbTexture"
@@ -46,7 +46,16 @@ import SceneSeparateTexturePreviewer from '../../shelves-vue/components/SceneSep
 
 <script>
 
+import { updateMaterialCenter } from "../../../../api.js"
+import common from "@/api/common.js";
+
 export default {
+    props: {
+        currentModelData: {
+            type: Object,
+            default: () => (null)
+        }
+    },
     data() {
         return {
             isOpenCommodityUploader: false,
@@ -60,19 +69,46 @@ export default {
         back() {
             this.$router.push("/")
         },
-        save() {
+        async save() {
             // create new ware
 
             if (this.selCommodity && this.selTexture) {
 
-                this.$store.dispatch('wares/add', {
-                    type: 1,
-                    commodity: this.selCommodity,
-                    texture: this.selTexture,
-                    urlThumb: this.selCommodity.urlThumb,
-                }).then(data2 => {
+            var clone = {
+                type: 1,
+                commodity: this.selCommodity,
+                texture: this.selTexture,
+                urlThumb: this.selCommodity.urlThumb,
+            }
 
-                })
+            console.log(clone)
+            try{
+                
+                const blob = await this.$refs.ss.previewer_.snapshot();
+                
+                const res = await common.cosUpload3DCompress(blob);
+                await updateMaterialCenter({
+                    id: this.$route.query.id,
+                    data: clone,
+                    version: new Date().getTime(),
+                    cover: res.url
+                });
+
+                this.$router.go(-1);
+                
+            }
+            catch(e){
+                console.log(e)
+            }
+
+                // this.$store.dispatch('wares/add', {
+                //     type: 1,
+                //     commodity: this.selCommodity,
+                //     texture: this.selTexture,
+                //     urlThumb: this.selCommodity.urlThumb,
+                // }).then(data2 => {
+
+                // })
 
             }
 
diff --git a/src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabListCommodity.vue b/src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabListCommodity.vue
index a7917ab4..d7512993 100644
--- a/src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabListCommodity.vue
+++ b/src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabListCommodity.vue
@@ -26,6 +26,8 @@ import SearchSvg from '../../asset/icon2/search.svg'
 
 <script>
 
+import { getMaterialLibrary } from "../../../../../api.js"
+
 export default {
     data() {
         return {
@@ -33,10 +35,21 @@ export default {
             list: []
         }
     },
-    mounted() {
-        this.$store.dispatch('commodities/list').then(list => {
-            this.list = list
+    async mounted() {
+        
+        var res = await getMaterialLibrary({
+            type: 7,
+            title: ""
         })
+        
+        this.list = res.data.map((x, index) => ({
+            ...x.material_json,
+            urlThumb: x.material_json.urlThumb || x.cover,
+        }));
+
+        // this.$store.dispatch('commodities/list').then(list => {
+        //     this.list = list
+        // })
     },
     methods: {
         clickThumb(itm) {
diff --git a/src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabListCommodityRelTexture.vue b/src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabListCommodityRelTexture.vue
index 9ab807ba..f6ed1f51 100644
--- a/src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabListCommodityRelTexture.vue
+++ b/src/views/Creative/3d/crossyo/shelves-vue/components/editor/TabListCommodityRelTexture.vue
@@ -23,6 +23,8 @@ import ImageSvg from '../../asset/icon2/image.svg'
 
 <script>
 
+import { getMaterialLibrary } from "../../../../../api.js"
+
 export default {
     props: ['relCommodity'],
     data() {
@@ -34,16 +36,27 @@ export default {
     // mounted() {
     // },
     watch: {
-        relCommodity(newV, oldV) {
+        async relCommodity(newV, oldV) {
             if (newV) {
                 // api.listTexturesByRelCommodityId(newV.id).then(list => {
                 //     console.log('xx list', list)
                 //     this.list = list
                 // })
-                this.$store.dispatch('textures/listByRelCommodityId', { relCommodityId: newV.id }).then(list => {
-                    this.list = list
-                    // console.log('COMMODITY fetch list', newV.id, list)
+                // this.$store.dispatch('textures/listByRelCommodityId', { relCommodityId: newV.id }).then(list => {
+                //     this.list = list
+                //     // console.log('COMMODITY fetch list', newV.id, list)
+                // })
+
+                
+                var res = await getMaterialLibrary({
+                    type: 8,
+                    title: ""
                 })
+                
+                this.list = res.data.map((x, index) => ({
+                    ...x.material_json,
+                    urlThumb: x.material_json.urlThumb || x.cover,
+                }));
 
             } else {
                 this.list = []
diff --git a/src/views/Creative/3d/crossyo/shelves-vue/components/editor/Toolbar.vue b/src/views/Creative/3d/crossyo/shelves-vue/components/editor/Toolbar.vue
index 9e1913e4..413bbba0 100644
--- a/src/views/Creative/3d/crossyo/shelves-vue/components/editor/Toolbar.vue
+++ b/src/views/Creative/3d/crossyo/shelves-vue/components/editor/Toolbar.vue
@@ -13,10 +13,7 @@
         </a-button>
 
         <a-button class="yo-btn-right yo-btn-blue" type="primary" @click="$emit('save')">
-            <template #icon>
-                <img :src="SendSvg" />
-            </template>
-            发送
+            保存
         </a-button>
     </div>
 
diff --git a/src/views/Creative/CreationModel.vue b/src/views/Creative/CreationModel.vue
new file mode 100644
index 00000000..c9c4ab26
--- /dev/null
+++ b/src/views/Creative/CreationModel.vue
@@ -0,0 +1,39 @@
+<template>
+  <div style="height: 100%;">
+    <AddWareWithSeparateTextureDemo v-if="modelData" :currentModelData="modelData" />
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from "@vue/reactivity";
+import { onMounted } from "@vue/runtime-core";
+import AddWareWithSeparateTextureDemo from "./3d/crossyo/shelves-vue-demo/view/AddWareWithSeparateTextureDemo.vue";
+import { getMaterialsById } from "./api";
+import { useRoute } from "vue-router";
+
+const modelData = ref(null);
+
+const route = useRoute();
+
+onMounted(async () => {
+
+  const res = await getMaterialsById(route.query.id);
+  try{
+    modelData.value = res.data.materials[0].space_json;
+  }
+  catch(e){
+    console.error(`解析数据出错:` + e)
+  }
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+@import url("./utils.default.scss");
+
+:deep(img){
+  width: 100%;
+}
+
+</style>
diff --git a/src/views/Creative/Creation.vue b/src/views/Creative/CreationScene.vue
similarity index 100%
rename from src/views/Creative/Creation.vue
rename to src/views/Creative/CreationScene.vue
diff --git a/src/views/Creative/MyCreation.vue b/src/views/Creative/MyCreation.vue
index 725da00b..112e9d7f 100644
--- a/src/views/Creative/MyCreation.vue
+++ b/src/views/Creative/MyCreation.vue
@@ -47,7 +47,7 @@
                         <a-menu-item>
                           <a href="javascript:;" @click="previewerCreationRef.show(row)">预览</a>
                         </a-menu-item>
-                        <a-menu-item v-if="row.type==CREATIVE_TYPE.THREE_D">
+                        <a-menu-item>
                           <a href="javascript:;" @click="edit(row)">编辑</a>
                         </a-menu-item>
                         <a-menu-item>
@@ -156,12 +156,22 @@ const query = async () => {
 }
 
 const edit = (row) => {
-  router.push({
-    path: '/edit-creative',
-    query: {
-      id: row.id
-    }
-  })
+  if(row.type == CREATIVE_TYPE.THREE_D) {
+    router.push({
+      path: '/edit-creative-scene',
+      query: {
+        id: row.id
+      }
+    })
+  }
+  if(row.type == CREATIVE_TYPE.MODEL_3D) {
+    router.push({
+      path: '/edit-creative-model',
+      query: {
+        id: row.id
+      }
+    })
+  }
 }
 
 const del = (row) => {
diff --git a/src/views/Creative/components/Create3D.constant.js b/src/views/Creative/components/Create3D.constant.js
index 378e5c60..99d0a049 100644
--- a/src/views/Creative/components/Create3D.constant.js
+++ b/src/views/Creative/components/Create3D.constant.js
@@ -83,7 +83,7 @@ const factorys = [
                 "urlThumb": "https://test-cxp-public-web-1302259445.cos.ap-beijing.myqcloud.com/uat-yls/3D/shelves/shelves-v3-store/v3.4/ware/milkpowder-can1.png"
               },
               "surveyLogo": "",
-              "surveyPrice": 190
+              "surveyPrice": 19
             }))
           }
         ]
@@ -110,8 +110,22 @@ const factorys = [
   },
   {
     type: CREATIVE_TYPE.MODEL_3D,
-    build: (data) => {
+    build: (origin) => {
+      
+      const data = origin.data;
+      var key = new Date().getTime();
 
+      origin.data = {
+        "id": `ware-${key}`,
+        "type": 1,
+        "commodity": {
+          "url": data.wares[0].material_json.url
+        },
+        "texture": null,
+        "urlThumb": ""
+      };
+
+      return origin;
     }
   },
 ];
diff --git a/src/views/Creative/components/Create3D.vue b/src/views/Creative/components/Create3D.vue
index b4d5c08e..778d3359 100644
--- a/src/views/Creative/components/Create3D.vue
+++ b/src/views/Creative/components/Create3D.vue
@@ -28,7 +28,7 @@
     </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"/>
+        <ChooseMarerial :type="THREE_D_TYPE.EMPTY_3D" @change="val => formData.data.wares = val"/>
       </div>
     </div>
     <div v-if="formData.type==CREATIVE_TYPE.RING_360" style="margin: 20px 0;">
@@ -171,6 +171,26 @@ const ok = async () => {
       emit("complete");
     }
   }
+  
+  if(formData.value.type == CREATIVE_TYPE.MODEL_3D) {
+    
+    if(step.value == 1) {
+      if(formData.value.data.wares.length <= 0) {
+        message.warning("请请选择一个模型")
+        return;
+      }
+      if(formData.value.data.wares.length > 1) {
+        message.warning("请请选择一个模型")
+        return;
+      }
+    }
+    if(step.value >= 1) {
+      const data = JSON.parse(JSON.stringify(formData.value));
+      await createMaterialCenter(buildData(data));
+      visible.value = false;
+      emit("complete");
+    }
+  }
   step.value++;
 }
 
diff --git a/src/views/Creative/components/CreateMaterial.constant.js b/src/views/Creative/components/CreateMaterial.constant.js
index 472d2836..d22fc274 100644
--- a/src/views/Creative/components/CreateMaterial.constant.js
+++ b/src/views/Creative/components/CreateMaterial.constant.js
@@ -193,29 +193,38 @@ const factorys = [
   {
     type: THREE_D_TYPE.EMPTY_3D,
     build(data){
+      var url = data.fileList[0].response.url;
+      var key = new Date().getTime();
       return {
         ...data,
-        "planetid": "ware1-1",
-        "name": "伊利",
-        "surveyWare": {
-          "id": "ware1-1",
-          "type": 1,
-          "commodity": {
-            "url": ""
-          },
-          "texture": null,
-          "urlThumb": ""
+        data: {
+          "id": `model-${key}`,
+          "name": `${data.title}`,
+          "url":url,
+          "urlThumb": "",
+          "uvGroup": "uv0001"
         },
-        "surveyLogo": "",
-        "surveyPrice": 190
       };
     }
   },
   {
     type: THREE_D_TYPE.CHARTLET,
     build(data){
+      
+      var url = data.fileList[0].response.url;
+      var key = new Date().getTime();
+
       return {
-        ...data
+        ...data, 
+        data: {
+          
+          "id": `texture-${key}`,
+          "name": `${data.title}`,
+          "relUvGroup": "uv0001",
+          "url": url,
+          "urlSmall": url,
+          "relCommodityId": "vB8DxY"
+        }
       };
     }
   },
diff --git a/src/views/Creative/components/CreateMaterial.vue b/src/views/Creative/components/CreateMaterial.vue
index eb12e06a..fbd9dc2a 100644
--- a/src/views/Creative/components/CreateMaterial.vue
+++ b/src/views/Creative/components/CreateMaterial.vue
@@ -10,7 +10,7 @@
       </a-form-item>
     </a-form>
     <a-form v-if="step==1" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" style="margin: 20px 0;">
-      <a-form-item v-if="[THREE_D_TYPE.PANORAMA].includes(formData.type)" label="上传图片" style="padding-right: 10%;">
+      <a-form-item v-if="[THREE_D_TYPE.PANORAMA, THREE_D_TYPE.CHARTLET].includes(formData.type)" label="上传图片" style="padding-right: 10%;">
         <a-upload :customRequest="onCustomRequest" v-model:file-list="formData.fileList">
           <a-button>
             <upload-outlined></upload-outlined>
@@ -21,7 +21,7 @@
           全景图文件格式、大小：JPEG格式，全景图比例2：1，建议单张分辨率大小在2K及以上，单张全景图最大支持上传120M，建议上传小于10M的全景图效果更佳。
         </p>
       </a-form-item>
-      <a-form-item v-if="[THREE_D_TYPE.ENV_3D, THREE_D_TYPE.SHELF, THREE_D_TYPE.EXHIBITION_BOOTH, THREE_D_TYPE.WARE].includes(formData.type)" label="" style="margin-left: 20%;">
+      <a-form-item v-if="[THREE_D_TYPE.ENV_3D, THREE_D_TYPE.SHELF, THREE_D_TYPE.EXHIBITION_BOOTH, THREE_D_TYPE.WARE, THREE_D_TYPE.EMPTY_3D].includes(formData.type)" label="" style="margin-left: 20%;">
         <a-upload-dragger
           v-model:fileList="formData.fileList"
           name="file"
@@ -84,11 +84,6 @@ const formData = ref({
 
 const show = (type) => {
 
-  if(type == THREE_D_TYPE.CHARTLET) {
-    message.info("素材库不支持上传贴图");
-    return;
-  }
-
   const obj = THREE_D_TYPE_S.find(x => x.type == type);
   if(!obj) return;
 
@@ -124,7 +119,7 @@ const onCustomRequest = async (upload) => {
   }
 
   // 缩略图预览
-  if([THREE_D_TYPE.ENV_3D, THREE_D_TYPE.SHELF, THREE_D_TYPE.EXHIBITION_BOOTH, THREE_D_TYPE.WARE].includes(formData.value.type)){
+  if([THREE_D_TYPE.ENV_3D, THREE_D_TYPE.SHELF, THREE_D_TYPE.EXHIBITION_BOOTH, THREE_D_TYPE.WARE, THREE_D_TYPE.EMPTY_3D].includes(formData.value.type)){
     
     let reader = new FileReader();
     reader.addEventListener(
@@ -141,8 +136,8 @@ const onCustomRequest = async (upload) => {
     reader.readAsArrayBuffer(upload.file);
   }
 
-  // 全景图时直接上传缩略图
-  if(THREE_D_TYPE.PANORAMA == formData.value.type) {
+  // 全景图、贴图的缩略图直接上传
+  if([THREE_D_TYPE.PANORAMA, THREE_D_TYPE.CHARTLET].includes(formData.value.type)) {
     const data = await common.cosUpload3DCompress(upload.file);
     formData.value.cover = data.url;
   }
@@ -169,7 +164,7 @@ const ok = async () => {
 
   if(step.value >= 1) {
 
-    if([THREE_D_TYPE.ENV_3D, THREE_D_TYPE.SHELF, THREE_D_TYPE.EXHIBITION_BOOTH, THREE_D_TYPE.WARE].includes(formData.value.type)){
+    if([THREE_D_TYPE.ENV_3D, THREE_D_TYPE.SHELF, THREE_D_TYPE.EXHIBITION_BOOTH, THREE_D_TYPE.WARE, THREE_D_TYPE.EMPTY_3D].includes(formData.value.type)){
       var blob = await viewerRef.value.snapshot();
       const data = await common.cosUpload3DCompress(blob);
       formData.value.cover = data.url;