289 lines
8.6 KiB
Vue
289 lines
8.6 KiB
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"
|
|
>
|
|
<div class="collection_title">
|
|
<div class="collection_title_text">
|
|
<div v-show="collectionStep === 1">Moodboard</div>
|
|
<div v-show="collectionStep === 2">Printboard</div>
|
|
<div v-show="collectionStep === 3">Colorboard</div>
|
|
<div v-show="collectionStep === 4">Sketchboard</div>
|
|
<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
|
|
<div class="collection_title_text_intro">select moodboard for your collection</div>
|
|
</div>
|
|
<div>
|
|
<a-progress :strokeWidth= 13 :width= 60 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";
|
|
export default defineComponent({
|
|
components:{
|
|
Generate,
|
|
MoodboardUpload,
|
|
PrintboardUpload,
|
|
ColorboardUpload,
|
|
SketchboardUpload,
|
|
MarketingSketchUpload
|
|
},
|
|
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('You must select the image and then use the layout.')
|
|
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: 'The uploaded files will not be saved, being sure to continue? ',
|
|
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('You must choose one or more colors for further process.')
|
|
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);
|
|
align-items: center;
|
|
.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: 10px;
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
</style>
|