aida_front/src/component/Detail/DesignDetail.vue

<template>
    <div>
		<!-- designDetailShow -->
        <a-modal class="design_detail_modal_component" 
            v-model:visible="designDetailShow" 
            :footer="null" 
            title="Mailbox binding"
            width="80%"
            :maskClosable="false"
            :centered="true"
			:closable="false"

        >
            <!-- <template #closeIcon>
                <div class="close_icon" @click.stop="closeModal()"><span class="icon iconfont icon-guanbi"></span></div>
            </template> -->
			<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" @click="showDesignImgDetail()">
                    <!-- <img class="detial_img" :src="designItemDetail.designItemUrl"> -->
                    <img class="detial_img" :src="designItemDetail.designItemUrl">
					<div>
						<!-- 全屏 --> 
						<i class="fi fi-bs-expand-arrows-alt"></i>
						<!-- 编辑 -->
						<i class="fi fi-rr-edit"></i>
						<!-- 层 -->
						<i class="fi fi-rr-copy"></i>
					</div>
                </div>
                <div class="detail_modal_body_category">
                    <div 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="" 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>
							<i 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:`#6c6cac`}"></div>
									<div class="color_content_body">
										<div class="color_des">222</div>
										<div class="color_des">111</div>
									</div>
								</div>
							</div>
                        </div>

						
                    </div>
                    <div class="detail_modal_right_bottom">
                        <div class="detail_page_num">{{parentData.index + 1}}/{{parentData.collectionList.length}}</div>
                        <div class="detail_redesign_button" @click="redesignItem()">Redesign</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 design_detail_perview_second" v-show="designShowPrview == 3">
                <div class="design_detail_perview_content" >
                    <img class="perview_img"  v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
                </div>
                <div class="design_detail_perview_content" >
                    <img class="perview_img" v-lazy="generateHighDesignImg || ''" :key="generateHighDesignImg">
                    <div class="img_item_hover">
                        <div class="img_operate_block delete_img_block" @click.stop="deleteGeneratePic()">
                            <span class="icon iconfont icon-shanchu operate_icon"></span>
                        </div>
                    </div>
                </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 } from 'vue'
import ElementReplace from '@/component/Detail/ElementReplace.vue'
import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
import AccessoryReplace from '@/component/Detail/AccessoryReplaceModal.vue'
import Draggable from 'vuedraggable'
import { Https } from "@/tool/https";
import { useStore } from "vuex";
export default defineComponent({
    components:{
        ElementReplace,
        AccessoryReplace,
        Draggable,
		DesignDetailAlter
    },
    setup() {
        const store = useStore();
        let designItemDetail :any = computed(()=>{return store.state.DesignDetailModule.designItemDetail})
        let parentData:any = ref({
            design:{},
            index:0,
            collectionList:[],
            type:'',

        })//父组件传过来的数据
        return{
            designItemDetail,
            store,
            parentData,
        }
    },
    data(){
        return{
            loadingShow:false,
            designDetailShow:true,
            designShowPrview:1, //展示图片预览步骤
            generateHighDesignImg:'',//点击generate按钮生成的高级设计图
			imgListr:[
			{
                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
                id: 1,
            },
            {
                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
                id: 2,
            },
            {
                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
                id: 3,
            },
            {
                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
                id: 4,
            },
			],
            
        }
    },
    methods:{
		openCurrent(num: Number) {
			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
			DesignDetailAlter.init(num)
			
			if(num ==2 ){
			}
        },
	
        closeModal(){
            if(this.designShowPrview == 1){
                this.designDetailShow = false
            }else if(this.designShowPrview == 2){
                this.designShowPrview = this.designShowPrview - 1
            }else if(this.designShowPrview == 3){
                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(){
            if(this.generateHighDesignImg){
                this.designShowPrview = 3
            }else{
                this.designShowPrview = 2
            }
        },

        //生成高级图片
        generateHighDesign(){
            let design:any = this.parentData.design
            let data = {
                designItemId: design.designItemId,
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
            this.loadingShow = true
             Https.axiosPost(Https.httpUrls.generateHighDesign,data).then(
                (rv: any) => {
                    this.generateHighDesignImg = rv
                    this.loadingShow = false
                    this.designShowPrview = 3
                }
            ).catch(rv=>{
                this.loadingShow = false
            })
        },

        //删除生成的真人图
        deleteGeneratePic(){
            let design:any = this.parentData.design
            let data = {
                designItemId: design.designItemId,
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
            this.loadingShow = true
            Https.axiosPost(Https.httpUrls.deleteHighDesign,data).then(
                (rv: any) => {
                    this.loadingShow = false
                    this.generateHighDesignImg = ''
                    this.designShowPrview = 2
                }
            ).catch(rv=>{
                this.loadingShow = false
            })
        },

        //元素替换
        clothesDetail(clothes:any, index:number){
            let elementReplace:any = this.$refs.ElementReplace
            let data ={
                clothes:clothes,
                index:index,
            }
            elementReplace.showelementReplaceModal(data)
        },

        othersDetail(others:any, index:number){
            let accessoryReplace:any = this.$refs.AccessoryReplace
            let data ={
                others:others,
                index:index,
            }
            accessoryReplace.showAccessoryReplaceModal(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: 1150px ;
	.design_title_text{
		font-size: 1.8rem;
		font-weight: 900;
		color: rgba(0,0,0,.65);
		align-items: center;
		margin-bottom: 2rem;
		.design_title_text_intro{
			font-size: 1.2rem;
			font-weight: 400;
			color: rgba(0,0,0,.45);
		}
	}
		
	.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;
			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;
    }


    .design_closeIcon{
		top: 2rem;
		right: 2rem;
        cursor: pointer;
		width: 4rem;
		height: 4rem;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		.fi-rr-cross-small::before{
			padding: .2rem;
			border-radius: 5px;
			border: solid 2px rgba(0, 0, 0, 0.25);
			transition: 1s all;
			color: rgba(0, 0, 0, 0.55);
		}
		&.collection_closeIcon:hover .fi-rr-cross-small::before{
			border: solid 2px rgba(0, 0, 0, 0.55);
			color: rgba(0, 0, 0, 1);
		}
	}

    .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%;
        // 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;
            .detial_img{
                max-width: 100%;
                max-height: 100%;
            }
			div{
				i{
					position: absolute;
					&.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%;

            .detail_modal_right_top{
                width: 100%;
                height: calc(100% - 3.9rem); 
                background: #fff;
                overflow-y: auto;

                .clothes_detail_item{
					.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;
					}
					.color_item{
						display: inline-block;
						vertical-align: top;
						border: 1px solid #ebe9e9;
						.color_content{
							width: 6rem;
							height: 4rem;
						}
						.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;
						}
					}
                }
            }

            .detail_modal_right_bottom{
                position: relative;

                .detail_page_num{
                    position: absolute;
                    top: 2rem;
                    left: 12.4rem;
                    font-size: 1.8rem;
                    font-family: Roboto;
                    font-weight: 400;
                    color: #000000;
                }

                .detail_redesign_button{
                    position: absolute;
                    top: 1.4rem;
                    right: 0;
                    padding: 0 1.8rem;
                    text-align: center;
                    height: 3.6rem;
                    line-height: 3.6rem;
                    background: #343579;
                    font-size: 14px;
                    font-family: Roboto;
                    color: #FFFFFF;
                    cursor: pointer;
                }
            }
        }
		.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%;
        padding: 0.7rem 0 0.6rem;

        &.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>