aida_front/src/component/Detail/DesignDetail.vue

<template>
    <div>
		<!-- designDetailShow -->
        <a-modal class="design_detail_modal_component" 
            v-model:visible="designDetailShow" 
            :footer="null" 
            width="65%"
            :maskClosable="false"
            :centered="true"
			:closable="false"
        >
			<div class="design_title_text">
				<div>Details</div>
				<div class="design_title_text_intro">edit the details of your design</div>
			</div>
			<div class="design_closeIcon" @click.stop="closeModal()">
				<i class="fi fi-rr-cross-small"></i>
			</div>
            <div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
            <div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
			<!-- <div class="design_centent">


			</div> -->
            
            <div class="design_detail_modal_body" v-show="designShowPrview == 1">
				
                <div class="detail_modal_body_img">
                    <!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->

					<div v-show="imgDesignImg" class="detail_modal_body">
						<div class="detail_modal_item_back" v-for="item,index in frontBack.back" :style="item.style">
							<img :src="item.imageUrl" alt="">
						</div>
						<!-- <img src="../../../public/123123132.png" alt=""> -->
						<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
						<div class="detail_modal_item_front" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
							<img :src="item.imageUrl" alt="">
						</div>
						<!-- <div class="detail_modal_item" v-for="item,index in designItemDetail.clothes" :style="'top:'+ item.layersObject[0]?.position[0]+'px;left:'+ item.layersObject[0]?.position[1]+'px;'" :key="item">
							<div class="clothes_item_img_block"  @click="clothesDetail(item,index)">
								<img v-for="v,i in item.layersObject" class="clothes_item_img" :src="v.imageUrl">
							</div>
						</div> -->
					</div>
                    <img v-show="!imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
					<div>
						<!-- 全屏 --> 
						<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
						<!-- 编辑 -->
						<!-- <i class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i> -->
						<!-- 层 -->
						<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
					</div>
                </div>
                <div class="detail_modal_body_category">
                    <div v-show="designOrder" class="detail_modal_right_top scroll_style">
                        <div class="clothes_detail_item clothes_detail_item_apparel">
                            <div class="clothes_item_header">
								<i class="fi fi-rs-comments"></i>
								<div>Current Apparel</div>
								<i class="fi fi-rr-edit" @click.stop="openCurrent(1)"></i>
							</div>
							<img :src="designItemDetail?.clothes?.[currentIndex]?.layersObject[1]?.imageUrl" alt="" class="centent" @click="openCurrent(1)">
                        </div>
						<div class="clothes_detail_item clothes_detail_item_print">
                            <div class="clothes_item_header">
								<i class="fi fi-rs-comments"></i>
								<div>Current Print</div>
								<i class="fi fi-rr-edit" @click.stop="openCurrent(2)"></i>
							</div>
							<div class="centent_div" v-if="designItemDetail?.clothes?.[currentIndex]?.printObject?.path && designItemDetail?.clothes?.[currentIndex]?.printObject?.path != 'none'" @click="openCurrent(2)">
								<img :src="designItemDetail?.clothes?.[currentIndex]?.printObject?.path" alt="">
							</div>
							<i v-else class="fi fi-rr-picture centent" @click="openCurrent(2)"></i>
                        </div>
						<div class="clothes_detail_item clothes_detail_item_color">
                            <div class="clothes_item_header">
								<i class="fi fi-rs-comments"></i>
								<div>Current Print</div>
								<i class="fi fi-rr-edit" @click.stop="openCurrent(3)"></i>
							</div>
							<div class="img_block_item centent" @click.stop="openCurrent(3)">
								<div class="color_item">
									<div class="color_content" :style="{background:`rgba(${designItemDetail?.clothes?.[currentIndex].color?.r},${designItemDetail?.clothes?.[currentIndex].color?.g},${designItemDetail?.clothes?.[currentIndex].color?.b},${designItemDetail?.clothes?.[currentIndex].color?.a?designItemDetail?.clothes?.[currentIndex].color.a:1})`}"></div>
									<div class="color_content_body">
										<div class="color_des">{{designItemDetail?.clothes?.[currentIndex]?.color?.tcx}}</div>
										<div class="color_des">{{designItemDetail?.clothes?.[currentIndex]?.color?.name}}</div>
									</div>
								</div>
							</div>
                        </div>
						<div class="clothes_detail_item subitOkPreviewBtn" @click="submit">
                           Submit
                        </div>
                    </div>
                </div>
				<DesignDetailAlter ref="DesignDetailAlter"></DesignDetailAlter>

            </div>
            <div class="design_detail_perview" v-show="designShowPrview == 2">
                <div class="design_detail_perview_content" >
                    <img class="perview_img"   v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
                    <!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
                </div>
            </div>
			<div class="design_detail_perview" v-show="designShowPrview == 3">
                <div class="design_detail_perview_content" >
                    <!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
					<setDesignItem ref="setDesignItem"></setDesignItem>
                </div>

            </div>
        </a-modal>
        <ElementReplace ref="ElementReplace"></ElementReplace>
        <AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
         <div class="mark_loading" v-show="loadingShow">
            <a-spin size="large" />
        </div>
    </div>
    
