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

fix

Browse Source
This commit is contained in:
X1627315083
2024-09-06 13:48:16 +08:00
parent 4301c4051a
commit 4e2d3d672c
7 changed files with 388 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/component/Detail/DesignDetail.vue
View File

@@ -152,8 +152,8 @@
<div class="design_detail_perview_content" >
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
<setDesignItem v-if="!moible" ref="setDesignItem" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
<setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile>
<setDesignItem ref="setDesignItem" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
<!-- <setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile> -->
</div>
</div>
@@ -179,7 +179,6 @@ import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide";
import GO from '@/tool/GO';
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
import { useI18n } from 'vue-i18n'
import addDetails from '@/component/Detail/addDetails.vue'
@@ -463,7 +462,8 @@ export default defineComponent({
DesignDetailAlter.terminate()
// this.designItemDetail = {}
this.frontBack = {}
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
let setDesignItem:any = this.$refs.setDesignItem
// let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
setDesignItem.clear()
}
@@ -471,7 +471,7 @@ export default defineComponent({
}else{
this.designShowPrview = 1;
this.frontBack = {}
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
let setDesignItem:any = this.$refs.setDesignItem
setDesignItem.clear()
// this.designItemDetailUrl = {}
}
@@ -794,7 +794,7 @@ export default defineComponent({
return data
},
async setSubmit(str:any){
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
let setDesignItem:any = this.$refs.setDesignItem
let data = this.setSubmitItem(str,true)
this.loadingShow = true
await setDesignItem.setPreview(data)
@@ -895,7 +895,7 @@ export default defineComponent({
showDesignImgDetail(num:any){
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
this.designShowPrview = num
let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
let setDesignItem:any = this.$refs.setDesignItem
if(this.designShowPrview == 3){
setDesignItem.setImgSize()
}else if(this.designShowPrview == 2){

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

@@ -19,19 +19,19 @@
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
</div> -->
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].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 || ''" :key="designItemDetail.designItemUrl">
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="item.style">
<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>
<div class="designOpenrtion_btn">
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('top',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('left',getMousePosition($event,true))"></li>
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('right',getMousePosition($event,true))"></li>
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
</ul>
</div>
@@ -54,7 +54,7 @@ import { useStore } from "vuex";
// import { Modal,message } from 'ant-design-vue';
import { Https } from "@/tool/https";
import editFrontBack from '@/component/Detail/editFrontBack.vue'
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
// props: ["frontBack"],
emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
@@ -108,6 +108,7 @@ export default defineComponent({
setRevocation,
frontBackOld,
editFrontBack,
getMousePosition,
};
},
data() {
@@ -273,8 +274,12 @@ export default defineComponent({
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
document.addEventListener("mouseup", this.mouseup);
document.addEventListener("mousemove", this.moveMousemove);
// document.addEventListener("mouseup", this.mouseup);
// document.addEventListener("mousemove", this.moveMousemove);
document.addEventListener('mousemove', this.mouseMove);
document.addEventListener('touchmove', this.touchmove);
document.addEventListener('mouseup', this.mouseup);
document.addEventListener('touchend', this.mouseup);
},
//设置尺寸
itemSizeMousedown(direction,event){
@@ -291,15 +296,25 @@ export default defineComponent({
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
}
document.addEventListener("mouseup", this.sizeMouseup);
document.addEventListener("mousemove", this.sizeMousemove);
document.addEventListener('mousemove', this.sizeMouseMove);
document.addEventListener('touchmove', this.sizeTouchmove);
document.addEventListener('mouseup', this.sizeMouseup);
document.addEventListener('touchend', this.sizeMouseup);
},
mouseMove(event){
let e = getMousePosition(event,false)
this.mouseMoveOperation(e)
},
touchmove(event){
let e = getMousePosition(event,true)
this.mouseMoveOperation(e)
},
//鼠标移动
moveMousemove(e) {
mouseMoveOperation(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
let x = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
let y = ( e.y - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
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
// if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
@@ -315,8 +330,15 @@ export default defineComponent({
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
// }
},
sizeMousemove(e) {
sizeMouseMove(event){
let e = getMousePosition(event,false)
this.sizeMouseMoveOperation(e)
},
sizeTouchmove(event){
let e = getMousePosition(event,true)
this.sizeMouseMoveOperation(e)
},
sizeMouseMoveOperation(e) {
let imgDomWH = this.imgDom.getBoundingClientRect()
let parentNode =this.imgDom.parentNode
let width = imgDomWH.width
@@ -325,8 +347,8 @@ export default defineComponent({
let num = height/width
//判断移动四个边
if(this.direction == 'right'){
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
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'){
@@ -334,20 +356,20 @@ export default defineComponent({
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.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.y)
w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.clientY)
height = h+'px'
// width = h*num+'px'
}else if(this.direction == 'bottom'){
num = width/height
h = (e.y - this.frontBack.front[this.imgDomIndex].centers.top)
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.x)
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.clientX)
width = w+'px'
// height = w*num+'px'
@@ -369,13 +391,19 @@ export default defineComponent({
zIndex:this.printZIndex
}
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
document.removeEventListener("mouseup", this.sizeMouseup);
document.removeEventListener("mousemove", this.sizeMousemove);
document.removeEventListener('mousemove',this.sizeMouseMove)
document.removeEventListener('touchmove',this.sizeTouchmove)
document.removeEventListener('mouseup',this.sizeMouseup)
document.removeEventListener('touchend',this.sizeMouseup)
},
mouseup(e) {
document.removeEventListener("mouseup", this.mouseup);
document.removeEventListener("mousemove", this.moveMousemove);
// document.removeEventListener("mouseup", this.mouseup);
// document.removeEventListener("mousemove", this.moveMousemove);
document.removeEventListener('mousemove',this.mouseMove)
document.removeEventListener('touchmove',this.touchmove)
document.removeEventListener('mouseup',this.mouseup)
document.removeEventListener('touchend',this.mouseup)
},
clearModal(){
this.printZIndex = 2//点击图片z-index