detail页面调整
This commit is contained in:
X1627315083
@@ -5,6 +5,10 @@ interface DesignDetailCopy{
|
||||
designDetail:any,
|
||||
designPreviewData:any,
|
||||
frontBack:any,
|
||||
selectDetail:any,
|
||||
printZIndex:any,
|
||||
//值都有 sketch，color,print,element
|
||||
currentDetailType:any,
|
||||
}
|
||||
|
||||
const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
|
||||
@@ -12,28 +16,192 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
|
||||
state:{
|
||||
designDetail:null,
|
||||
designPreviewData:{},
|
||||
frontBack:{},
|
||||
frontBack:{
|
||||
front:[],
|
||||
back:[],
|
||||
body:{},
|
||||
},
|
||||
selectDetail:null,
|
||||
printZIndex:-1,
|
||||
currentDetailType:'',
|
||||
},
|
||||
mutations:{
|
||||
setDesignDetail(state,files){
|
||||
state.designDetail = files
|
||||
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 = []
|
||||
// let printZIndex =
|
||||
data.clothes.forEach((v:any,index:any)=>{
|
||||
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.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
|
||||
}else{
|
||||
back[index] = v.layersObject[i]
|
||||
back[index].style.zIndex = v.priority
|
||||
back[index].id = v.id
|
||||
back[index].undividedLayer = v.undividedLayer
|
||||
// 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
|
||||
state.designDetail = data
|
||||
},
|
||||
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,data){
|
||||
// state.designDetail.clothes.forEach((item:any) => {
|
||||
// if(item.id == state.selectDetail.id){
|
||||
// }
|
||||
// });
|
||||
if(!state.selectDetail.newDetail){
|
||||
state.selectDetail.newDetail = {}
|
||||
}
|
||||
if(state.currentDetailType == 'sketch'){
|
||||
state.selectDetail.newDetail[state.currentDetailType] = data
|
||||
}else if(state.currentDetailType == 'color'){
|
||||
state.selectDetail.newDetail[state.currentDetailType] = data
|
||||
}else{
|
||||
if(!state.selectDetail.newDetail[state.currentDetailType])state.selectDetail.newDetail[state.currentDetailType] = []
|
||||
const foundObjects = state.selectDetail.newDetail[state.currentDetailType].filter((item:any) => item.id === data.id);
|
||||
if(foundObjects.length == 0){
|
||||
state.selectDetail.newDetail[state.currentDetailType].push(data)
|
||||
}
|
||||
}
|
||||
},
|
||||
setCurrentDetailType(state,data){
|
||||
if(state.selectDetail && state.selectDetail.id)state.currentDetailType = data
|
||||
},
|
||||
setDesignColthes(state,data){
|
||||
state.designDetail.clothes[data.index] = data.clothes
|
||||
if(!state.currentDetailType)state.currentDetailType = 'sketch'
|
||||
if(state.selectDetail && state.selectDetail.id == data){
|
||||
return
|
||||
}
|
||||
//切换选择
|
||||
// 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)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
if(v.id == data){
|
||||
v.designOpenrtionBtn = true
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
setDesignOthers(state,data){
|
||||
state.designDetail.others[data.index] = data.others
|
||||
},
|
||||
|
||||
setFrontBack(state,files){
|
||||
state.frontBack = files
|
||||
}
|
||||
setPraeview(state,data){//preview
|
||||
data.clothes.forEach((item:any) => {
|
||||
if(!item.id)return
|
||||
let id_ = state.selectDetail.id
|
||||
state.selectDetail.change = item.change
|
||||
if(state.selectDetail?.newDetail?.color){
|
||||
state.selectDetail.color = state.selectDetail?.newDetail?.color
|
||||
state.selectDetail.newDetail.color = null
|
||||
}
|
||||
state.selectDetail.designType = item.designType
|
||||
state.selectDetail.gradient = item.gradient
|
||||
state.selectDetail.id = item.id
|
||||
state.selectDetail.layersObject = item.layersObject
|
||||
state.selectDetail.newDetail[state.currentDetailType] = null
|
||||
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.type = item.type
|
||||
state.selectDetail.undividedLayer = item.undividedLayer
|
||||
// if(state.currentDetailType == 'sketch'){//如果是sketch更新front和back
|
||||
let el:any = document.querySelector('.molepositon .perview_img')
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
let scale:any = el.parentNode.offsetWidth / img.width
|
||||
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
|
||||
}
|
||||
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
|
||||
}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
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
img.src = state.frontBack.body.path;
|
||||
|
||||
// }
|
||||
})
|
||||
|
||||
},
|
||||
// setDesignItemOthers(state,data){
|
||||
// state.designDetail.others[data.index] = data.others
|
||||
// },
|
||||
},
|
||||
actions:{
|
||||
|
||||
async setSubmit({ commit },str) {
|
||||
console.log(str);
|
||||
|
||||
// setTimeout(() => {
|
||||
// const message = 'Hello from Vuex';
|
||||
// commit('setMessage', message); // 更新状态
|
||||
// resolve(message); // 返回数据
|
||||
// }, 1000);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user