aida_front/src/component/DetailCopy/canvas/index.vue

<template>
    <div class="canvasBox">
		<!-- designDetailShow -->
		<!-- :class="[driver__.driver?'hideEvents':'']" -->
		 <div class="canvasContent">
			<div class="argument-box">
				<argument 
					ref="argument" 
					class="argument" 
					v-if="canvasObj.id || frontBackCanvasObj.id" 
					@toolLiquefaction="toolLiquefaction" 
					@setFrontBackColor="setFrontBackColor"
					:isEditFrontBack="isEditFrontBack">
				</argument>
			</div>
			<div class="content-bottom">
				<div class="tool-box">
					<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
				</div>
				<div class="contet">
					<div class="canvas" v-show="!isEditFrontBack" @click.stop>
						<canvasContent ref="canvasContent"></canvasContent>
					</div>
					<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
						<editFrontBack 
							:patchData="frontBack" 
							:imgDomIndex="imgDomIndex" 
							
							ref="editFrontBack">
						</editFrontBack>
					</div>
				</div>
				
				<!-- <div class="Finish">
					<div class="gallery_btn" @click="privewDetail">Finish</div>
				</div> -->
			</div>
		 </div>
		
		<!-- <div class="mark_loading" v-show="isShowMark">
			<a-spin size="large" />
		</div> -->
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,watch,toRefs, reactive} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import editFrontBack from '@/component/Detail/editFrontBack.vue'


import canvasGeneral from "@/tool/canvasGeneralCopy";
import argument from './argument.vue'
import canvasContent from './canvasContent.vue'
import tool from "./tool.vue"

export default defineComponent({
    components:{
		tool,argument,canvasContent,editFrontBack
    },
    setup(props,{emit}) {
        const store = useStore();
        const {t} = useI18n();
      
		const detailDom = reactive({
			editFrontBack:null as any,
			model:null,
		})
		const userDetail = computed(()=>{
			return store.state.UserHabit.userDetail
		})
		const detailData = reactive({
			canvasObj:new canvasGeneral('aa'),
			frontBackCanvasObj:new canvasGeneral('vv'),
			isShowMark:false,
			liquefactionData:null as any,
			liquefaction:null as any,
			canvasType:'export',
			imgDomIndex:-1,
			isEditFrontBack:false,
		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
			frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
		})
		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
			// privewDetail(oldValue)
		},{immediate: true})
		provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
		provide('canvasObj',detailData.canvasObj)
		provide('isShowMark',detailData.isShowMark)
		provide('canvasType',detailData.canvasType)

		const setLiquefaction = async ()=>{//进入液化页面
			detailData.canvasObj.getLiquefactionImgObj().then((data)=>{
				if(data?.img){
					detailData.liquefactionData = data
					detailData.liquefaction.init(data.img)
				}else {
					message.info(t('exportModel.jsContent6'))
					return null;
				}
			})
		}
		const toolLiquefaction = ()=>{//工具点击按钮
			setLiquefaction()
		}
		const editFront = ()=>{//编辑前后片
			detailData.isEditFrontBack = !detailData.isEditFrontBack
			if(detailData.isEditFrontBack){
				nextTick(()=>{
			    	detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
					//关闭开启键盘事件
				    detailData.canvasObj.currentOperation = false
				    detailData.frontBackCanvasObj.currentOperation = true
				})
			}else{
				detailData.canvasObj.currentOperation = true
				detailData.frontBackCanvasObj.currentOperation = false
			}
		}
		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
			let data = await detailData.canvasObj.detailSubmit()
			if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = data
		}
		const setFrontBackColor = (data:any)=>{
			detailDom.editFrontBack.setBackground(data)
		}
		onBeforeUnmount(()=>{
			privewDetail()
		})
        return{
			...toRefs(detailDom),
			...toRefs(detailData),
			toolLiquefaction,
			editFront,
			privewDetail,
			setFrontBackColor,
        }
    },
	provide() {
		return {
		}
	},
	mounted(){
	},
		
})
</script>
<style lang="less" scoped>
    .canvasBox{
		flex: 1;
		overflow: hidden;
		// top: -100%;
		display: flex;
		align-items: center;
		.tool-box{
			width: 4rem;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.Finish{
			margin-top: auto;
			> .gallery_btn{
				cursor: pointer;
			}
		}
		.argument-box{
			height: 4rem;
			width: 100%;
			margin-bottom: 3rem;
			margin-left: 4rem;
		}
		.argument-box,
		.content-bottom,
		.detail-box{
			
			:deep(i){
				font-size: 2.5rem;
				cursor: pointer;
				width: 3rem;
				height: 3rem;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				transition: all .3s;
				margin-bottom: .5rem;
				&.active{
					border: 1px solid;
					border-radius: .4rem;
				}
				&.icon-xiala{
					transform: rotate(-90deg);
				}
				&.icon-xialaActive{
					transform: rotate(90deg);
				}
				&.eventNone{
					cursor: no-drop;	
					border: none;
					opacity: .5;
				}
			}
		}
		.canvasContent{
			height: 100%;
			// height: 70rem;
			width: 100%;
			border: 2px solid #000;
			border-radius: 3rem;
			padding: 4rem;
			display: flex;
			flex-direction: column;
		}
		.content-bottom{
			flex: 1;
			overflow: hidden;
			display: flex;
			> .contet{
				flex: 1;
				overflow: hidden;
				position: relative;
				.canvas,.editFrontBack{
					width: 100%;
					height: 100%;
				}
				.editFrontBack{
					z-index: 2;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
		
	}
</style>