初代测试版本

This commit is contained in:
2023-10-12 17:09:05 +08:00
parent 268ffecff7
commit 76315492ad
14 changed files with 267 additions and 198 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div class="design_compile_content">
<div class="design_compile_content" id="design_compile_content">
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
<!-- <div
@@ -30,6 +30,7 @@
</div>
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
</div>
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
<div class="mark_loading" v-show="loadingShow">
<a-spin size="large" />
</div>
@@ -331,6 +332,11 @@ export default defineComponent({
setPreviewData(){
this.$emit('setSubmit','preview');
},
deleteBorder(){
this.frontBack?.front?.forEach((item)=>{
item.designOpenrtionBtn = false
})
},
async setPreview(data){
let ratio = this.frontBack.body.layersObject[0].imageSize[0]/this.frontBack.body.style.width.replace(/px/g,'')
let designItemDetail = this.store.state.DesignDetailModule.designItemDetail
@@ -389,120 +395,15 @@ export default defineComponent({
i.layersObject = item.layersObject
}
})
// data.designSingleItemDTOList.front.forEach((i)=>{
// if(item.type === i.type){
// // item.position = [
// // item.position[0] += left,
// // item.position[1] += top
// // ]
// console.log(item.position,left ,top);
// i.layersObject = item.layersObject
// }
// })
})
this.$emit('setDesignCoverage');
this.store.commit("setDesignItemDetail", designItemDetail);
// let designCollectionList = this.store.state.HomeStoreModule.designCollectionList
// let likeDesignCollectionList = this.store.state.HomeStoreModule.likeDesignCollectionList
// designCollectionList.forEach((item) => {
// if(item.designItemId == rv.designItemId){
// item.designOutfitUrl = rv.designItemUrl
// }
// });
// likeDesignCollectionList.forEach((item) => {
// if(item.designItemId == rv.designItemId){
// item.designOutfitUrl = rv.designItemUrl
// }
// });
// this.store.commit('setDesignCollectionList',designCollectionList)
// this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
}
).catch(res=>{
this.loadingShow = false
});
//顺序不能乱
// let arr = [...this.frontBack.front,...this.frontBack.back,...this.frontBack.body.layersObject]
// let layers=[]
// let num = 0
// let front = this.frontBack.back.length+2
// let back = this.frontBack.back.length-1
// let str
// arr.forEach(item => {
// let obj
// if(item.imageCategory == 'body'){
// obj = item
// obj.priority = this.frontBack.back.length+1
// }else{
// str = str?str:item?.imageCategory.split('_')[0]
// obj = {
// id:item.id,
// imageCategory:item.imageCategory,
// scale:item?.imageSize?Number(((item?.style?.width.replace(/px/g,'')*ratio)/item?.imageSize[0]).toFixed(2)):1,
// position:[Number((item?.style?.top?.replace(/px/g,'')*ratio).toFixed(0)),Number((item?.style?.left?.replace(/px/g,'')*ratio).toFixed(0))],
// imageSize: item.imageSize,
// priority:item.style.zIndex,
// }
// if(item?.imageCategory?.indexOf("front") == -1){
// // if(str == item?.imageCategory.split('_')[0])
// if(str == item?.imageCategory.split('_')[0]){
// num = 0
// back = this.frontBack.back.length-1
// }else{
// num = 1
// back++
// }
// obj.scale = layers[num].scale
// obj.position = layers[num].position
// obj.imageSize = layers[num].imageSize
// obj.priority = back
// }else{
// obj.priority = front++
// }
// }
// obj.imageUrl = item.imageMinioUrl
// obj.maskUrl = item.maskMinioUrl
// layers.push(obj)
// });
// console.log(layers);
// let data = {
// layers:{
// designItemId:designItemDetail.designItemId,
// designItemUrl:designItemDetail.designItemUrl,
// layers:layers
// },
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
// }
// this.loadingShow = true
// Https.axiosPost(Https.httpUrls.designSingle, data).then(
// (rv) => {
// // let top,bottom
// // let desingStr0 = designItemDetail.clothes[0].type
// // let desingStr1 = designItemDetail.clothes[1].type
// // rv.layers.forEach((item)=>{
// // let str = this.capitalizeFirstLetter(item.imageCategory)
// // if(str.split('_')[0] == desingStr0){
// // top.push(item)
// // }else if(str.split('_')[0] == desingStr1){
// // bottom.push(item)
// // }
// // })
// // console.log(rv,designItemDetail);
// // designItemDetail.clothes[0]
// // designItemDetail.clothes.forEach((item)=>{
// // if(item.type == desingStr0){
// // item.layersObject = top
// // }else if(item.type == desingStr1){
// // item.layersObject = bottom
// // }
// // })
// // this.store.commit("setDesignItemDetail", designItemDetail);
// this.loadingShow = false
// }
// ).catch(res=>{
// this.loadingShow = false
// });
},
},
});
@@ -542,6 +443,7 @@ export default defineComponent({
justify-content: space-between;
position: relative;
user-select:none;
z-index: 2;
position: relative;
&.active{
flex-direction: row;
@@ -675,5 +577,10 @@ export default defineComponent({
position: relative;
}
}
.designOpenrtion_imgMask_open{
position: absolute;
width: 100%;
height: 100%;
}
}
</style>