aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增 删除 衣服

Browse Source
This commit is contained in:
X1627315083
2023-12-13 16:09:17 +08:00
parent e6c8fe3866
commit a0a8ab9a17
27 changed files with 608 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/component/Detail/setDesignItem.vue
View File

@@ -1,6 +1,11 @@
<template>
<div class="design_compile_content" id="design_compile_content">
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
<div class="detail_modal_body_nav">
<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:item.clothesOpen}" @click="clothesOpen(index)">
<img :src="item?.path" alt="">
</div>
</div>
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
<!-- <div
v-for="item,index in frontBack.back"
@@ -77,7 +82,7 @@ export default defineComponent({
]);
let direction = ref('')
let imgDom = ref()
let imgDomIndex = ref(0)
let imgDomIndex = ref(2)
let frontBack = ref({})
return {
designItemDetail,
@@ -156,13 +161,20 @@ export default defineComponent({
v.layersObject[i].designOpenrtionBtn = false
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
front[index] = v.layersObject[i]
front[index].style.zIndex = frontIndex-=1
front[index].style.zIndex = v.priority
front[index].id = v.id
}else{
back[index] = v.layersObject[i]
back[index].style.zIndex = backIndex-=1
back[index].style.zIndex = v.priority
back[index].id = v.id
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
}
if(this.printZIndex < v.priority){
this.printZIndex = v.priority
}
}
this.printZIndex++
})
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
@@ -200,13 +212,16 @@ export default defineComponent({
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
this.frontBack.back[index].style.zIndex = this.printZIndex
this.clothesOpenActive(index)
},
// 设置移动
itemMoveMousedown(index,event){
itemMoveMousedown(index,e){
this.imgDomIndex = index
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.clothesOpenActive(index)
let event = e||window.event
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
this.frontBack.front[index].designOpenrtionBtn = true
this.frontBack.front[index].style.zIndex = this.printZIndex++
@@ -337,6 +352,25 @@ export default defineComponent({
item.designOpenrtionBtn = false
})
},
clothesOpen(index){
this.imgDomIndex = index
this.clothesOpenActive(index)
this.setpitch('',index)
},
clothesOpenActive(index){
this.designItemDetail.clothes.forEach((item)=>{
item.clothesOpen = false
})
this.designItemDetail.clothes[index].clothesOpen = true
},
sort(arr){
arr.sort((a, b) => {
var a_num = a.style.zIndex;
var b_num = b.style.zIndex;
return a_num - b_num;
});
return arr
},
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
@@ -345,17 +379,19 @@ export default defineComponent({
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
// this.frontBack.front.sort((a, b) => {
// var a_num = a.style.zIndex;
// var b_num = b.style.zIndex;
// return a_num - b_num;
// });
let arr = this.sort(JSON.parse(JSON.stringify(this.frontBack.front)))
let num = 10
arr.forEach((item)=>{
item.priority = num++
})
data.designSingleItemDTOList.forEach((item)=>{
let front = this.frontBack.front
let imageCategory1 = front[1].imageCategory
front.forEach((i)=>{
let front = arr
let imageCategory1 = arr[1].imageCategory
arr.forEach((i)=>{
let imageCategory = i.imageCategory.split('_')[0]
if(item.type == this.capitalizeFirstLetter(imageCategory)){
if(item.id == i.id){
let y = ((i?.style?.top.replace(/px/g,'')*ratio).toFixed(0) - i?.position[0])
let x = ((i?.style?.left.replace(/px/g,'')*ratio).toFixed(0) - i?.position[1])
let scale = i?.imageSize?Number(((i?.style?.width.replace(/px/g,'')*ratio)/(i?.imageSize[0]/i.scale)).toFixed(2)):1
@@ -363,6 +399,7 @@ export default defineComponent({
let top = y == 0 ? item.offset[1]:y+item.offset[1]
let left = x == 0 ? item.offset[0]:x+item.offset[0]
item.offset = [left,top]
item.priority = i.priority
// item.offset = [(i?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
}
})
@@ -379,11 +416,14 @@ export default defineComponent({
designItemDetail.currentFullBodyView = rv.currentFullBodyView
rv.clothes.forEach((item)=>{
designItemDetail.clothes.forEach((i)=>{
if(item.type === i.type){
if(item.id === i.id){
i.layersObject = item.layersObject
i.priority = item.layersObject[0].priority
console.log(item,i);
}
})
})
console.log(designItemDetail,'============================');
this.$emit('setDesignCoverage');
this.store.commit("setDesignItemDetail", designItemDetail);
this.setRevocation(designItemDetail,data)
@@ -451,6 +491,40 @@ export default defineComponent({
top: 0;
}
}
.detail_modal_body_nav{
display: flex;
position: relative;
top: 0;
left: 50%;
z-index: 999;
transform: translate(-50%,-0%);
transition: all .3s;
justify-content: center;
margin-bottom: 1rem;
>div{
width: 4rem;
height: 4rem;
cursor: pointer;
text-align: center;
margin-left: .3rem;
img{
// width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
}
&.active{
border: 2px solid rgba(0,0,0,0.4);
img{
transform: scale(.8);
opacity: .8;
}
}
}
>div:nth-child(1){
margin-left: 0rem;
}
}
.designOpenrtion_print,.detail_modal_item_front{
z-index: 1;
img{