386 lines
13 KiB
TypeScript
386 lines
13 KiB
TypeScript
import {Module} from 'vuex'
|
||
import {RootState} from '../index'
|
||
import { forEach } from 'jszip'
|
||
|
||
interface DesignDetail{
|
||
designDetail:any,
|
||
designPreviewData:any,
|
||
frontBack:any,
|
||
selectDetail:any,
|
||
printZIndex:any,
|
||
//值都有 sketch，color,print,element
|
||
currentDetailType:any,
|
||
currentPrintElement:any,
|
||
}
|
||
|
||
const DesignDetail : Module<DesignDetail,RootState> = {
|
||
namespaced: true,
|
||
state:{
|
||
designDetail:null,
|
||
designPreviewData:{},
|
||
frontBack:{
|
||
front:[],
|
||
back:[],
|
||
body:{},
|
||
},
|
||
selectDetail:null,
|
||
printZIndex:-1,
|
||
currentDetailType:'',
|
||
currentPrintElement:null,
|
||
},
|
||
mutations:{
|
||
clearDetailData(state){
|
||
state.designDetail = null
|
||
state.designPreviewData = {}
|
||
state.frontBack = {
|
||
front:[],
|
||
back:[],
|
||
body:{},
|
||
}
|
||
state.selectDetail = null
|
||
state.printZIndex = -1
|
||
state.currentDetailType = ''
|
||
state.currentPrintElement = null
|
||
},
|
||
setDesignDetail(state,data){
|
||
if(data.others.length > 0 && data.others[0].type == "Body"){
|
||
state.frontBack.body = data.others[0]
|
||
}
|
||
let front:any = []
|
||
let back:any = []
|
||
state.designDetail = data
|
||
// let printZIndex =
|
||
data.clothes.forEach((v:any,index:any)=>{
|
||
// if(!v?.partialDesignDTO){
|
||
// }
|
||
for (let i = v.layersObject.length-1; i >= 0; i--) {
|
||
v.layersObject[i].style = {
|
||
top:v.layersObject[i].position?.[0],
|
||
left:v.layersObject[i].position?.[1],
|
||
width:v.layersObject[i].imageSize?.[0],
|
||
height:v.layersObject[i].imageSize?.[1],
|
||
}
|
||
v.layersObject[i].centers={
|
||
left:0,
|
||
top:0,
|
||
}
|
||
v.maskMinioUrl = v.layersObject?.[0]?.maskMinioUrl
|
||
v.maskUrl = v.layersObject?.[0]?.maskUrl
|
||
v.layersObject[i].designOpenrtionBtn = false
|
||
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
|
||
front[index] = v.layersObject[i]
|
||
// front[index].style.zIndex = v.priority
|
||
front[index].id = v.id
|
||
front[index].undividedLayer = v.undividedLayer
|
||
front[index].undividedLayerWithSinglePrint = v?.undividedLayerWithSinglePrint
|
||
}else{
|
||
back[index] = v.layersObject[i]
|
||
back[index].style.zIndex = v.priority
|
||
back[index].id = v.id
|
||
back[index].undividedLayer = v.undividedLayer
|
||
back[index].undividedLayerWithSinglePrint = v?.undividedLayerWithSinglePrint
|
||
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
|
||
}
|
||
if(state.printZIndex < v.priority){
|
||
state.printZIndex = v.priority
|
||
}
|
||
}
|
||
})
|
||
state.frontBack.front = front
|
||
state.frontBack.back = back
|
||
},
|
||
updataDetailItem(state,data){
|
||
state.designDetail.clothes.forEach((item:any) => {
|
||
if(item.id == state.selectDetail.id){
|
||
for (const key in data) {
|
||
item[key] = data[key]
|
||
}
|
||
}
|
||
});
|
||
},
|
||
clearDesignDetail(state){
|
||
state.designDetail = null
|
||
state.designPreviewData = {}
|
||
state.frontBack = {
|
||
front:[],
|
||
back:[],
|
||
body:{},
|
||
}
|
||
state.selectDetail = null
|
||
state.currentDetailType = ''
|
||
state.printZIndex = -1
|
||
},
|
||
addDesign(state,data){
|
||
|
||
},
|
||
setNewDetail(state,value){
|
||
// state.designDetail.clothes.forEach((item:any) => {
|
||
// if(item.id == state.selectDetail.id){
|
||
// }
|
||
// });
|
||
let {data} = value
|
||
let str = value.str || state.currentDetailType
|
||
if(!state.selectDetail)return
|
||
if(!state.selectDetail.newDetail){
|
||
state.selectDetail.newDetail = {}
|
||
}
|
||
if(str == 'sketch'){
|
||
state.selectDetail.newDetail[str] = data
|
||
}else if(str == 'color'){
|
||
state.selectDetail.newDetail[str] = data
|
||
}else if(str == 'print'){
|
||
state.selectDetail.newDetail[str] = data
|
||
}else if(str == 'element'){
|
||
state.selectDetail.newDetail[str] = data
|
||
}else if(str == 'models'){
|
||
// if(!state.designDetail.newModel)state.designDetail.newModel={}
|
||
state.designDetail.newModel = JSON.parse(JSON.stringify(data))
|
||
}else{
|
||
if(!state.selectDetail.newDetail[str])state.selectDetail.newDetail[str] = []
|
||
const foundObjects = state.selectDetail.newDetail[str].filter((item:any) => item.id === data.id);
|
||
if(foundObjects.length == 0){
|
||
state.selectDetail.newDetail[str].push(data)
|
||
}
|
||
}
|
||
},
|
||
setCurrentPrintElement(state,data){//临时存放印花和元素点击用来监听在衣服上添加元素
|
||
state.currentPrintElement = data?.resData || data
|
||
},
|
||
setCurrentDetailType(state,data){
|
||
if(state.selectDetail && state.selectDetail.id){
|
||
state.currentDetailType = data
|
||
}else if(state.selectDetail && data == 'sketch'){
|
||
state.currentDetailType = data
|
||
}
|
||
},
|
||
setDesignColthes(state,data){
|
||
if(!state.currentDetailType)state.currentDetailType = 'sketch'
|
||
//切换选择
|
||
// state.currentDetailType = ''
|
||
// state.designDetail.clothes[data.index] = data.clothes
|
||
state.designDetail.clothes.forEach((item:any) => {
|
||
if(item.id == data){
|
||
state.selectDetail = item
|
||
state.frontBack.front.forEach((v:any,index:any)=>{
|
||
v.designOpenrtionBtn = false
|
||
if(v.id == data){
|
||
v.designOpenrtionBtn = true
|
||
}
|
||
})
|
||
}
|
||
});
|
||
},
|
||
addDesignColthes(state){
|
||
let data = {
|
||
changed:null,
|
||
color:{rgba:{
|
||
r:255,
|
||
g:255,
|
||
b:255,
|
||
}},
|
||
designType:null,
|
||
gradient:null,
|
||
id:null,
|
||
partialDesign:{
|
||
layers:[],
|
||
partialDesignPath:'',
|
||
partialDesignMinioPath:'',
|
||
partialDesignBase64:''
|
||
},
|
||
layersObject:null,
|
||
newDetail:{},
|
||
level1Type:'Sketchboard',
|
||
minIOPath:null,
|
||
path:null,
|
||
printObject:null,
|
||
trims:null,
|
||
type:null,
|
||
undividedLayer:null,
|
||
undividedLayerWithSinglePrint:null,
|
||
}
|
||
if(!state.currentDetailType)state.currentDetailType = 'sketch'
|
||
state.designDetail.clothes.forEach((item:any) => {
|
||
state.frontBack.front.forEach((v:any,index:any)=>{
|
||
v.designOpenrtionBtn = false
|
||
})
|
||
});
|
||
state.selectDetail = data
|
||
},
|
||
async setPraeview(state,value){//preview
|
||
let data = value?.rv || value
|
||
let currentType = value?.currentType
|
||
if(state.designDetail.oldModel?.url)state.frontBack.body.path = state.designDetail.oldModel.url
|
||
if(value?.rv?.currentFullBodyView)state.designDetail.currentFullBodyView = value.rv.currentFullBodyView
|
||
for (let j = 0; j < data.clothes.length; j++) {
|
||
const item = data.clothes[j];
|
||
if(!item.id)continue
|
||
if(item.id == state.selectDetail.id || state.selectDetail.newDetail?.sketch?.id == item.id){
|
||
|
||
}
|
||
let id_:any
|
||
if(state.currentDetailType != 'models'){
|
||
if(data.clothes.length > 2){
|
||
//缺少字段临时添加
|
||
id_ = item.id || state.selectDetail.newDetail?.sketch?.id
|
||
}else{
|
||
id_ = state.selectDetail.id || state.selectDetail.newDetail?.sketch?.id
|
||
}
|
||
}else{
|
||
id_ = item.id
|
||
}
|
||
console.log(id_)
|
||
let el:any = document.querySelector('.molepositon .perview_img')
|
||
await new Promise((resolve, reject) => {
|
||
if(!state.frontBack?.body?.path){
|
||
state.frontBack.front[0].undividedLayer = value.rv.clothes[0].undividedLayer
|
||
state.frontBack.front[0].undividedLayerWithSinglePrint = value.rv.clothes[0]?.undividedLayerWithSinglePrint
|
||
resolve('')
|
||
}
|
||
const img = new Image();
|
||
img.src = state.frontBack.body.path;
|
||
img.onload = () => {
|
||
let scale:any = el.parentNode.offsetWidth / img.width;
|
||
if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
|
||
state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id})
|
||
state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id})
|
||
}
|
||
state.frontBack.front.forEach((v:any,index:any)=>{
|
||
if(v.id == id_){
|
||
for (let i = item.layersObject.length-1; i >= 0; i--) {
|
||
item.layersObject[i].style = {
|
||
top:item.layersObject[i].position?.[0] * scale + 'px',
|
||
left:item.layersObject[i].position?.[1] * scale + 'px',
|
||
width:item.layersObject[i].imageSize?.[0] * scale + 'px',
|
||
height:item.layersObject[i].imageSize?.[1] * scale + 'px',
|
||
zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length
|
||
}
|
||
item.layersObject[i].centers={
|
||
left:0,
|
||
top:0,
|
||
}
|
||
item.layersObject[i].designOpenrtionBtn = false
|
||
if(item.layersObject[i].imageCategory.indexOf("back") == -1){
|
||
state.frontBack.front[index] = item.layersObject[i]
|
||
// state.frontBack.front[index].style.zIndex = v.priority
|
||
state.frontBack.front[index].id = item.id
|
||
state.frontBack.front[index].undividedLayer = item.undividedLayer
|
||
state.frontBack.front[index].undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
|
||
}else{
|
||
state.frontBack.back[index] = item.layersObject[i]
|
||
// state.frontBack.back[index].style.zIndex = v.priority
|
||
state.frontBack.back[index].id = item.id
|
||
state.frontBack.back[index].undividedLayer = item.undividedLayer
|
||
state.frontBack.back[index].undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
|
||
}
|
||
}
|
||
}
|
||
})
|
||
resolve('')
|
||
};
|
||
})
|
||
let uploadDetail = (detailItem)=>{
|
||
detailItem.change = item.change
|
||
if(detailItem?.newDetail?.color && currentType != 'color'){
|
||
detailItem.color = detailItem?.newDetail?.color
|
||
detailItem.newDetail.color = null
|
||
}
|
||
if(item.partialDesign){
|
||
detailItem.partialDesign = item.partialDesign
|
||
}
|
||
detailItem.designType = item.designType
|
||
detailItem.layersObject = item.layersObject
|
||
detailItem.path = item.path
|
||
detailItem.minIOPath = item.minIOPath
|
||
detailItem.scale = [1,1]
|
||
detailItem.offset = [0,0]
|
||
detailItem.printObject = item.printObject
|
||
detailItem.trims = item.trims
|
||
detailItem.type = item.type
|
||
detailItem.maskMinioUrl = item.layersObject?.[0]?.maskMinioUrl
|
||
detailItem.maskUrl = item.layersObject?.[0]?.maskUrl
|
||
detailItem.color = {
|
||
...item.color,
|
||
rgba:{
|
||
r:item.color?.r,
|
||
g:item.color?.g,
|
||
b:item.color?.b,
|
||
},
|
||
gradient:item.gradient,
|
||
}
|
||
detailItem.undividedLayer = item.undividedLayer
|
||
detailItem.undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
|
||
if(detailItem.newDetail?.sketch?.id && !detailItem.id){
|
||
state.designDetail.clothes.push(detailItem)
|
||
}
|
||
detailItem.id = item.id
|
||
if(currentType)if(detailItem.newDetail?.[currentType] && currentType != 'color')delete detailItem.newDetail[currentType]
|
||
}
|
||
if(data.clothes.length > 2){
|
||
state.designDetail.clothes.forEach((detailItem:any) => {
|
||
if(detailItem.id == id_){
|
||
uploadDetail(detailItem)
|
||
}
|
||
});
|
||
}else{
|
||
uploadDetail(state.selectDetail)
|
||
}
|
||
|
||
if(state.currentDetailType != 'models'){
|
||
// state.selectDetail.change = item.change
|
||
// if(state.selectDetail?.newDetail?.color && currentType != 'color'){
|
||
// state.selectDetail.color = state.selectDetail?.newDetail?.color
|
||
// state.selectDetail.newDetail.color = null
|
||
// }
|
||
// if(item.partialDesign){
|
||
// state.selectDetail.partialDesign = item.partialDesign
|
||
// }
|
||
// state.selectDetail.designType = item.designType
|
||
// state.selectDetail.layersObject = item.layersObject
|
||
// state.selectDetail.path = item.path
|
||
// state.selectDetail.minIOPath = item.minIOPath
|
||
// state.selectDetail.scale = [1,1]
|
||
// state.selectDetail.offset = [0,0]
|
||
// state.selectDetail.printObject = item.printObject
|
||
// state.selectDetail.trims = item.trims
|
||
// state.selectDetail.type = item.type
|
||
// state.selectDetail.maskMinioUrl = item.layersObject?.[0]?.maskMinioUrl
|
||
// state.selectDetail.maskUrl = item.layersObject?.[0]?.maskUrl
|
||
// state.selectDetail.color = {
|
||
// ...item.color,
|
||
// rgba:{
|
||
// r:item.color?.r,
|
||
// g:item.color?.g,
|
||
// b:item.color?.b,
|
||
// },
|
||
// gradient:item.gradient,
|
||
// }
|
||
// state.selectDetail.undividedLayer = item.undividedLayer
|
||
// state.selectDetail.undividedLayerWithSinglePrint = item?.undividedLayerWithSinglePrint
|
||
// if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
|
||
// state.designDetail.clothes.push(state.selectDetail)
|
||
// }
|
||
// state.selectDetail.id = item.id
|
||
// if(currentType)if(state.selectDetail.newDetail?.[currentType] && currentType != 'color')delete state.selectDetail.newDetail[currentType]
|
||
}
|
||
}
|
||
if(value.fun)value.fun()
|
||
},
|
||
|
||
// setDesignItemOthers(state,data){
|
||
// state.designDetail.others[data.index] = data.others
|
||
// },
|
||
},
|
||
actions:{
|
||
async setSubmit({ commit },str) {
|
||
|
||
// setTimeout(() => {
|
||
// const message = 'Hello from Vuex';
|
||
// commit('setMessage', message); // 更新状态
|
||
// resolve(message); // 返回数据
|
||
// }, 1000);
|
||
},
|
||
|
||
}
|
||
}
|
||
|
||
export default DesignDetail |