aida_front/src/component/HomePage/collectionModal.vue

<template>
    <div v-if="showCollectionModal">
         <a-modal class="modal_component collection_modal Guide_1_2" 
            v-model:visible="showCollectionModal" 
            :footer="null" 
            width="65%"
            :maskClosable="false"
            :centered="true"
			:closable="false"
			wrapClassName="#app"
			:keyboard="false"
        >
            <div class="collection_title">
				<div class="collection_title_text">
					<div v-show="collectionStep === 1">{{ $t('collectionModal.Moodboard') }}</div>
					<div v-show="collectionStep === 2">{{ $t('collectionModal.Printboard') }}</div>
					<div v-show="collectionStep === 3">{{ $t('collectionModal.Colorboard') }}</div>
					<div v-show="collectionStep === 4">{{ $t('collectionModal.Sketchboard') }}</div>
					<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
					<div  class="collection_title_text_intro" v-show="collectionStep === 1">{{ $t('collectionModal.MoodCollection') }}</div>
					<div  class="collection_title_text_intro" v-show="collectionStep === 2">{{ $t('collectionModal.PrinCollection') }}</div>
					<div  class="collection_title_text_intro" v-show="collectionStep === 3">{{ $t('collectionModal.ColorCollection') }}</div>
					<div  class="collection_title_text_intro" v-show="collectionStep === 4">{{ $t('collectionModal.SketchCollection') }}</div>
				</div>
				<div class="collection_progress">
					<a-progress :strokeWidth= 13 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
				</div>
         
            </div>
			<div class="collection_closeIcon" :class="[driver__.driver?'hideEvents':'']">
				<!-- <div class="header_right_block" @click.stop="">
					<div class="header_cancel_button" >Cancel</div>
				</div> -->
				<i class="fi fi-rr-cross-small" @click.stop="cancelDsign()"></i>
			</div>
			<div class="collection_page" :class="[driver__.driver?'hideEvents':'']">
				<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
				<!-- <div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div> -->
				<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
				<i v-if="collectionStep < 4" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
				<!-- <i v-else  class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></i> -->
				<i v-else class="fi fi-rr-check Guide_1_14" @click.stop="finishCollection()"></i>
				<!-- <span  class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span> -->

			</div>
            <div class="collection_modal_body">
                <MoodboardUpload ref="MoodboardUpload" v-show="collectionStep === 1"></MoodboardUpload>
                <PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
                <ColorboardUpload ref="ColorboardUpload" v-show="collectionStep === 3"></ColorboardUpload>
                <SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
                <!-- <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload> -->
            </div>
			<div class="mark_loading" v-show="isShowMark">
				<a-spin size="large" />
			</div>
        </a-modal>
    </div>
   
</template>
<script lang="ts">
import { defineComponent ,createVNode, ref, computed,provide } from 'vue'

