527 lines
16 KiB
Vue
527 lines
16 KiB
Vue
<template>
|
|
<div v-if="showCollectionModal">
|
|
<div ref="collection_modal"></div>
|
|
<a-modal class="modal_component collection_modal generalModel Guide_1_2"
|
|
v-model:visible="showCollectionModal"
|
|
:footer="null"
|
|
width="78%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:get-container="() => $refs.collection_modal"
|
|
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="generalModel_btn" :class="[driver__.driver?'hideEvents':'']">
|
|
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
|
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
|
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
|
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
|
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
</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" :collectionStep="collectionStep" 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,onUnmounted , 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 { rgbToHsv, dataURLtoBlob } from "@/tool/util";
|
|
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 {setGradual} from '@/tool/util'
|
|
import { useI18n } from 'vue-i18n'
|
|
// import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
|
|
export default defineComponent({
|
|
components:{
|
|
Generate,
|
|
MoodboardUpload,
|
|
PrintboardUpload,
|
|
ColorboardUpload,
|
|
SketchboardUpload,
|
|
MarketingSketchUpload
|
|
},
|
|
props:{
|
|
getDesignData: {
|
|
type: Function,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props){
|
|
const store = useStore()
|
|
let {t} = useI18n()
|
|
let driver__:any = computed(()=>{
|
|
return store.state.Guide.guide
|
|
})
|
|
let workspace:any = computed(()=>{
|
|
return store.state.Workspace.probjects
|
|
})
|
|
let position:any = computed(()=>{
|
|
return store.state.Workspace.probjects.positionList
|
|
})
|
|
let showCollectionModal:any=ref(false)
|
|
let collectionStep=ref(1)
|
|
provide('driver__',driver__)
|
|
let isShowMark = ref(false)
|
|
let styleRecommend = ref([])
|
|
provide('styleRecommend',styleRecommend)
|
|
onUnmounted(()=>{
|
|
let data = {
|
|
showCollectionModal:showCollectionModal.value,
|
|
collectionStep:collectionStep.value
|
|
}
|
|
sessionStorage.setItem('collectionData', JSON.stringify(data));
|
|
})
|
|
return {
|
|
driver__,
|
|
workspace,
|
|
t,
|
|
isShowMark,
|
|
position,
|
|
showCollectionModal,
|
|
collectionStep,
|
|
styleRecommend,
|
|
}
|
|
|
|
},
|
|
// activated () {
|
|
// let data:any = JSON.parse((sessionStorage.getItem('collectionData') as any));
|
|
// if(!data){
|
|
// return
|
|
// }
|
|
// this.showCollectionModal = data.showCollectionModal
|
|
// this.collectionStep = data.collectionStep
|
|
// },
|
|
data(){
|
|
return{
|
|
|
|
store:useStore()
|
|
}
|
|
},
|
|
methods:{
|
|
async 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){
|
|
for (let index = 0; index < colorBoards.length; index++) {
|
|
if(colorBoards[index].gradient){
|
|
colorBoards[index].gradient.colorImg = await setGradual(colorBoards[index].gradient,320,700)
|
|
}
|
|
|
|
}
|
|
this.store.commit('setColorboardList',colorBoards)
|
|
}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
|
|
_this.styleRecommend = []
|
|
}
|
|
});
|
|
},
|
|
isPin(str:any,resolve:any){
|
|
let _this = this
|
|
Modal.confirm({
|
|
title: this.t('collectionModal.jsContent5',{str:str}),
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
resolve(true)
|
|
// return true
|
|
},
|
|
onCancel(){
|
|
_this.isShowMark = false
|
|
resolve(false)
|
|
}
|
|
});
|
|
// message.warning(this.t('SketchboardUpload.jsContent1',str:str));
|
|
},
|
|
async isPinOpen(list:any){
|
|
this.workspace
|
|
let numTop = 0
|
|
let numBottom = 0
|
|
let top:any
|
|
let bottom:any
|
|
if(this.workspace.sex != "male"){
|
|
top = ['Outwear','Dress','Blouse']
|
|
bottom = ['Trousers','Skirt']
|
|
}else{
|
|
top = ['Outwear','Tops']
|
|
bottom = ['Bottoms']
|
|
}
|
|
let topStr:any = []
|
|
let bottomStr:any = []
|
|
this.position.forEach((item:any) => {
|
|
let topBor
|
|
let botBor
|
|
topBor = top.includes(item.value)
|
|
botBor = bottom.includes(item.value)
|
|
if(topBor){
|
|
topStr.push(item.value)
|
|
}
|
|
if(botBor){
|
|
bottomStr.push(item.value)
|
|
}
|
|
});
|
|
list.forEach((item:any,index:number) => {
|
|
top.forEach((positionItem:any) => {
|
|
if(item.categoryValue == positionItem && item.pin){
|
|
numTop++
|
|
}
|
|
});
|
|
bottom.forEach((positionItem:any) => {
|
|
if(item.categoryValue == positionItem && item.pin){
|
|
numBottom++
|
|
}
|
|
});
|
|
});
|
|
let bor
|
|
await new Promise(async (resolve:any)=>{
|
|
let str
|
|
if(numTop >= 8){
|
|
str = `top ${topStr.join(' and ')}`
|
|
this.isPin(str,resolve)
|
|
return
|
|
}else if(numBottom >= 8){
|
|
str = `bottom ${bottomStr.join(' and ')}`
|
|
this.isPin(str,resolve)
|
|
}else{
|
|
resolve(true)
|
|
}
|
|
}).then((v:any)=>{
|
|
bor = v
|
|
})
|
|
return bor
|
|
},
|
|
getPantongName() {
|
|
let colorBoards = this.store.state.UploadFilesModule.colorBoards;
|
|
let data: any = [];
|
|
for (let v of colorBoards) {
|
|
let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
|
|
let hsv = rgbToHsv(color);
|
|
v.hsv = hsv[0] + hsv[1] + hsv[2];
|
|
data.push({
|
|
h: hsv[0],
|
|
s: hsv[1],
|
|
v: hsv[2],
|
|
});
|
|
}
|
|
|
|
return new Promise((resolve: any, reject: any) => {
|
|
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
|
|
.then((rv: any) => {
|
|
if (rv) {
|
|
rv.forEach((ele: any, index: number) => {
|
|
colorBoards[index].id = ele.id;
|
|
colorBoards[index].tcx = ele.tcx;
|
|
colorBoards[index].name = ele.name;
|
|
});
|
|
this.store.commit("setColorboardList", colorBoards);
|
|
resolve();
|
|
}
|
|
})
|
|
.catch((res) => {
|
|
reject();
|
|
});
|
|
});
|
|
},
|
|
//完成
|
|
async finishCollection(){
|
|
this.isShowMark = true
|
|
this.store.commit('clearAllId')
|
|
this.$emit('finishCollection')
|
|
await this.getPantongName()
|
|
this.store.commit("setAllBoardData");
|
|
|
|
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.categoryValue,
|
|
sketchBoardId:item.id?item.id:item.resData.id
|
|
}
|
|
arr.push(obj)
|
|
});
|
|
// let data = {sketchBoards:arr}
|
|
let data = this.getDesignData(-1)
|
|
data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
|
|
data.collectionId = this.store.state.HomeStoreModule.designCollectionId?this.store.state.HomeStoreModule.designCollectionId:null
|
|
if(!await this.isPinOpen(sketchList)){
|
|
this.isShowMark = false
|
|
return
|
|
}
|
|
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
|
|
if(this.driver__.driver){
|
|
driverObj__.moveNext()
|
|
}
|
|
})
|
|
.catch((res) => {
|
|
this.isShowMark = false
|
|
});
|
|
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
:deep(.ant-modal-body){
|
|
padding: calc(8rem*1.2) calc(5rem*1.2) !important;
|
|
// height: calc(65vh - 6.4rem);
|
|
height: calc(65rem*1.2);
|
|
.ant-progress-circle .ant-progress-text{
|
|
color:rgba(0, 0, 0, 0.55);
|
|
font-size: calc(1.6rem*1.2);
|
|
}
|
|
}
|
|
.collection_modal{
|
|
// max-width: 120rem;
|
|
|
|
.ant-upload-select-picture-card{
|
|
background: #FFFFFF;
|
|
width: calc(6rem*1.2);
|
|
height: calc(6rem*1.2);
|
|
border: calc(0.3rem*1.2) solid #ededed;
|
|
border-radius: calc(1rem*1.2);
|
|
margin: 0;
|
|
.upload_tip_block{
|
|
.icon-jiahao{
|
|
font-size: calc(3.2rem*1.2);
|
|
color: #B7B7B7;
|
|
}
|
|
}
|
|
|
|
.ant-upload-text{
|
|
font-size: calc(1.6rem*1.2);
|
|
color: #B7B7B7;
|
|
}
|
|
}
|
|
.ant-upload-list-picture-card-container{
|
|
display: none !important;
|
|
}
|
|
.ant-upload-picture-card-wrapper{
|
|
width: auto;
|
|
vertical-align: top;
|
|
}
|
|
.collection_title,.collection_closeIcon,.collection_page{
|
|
position: absolute;
|
|
}
|
|
.collection_title{
|
|
top: calc(4rem*1.2);
|
|
display: flex;
|
|
font-size: var(--aida-fsize2);
|
|
font-weight: 900;
|
|
color: rgba(0,0,0,.65);
|
|
z-index: 999;
|
|
align-items: center;
|
|
width: calc(35rem*1.2);
|
|
justify-content: space-between;
|
|
.collection_progress{
|
|
width: calc(8rem*1.2);
|
|
height: calc(8rem*1.2);
|
|
>div{
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
:deep(.ant-progress-inner){
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
}
|
|
}
|
|
.collection_title_text{
|
|
// margin-right: calc(4rem*1.2);
|
|
}
|
|
.collection_title_text_intro{
|
|
font-size: var(--aida-fsize1-4);
|
|
font-weight: 400;
|
|
color: rgba(0,0,0,.45);
|
|
}
|
|
|
|
}
|
|
.collection_closeIcon{
|
|
|
|
}
|
|
.collection_page{
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: calc(3rem*1.2);
|
|
display: flex;
|
|
.fi-rr-arrow-small-left{
|
|
margin-right: calc(10rem*1.2);
|
|
}
|
|
.fi{
|
|
cursor: pointer;
|
|
display: flex;
|
|
height: 100%;
|
|
font-size: 1.8rem;
|
|
}
|
|
.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: calc(1rem*1.2);
|
|
font-size: calc(2rem*1.2);
|
|
cursor: pointer;
|
|
}
|
|
.header_right_block{
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: calc(2.1rem*1.2);
|
|
height: 100%;
|
|
|
|
.next_step_button{
|
|
padding: 0 calc(1.2rem*1.2);
|
|
height: calc(3.2rem*1.2);
|
|
background: #000;
|
|
font-size: calc(1.4rem*1.2);
|
|
color: #FFFFFF;
|
|
line-height: calc(3.2rem*1.2);
|
|
margin-right: calc(1.6rem*1.2);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header_cancel_button{
|
|
padding: 0 calc(2.1rem*1.2);
|
|
height: calc(3.2rem*1.2);
|
|
background: #E4E5EB;
|
|
font-size: calc(1.4rem*1.2);
|
|
color: #030303;
|
|
line-height: calc(3.2rem*1.2);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.collection_modal_body{
|
|
height: 100%;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
</style>
|