aida_front/src/component/DetailCopy/designDetail.vue

<template>
    <div ref="designDetailModal" class="designDetailModal">
		<!-- designDetailShow -->
		<!-- :class="[driver__.driver?'hideEvents':'']" -->
        <a-modal class="Guide_1_18 generalModel fullScreen" 
            v-model:visible="designDetailShow" 
            :footer="null" 
			:get-container="() => $refs.designDetailModal"
            width="100%"
			height="100%"
            :maskClosable="false"
			:mask="false"
            :centered="true"
			:keyboard="false"
			:closable="false"
        >
			<div class="content">
				<div class="nav">
					<div class="back_home">
						<div class="gallery_btn" @click="closeModal()">
							<i class="fi fi-rs-house-chimney"></i>
						</div>
					</div>
					<div class="nav_list">
						<div class="nav_item active">
							<img src="@/assets/images/icon/details_sketch.png" alt="">
							<div class="detailText">Apparel</div>
						</div>
						<div class="nav_item">
							<img src="@/assets/images/icon/details_print.png" alt="">
							<div class="detailText">Print</div>
						</div>
						<div class="nav_item">
							<img src="@/assets/images/icon/details_color.png" alt="">
							<div class="detailText">Color</div>
						</div>
						<div class="nav_item">
							<img src="@/assets/images/icon/details_elements.png" alt="">
							<div class="detailText">Elements</div>
						</div>
					</div>
				</div>
				<div class="item">
					<sketchLeft></sketchLeft>
				</div>
				<div class="item">
					<model></model>
				</div>
				<div></div>
				<div class="gallery_btn submit">Submit</div>
			</div>
			
        </a-modal>
         <div class="mark_loading" v-show="loadingShow">
            <a-spin size="large" />
        </div>
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
import sketchLeft from './sketchLeft.vue'
import model from './model/index.vue'

// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-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 { openGuide,driverObj__ } from "@/tool/guide";
import { useI18n } from 'vue-i18n'
import addDetails from '@/component/Detail/addDetails.vue'
export default defineComponent({
    components:{
		sketchLeft,model
    },
    setup() {
        const store = useStore();
      
		
		const userDetail = computed(()=>{
			return store.state.UserHabit.userDetail
		})
		const detailData = reactive({
			designDetail:store.state.DesignDetailCopy.designDetail,
			designDetailShow:false,
			loadingShow:false,
		})
		const closeModal = ()=>{
			detailData.designDetailShow = false
		}
		
		const showDesignDetailModal = (data:any,str:any)=>{
			// this.moible = isMoible()
			// this.designItemId = data.design.designItemId
			// this.designOutfitId = data.design.designOutfitId
            let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
            // let url = Https.httpUrls.getDesignDetail + `?designItemId=61204&designPythonOutfitId=60908`
            // this.parentData = data
            detailData.loadingShow = true
            Https.axiosGet(url).then(
                async (rv: any) => {
					rv.clothes.forEach((item:any)=>{
						let a
						item.designType='Library'
						if(item.layersObject[0].imageCategory.indexOf("back") == -1){
							a = item.layersObject[0]
							item.layersObject[0] = item.layersObject[1]
							item.layersObject[1] = a
						}
						if(item.printObject.prints == null)item.printObject.prints = []
						item.printObject.prints.forEach((element:any) => {
							if(!element.designType){
								element.designType = 'Library'
							}
						});
					})
					detailData.designDetailShow = true
                    store.commit('designDeatailCopy/setDesignDetail',rv)
					// this.deleteShow = false

					setRevocation(rv,'')
					// if(rv.singleOverall == 'overall'){
					// 	this.body = false
					// }else{
					// 	this.body = true
					// }
					// await this.setImgSize()
                    // this.generateHighDesignImg = rv.highDesignUrl
                    // this.designDetailShow = true
                    detailData.loadingShow = false
					// await this.setImgSize() 
                }
				
            ).catch(rv=>{
                detailData.loadingShow = false
            })
		}
		const initialize = ()=>{//design后初始化

			
			sessionStorage.removeItem('oppositeRevocation')
			sessionStorage.removeItem('revocation')
		}
		const setRevocation = (designItemDetail:any,data:any)=>{//设置撤销

		}
		onBeforeUnmount(()=>{
			detailData.designDetail = null
		})
        return{
			...toRefs(detailData),
            closeModal,
			showDesignDetailModal,
        }
    },
	provide() {
		return {
		}
	},
	mounted(){
		let beforeunload =  () => {
			window.removeEventListener('beforeunload',beforeunload)
		}
		window.addEventListener('beforeunload',beforeunload)
		// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
        //     this.loadingShow = true
        //     Https.axiosGet(url).then(
		// 		async (rv: any) => {
		// 			rv.clothes.forEach((item:any)=>{
		// 				let a
		// 				if(item.layersObject[0].imageCategory.indexOf("back") == -1){
		// 					a = item.layersObject[0]
		// 					item.layersObject[0] = item.layersObject[1]
		// 					item.layersObject[1] = a
		// 				}
		// 				if(item.printObject.prints == null){
		// 					item.printObject.prints = [{}]
		// 				}
		// 			})
        //             this.store.commit('setDesignItemDetail',rv)
		// 			if(rv.others[0].printObject.path == null){
		// 				this.body = false
		// 			}else{
		// 				this.body = true
		// 			}
		// 			this.setImgSize()
        //             this.generateHighDesignImg = rv.highDesignUrl
        //             this.designShowPrview = 1
        //             this.designDetailShow = true
        //             this.loadingShow = false
        //         }
        //     ).catch(rv=>{
        //         this.loadingShow = false
        //     })
	},
		
})
</script>
<style lang="less" scoped>
	:deep(.detailText){
		font-size: 1.8rem;
		font-weight: 600;
	}
    .designDetailModal{
		position: relative;
		top: -100%;
		height: 100%;
		:deep(.ant-modal-wrap){
			position: absolute;
			top: 0;
			left: 0;
		}
		.content{
			display: flex;
			align-items: flex-start;
			height: 100%;
			width: 100%;
			> .item{
				height: 100%;
			}
			> .nav{
				margin-right: 5rem;
				> .back_home{
					width: 9rem;
					text-align: center;
					> .gallery_btn{
						width: 6rem;
						height: 6rem;
						border-radius: 50%;
					}
				}
				> .nav_list{
					margin-top: 2.7rem;
					height: 38rem;
					width: 9rem;
					background: #f4f4f4;
					border-radius: 1.4rem;
					padding: 1.4rem 0;
					> .nav_item{
						text-align: center;
						width: 100%;
						height: calc((38rem - 1.4rem * 2) / 4);
						cursor: pointer;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						> img{
							width: 4rem;
							height: 3.6rem;
							object-fit: contain;
						}
						&.active{
							background: #bdbdbd;
						}
					}
				}
			}
			> .submit{
				margin-left: auto;

			}
		}
		
	}
</style>