aida_front/src/component/Detail/DesignDetail.vue

<template>
    <div>
		<!-- designDetailShow -->
        <a-modal class="design_detail_modal_component" 
            v-model:visible="designDetailShow" 
            :footer="null" 
            width="80%"
            :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-for="item,index in designItemDetail.clothes" :key="item">
						<div class="clothes_item_img_block"  @click="clothesDetail(item,index)">
							<img class="clothes_item_img" :src="item.path">
						</div>
					</div>
                    <img v-show="imgDesignImg" class="detial_img" :src="designItemDetail.designItemUrl">
                    <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"></i>
							</div>
							<img :src="currentItem.path" 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"></i>
							</div>
							<div class="centent_div" v-if="currentItem?.printObject?.path && currentItem?.printObject?.path != 'none'" @click="openCurrent(2)">
								<img src="" 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"></i>
							</div>
							<div class="img_block_item centent" @click="openCurrent(3)">
								<div class="color_item">
									<div class="color_content" :style="{background:`rgba(${currentItem.color?.r},${currentItem.color?.g},${currentItem.color?.b},${currentItem.color?.a?currentItem.color.a:1})`}"></div>
									<div class="color_content_body">
										<div class="color_des">{{currentItem.color?.tcx}}</div>
										<div class="color_des">{{currentItem.color?.name}}</div>
									</div>
								</div>
							</div>
                        </div>
						<div class="clothes_detail_item subitOkPreviewBtn">
                           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 parentData:any = ref({
            design:{},
            index:0,
            collectionList:[],
            type:'',

        })//父组件传过来的数据
		let others:any = ref({
			left:200+'px',
			top:100+'px',
		})
		let currentItem:any = ref({})//点击上衣或者下衣
		let current:any = ref({})//点击上衣或者下衣
		provide('current',current)
        return{
            designItemDetail,
            store,
            parentData,
			others,
			currentItem,
			current,
        }
    },
    data(){
        return{
            loadingShow:false,//加载中
            designDetailShow:true,
            designShowPrview:1, //展示图片预览步骤
            generateHighDesignImg:'',//点击generate按钮生成的高级设计图
			imgDesignImg:true,
			designOrder:false,
        }
    },
	mounted(){
		let url = Https.httpUrls.getDesignDetail + `?designItemId=33130&designPythonOutfitId=32929`
            this.loadingShow = true
            Https.axiosGet(url).then(
                (rv: any) => {
                    this.store.commit('setDesignItemDetail',rv)
					console.log(rv);
                    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
				this.currentItem = {}
				let DesignDetailAlter:any = this.$refs.DesignDetailAlter
				DesignDetailAlter.terminate()

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

        //切换上一张或下一张图的详情
        changeDesignItem(type:string){
            let {design,index,collectionList} = this.parentData
            let newDesign = {}
            let newIndex = 0
            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))
			console.log(designItemDetail);

			this.designShowPrview = num
			let setDesignItem:any = this.$refs.setDesignItem
			console.log(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){
			if(this.currentItem?.id == clothes.id){
				return
			}
			this.designOrder = true
			this.current = JSON.parse(JSON.stringify(clothes))
			this.currentItem = clothes
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.changePlace()
		
            // let elementReplace:any = this.$refs.ElementReplace
            // let data ={
            //     clothes:clothes,
            //     index:index,
            // }
            // elementReplace.showelementReplaceModal(data)
        },
        //重新设计
        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;
			>div{
				height: 50%;
				.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: space-between;
					}
					.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;
						}
                    }
					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>