</template>
<script lang="ts">
import { defineComponent,computed,ref,provide } from 'vue'
import ElementReplace from '@/component/Detail/ElementReplace.vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
import setDesignItem from '@/component/Detail/setDesignItem.vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import {getUploadUrl,isMoible} from '@/tool/util'
import { useStore } from "vuex";
export default defineComponent({
    components:{
        ElementReplace,
        AccessoryReplace,
        Draggable,
		DesignDetailAlter,
		setDesignItem,
    },
    setup() {
        const store = useStore();
        // let designItemDetail :any = computed(()=>{
		// 	return store.state.DesignDetailModule.designItemDetail
		// })
		let designItemDetail :any = computed(()=>{
			return store.state.DesignDetailModule.designItemDetail
		})
        let parentData:any = ref({
            design:{},
            index:0,
            collectionList:[],
            type:'',

        })//父组件传过来的数据
		let others:any = ref({
			left:200+'px',
			top:100+'px',
		})
		let currentIndex:any = ref(0)
		let current:any = ref({})//点击上衣或者下衣
		provide('current',current)
		let frontBack:any = ref({})
        return{
            designItemDetail,
            store,
            parentData,
			others,
			currentIndex,
			current,
			frontBack,
        }
    },
    data(){
        return{
            loadingShow:false,//加载中
            designDetailShow:false,
            designShowPrview:1, //展示图片预览步骤
            generateHighDesignImg:'',//点击generate按钮生成的高级设计图
			imgDesignImg:true,
			designOrder:false,
        }
    },
	watch:{
		designItemDetail:{
			handler: function(newval) {
				let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
				this.current = JSON.parse(JSON.stringify(designItemDetail.clothes[this.currentIndex]))
				this.setImgSize()
			}
		},
		currentIndex:{
			handler: function(newval) {
			}
		},
	},
	mounted(){
		let url = Https.httpUrls.getDesignDetail + `?designItemId=33683&designPythonOutfitId=33445`
            this.loadingShow = true
            Https.axiosGet(url).then(
				async (rv: any) => {
                    this.store.commit('setDesignItemDetail',rv)
					this.setImgSize()
                    this.generateHighDesignImg = rv.highDesignUrl
                    this.designShowPrview = 1
                    this.designDetailShow = true
                    this.loadingShow = false
                }
            ).catch(rv=>{
                this.loadingShow = false
            })
	},
    methods:{
		openCurrent(num: Number) {
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.init(num)
			if(num ==2 ){
			}
        },
	
        closeModal(){
            if(this.designShowPrview == 1){
                this.designDetailShow = false
				this.designOrder = false
				let DesignDetailAlter:any = this.$refs.DesignDetailAlter
				DesignDetailAlter.terminate()

            }else{
                this.designShowPrview = 1
            }
        },
		
        showDesignDetailModal(data:any){

            let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
            this.parentData = data
            this.loadingShow = true
            Https.axiosGet(url).then(
                (rv: any) => {
					this.store.commit('setDesignItemDetail',rv)
					this.setImgSize()
                    this.generateHighDesignImg = rv.highDesignUrl
                    this.designShowPrview = 1
                    this.designDetailShow = true
                    this.loadingShow = false

                }
            ).catch(rv=>{
                this.loadingShow = false
            })
        },
		async setImgSize(){
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			let front:any = []
			let back:any = []
			let body:any
			
			designItemDetail.others.forEach((item:any) => {
				if(item.type == 'Body'){
					body = item
				}
			});
		
			let ratio:any = await this.setPostition(body.layersObject[0].imageUrl)
			designItemDetail.clothes.forEach((v:any,index:number)=>{
				let zIndex = 3
				for (let i = v.layersObject.length-1; i >= 0; i--) {
					v.layersObject[i].style = {
						top:v.layersObject[i].position?.[0]*ratio+'px',
						left:v.layersObject[i].position?.[1]*ratio+'px',
						width:v.layersObject[i].imageSize?.[0]*ratio+'px',
						height:v.layersObject[i].imageSize?.[1]*ratio+'px',
						zIndex:zIndex-=1
					}
					
					if(v.layersObject[i].imageCategory.indexOf("back") == -1){
						front[index] = v.layersObject[i]
					}else{
						back[index] = v.layersObject[i]
					}
				}
				
				// v.layersObject.forEach((item:any)=>{
				// 	item.style = {
				// 		top:item.position?.[0]*ratio+'px',
				// 		left:item.position?.[1]*ratio+'px',
				// 		width:item.imageSize?.[0]*ratio+'px',
				// 		height:item.imageSize?.[1]*ratio+'px',
				// 		zIndex:zIndex+=1
				// 	}
				// 	console.log(zIndex);
				// 	if(item.imageCategory == 'blouse_back'){
				// 		back[index] = item
				// 	}else{
				// 		front[index] = item
				// 	}
				// })
			})
			
			
			this.frontBack = {
				front:front,
				back:back,
				body:body,
			}
		},
		submit(){
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			let clothes:any = []
			designItemDetail.clothes.forEach((item:any) => {
				let clothesItem = {
					// color: `${item.color.r} ${item.color.g} ${item.color.b}`,
					id:item.id,
					path:item.path,
					printObject:{
						ifSingle:item.printObject.ifSingle,
						path:item.printObject.path?item.printObject.path :'',
						prints:item.printObject.prints?item.printObject.prints:[]
					},
					type:item.type,
				}
				clothes.push(clothesItem)
			});
			let data = {
                designItemId:designItemDetail.designItemId,
				// designItemId:designItemDetail.designItemId,
				designSingleItemDTOList:clothes,
				isPreview:false,
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
            this.loadingShow = true
            Https.axiosPost(Https.httpUrls.designSingle, data).then(
                (rv: any) => {
                    this.loadingShow = false
                    this.closeModal()
					let designCollectionList = this.store.state.HomeStoreModule.designCollectionList
					designCollectionList.forEach((item:any) => {
						
						if(item.designItemId == rv.designItemId){
							item.designOutfitUrl = rv.designItemUrl
						}
					});
					this.store.commit('setDesignCollectionList',designCollectionList)
                }
            ).catch(res=>{
                this.loadingShow = false
            });
			
		},
		//按比设置单件衣服宽高位置
		async setPostition(url:any){
			let img:any = await loadImage(url)
			let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_body')[0]
			const num = modal_body?.offsetWidth / img.width;
			function loadImage(url:any) {
				return new Promise((resolve, reject) => {
					
					const img = new Image();
					img.onload = () => {
						resolve(img)
					};
					img.onerror = reject;
					img.src = url;
				});
			}
			return num
		},
        //切换上一张或下一张图的详情
        changeDesignItem(type:string){
            let {design,index,collectionList} = this.parentData
            let newDesign = {}
            let newIndex = 0
			this.designOrder = false
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.terminate()
            if(type === 'last'){
                if(index>0){
                    newIndex = this.parentData.index - 1
                }else{
                    newIndex = this.parentData.collectionList.length - 1
                }
            }else{
                if(index <  this.parentData.collectionList.length - 1){
                    newIndex = this.parentData.index + 1
                }else{
                    newIndex = 0
                }
            }
            newDesign = collectionList[newIndex]
            let data = {
                design:newDesign,
                index:newIndex,
                collectionList:collectionList
            }
            this.showDesignDetailModal(data)
        },

        //显示图片详情
        showDesignImgDetail(num:any){
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			this.designShowPrview = num
			let setDesignItem:any = this.$refs.setDesignItem

			if(this.designShowPrview == 3){
				setDesignItem.init()
			}
			// this.others = designItemDetail.others

            // if(this.generateHighDesignImg){
            //     this.designShowPrview = 3
            // }else{
            //     this.designShowPrview = 2
            // }
        },
		//图片按下样子
		mousedownDesignImg(){
			this.imgDesignImg = false
		},
		//图片抬起样子
		mouseupDesignImg(){
			this.imgDesignImg = true
		},

        //元素替换
        clothesDetail(clothes:any, index:number){
			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
			this.currentIndex = index
			this.designOrder = true
			this.current = designItemDetail.clothes[this.currentIndex]
			let data = {
				designItemId:designItemDetail.designItemId,
				// designItemId:designItemDetail.designItemId,
				designSingleItemDTOList:[
					{
						color:`${this.current.color.r} ${this.current.color.g} ${this.current.color.b}`,
						id:this.current.id,
						path:this.current.path?this.current.path:'',
						printObject:{
							ifSingle:this.current.printObject.ifSingle,
							path:this.current.printObject.path?this.current.printObject.path :'',
							prints:[],
						},
						type:this.current.type,
					}
				],
				isPreview:true,
				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
			}
			this.store.commit('setDesignPreviewData',data)
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.changePlace()
        },
        //重新设计
        redesignItem(){
            let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
            delete designItemDetail.designItemUrl
            let priority = designItemDetail.clothes.map((v:any)=>{
                return v.type
            })
            let data = {
                ...designItemDetail,
                priority:priority,
                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
            this.loadingShow = true
            Https.axiosPost(Https.httpUrls.designSingle, data).then(
                (rv: any) => {
                    this.parentData.design.designItemUrl = rv.designItemUrl
                    this.$emit('finishRedesign',this.parentData)
                    this.closeModal()
                    this.loadingShow = false
                    this.closeModal()
                }
            ).catch(res=>{
                this.loadingShow = false
            });
        }



        
    }
})
</script>
<style lang="less">
.design_detail_modal_component{
    color: #000;
	max-width: 1440px ;
	
		
	.ant-modal-content{
		border-radius: 10px;
		// overflow: hidden; 
		.ant-modal-header{
			background-color: #fff;
			border-bottom: none;
		}
		.ant-modal-body{
			padding: 4rem 5rem 0rem!important;
			// height: calc(65vh - 6.4rem);
			height: 65rem;
			display: flex;
			overflow-y: hidden;
			flex-direction: column;
		}
	}
    .ant-modal-close{
        width: 3.6rem;
        height: 3.6rem;
        position: absolute;
        top: -1.8rem;
        right: -1.8rem;
    }

    .ant-modal-header{
        display: none;
    }


    

    .turn_button{
        width: 3.6rem;
        height: 3.6rem;
        background: #000000;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 1.8rem);
        cursor: pointer;
        line-height: 3.6rem;
        text-align: center;

        &.turn_left_button{
            left: -8rem;
        }

        &.turn_right_button{
            right: -8rem;
        }

        .icon_turn{
            font-size: 2.4rem;
            color: #ffffff;
        }
    }

    

    .design_detail_modal_body{
		flex: 1;
        display: flex;
        justify-content: space-between;
        width: 100%;
		overflow: hidden;
        // padding: 1.5rem 1rem 2.5rem;
        box-sizing: border-box;
        .detail_modal_body_img{
            // width: 43.3rem;
			width: 23%;
            height: 100%;
            background: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
			position: relative;

			flex-direction: column;
				// height: 50%;
			.detail_modal_body{
				position: relative;
				max-width: 245px;
				
				.detail_modal_item_front:last-child{ 
					z-index: 1 !important;
				}
				>img{
					width: 100%;
				}
				.detail_modal_model{
					position: relative;
					z-index: 1;
				}
				.detail_modal_item_front,.detail_modal_item_back{
					cursor: pointer;
					position: absolute;
					img{
						width: 100%;
					}
				}
				.detail_modal_item_back{

				}
				.detail_modal_item_front{

				}
			}
			.clothes_item_img_block{
				display: flex;
			}
            .detial_img{
                max-width: 100%;
                max-height: 100%;
            }
			div{
				i{
					position: absolute;
					cursor: pointer;
					zoom: 1.2;
					&.fi-bs-expand-arrows-alt{
						top: 0;
						left: 0;
					}
					&.fi-rr-edit{
						left: 0;
						top: 20px;
					}
					&.fi-rr-copy{
						top: 0;
						right: 0;
					}
				}
			}
        }

        .detail_modal_body_category{
			width: 17%;
            height: 100%;
			position: relative;
            .detail_modal_right_top{
                width: 100%;
                height: calc(100% - 3.9rem); 
                background: #fff;
                overflow-y: auto;
				
                .clothes_detail_item{
					.centent_div{
						display: flex;
						justify-content: center;
					}
					.centent{
						cursor: pointer;

						left: 50%;
						transform: translateX(-50%);
						position: relative;
						display: inline-block;
					}
                    .clothes_item_header{
                        // height: 6.4rem;
						margin-bottom: 1rem;
						display: flex;
                        font-size: 1.8rem;
                        color: #000000;
						justify-content: space-between;
                        .icon-dangqianweizhi{
                            font-size: 1.8rem;
                            color: #000000;
                            margin-right: 1rem;
                        }
						i{
							font-size: 1.8rem;
							display: block;
							&.fi-rr-edit{
								cursor: pointer;
							}
						}
                    }
					img{
						width: 10rem;
						height: 10rem;
					}
					&.clothes_detail_item_apparel{
						img{
							max-height: 100%;
						}
					}
					.color_item{
						display: inline-block;
						vertical-align: top;
						border: 1px solid #ebe9e9;
						.color_content{
							width: 8rem;
							height: 4rem;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.color_content_body{
							.color_des{
								font-size: 1.2rem;
								font-weight: 600;
							}
						}
						&:nth-child(4n){
							margin-right: 0;
						}
					}
					&.clothes_detail_item_print{
						.fi-rr-picture{
							display: flex;
							align-items: center;
							justify-content: center;
							zoom: 3;
							margin: 1rem 0;
						}
					}
					&.subitOkPreviewBtn{
						position: relative;
						margin-top: 2rem;
					}
                }
            }
        }
		.detail_modal_body_select{
			width:  20%;
			.switch_type_list {
            display: flex;
            align-items: center;
            position: relative;
			justify-content: space-around;

            .switch_type_item {
                display: flex;
                align-items: center;
                // padding: 0 2rem;
                height: 4rem;
                background: #fff;
                border-radius: 0.8rem;
                line-height: 4rem;
                font-size: 1.6rem;
                // margin-right: 2.2rem;
                color: #000;
                cursor: pointer;
                position: relative;
                text-align: center;
                transform-origin: left;
                transform: scale(1);
                transition: 0.3s all;
                &.switch_type_item::before {
                    position: absolute;
                    content: "";
                    display: block;
                    background: #000;
                    height: 3px;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 6px;
                    width: 0px;
                    transition: 0.3s all;
                }
                &.select_swtich {
                    color: #000;
                    font-weight: 600;
                    transform: scale(1.15);
                }
                &.select_swtich::before {
                    width: 100%;
                }

                .switch_icon {
                    font-size: 1.8rem;
                    margin-right: 0.8rem;
                }
            }
        }
		}
		
    }

    .design_detail_perview{
        width: 100%;
        height: 100%;

        &.design_detail_perview_second{
            width: 100%;
            height: 100%;
            padding: 0.7rem 9.1rem 0.6rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .design_detail_perview_content{
            width: 46.2rem;
            height: 100%;
            background: #fff;
            position: relative;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;

            .perview_img{
                max-width: 100%;
                max-height: 100%;
            }
            .generate_button{
                position: absolute;
                top: 0;
                right: -20.2rem;
                padding: 0 1.5rem;
                text-align: center;
                height: 3.6rem;
                line-height: 3.6rem;
                background: #343579;
                font-size: 14px;
                font-family: Roboto;
                color: #FFFFFF;
                cursor: pointer;
            }

             &:hover .img_item_hover{
                display: block;
            }

            .img_item_hover{
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top:0;
                background: rgba(0,0,0,0.4);
                display: none;

                .img_operate_block{
                    width: 3.6rem;
                    height: 3.6rem;
                    background: rgba(0,0,0,0.6);
                    border-radius: 50%;
                    position: absolute;
                    right: 2.2rem;
                    text-align: center;
                    line-height: 3.6rem;
                    cursor: pointer;

                    &.delete_img_block{
                        top: 2rem;
                    }

                    .operate_icon{
                        font-size: 1.8rem;
                        color: #fff;
                    }
                }
            }
        }

        
    }

   
    
}
</style>