ylst-pc/src/views/Creative/3d/crossyo/shelves-vue-demo/view/AddWareWithSeparateTextureDemo.vue

<template>
    <div class="ui">
        <div class="all">
            <div class="top">

                <Toolbar @back="back" @save="save" @downloadScreenshot="downloadScreenshot" :title="title" />

            </div>

            <div class="yo-container">
                <div class="left">
                    <TabListCommodity @clickThumb="clickThumbCommodity" @add="addCommodity" @remove="removeCommodity" />
                </div>
                <div class="yo-main">
                    <SceneSeparateTexturePreviewer ref="ss" :selCommodity="selCommodity" :selTexture="selTexture" @onLoadingCompletion="onLoadingCompletion" />
                </div>
                <div class="right">
                    <TabListCommodityRelTexture :relCommodity="selCommodity" :selTexture="selTexture" @clickThumb="clickThumbTexture"
                        @add="addTexture" @remove="removeTexture" />
                </div>
            </div>
        </div>
    </div>

    <!-- <CommodityUploader :isOpen="isOpenCommodityUploader" @close="closeCommodityUploader"
        @success="commodityAddSuccess" />
    <TextureUploader :isOpen="isOpenTextureUploader" @close="closeTextureUploader" @success="textureAddSuccess"
        :relCommodityId="selCommodity ? selCommodity.id : null" /> -->

</template>

<script setup>

// https://2x.antdv.com/docs/vue/getting-started

// https://share.lanhuapp.com/#/invite?sid=lXPuKlJa

import Toolbar from '../../shelves-vue/components/editor/Toolbar.vue'
import TabListCommodity from '../../shelves-vue/components/editor/TabListCommodity.vue'
import TabListCommodityRelTexture from '../../shelves-vue/components/editor/TabListCommodityRelTexture.vue'
// import CommodityUploader from '../../shelves-vue/view/CommodityUploader.vue'
// import TextureUploader from '../../shelves-vue/view/TextureUploader.vue'
import SceneSeparateTexturePreviewer from '../../shelves-vue/components/SceneSeparateTexturePreviewer.vue'

</script>

<script>

import {downloadRes, updateMaterialCenter} from "../../../../api.js"
import common from "@/api/common.js";
import { message } from 'ant-design-vue'

export default {
    props: {
        currentModelData: {
            type: Object,
            default: () => (null)
        },
        title: {
            type: String,
            default: ""
        },
    },
    data() {
        return {
            isOpenCommodityUploader: false,
            isOpenTextureUploader: false,

            selCommodity: null,
            selTexture: null,
        }
    },
    methods: {
        onLoadingCompletion(){

            if(!this.currentModelData) return;

            var current = JSON.parse(JSON.stringify(this.currentModelData))

            this.selCommodity = current.commodity
            setTimeout(() => {
                this.selTexture = current.texture
            }, 100);
        },
        back() {
            this.$router.go(-1)
        },
        async save(callback) {

            try{

                // create new ware

                if(!this.selCommodity) {
                    message.warning("请选择商品模型");
                    callback();
                    return;
                }

                // if(!this.selTexture) {
                //     message.warning("请选择商品贴图");
                //     return;
                // }


                var clone = {
                    type: 1,
                    commodity: this.selCommodity,
                    texture: this.selTexture,
                    urlThumb: this.selCommodity.urlThumb,
                }

                console.log(clone)

                const blob = await this.$refs.ss.previewer_.snapshot();

                const res = await common.cosUpload3DCompress(blob);
                await updateMaterialCenter({
                    id: this.$route.query.id,
                    data: JSON.stringify(clone),
                    simple_data: {},
                    version: new Date().getTime(),
                    cover: res.url
                });

                this.$router.go(-1);

            }
            catch(e){
                console.log(e)
                callback()
            }

            // this.$store.dispatch('wares/add', {
            //     type: 1,
            //     commodity: this.selCommodity,
            //     texture: this.selTexture,
            //     urlThumb: this.selCommodity.urlThumb,
            // }).then(data2 => {

            // })


        },

        //
        addCommodity() {
            this.isOpenCommodityUploader = true
        },
        clickThumbCommodity(itm) {
            // console.log(itm)
            this.selCommodity = itm

        },
        removeCommodity() {
            this.selCommodity = null
        },
        //

        //
        addTexture() {
            this.isOpenTextureUploader = true
        },
        clickThumbTexture(itm) {
            this.selTexture = itm
        },
        removeTexture() {
            this.selTexture = null
        },
        //

        closeCommodityUploader() {
            this.isOpenCommodityUploader = false



        },
        commodityAddSuccess(data) {
            this.clickThumbCommodity(data)
        },

        closeTextureUploader() {
            this.isOpenTextureUploader = false


        },
        textureAddSuccess(data) {
            this.clickThumbTexture(data)
        },

      async downloadScreenshot () {

          try {

            const blob = await this.$refs.ss.previewer_.snapshot();
            // var blob = await viewerRef.value.viewer.snapshot();
            // console.log("props.title",this.title);
            const data = await common.cosUpload(blob, this.title, "", () => {
            });

            console.log("data--",data);
            var url = data.url;
            var name = data.name;

            downloadRes(url, name, 'png');
            // 创建一个a标签并设置下载属性
            // const link = document.createElement('a');
            // link.href = url;
            // link.target = "_blank";
            // link.download = 'screenshot.png';
            //
            // // 模拟点击链接来触发下载
            // link.click();
          }catch(e){
            console.log(e)
          }

      }

    },
}

</script>

<style scoped>
div.ui {
    position: fixed;
    width: 100vw;
    /* height: 100vh; */
}

.all {
    height: 100vh;
    /* background-color: beige; */
}

.yo-tabs {
    position: absolute;
    top: 90px;
    left: 24px;
    right: 24px;
    bottom: 20px;
    display: flex;
    flex-direction: row;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
    border-radius: 6px;
    background: transparent;
}

.yo-container {
    position: absolute;
    /* top: 135px; */
    top: 90px;
    left: 24px;
    right: 24px;
    bottom: 20px;
    display: flex;
    flex-direction: row;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
    /* margin: 21px 24px; */
    border-radius: 0 6px 6px 6px;
    background: #FFFFFF;
    box-shadow: 0 10px 8px 0 rgba(0, 0, 0, 0.1);
}

.yo-main {
    display: block;
    flex: 1;
    flex-basis: auto;
    overflow: auto;
    box-sizing: border-box;
    padding: 0;
}

.top {
    /* background-color: burlywood; */
    height: auto;
    padding: 0;
}

.left {
    width: 280px;
    background-color: #ffffff;
}

.main {
    padding: 0px;
}

.right {
    width: 280px;
    background-color: #ffffff;
}
</style>