aida_front/src/component/HomePage/collectionModal.vue

<template>
    <div v-if="showCollectionModal">
         <a-modal class="modal_component collection_modal" 
            v-model:visible="showCollectionModal" 
            :footer="null" 
            width="65%"
            :maskClosable="false"
            :centered="true"
			:closable="false"
			wrapClassName="#app"
        >
            <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">{{ $t('collectionModal.collection') }}</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" @click.stop="cancelDsign()">
				<!-- <div class="header_right_block" @click.stop="">
					<div class="header_cancel_button" >Cancel</div>
				</div> -->
				<i class="fi fi-rr-cross-small"></i>
			</div>
			<div class="collection_page">
				<!-- <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" @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" @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>
        </a-modal>
    </div>
   
</template>
<script lang="ts">
import { defineComponent ,createVNode } 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 {useStore} from 'vuex'
import GO from "@/tool/GO";
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
        Generate,
        MoodboardUpload,
        PrintboardUpload,
        ColorboardUpload,
        SketchboardUpload,
        MarketingSketchUpload
    },
	state(){
		let {t} = useI18n()
		return {
			t,
		}
	},
    data(){
        return{
            showCollectionModal:false,
            collectionStep:1,
            store:useStore()
        }
    },
    methods:{
        nextStep(){
			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.warning(this.$t('collectionModal.jsContent1'))
						return
					}
				}
				
			}
            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
                }
            });
        },

        //完成
        finishCollection(){
            let colorBoards = this.store.state.UploadFilesModule.colorBoards
			
            if(!colorBoards  ||  colorBoards?.length < 1){
                message.warning(this.$t('collectionModal.jsContent3'))
                return
            }
			this.store.commit('clearAllId')
			GO.id = 0
            this.showCollectionModal =false
            this.collectionStep = 1
            this.$emit('finishCollection')
        }
    }
})
</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: 1.8rem;
		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: 1.2rem;
			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;
		.fi-rr-arrow-small-left{
			margin-right: 10rem;
		}
		.fi{
			cursor: pointer;
		}
		.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>