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

detail页面调整

Browse Source
This commit is contained in:
X1627315083
2025-02-17 09:34:28 +08:00
parent 69b6a9512f
commit 2ecff5c060
29 changed files with 2900 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

400
src/component/DetailCopy/model/modelPosition.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="molepositon">
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.style">
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
</div>
<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
<img class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
<img :src="item.imageUrl" alt="">
</div>
@@ -14,10 +14,12 @@
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
</ul>
</div>
</div>
<div class="designOpenrtion_imgMask" v-else>
<img src="" alt="">
</div>
</div>
</template>
<script lang="ts">
@@ -28,39 +30,45 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import { getMousePosition } from "@/tool/mdEvent";
import newFollowVue from '@/component/Account/message/newFollow.vue';
export default defineComponent({
components:{
},
setup(props,{emit}) {
const store = useStore();
const detailData = reactive({
frontBack:{
front:{},
back:{},
body:{},
},
frontBackc:store.state.DesignDetailModule.designItemDetail,
designDetail:store.state.DesignDetailCopy.designDetail,
frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
})
const selectItem = reactive({
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
imgDomIndex:-1,
printZIndex:store.state.DesignDetailCopy.printZIndex,
imgDom:null as any,
direction:'',
})
watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
if(newValue.id == oldValue?.id)return
selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
})
const getDetailListDom = reactive({
libraryList:null as any,
})
//设置尺寸
const itemSizeMousedown = (direction:any,event:any)=>{
// this.direction = direction
// this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
// this.frontBack.front[this.imgDomIndex].designOpenrtionBtn = true
// let imgDomWH = this.imgDom.getBoundingClientRect()
// let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
// if(this.direction == 'right' || this.direction == 'bottom'){
// this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
// this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
// }else{
// this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
// this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
// }
selectItem.direction = direction
selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
detailData.frontBack.front[selectItem.imgDomIndex].designOpenrtionBtn = true
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
let li = (document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_btn_top")[0] as any).offsetWidth/2
if(selectItem.direction == 'right' || selectItem.direction == 'bottom'){
detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
}else{
detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
document.addEventListener('mousemove', sizeMouseMove);
document.addEventListener('touchmove', sizeTouchmove);
@@ -76,60 +84,60 @@ export default defineComponent({
sizeMouseMoveOperation(e)
}
const sizeMouseup = (e:any)=>{
// this.frontBack.front[this.imgDomIndex].style={
// right:'auto',
// left:this.imgDom.offsetLeft+'px',
// bottom:'auto',
// top:this.imgDom.offsetTop+'px',
// height:this.imgDom.offsetHeight+'px',
// width:this.imgDom.offsetWidth+'px',
// zIndex:this.printZIndex
// }
// this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
detailData.frontBack.front[selectItem.imgDomIndex].style={
right:'auto',
left:selectItem.imgDom.offsetLeft+'px',
bottom:'auto',
top:selectItem.imgDom.offsetTop+'px',
height:selectItem.imgDom.offsetHeight+'px',
width:selectItem.imgDom.offsetWidth+'px',
zIndex:selectItem.printZIndex
}
detailData.frontBack.back[selectItem.imgDomIndex].style.zIndex = selectItem.printZIndex
document.removeEventListener('mousemove',sizeMouseMove)
document.removeEventListener('touchmove',sizeTouchmove)
document.removeEventListener('mouseup',sizeMouseup)
document.removeEventListener('touchend',sizeMouseup)
}
const sizeMouseMoveOperation = (e:any)=> {
// let imgDomWH = this.imgDom.getBoundingClientRect()
// let parentNode =this.imgDom.parentNode
// let width = imgDomWH.width
// let height = imgDomWH.height
// let w,h
// let num = height/width
// //判断移动四个边
// if(this.direction == 'right'){
// w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)
// h = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
// width = w+'px'
// // height = w*num+'px'
// }else if(this.direction == 'top'){
// num = width/height
// this.frontBack.front[this.imgDomIndex].style.top = 'auto'
// // this.printStyleList[this.imgDomIndex].style.left = 'auto'
// this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
// w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
// h = (this.frontBack.front[this.imgDomIndex].centers.top - e.clientY)
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
let parentNode =selectItem.imgDom.parentNode
let width = imgDomWH.width
let height = imgDomWH.height
let w,h
let num = height/width
//判断移动四个边
if(selectItem.direction == 'right'){
w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)
h = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
width = w+'px'
// height = w*num+'px'
}else if(selectItem.direction == 'top'){
num = width/height
detailData.frontBack.front[selectItem.imgDomIndex].style.top = 'auto'
// this.printStyleList[selectItem.imgDomIndex].style.left = 'auto'
detailData.frontBack.front[selectItem.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - selectItem.imgDom.offsetTop+'px'
w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
h = (detailData.frontBack.front[selectItem.imgDomIndex].centers.top - e.clientY)
// height = h+'px'
// // width = h*num+'px'
// }else if(this.direction == 'bottom'){
// num = width/height
// h = (e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)
// height = h+'px'
// // width = h*num+'px'
// }else if(this.direction == 'left'){
// this.frontBack.front[this.imgDomIndex].style.left = 'auto'
// this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
// w = (this.frontBack.front[this.imgDomIndex].centers.left - e.clientX)
height = h+'px'
// width = h*num+'px'
}else if(selectItem.direction == 'bottom'){
num = width/height
h = (e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)
height = h+'px'
// width = h*num+'px'
}else if(selectItem.direction == 'left'){
detailData.frontBack.front[selectItem.imgDomIndex].style.left = 'auto'
detailData.frontBack.front[selectItem.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - selectItem.imgDom.offsetLeft+'px'
w = (detailData.frontBack.front[selectItem.imgDomIndex].centers.left - e.clientX)
// width = w+'px'
// // height = w*num+'px'
// }
// //判断尺寸是否到边
// this.frontBack.front[this.imgDomIndex].style.width = width
// this.frontBack.front[this.imgDomIndex].style.height = height
width = w+'px'
// height = w*num+'px'
}
//判断尺寸是否到边
detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
}
// 设置移动
const mouseMove = (event:any)=>{
@@ -147,52 +155,140 @@ export default defineComponent({
document.removeEventListener('touchend',mouseup)
}
const mouseMoveOperation = (e:any)=>{
// let imgDomWH = this.imgDom.getBoundingClientRect()
// let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
// let x = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
// let y = ( e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
// this.frontBack.front[this.imgDomIndex].style.left = x
// this.frontBack.front[this.imgDomIndex].style.top = y
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let x = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)+'px'
let y = ( e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)+'px'
detailData.frontBack.front[selectItem.imgDomIndex].style.left = x
detailData.frontBack.front[selectItem.imgDomIndex].style.top = y
}
const itemMoveMousedown = (index:any,e:any)=>{
// this.imgDomIndex = index
// this.frontBack.front.forEach((v)=>{
// v.designOpenrtionBtn = false
const clothesOpenActive = (index:number)=>{
// this.designItemDetail.clothes.forEach((item)=>{
// item.clothesOpenItem = 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++
// this.frontBack.back[index].style.zIndex = this.printZIndex
// let imgDomWH = this.imgDom.getBoundingClientRect()
// let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
// let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
// this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
// this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
// if(index != -1){
// this.designItemDetail.clothes[index].clothesOpenItem = true
// }
}
const itemMoveMousedown = (index:any,e:any)=>{
store.commit('DesignDetailCopy/setDesignColthes',detailData.frontBack.front[index].id)
selectItem.imgDomIndex = index
detailData.frontBack.front.forEach((v:any)=>{
v.designOpenrtionBtn = false
})
clothesOpenActive(index)
let event = e||window.event
selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
detailData.frontBack.front[index].designOpenrtionBtn = true
detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
let left = Number(detailData.frontBack.front[index].style.left.replace(/px/g,''))
let top = Number(detailData.frontBack.front[index].style.top.replace(/px/g,''))
detailData.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
detailData.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
}
const showDesignImgDetail = ()=>{
const sort = (arr:any)=>{
arr.sort((a:any, b:any) => {
var a_num = a.style.zIndex;
var b_num = b.style.zIndex;
return a_num - b_num;
});
return arr
}
const getSubmitData = (value:any)=>{
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width
let arr:any = sort(detailData.frontBack.front)
// let arr:any = sort(JSON.parse(JSON.stringify(detailData.frontBack.front)))
let num = 10
arr.forEach((item:any)=>{
item.priority = num++
})
let data:any = {
scale:[],
offset:[],
priority:-1,
maskUrl:'',
maskMinioUrl:'',
}
for (let index = 0; index < arr.length; index++) {
if(value.id == arr[index].id){
let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[0])
let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[1])
let scaleWidth = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale[0])).toFixed(2)):1
let scaleHeight = arr[index]?.imageSize?Number(((arr[index]?.style?.height.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[1]/arr[index].scale[1])).toFixed(2)):1
// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)
data.scale = [scaleWidth,scaleHeight]
let top = y == 0 ? value.layersObject[0].offset[1]:y+value.layersObject[0].offset[1]
let left = x == 0 ? value.layersObject[0].offset[0]:x+value.layersObject[0].offset[0]
data.offset = [left,top]
data.maskUrl = arr[index].maskUrl
data.maskMinioUrl = arr[index].maskMinioUrl
// data.priority = arr[index].style.zIndex
data.priority = arr[index].priority
arr[index].similarity = true
// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
break
}
}
return data
}
const deleteNav = ()=>{
}
const setpitch = (item:any,index:any)=>{
detailData.frontBack.front.forEach((v:any)=>{
v.designOpenrtionBtn = false
})
detailData.frontBack.front[index].designOpenrtionBtn = true
detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
clothesOpenActive(index)
}
return{
...toRefs(detailData),
...toRefs(getDetailListDom),
itemSizeMousedown,
itemMoveMousedown,
showDesignImgDetail,
deleteNav,
setpitch,
getSubmitData,
getMousePosition,
}
},
directives:{
detailBody:{
mounted (el,data:any) {
let sacle = 0
const img = new Image();
img.onload = () => {
// resolve(img)
sacle = el.parentNode.offsetWidth / img.width
data.instance.frontBack.front.forEach((item:any,index:number) => {
for (const key in item.style) {
if(key == 'zIndex')return
item.style[key] = item.style[key]*sacle+'px'
}
for (const key in data.instance.frontBack.back[index].style) {
if(key == 'zIndex')return
data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key]*sacle+'px'
}
});
console.log(el.parentNode.offsetWidth);
};
img.src = data.value;
}
}
},
provide() {
return {
}
@@ -202,27 +298,133 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.molepositon{
width: 80rem;
height: 100%;
width: 30rem;
height: 80rem;
display: flex;
flex-direction: column;
// margin: auto 0;
padding-top: 3rem;
> .designOpenrtion_imgMask{
width: auto;
height: auto;
position: relative;
height: calc(100% - 1.2rem - 4.8rem - 20%);
height: 100%;
// overflow: hidden;
>img{
z-index: 2;
position: relative;
width: 100%;
// height: 100%;
object-fit: contain;
}
>div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.detail_modal_item_front,.designOpenrtion_print{
z-index: 2;
img{
width: 100%;
height: 100%;
float: left;
user-select:none;
-webkit-user-drag: none;
}
.modal_imgItem{
position: absolute;
overflow: hidden;
top: 0;
}
}
.designOpenrtion_print{
z-index: 1 !important;
}
> .designOpenrtion_btn{
z-index: 9999;
ul{
list-style: none;
// width: 100%;
// height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: 2px solid rgb(20, 188, 255);
padding: 0;
-webkit-user-drag: none;
user-select:none;
opacity: 0;
margin: 0;
li{
cursor: pointer;
// border-radius: 50%;
width: calc(2rem*1.2);
height: calc(2rem*1.2);
background-color: rgb(20, 188, 255);
position: absolute;
pointer-events: none;
}
&.active{
opacity: 1;
z-index: 999 !important;
li{
pointer-events: auto;
}
}
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
left: 50%;
transform: translate(-50%,-50%) ;
cursor: n-resize;
}
.designOpenrtion_btn_top{
top: 0;
}
.designOpenrtion_btn_bottom{
top: 100%;
}
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
top: 50%;
transform: translate(-50%,-50%) ;
cursor: e-resize;
}
.designOpenrtion_btn_left{
left: 0;
}
.designOpenrtion_btn_right{
left: 100%;
}
.designOpenrtion_rotote{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 0;
height: 0;
}
.designOpenrtion_rotote::after{
position: absolute;
content: "";
background-color: #14bcff;
width: 2px;
height: 30px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
.designOpenrtion_rotote::before{
position: absolute;
content: "";
background-color: #14bcff;
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: calc(1.5rem*1.2);
height: calc(1.5rem*1.2);
border-radius: 50%;
}
}
}
}
}
</style>