312 lines
9.8 KiB
Vue
312 lines
9.8 KiB
Vue
<template>
|
|
<div class="collectionModal" ref="collectionModal"></div>
|
|
<a-modal
|
|
class="collection generalModel"
|
|
v-model:visible="habitSetStyle"
|
|
:footer="null"
|
|
width="75%"
|
|
:get-container="() => $refs.collectionModal"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:mask="true"
|
|
:keyboard="false"
|
|
:destroyOnClose="false"
|
|
:zIndex="1000"
|
|
>
|
|
<div class="generalModel_btn">
|
|
<div class="generalModel_closeIcon" @click.stop="cleardata()">
|
|
<svg width="100%" height="100%" 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_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.Mannquinboard') }}</div>
|
|
<div v-show="collectionStep === 5">{{ $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 class="collection_title_text_intro" v-show="collectionStep === 4">{{ $t('collectionModal.SketchCollection') }}</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="designOpenrtion_content">
|
|
<!-- <div class="modal_title_text">
|
|
<div>Setting</div>
|
|
</div> -->
|
|
<div class="collectionBox">
|
|
<MoodboardUpload ref="moodBoard" v-show="openType == 'moodBoard' || collectionStep == 1"></MoodboardUpload>
|
|
<PrintboardUpload ref="printBoard" v-show="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
|
|
<ColorboardUpload ref="colorBoard" v-show="openType == 'colorBoard' || collectionStep == 3" :collectionStep="collectionStep"></ColorboardUpload>
|
|
<mannequin ref="mannequin" v-show="openType == 'mannequin' || collectionStep == 4"></mannequin>
|
|
<SketchboardUpload ref="sketchBoard" v-show="openType == 'sketchBoard' || collectionStep == 5"></SketchboardUpload>
|
|
</div>
|
|
<div class="collection_page" v-show="isNext">
|
|
<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
|
|
<i v-if="collectionStep < (selectObject.type == 'singleProductDesign'?4:5)" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
|
|
<i v-else class="fi fi-rr-check Guide_1_14" @click.stop="cleardata()"></i>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="mark_loading" v-show="isShowMark">
|
|
<a-spin size="large" />
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,computed,ref,provide,nextTick,inject,toRefs, reactive, onBeforeMount} from 'vue'
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { Https } from "@/tool/https";
|
|
import { useStore } from "vuex";
|
|
import { useI18n } from 'vue-i18n'
|
|
import { rgbToHsv, setGradual } from "@/tool/util";
|
|
import { init } from 'echarts/core';
|
|
import MoodboardUpload from './collection/MoodboardUpload.vue';
|
|
import PrintboardUpload from './collection/PrintboardUpload.vue';
|
|
import ColorboardUpload from './collection/ColorboardUpload.vue';
|
|
import SketchboardUpload from './collection/SketchboardUpload.vue';
|
|
import mannequin from './mannequin/index.vue';
|
|
|
|
export default defineComponent({
|
|
components:{
|
|
MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,
|
|
},
|
|
props:{
|
|
isNext:{
|
|
type:Boolean,
|
|
default:true,
|
|
},
|
|
},
|
|
emits:['getHistory'],
|
|
setup(props,{emit}) {
|
|
const store = useStore();
|
|
const data = reactive({
|
|
habitSetStyle:false,
|
|
isShowMark:false,
|
|
openType:'',
|
|
collectionStep:1,
|
|
selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
|
|
createProbject:inject('createProbject',()=>{}) as any
|
|
|
|
})
|
|
let driver__:any = computed(()=>{
|
|
return store.state.Guide.guide
|
|
})
|
|
provide('driver__',driver__)
|
|
const dataDom = reactive({
|
|
moodBoard:null as any,
|
|
printBoard:null as any,
|
|
colorBoard:null as any,
|
|
mannequin:null as any,
|
|
sketchBoard:null as any,
|
|
}) as any
|
|
const init = (value:any)=>{
|
|
data.habitSetStyle = true
|
|
data.openType = value
|
|
const keys = Object.keys(dataDom);
|
|
data.collectionStep = keys.indexOf(value) + 1; // 1
|
|
nextTick(()=>{
|
|
dataDom[value].openSetData()
|
|
})
|
|
}
|
|
let cleardata = async ()=>{
|
|
data.habitSetStyle = false
|
|
if(data.collectionStep == 3)await getPantongName()
|
|
data.collectionStep = 1
|
|
if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
|
|
saveProject(data.openType)
|
|
}
|
|
const saveProject = async (str:any)=>{
|
|
if(str == 'design')return
|
|
if(!data.selectObject.id && data.createProbject)await data.createProbject()
|
|
let value:any = {
|
|
projectId:data.selectObject.id,
|
|
}
|
|
console.log(str)
|
|
store.dispatch('getProjectData',str).then((data)=>{
|
|
if(!data[str])return
|
|
value[str] = data[str]
|
|
// if(!value[str] || value[str]?.length == 0)return
|
|
Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
|
|
if(str == 'sketchBoard')store.commit('setShowSketchboard',rv.boundingBox)
|
|
})
|
|
})
|
|
}
|
|
let getPantongName = async ()=>{
|
|
let colorBoards = store.state.UploadFilesModule.colorBoards;
|
|
if(!colorBoards || colorBoards?.length == 0) return
|
|
data.isShowMark = true
|
|
let value: any = [];
|
|
for (let v of colorBoards) {
|
|
|
|
}
|
|
for (let index = 0; index < colorBoards.length; index++) {
|
|
// if(colorBoards[index].gradient){
|
|
// colorBoards[index].gradient.colorImg = await setGradual(colorBoards[index].gradient,320,700)
|
|
// }
|
|
let color: any = [colorBoards[index].rgbValue.r, colorBoards[index].rgbValue.g, colorBoards[index].rgbValue.b];
|
|
let hsv = rgbToHsv(color);
|
|
colorBoards[index].hsv = hsv[0] + hsv[1] + hsv[2];
|
|
value.push({
|
|
h: hsv[0],
|
|
s: hsv[1],
|
|
v: hsv[2],
|
|
});
|
|
}
|
|
return new Promise((resolve: any, reject: any) => {
|
|
Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, value)
|
|
.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;
|
|
});
|
|
store.commit("setColorboardList", colorBoards);
|
|
resolve();
|
|
}
|
|
data.isShowMark = false
|
|
})
|
|
.catch((res) => {
|
|
reject();
|
|
data.isShowMark = false
|
|
});
|
|
});
|
|
}
|
|
let lastStep = async ()=>{
|
|
if(data.collectionStep == 3)await getPantongName()
|
|
data.collectionStep = data.collectionStep - 1
|
|
if(data.selectObject.type == 'singleProductDesign' && data.collectionStep == 4){
|
|
data.collectionStep = data.collectionStep - 1
|
|
}
|
|
setOpenSetData()
|
|
}
|
|
let nextStep = async ()=>{
|
|
if(data.collectionStep == 3)await getPantongName()
|
|
data.collectionStep = data.collectionStep + 1
|
|
if(data.selectObject.type == 'singleProductDesign' && data.collectionStep == 4){
|
|
data.collectionStep = data.collectionStep + 1
|
|
}
|
|
setOpenSetData()
|
|
}
|
|
const setOpenSetData = ()=>{
|
|
if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
|
|
saveProject(data.openType)
|
|
|
|
const keys = Object.keys(dataDom);
|
|
const key = keys[data.collectionStep - 1];
|
|
data.openType = key
|
|
nextTick(()=>{
|
|
dataDom[key].openSetData()
|
|
})
|
|
}
|
|
return{
|
|
...toRefs(dataDom),
|
|
...toRefs(data),
|
|
cleardata,
|
|
init,
|
|
lastStep,
|
|
nextStep,
|
|
}
|
|
},
|
|
provide() {
|
|
return {
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.collectionModal{
|
|
:deep(.collection){
|
|
> .ant-modal-content{
|
|
.ant-modal-body{
|
|
padding-top: 10rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.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);
|
|
}
|
|
|
|
}
|
|
:deep(.designOpenrtion_content){
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
> .collection_page{
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -4rem;
|
|
display: flex;
|
|
position: absolute;
|
|
.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);
|
|
}
|
|
}
|
|
.collectionBox{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
.collection_modal_item{
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |