fix: 联调白模

2022-12-24 15:21:40 +08:00
parent f835ab8e4b
commit 7a5288e4a6
12 changed files with 208 additions and 57 deletions
--- 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',
--- 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', {
+            var clone = {
                type: 1,
                commodity: this.selCommodity,
                texture: this.selTexture,
                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 => {
+
+                // })

            }

--- 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) {
--- 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,17 +36,28 @@ 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 = []
            }
--- 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>

--- a/src/views/Creative/CreationModel.vue
+++ 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>
--- a/src/views/Creative/CreationScene.vue
+++ b/src/views/Creative/CreationScene.vue
--- 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) => {
+  if(row.type == CREATIVE_TYPE.THREE_D) {
    router.push({
-    path: '/edit-creative',
+      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) => {
--- 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;
    }
  },
 ];
--- 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++;
 }

--- 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": ""
+        data: {
+          "id": `model-${key}`,
+          "name": `${data.title}`,
+          "url":url,
+          "urlThumb": "",
+          "uvGroup": "uv0001"
        },
-          "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"
+        }
      };
    }
  },
--- 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;