fix: 联调白模

src/router/index.js

@@ -44,9 +44,14 @@ const constantRoutes = [
   },
   
   {
-    path: '/edit-creative',
+    path: '/edit-creative-scene',
-    name: 'editCreative',
+    name: 'editCreativeScene',
-    component: () => import(/* webpackChunkName: 'creative' */ '@views/Creative/Creation.vue')
+    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',

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', {
+            var clone = {
-                    type: 1,
+                type: 1,
-                    commodity: this.selCommodity,
+                commodity: this.selCommodity,
-                    texture: this.selTexture,
+                texture: this.selTexture,
-                    urlThumb: this.selCommodity.urlThumb,
+                urlThumb: this.selCommodity.urlThumb,
-                }).then(data2 => {
+            }
 
-                })
+            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 => {
+
+                // })
 
             }
 

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() {
+    async mounted() {
-        this.$store.dispatch('commodities/list').then(list => {
+        
-            this.list = list
+        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) {

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.$store.dispatch('textures/listByRelCommodityId', { relCommodityId: newV.id }).then(list => {
-                    this.list = list
+                //     this.list = list
-                    // console.log('COMMODITY fetch list', newV.id, 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 = []

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>
 

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>

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({
+  if(row.type == CREATIVE_TYPE.THREE_D) {
-    path: '/edit-creative',
+    router.push({
-    query: {
+      path: '/edit-creative-scene',
-      id: row.id
+      query: {
-    }
+        id: row.id
-  })
+      }
+    })
+  }
+  if(row.type == CREATIVE_TYPE.MODEL_3D) {
+    router.push({
+      path: '/edit-creative-model',
+      query: {
+        id: row.id
+      }
+    })
+  }
 }
 
 const del = (row) => {

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;
     }
   },
 ];

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++;
 }
 

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",
+        data: {
-        "name": "伊利",
+          "id": `model-${key}`,
-        "surveyWare": {
+          "name": `${data.title}`,
-          "id": "ware1-1",
+          "url":url,
-          "type": 1,
+          "urlThumb": "",
-          "commodity": {
+          "uvGroup": "uv0001"
-            "url": ""
-          },
-          "texture": null,
-          "urlThumb": ""
         },
-        "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"
+        }
       };
     }
   },

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;