import Generate from '@/component/HomePage/Generate.vue'
import MoodboardUpload from '@/component/HomePage/MoodboardUpload.vue'
import PrintboardUpload from '@/component/HomePage/PrintboardUpload.vue'
import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
import SketchboardUpload from '@/component/HomePage/SketchboardUpload.vue'
import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
import {useStore} from 'vuex'
import { openGuide,driverObj__ } from "@/tool/guide";
import GO from "@/tool/GO";
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
        Generate,
        MoodboardUpload,
        PrintboardUpload,
        ColorboardUpload,
        SketchboardUpload,
        MarketingSketchUpload
    },
	setup(){
		const store = useStore()
		let {t} = useI18n()
		let driver__:any = computed(()=>{
			return store.state.Guide.guide
		})
		let workspace:any = computed(()=>{
			return store.state.Workspace.workspace
		})
		provide('driver__',driver__)
		let isShowMark = ref(false)
		return {
			driver__,
			workspace,
			t,
			isShowMark,
		}
	},

    data(){
        return{
            showCollectionModal:false,
            collectionStep:1,
            store:useStore()
        }
    },
    methods:{
        nextStep(){
			let colorBoards = this.store.state.UploadFilesModule.colorBoards
			if(this.collectionStep == 1){
				let disposeMoodboard = this.store.state.UploadFilesModule.disposeMoodboard
				let moodboard = this.store.state.UploadFilesModule.moodboard
				if(moodboard.length > 1){
					if (!disposeMoodboard || disposeMoodboard.length == 0) {
						message.info(this.$t('collectionModal.jsContent1'))
						return
					}
				}
				
				
			}
			
			if(this.collectionStep == 3){
				if(colorBoards.length >= 1){
				}else{
					message.info(this.$t('collectionModal.jsContent3'))
					return
				}
			}
			if(this.driver__.driver){
				driverObj__.moveNext()
			}
			this.collectionStep = this.collectionStep + 1
        },

        lastStep(){
            this.collectionStep = this.collectionStep - 1
        },
        changeCollectionModal(type:boolean){
            this.showCollectionModal = type
        },

        recollection(){
            setTimeout(()=>{
                let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload']
                // let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload','MarketingSketchUpload']
                for(let child of childredCom){
                    let childRef:any = this.$refs[child]
                    childRef.recollection()
                }
            },200)
            
        },


        //取消
        cancelDsign(){
            let _this = this
            Modal.confirm({
                title: this.$t('collectionModal.jsContent2'),
                icon: createVNode(ExclamationCircleOutlined),
                okText: 'Yes',
                cancelText: 'No',
				mask:false,
                centered:true,
                onOk() {
					GO.id = 0
                    _this.showCollectionModal = false
                    _this.store.commit('clearAllData')
                    _this.collectionStep = 1
                }
            });
        },
		isPin(list:any){
			this.workspace
			let numTop = 0
			let numBottom = 0
			let top:any
			let bottom:any
			if(this.workspace.sexEnum.name == "Female"){
				top = ['Outwear','Blouse']
				bottom = ['Dress','Trousers','Skirt']
			}else{
				top = ['Outwear','Tops']
				bottom = ['Bottoms']
			}
			console.log(this.workspace);

			
			list.forEach((item:any,index:number) => {
				console.log(item);
				top.forEach((positionItem:any) => {
					if(item.category == positionItem && item.pin){
						numTop++
					}else{
						numBottom++
					}
				});
			});
			if(numTop >= 8 || numBottom >= 8){
				// message.warning(this.t('SketchboardUpload.jsContent1'));
				return
			}			
		},
        //完成
        finishCollection(){
			this.isShowMark = true
			let sketchList = this.store.state.UploadFilesModule.sketchboard
			let arr:any = []
			sketchList.forEach((item:any) => {
				let obj = {
					designType:item.resData.designType,
					isPin:item.pin ? 1 : 0,
					level2Type:item.category,
					sketchBoardId:item.id?item.id:item.resData.id
				}
				arr.push(obj)
			});
			let data = {sketchBoards:arr}
			// console.log(this.position);
			this.isPin(sketchList)
			let elList = document.querySelectorAll('.img_block_item_sketch img')
			Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
				.then((rv: any) => {
					this.isShowMark = false
					this.store.commit('clearAllId')
					this.store.commit('setShowSketchboard',rv)
					GO.id = 0
					this.showCollectionModal =false
					this.collectionStep = 1
					this.$emit('finishCollection')
					if(this.driver__.driver){
						driverObj__.moveNext()
					}
				})
				.catch((res) => {
					this.isShowMark = false
				});
			

        }
    }
})
</script>
<style lang="less" scoped>
.collection_modal{
	// max-width: 120rem;
	.collection_title,.collection_closeIcon,.collection_page{
		position: absolute;
	}
	.collection_title{
		top: 4rem;
		display: flex;
		font-size: var(--aida-fsize2);
		font-weight: 900;
		color: rgba(0,0,0,.65);
		z-index: 2;
		align-items: center;
		.collection_progress{
			width: 8rem;
			height: 8rem;
			>div{
				width: 100% !important;
				height: 100% !important;
				:deep(.ant-progress-inner){
					width: 100% !important;
					height: 100% !important;
				}
			}
		}
		.collection_title_text{
			margin-right: 4rem;
		}
		.collection_title_text_intro{
			font-size: var(--aida-fsize1-4);
			font-weight: 400;
			color: rgba(0,0,0,.45);
		}
		
	}
	.collection_closeIcon{
		top: 2rem;
		right: 2rem;
        cursor: pointer;
		width: 4rem;
		height: 4rem;
		display: flex;
		align-items: center;
		justify-content: center;

		.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);
		}
	}
	.collection_page{
		left: 50%;
		transform: translateX(-50%);
		bottom: 3rem;
		display: flex;
		.fi-rr-arrow-small-left{
			margin-right: 10rem;
		}
		.fi{
			cursor: pointer;
			display: flex;
			height: 100%;
		}
		.fi::before{
			padding: 5px;
			border-radius: 50%;
			color: rgba(0, 0, 0, 0.55);
			border: solid 2px rgba(0, 0, 0, 0.25);
			transition: 1s all;
		}
		.fi:hover.fi::before{
			border: solid 2px rgba(0, 0, 0, 0.55);
			color: rgba(0, 0, 0, 1);
		}
	}
    .header_icon_fanhui{
        margin-right: 1rem;
        font-size: 2rem;
        cursor: pointer;
    }
    .header_right_block{
        display: flex;
        align-items: center;
        position: absolute;
        right: 2.1rem;
        height: 100%;

        .next_step_button{
            padding:  0 1.2rem;
            height: 3.2rem;
            background: #343579;
            font-size: 1.4rem;
            color: #FFFFFF;
            line-height: 3.2rem;
            margin-right: 1.6rem;
            white-space: nowrap;
            cursor: pointer;
        }

        .header_cancel_button{
            padding:  0 2.1rem;
            height: 3.2rem;
            background: #E4E5EB;
            font-size: 1.4rem;
            color: #030303;
            line-height: 3.2rem;
            white-space: nowrap;
            cursor: pointer;
        }
    }

    .collection_modal_body{
        height: 100%;
		background-color: #fff;
    }
}
</style>
<style lang="less">
.collection_modal,.layout_modal{
	// max-width: 1200px ;
	// max-width: 1150px ;
	.ant-modal-content{
		border-radius: 1rem;
		overflow: hidden;
		.ant-modal-header{
			background-color: #fff;
			border-bottom: none;
		}
		.ant-modal-body{
			padding: 8rem 5rem !important;
			// height: calc(65vh - 6.4rem);
			height: 65rem;
		}
		//进度完成字体颜色
		
		.ant-progress-circle.ant-progress-status-success .ant-progress-text{
			color: #000;
		}
		.ant-progress-circle .ant-progress-text{
			color:rgba(0, 0, 0, 0.55);
			font-size: 1.6rem;
		}
	}
}
// .ant-progress-circle .ant-progress-inner{
// 	width: 8rem !important;
// 	height: 8rem !important;
// }
</style>