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

68
src/component/Detail/setDesignItemMobile.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"
@@ -200,6 +205,7 @@ 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){
@@ -207,6 +213,7 @@ export default defineComponent({
this.frontBack.front.forEach((v)=>{
v.designOpenrtionBtn = false
})
this.clothesOpenActive(index)
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++
@@ -339,6 +346,17 @@ 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
},
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
@@ -347,11 +365,16 @@ 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 = JSON.parse(JSON.stringify(this.frontBack.front))
arr.sort((a, b) => {
var a_num = a.style.zIndex;
var b_num = b.style.zIndex;
return a_num - b_num;
});
let num = 10
arr.forEach((item)=>{
item.priority = num++
})
data.designSingleItemDTOList.forEach((item)=>{
let front = this.frontBack.front
let imageCategory1 = front[1].imageCategory
@@ -365,6 +388,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)]
}
})
@@ -453,6 +477,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{