fix
This commit is contained in:
X1627315083
@@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="designDetailModal">
|
||||
<!-- designDetailShow -->
|
||||
<a-modal class="design_detail_modal_component Guide_1_18"
|
||||
:class="[driver__.driver?'hideEvents':'']"
|
||||
<!-- :class="[driver__.driver?'hideEvents':'']" -->
|
||||
<a-modal class="design_detail_modal_component Guide_1_18 generalModel"
|
||||
v-model:visible="designDetailShow"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.designDetailModal"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -15,8 +16,15 @@
|
||||
<div>{{ $t('DesignDetail.Details') }}</div>
|
||||
<div class="modal_title_text_intro">{{ $t('DesignDetail.EditDetails') }}</div>
|
||||
</div>
|
||||
<div class="design_closeIcon" @click.stop="closeModal('')">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="closeModal('')">
|
||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="turn_button turn_left_button" v-show="designShowPrview == 1" @click="changeDesignItem('last')"><span class="icon iconfont icon_turn icon-shangyibu"></span></div>
|
||||
<div class="turn_button turn_right_button" v-show="designShowPrview == 1" @click="changeDesignItem('next')"><span class="icon iconfont icon_turn icon-xiayibu"></span></div>
|
||||
@@ -153,7 +161,6 @@
|
||||
<div class="design_detail_perview_content" >
|
||||
<!-- <div class="generate_button" v-show="designItemDetail.singleOverall == 'overall'" @click="generateHighDesign()">Generate Product lmage</div> -->
|
||||
<setDesignItem ref="setDesignItem" :isBody="body" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItem>
|
||||
<!-- <setDesignItemMobile v-else ref="setDesignItemMobile" @setParentLoadingShow=setParentLoadingShow @setDesignCoverage="setDesignCoverage" @setSubmit="setSubmit"></setDesignItemMobile> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -171,7 +178,6 @@ import DesignDetailAlter from '@/component/Detail/DesignDetailAlter.vue'
|
||||
import magnifyingGlass from '@/component/Detail/magnifyingGlass.vue'
|
||||
import setDesignItem from '@/component/Detail/setDesignItem.vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import setDesignItemMobile from '@/component/Detail/setDesignItemMobile.vue'
|
||||
import Draggable from 'vuedraggable'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
@@ -188,7 +194,6 @@ export default defineComponent({
|
||||
DesignDetailAlter,
|
||||
setDesignItem,
|
||||
magnifyingGlass,
|
||||
setDesignItemMobile,
|
||||
addDetails,
|
||||
},
|
||||
setup() {
|
||||
@@ -463,7 +468,6 @@ export default defineComponent({
|
||||
// this.designItemDetail = {}
|
||||
this.frontBack = {}
|
||||
let setDesignItem:any = this.$refs.setDesignItem
|
||||
// let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
|
||||
setDesignItem.clear()
|
||||
}
|
||||
|
||||
@@ -1165,26 +1169,25 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.design_detail_modal_component{
|
||||
<style lang="less" scoped>
|
||||
:deep(.design_detail_modal_component){
|
||||
color: #000;
|
||||
// max-width: 1440px ;
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: calc(1rem*1.2);
|
||||
>.ant-modal-content{
|
||||
// overflow: hidden;
|
||||
.ant-modal-header{
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
}
|
||||
.ant-modal-body{
|
||||
>.ant-modal-body{
|
||||
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||
// height: calc(65vh - 6.4rem*1.2));
|
||||
height: calc(65rem*1.2);
|
||||
display: flex;
|
||||
overflow-y: hidden;
|
||||
// overflow-y: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@@ -1725,10 +1728,5 @@ export default defineComponent({
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.design_detail_modal_component{
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -110,7 +110,6 @@ import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { Sketch} from '@ans1998/vue3-color'
|
||||
import DesignPrintOperation from './DesignPrintOperation.vue';
|
||||
import DesignPrintOperationMobile from './DesignPrintOperationMobile.vue';
|
||||
import DesignElementsOperation from './DesignElements.vue';
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
@@ -121,7 +120,7 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
|
||||
export default defineComponent({
|
||||
props: ["msg"],
|
||||
components:{
|
||||
Draggable,Sketch,DesignPrintOperation,DesignPrintOperationMobile,
|
||||
Draggable,Sketch,DesignPrintOperation,
|
||||
DesignElementsOperation,sketchCategory
|
||||
},
|
||||
setup(prop) {
|
||||
@@ -262,7 +261,6 @@ export default defineComponent({
|
||||
setPrint(){
|
||||
// if(this.current?.printObject?.prints?.[0]?.path){
|
||||
let DesignPrintOperation = this.$refs.DesignPrintOperation
|
||||
// let DesignPrintOperation = isMoible() ? this.$refs.DesignPrintOperationMobile : this.$refs.DesignPrintOperation
|
||||
DesignPrintOperation.init()
|
||||
if(this.driver__.driver){
|
||||
nextTick().then(()=>{
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="designElementsModal">
|
||||
<a-modal
|
||||
class="designElements_modal"
|
||||
class="designElements_modal generalModel"
|
||||
v-model:visible="designElements"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.designElementsModal"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -15,8 +16,15 @@
|
||||
<div class="design_title_text">
|
||||
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
|
||||
</div>
|
||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="closeModal()">
|
||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designElements_open">
|
||||
<!-- -->
|
||||
@@ -678,7 +686,7 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.designElements_modal {
|
||||
// max-width: 1440px;
|
||||
user-select: none; /* 对现代浏览器有效 */
|
||||
|
||||
@@ -1,925 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-modal
|
||||
class="designElementsMobile_modal"
|
||||
v-model:visible="designElements"
|
||||
:footer="null"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:keyboard="false"
|
||||
:mask="true"
|
||||
>
|
||||
<div class="designElementsMobile_content">
|
||||
<div class="design_title_text">
|
||||
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
|
||||
</div>
|
||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
<div class="designElementsMobile_open">
|
||||
<!-- -->
|
||||
<div class="print_right">
|
||||
<div class="print_right show_print_right ">
|
||||
<div @click="random" class="button_second">{{ $t('DesignPrintOperation.Random') }}</div>
|
||||
<div class="designElementsMobile_nav">
|
||||
<div class="designElementsMobile_single" v-for="item,index in designElementsList" :key="item">
|
||||
<img :src="item.path" @click="setpitch(item,index)">
|
||||
</div>
|
||||
<div class="designElementsMobile_single" v-for="item,index in designSelectElementsList" :key="item">
|
||||
<img :src="item.path" @click="setpitch(item,index)">
|
||||
</div>
|
||||
</div>
|
||||
<div class="subitOkPreviewBtn" @click.stop="setPreview">{{ $t('DesignPrintOperation.preview') }}</div>
|
||||
<div class="subitOkPreviewBtn _1" @click.stop="setOK">OK</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designElementsMobile_centent" id="designElementsCentent">
|
||||
<div class="designElementsMobile_imgMask">
|
||||
<div class="designElementsMobile_print">
|
||||
<div
|
||||
v-for="item,index in exhibitionElementsList"
|
||||
:key="item"
|
||||
:style="[printStyleList?.[index]?.style]"
|
||||
@touchstart.passive="itemMoveMousedown(index,$event)"
|
||||
class="modal_imgItem"
|
||||
ref="content" >
|
||||
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElementsMobile_imgItme" draggable="false">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <img :src="current?.path" alt="" class="designElementsMobile_sketch"> -->
|
||||
<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElementsMobile_sketch">
|
||||
<div class="designElementsMobile_btn">
|
||||
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
|
||||
<li class="designElementsMobile_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designElementsMobile_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designElementsMobile_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designElementsMobile_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
|
||||
<li class="designElementsMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
|
||||
<li class="designElementsMobile_delete" @click="deletePrint">
|
||||
<img src="../../assets/images/homePage/cuowu.svg" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designElementsMobile_right">
|
||||
<div class="designElementsMobile_entirety_img">
|
||||
<img :src="currentFullBodyView" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
|
||||
// import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { useStore } from "vuex";
|
||||
import { openGuide,driverObj__ } from "@/tool/guide";
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from "vue-i18n";
|
||||
export default defineComponent({
|
||||
|
||||
setup(prop) {
|
||||
let designElements = ref(false);
|
||||
let designSelectElementsList = ref([])//新增的元素
|
||||
let designElementsList = ref([])//已经存在的元素
|
||||
let exhibitionElementsList = ref([])//展示的元素
|
||||
let setOkData = ref([])
|
||||
let current = inject('current')//父组件传过来的数据
|
||||
let driver__ = inject('driver__')
|
||||
let setRevocation = inject('setRevocation')//父组件传过来的数据
|
||||
let printZIndex = ref(2)//印花优先级
|
||||
let printStyleList = ref([]);
|
||||
let currentPrintStyleList = {
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
},
|
||||
style:{
|
||||
left:0+"px",
|
||||
top:0+"px",
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:'auto',
|
||||
height:'auto',
|
||||
zIndex:1,
|
||||
},
|
||||
transform:{
|
||||
scale:1,
|
||||
rotateZ:0,
|
||||
},
|
||||
designElementsBtn:false
|
||||
}
|
||||
let direction = ref('')
|
||||
let imgDom = ref()
|
||||
let imgDomIndex = ref(0)
|
||||
let print = ref({
|
||||
width:'',
|
||||
height:''
|
||||
})
|
||||
let sketch = ref({
|
||||
width:'',
|
||||
height:''
|
||||
})
|
||||
let loadingShow = ref(false)
|
||||
let currentFullBodyView = ref('')
|
||||
let designItemDetailTS = ref({})
|
||||
let body = ref(false)
|
||||
let {t} = useI18n()
|
||||
return {
|
||||
designElements,
|
||||
designSelectElementsList,
|
||||
designElementsList,
|
||||
exhibitionElementsList,
|
||||
setOkData,
|
||||
current,
|
||||
driver__,
|
||||
printZIndex,
|
||||
printStyleList,
|
||||
currentPrintStyleList,
|
||||
direction,//判断点击的是li那个边
|
||||
imgDom,
|
||||
imgDomIndex,
|
||||
print,
|
||||
sketch,
|
||||
loadingShow,
|
||||
setRevocation,
|
||||
t,
|
||||
currentFullBodyView,
|
||||
designItemDetailTS,
|
||||
body,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
directives:{
|
||||
//操作旋转
|
||||
rotote:{
|
||||
mounted(el,value){
|
||||
|
||||
el.addEventListener('touchstart', (e) => {
|
||||
let elParent = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
|
||||
let mouse = true;
|
||||
let angle = 0
|
||||
let num = 1
|
||||
let x = 0
|
||||
let y = 0
|
||||
num = value.instance.printStyleList[value.instance.imgDomIndex].transform.scale
|
||||
angle = value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ
|
||||
// 添加鼠标按下事件监听器
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
e.stopPropagation()
|
||||
mouse = true;
|
||||
var info = el.getBoundingClientRect();
|
||||
let eX = info.x + info.width / 2;
|
||||
let eY = info.y + info.height / 2;
|
||||
let touchmove = (e) => {
|
||||
if (mouse) {
|
||||
let X = eX
|
||||
let Y = eY
|
||||
let x = e.targetTouches[0].clientX - X
|
||||
let y = Y - e.targetTouches[0].clientY
|
||||
angle = Math.atan2(x,y)*(180 / Math.PI)
|
||||
elParent.firstElementChild.style.transform = "rotateZ("+ angle + "deg)"
|
||||
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
|
||||
}
|
||||
}
|
||||
document.addEventListener('touchmove', touchmove,{passive:true});
|
||||
// 添加鼠标松开事件监听器
|
||||
let touchend = () => {
|
||||
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
|
||||
mouse = false;
|
||||
document.removeEventListener('touchend',touchend)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
}
|
||||
document.addEventListener('touchend', touchend);
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
this.currentFullBodyView = designItemDetail.currentFullBodyView? designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
|
||||
if(designItemDetail.others.length == 0){
|
||||
this.body = true
|
||||
}
|
||||
this.designElements = true
|
||||
this.clearModal()
|
||||
if(this.current.trims.prints)this.exhibitionElementsList = JSON.parse(JSON.stringify(this.current.trims.prints))
|
||||
if(this.$parent.exhibitionList.elements)this.designSelectElementsList = JSON.parse(JSON.stringify(this.$parent.exhibitionList.elements))
|
||||
if(this.$parent.elementsList)this.designElementsList = JSON.parse(JSON.stringify(this.$parent.elementsList))
|
||||
let skecth = new Image
|
||||
skecth.src = this.current.path
|
||||
skecth.onload=()=>{
|
||||
this.sketch.width = skecth.width/10+'rem'
|
||||
this.sketch.height = skecth.height/10+'rem'
|
||||
skecth.remove()
|
||||
}
|
||||
if(this.exhibitionElementsList.length > 0){
|
||||
this.exhibitionElementsList.forEach((item,index)=>{
|
||||
this.setTemplate(item,index)
|
||||
})
|
||||
}else{
|
||||
}
|
||||
},
|
||||
random(){
|
||||
if(this.printStyleList.length == 0)return
|
||||
this.printStyleList.forEach((v,index)=>{
|
||||
this.refetchTemplate(index)
|
||||
})
|
||||
},
|
||||
setPrintWH(url){
|
||||
let print = new Image
|
||||
return new Promise((resolve, reject) => {
|
||||
print.onload=()=>{
|
||||
this.print.width = print.width+'px'
|
||||
this.print.height = print.height+'px'
|
||||
resolve()
|
||||
print.remove()
|
||||
}
|
||||
print.src = url
|
||||
})
|
||||
},
|
||||
async setpitch(item,index){
|
||||
await this.setPrintWH(item.path)
|
||||
this.printStyleList.forEach((v)=>{
|
||||
v.designElementsBtn = false
|
||||
})
|
||||
this.currentPrintStyleList.url = item.url
|
||||
this.printStyleList.push(JSON.parse(JSON.stringify(this.currentPrintStyleList)))
|
||||
let currentIndex = this.printStyleList.length-1
|
||||
this.exhibitionElementsList.push({
|
||||
angle:0,
|
||||
designType:item.designType,
|
||||
minIOPath:item.minIOPath,
|
||||
path:item.path,
|
||||
priority:1,
|
||||
scale:1,
|
||||
location:[0,0]
|
||||
})
|
||||
this.refetchTemplate(currentIndex)
|
||||
},
|
||||
//设置移动
|
||||
itemMoveMousedown(index,event){
|
||||
this.imgDomIndex = index
|
||||
this.printStyleList.forEach((v)=>{
|
||||
v.designElementsBtn = false
|
||||
})
|
||||
this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
||||
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
this.printStyleList[index].designElementsBtn = true
|
||||
this.printStyleList[index].style.zIndex = this.printZIndex++
|
||||
this.printStyleList[index].transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ?rotateZ:0,
|
||||
}
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let left = Number(this.printStyleList[index].style.left.replace(/px/g,''))
|
||||
let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
|
||||
this.printStyleList[index].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
|
||||
this.printStyleList[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
|
||||
document.addEventListener("touchend", this.touchend);
|
||||
document.addEventListener("touchmove", this.moveMousemove);
|
||||
},
|
||||
//设置尺寸
|
||||
itemSizeMousedown(direction,event){
|
||||
this.direction = direction
|
||||
this.imgDom = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
||||
let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
|
||||
let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
|
||||
this.printStyleList[this.imgDomIndex].designElementsBtn = true
|
||||
this.printStyleList[this.imgDomIndex].transform = {
|
||||
scale:scale,
|
||||
rotateZ:rotateZ?rotateZ:0,
|
||||
}
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let li = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_btn_top")[0].offsetWidth/2
|
||||
if(this.direction == 'right' || this.direction == 'bottom'){
|
||||
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
|
||||
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
|
||||
}else{
|
||||
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
|
||||
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
|
||||
this.printStyleList[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
|
||||
this.printStyleList[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
|
||||
}
|
||||
document.addEventListener("touchend", this.sizeMouseup);
|
||||
document.addEventListener("touchmove", this.sizeMousemove);
|
||||
},
|
||||
//鼠标移动
|
||||
moveMousemove(e) {
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let parentNode = document.getElementsByClassName('designElementsMobile_modal')[0].getElementsByClassName("designElementsMobile_imgMask")[0]
|
||||
parentNode = parentNode.getBoundingClientRect()
|
||||
let x = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.changedTouches[0].pageY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
|
||||
this.printStyleList[this.imgDomIndex].style.left = x
|
||||
this.printStyleList[this.imgDomIndex].style.top = y
|
||||
|
||||
|
||||
},
|
||||
|
||||
sizeMousemove(e) {
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let parentNode =this.imgDom.parentNode
|
||||
let width = imgDomWH.width
|
||||
let height = imgDomWH.height
|
||||
let num = width/height
|
||||
let num1 = height/width
|
||||
let w,h
|
||||
//判断移动四个边
|
||||
if(this.direction == 'right'){
|
||||
w = ( e.changedTouches[0].pageX -imgDomWH.left)
|
||||
h = ( e.changedTouches[0].pageX - imgDomWH.left)*num
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}else if(this.direction == 'top'){
|
||||
this.printStyleList[this.imgDomIndex].style.top = 'auto'
|
||||
// this.printStyleList[this.imgDomIndex].style.left = 'auto'
|
||||
// this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
|
||||
this.printStyleList[this.imgDomIndex].style.bottom = this.printStyleList[this.imgDomIndex].centers.bottom+'px'
|
||||
w = ( e.changedTouches[0].pageX - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||
h = (this.printStyleList[this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
|
||||
|
||||
height = h+'px'
|
||||
width = h*num+'px'
|
||||
}else if(this.direction == 'bottom'){
|
||||
h = ( e.changedTouches[0].pageY - imgDomWH.top)
|
||||
height = h+'px'
|
||||
width = h*num+'px'
|
||||
}else if(this.direction == 'left'){
|
||||
this.printStyleList[this.imgDomIndex].style.left = 'auto'
|
||||
this.printStyleList[this.imgDomIndex].style.right = this.printStyleList[this.imgDomIndex].centers.right+'px'
|
||||
w = (this.printStyleList[this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
|
||||
width = w+'px'
|
||||
height = w*num1+'px'
|
||||
}
|
||||
//判断尺寸是否到边
|
||||
this.printStyleList[this.imgDomIndex].style.width = width
|
||||
this.printStyleList[this.imgDomIndex].style.height = height
|
||||
},
|
||||
//鼠标抬起
|
||||
sizeMouseup(e){
|
||||
this.printStyleList[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
|
||||
}
|
||||
document.removeEventListener("touchend", this.sizeMouseup);
|
||||
document.removeEventListener("touchmove", this.sizeMousemove);
|
||||
},
|
||||
touchend(e) {
|
||||
document.removeEventListener("touchend", this.touchend);
|
||||
document.removeEventListener("touchmove", this.moveMousemove);
|
||||
},
|
||||
deletePrint(){
|
||||
this.exhibitionElementsList.splice(this.imgDomIndex,1)
|
||||
this.printStyleList.splice(this.imgDomIndex,1)
|
||||
},
|
||||
|
||||
//随机重置图片顺序
|
||||
refetchTemplate(index) {
|
||||
// let scale = (Math.trunc(Math.random()*15)+1)*.1
|
||||
let rotateZ1 = Math.trunc(Math.random()*360)+1
|
||||
let rotateZ2 = Math.trunc(Math.random()*360)+1
|
||||
let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
|
||||
let width
|
||||
let scale
|
||||
if(sketch.width<sketch.height){
|
||||
width = Math.trunc(Math.random()*(sketch?.width-sketch?.width/2))+sketch?.width/4
|
||||
scale = width / this.print.width.replace(/px/g,'')
|
||||
}else{
|
||||
width = Math.trunc(Math.random()*(sketch?.height-sketch?.height/2))+sketch?.height/4
|
||||
scale = width / this.print.height.replace(/px/g,'')
|
||||
}
|
||||
// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
|
||||
// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
|
||||
let x = sketch?.width - this.print.width.replace(/px/g,'')*scale
|
||||
let y = sketch?.height-this.print.height.replace(/px/g,'')*scale
|
||||
this.printStyleList[index].style = {
|
||||
left:Math.trunc(Math.random()*x)+1+"px",
|
||||
top:Math.trunc(Math.random()*y)+1+"px",
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:this.print.width.replace(/px/g,'')*scale+'px',
|
||||
height:this.print.height.replace(/px/g,'')*scale+'px',
|
||||
zIndex:this.printZIndex++
|
||||
}
|
||||
this.printStyleList[index].transform = {
|
||||
rotateZ:this.printStyleList[index].transform.rotateZ?this.printStyleList[index].transform.rotateZ:0
|
||||
}
|
||||
},
|
||||
//设置图片
|
||||
async setTemplate(item,index) {
|
||||
await this.setPrintWH(item.path)
|
||||
this.designElementsList
|
||||
let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
|
||||
let sketchImg = new Image()
|
||||
sketchImg.onload = ()=>{
|
||||
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
|
||||
let scale
|
||||
scale = (this.print.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
|
||||
let zIndex = 1
|
||||
let left = item.location[0]/sketchNum+'px'
|
||||
let top = item.location[1]/sketchNum+'px'
|
||||
if(sketch.offsetWidth < item.location[0]/sketchNum){
|
||||
left = sketch.offsetWidth +'px'
|
||||
}
|
||||
if(sketch.offsetHeight < item.location[1]/sketchNum){
|
||||
top = sketch.offsetHeight +'px'
|
||||
}
|
||||
this.printStyleList[index]={
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
},
|
||||
style:{
|
||||
left:left,
|
||||
top:top,
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:this.print.width.replace(/px/g,'')/sketchNum*item.scale+'px',
|
||||
height:this.print.height.replace(/px/g,'')/sketchNum*item.scale+'px',
|
||||
zIndex:zIndex++
|
||||
},
|
||||
transform:{
|
||||
// scale:scale<.2?.2:scale,//0.2-3
|
||||
rotateZ:item.angle,
|
||||
},
|
||||
designElementsBtn:false
|
||||
}
|
||||
sketchImg.remove()
|
||||
}
|
||||
sketchImg.src = sketch.src
|
||||
|
||||
},
|
||||
computeZindex(resolve,prints){
|
||||
prints.sort((a, b) => {
|
||||
var a_num = a.priority;
|
||||
var b_num = b.priority;
|
||||
return a_num - b_num;
|
||||
});
|
||||
let num = 1
|
||||
prints.forEach((v)=>{
|
||||
v.priority = num++
|
||||
})
|
||||
resolve(prints)
|
||||
// return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
|
||||
},
|
||||
async computeSize(arr){
|
||||
// let num = this.sketch/
|
||||
return new Promise(async (resolve, reject) => {
|
||||
let arr = JSON.parse(JSON.stringify(this.printStyleList))
|
||||
let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
|
||||
let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
|
||||
let prints = []
|
||||
let scale
|
||||
let location
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
await this.setPrintWH(this.exhibitionElementsList[index].path)
|
||||
scale = (arr[index].style.width.replace(/px/g,'')*sketchNum/this.print.width.replace(/px/g,''))
|
||||
location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
|
||||
let obj = {
|
||||
angle : arr[index].transform.rotateZ,
|
||||
location : location,
|
||||
priority:arr[index].style.zIndex,
|
||||
scale: scale,
|
||||
designType:this.exhibitionElementsList[index].designType,
|
||||
path:this.exhibitionElementsList[index].path,
|
||||
minIOPath:this.exhibitionElementsList[index].minIOPath,
|
||||
}
|
||||
prints.push(obj)
|
||||
}
|
||||
this.computeZindex(resolve,prints)
|
||||
})
|
||||
},
|
||||
async setPreview(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let index
|
||||
designItemDetail.clothes.forEach((v,ind)=>{
|
||||
if(v.id == this.current.id){
|
||||
index = ind
|
||||
}
|
||||
})
|
||||
// let data = {
|
||||
// ...designItemDetail,
|
||||
// priority:priority,
|
||||
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
// }
|
||||
let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
|
||||
await this.computeSize().then((rv)=>{
|
||||
this.setOkData = rv
|
||||
})
|
||||
data.designSingleItemDTOList[index].trims.prints = this.setOkData
|
||||
data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
this.loadingShow = true
|
||||
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
||||
(rv) => {
|
||||
// designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
|
||||
this.currentFullBodyView = rv.currentFullBodyView
|
||||
this.designItemDetailTS.rv = rv
|
||||
this.designItemDetailTS.data = data
|
||||
this.loadingShow = false
|
||||
// this.designElements = false
|
||||
if(this.driver__.driver){
|
||||
nextTick().then(()=>{
|
||||
driverObj__.moveNext();
|
||||
})
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
this.loadingShow = false
|
||||
});
|
||||
},
|
||||
setOK(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let index
|
||||
designItemDetail.clothes.forEach((v,ind)=>{
|
||||
if(v.id == this.current.id){
|
||||
index = ind
|
||||
}
|
||||
})
|
||||
if(this.designItemDetailTS.rv){
|
||||
designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
|
||||
designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
|
||||
designItemDetail.clothes[index].printObject = this.designItemDetailTS.rv.clothes[index].printObject
|
||||
designItemDetail.clothes[index].trims.prints = this.setOkData
|
||||
designItemDetail.ifSubmit = true
|
||||
designItemDetail.clothes.forEach((item,i)=>{
|
||||
let a
|
||||
if(item.layersObject[0].imageCategory.indexOf("back") == -1){
|
||||
a = item.layersObject[0]
|
||||
item.layersObject[0] = item.layersObject[1]
|
||||
item.layersObject[1] = a
|
||||
}
|
||||
item.layersObject[0].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[0]?.id
|
||||
item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1]?.id
|
||||
})
|
||||
this.store.commit("setDesignItemDetail", designItemDetail);
|
||||
this.store.commit("setDesignPreviewData", this.designItemDetailTS.data);
|
||||
this.setRevocation(designItemDetail,this.designItemDetailTS.data)
|
||||
this.designItemDetailTS = {}
|
||||
}
|
||||
this.designElements = false
|
||||
if(this.driver__.driver){
|
||||
driverObj__.moveNext();
|
||||
}
|
||||
},
|
||||
clearModal(){
|
||||
this.designElements = true//modal页面关闭
|
||||
this.printZIndex = 2//点击图片z-index
|
||||
this.imgDomIndex = 0//点击图片下标
|
||||
this.designSelectElementsList = []
|
||||
this.printStyleList = []
|
||||
this.designElementsList = []
|
||||
this.exhibitionElementsList = []
|
||||
},
|
||||
closeModal(){
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let _this = this
|
||||
Modal.confirm({
|
||||
title: this.t('DesignPrintOperation.jsContent1'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
_this.designElements=false
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.designElementsMobile_modal {
|
||||
// max-width: 1440px;
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
}
|
||||
.ant-modal-body{
|
||||
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||
// height: calc(65vh - 6.4rem*1.2));
|
||||
height: calc(65rem*1.2);
|
||||
display: flex;
|
||||
overflow-y: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.designElementsMobile_content {
|
||||
// background: #f2f3fb;
|
||||
// padding-bottom: 2.9rem*1.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.designElementsMobile_header {
|
||||
position: relative;
|
||||
height: calc(6.6rem*1.2);
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
|
||||
.placement_modal_title{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
line-height: calc(6.6rem*1.2);
|
||||
left: calc(3.7rem*1.2);
|
||||
top: 0;
|
||||
font-size: calc(1.8rem*1.2);
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
|
||||
.designElementsMobile_right{
|
||||
height: calc(50rem*1.2);
|
||||
position: absolute;
|
||||
right: calc(2rem*1.2);
|
||||
left: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
max-height: calc(50rem*1.2);
|
||||
max-width: calc(30rem*1.2);
|
||||
.designElementsMobile_entirety_img{
|
||||
height: 100%;
|
||||
img{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.designElementsMobile_open{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.print_right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 2px solid;
|
||||
padding: calc(2rem*1.2) 0;
|
||||
width: calc(16rem*1.2);
|
||||
border-radius: calc(1rem*1.2);
|
||||
height: calc(40rem*1.2);
|
||||
.button_second{
|
||||
margin: calc(1rem*1.2) 0;
|
||||
width: calc(10rem*1.2);
|
||||
text-align: center;
|
||||
position: initial;
|
||||
transform: none;
|
||||
height: calc(3rem*1.2);
|
||||
line-height: calc(3rem*1.2);
|
||||
}
|
||||
.designElementsMobile_nav{
|
||||
display: flex;
|
||||
margin-top: calc(2rem*1.2);
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: calc(22rem*1.2);
|
||||
overflow-x: hidden;
|
||||
justify-content: space-evenly;
|
||||
align-content: flex-start;
|
||||
&.designElementsMobile_nav::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.active{
|
||||
img{
|
||||
border: 2px solid;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.designElementsMobile_single{
|
||||
width: 40%;
|
||||
margin-bottom: calc(2rem*1.2);
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&.show_print_right{
|
||||
border: none;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.designElementsMobile_centent{
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
display: flex;
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
}
|
||||
.designElementsMobile_imgMask{
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
>img{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
// max-width: 100%;
|
||||
// max-height: 100%;
|
||||
// width: 100%;
|
||||
// height: 50rem*1.2);
|
||||
max-height: calc(50rem*1.2);
|
||||
min-height: calc(30rem*1.2);
|
||||
width: auto;
|
||||
max-width: calc(60rem*1.2);
|
||||
}
|
||||
.designElementsMobile_sketch_mask{
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
}
|
||||
>div{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.designElementsMobile_print{
|
||||
z-index: 3;
|
||||
.modal_imgItem{
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.designElementsMobile_btn{
|
||||
z-index: 3;
|
||||
>div{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 2px solid rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
}
|
||||
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;
|
||||
|
||||
&.designElementsMobile_Mouoverall{
|
||||
opacity: 1;
|
||||
border: none;
|
||||
width: calc(1.4rem*1.2);
|
||||
height: calc(1.4rem*1.2);
|
||||
i{
|
||||
display: flex;
|
||||
color: #14bcff;
|
||||
}
|
||||
|
||||
}
|
||||
li{
|
||||
cursor: pointer;
|
||||
// border-radius: 50%;
|
||||
width: calc(2.5rem*1.2);
|
||||
height: calc(2.5rem*1.2);
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.active{
|
||||
opacity: 1;
|
||||
li{
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.designElementsMobile_btn_top,.designElementsMobile_btn_bottom{
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.designElementsMobile_btn_top{
|
||||
top: 0;
|
||||
}
|
||||
.designElementsMobile_btn_bottom{
|
||||
top: 100%;
|
||||
}
|
||||
.designElementsMobile_btn_left,.designElementsMobile_btn_right{
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: e-resize;
|
||||
}
|
||||
.designElementsMobile_btn_left{
|
||||
left: 0;
|
||||
}
|
||||
.designElementsMobile_btn_right{
|
||||
left: 100%;
|
||||
}
|
||||
.designElementsMobile_rotote{
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.designElementsMobile_delete{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 2.5rem;
|
||||
background: none;
|
||||
transform: translate(100%, -100%);
|
||||
height: 2.5rem;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.designElementsMobile_rotote::after{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: #14bcff;
|
||||
width: calc(.2rem*1.2);
|
||||
height: calc(3rem*1.2);
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.designElementsMobile_rotote::before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: #14bcff;
|
||||
top: calc(50% - 3rem*1.2);
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
width: calc(1.5rem*1.2);
|
||||
height: calc(1.5rem*1.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.subitOkPreviewBtn{
|
||||
z-index: 2;
|
||||
margin: calc(1rem*1.2) 0;
|
||||
width: calc(10rem*1.2);
|
||||
text-align: center;
|
||||
position: initial;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="designOpenrtionModal">
|
||||
<a-modal
|
||||
class="designOpenrtion_modal Guide_1_24"
|
||||
class="designOpenrtion_modal Guide_1_24 generalModel"
|
||||
:class="[driver__.driver?'hideEvents':'']"
|
||||
v-model:visible="designOpenrtion"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.designOpenrtionModal"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -17,8 +18,15 @@
|
||||
<div class="design_title_text">
|
||||
<div>{{ $t('DesignPrintOperation.Placement') }}</div>
|
||||
</div>
|
||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="closeModal()">
|
||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designOpenrtion_open">
|
||||
<!-- -->
|
||||
@@ -62,6 +70,7 @@
|
||||
<div v-show="!overallSingle" class="habit_System_Designer">
|
||||
<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
|
||||
<a-slider id="system_silder"
|
||||
class="system_silder"
|
||||
:min="20"
|
||||
:max="1000"
|
||||
v-model:value="systemDesignerPercentage"
|
||||
@@ -941,7 +950,7 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.designOpenrtion_modal {
|
||||
// max-width: 1440px;
|
||||
user-select: none; /* 对现代浏览器有效 */
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,10 @@
|
||||
<template>
|
||||
<div class="addDetailsModal" ref="addDetailsModal"></div>
|
||||
<a-modal
|
||||
class="addDetails_modal generalModel"
|
||||
v-model:visible="addDetails"
|
||||
:footer="null"
|
||||
:get-container="() => $refs.addDetailsModal"
|
||||
width="78%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
@@ -13,7 +15,11 @@
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -69,7 +75,7 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
<style lang="less" scoped>
|
||||
.addDetails_modal {
|
||||
.closeIcon {
|
||||
z-index: 2;
|
||||
|
||||
@@ -27,21 +27,13 @@
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { formatTime,segmentImage } from "@/tool/util";
|
||||
import { setCookie, getCookie } from "@/tool/cookie";
|
||||
import { Modal, message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
|
||||
import allOrder from "@/component/Pay/allOrder.vue";
|
||||
import creditsDetail from "@/component/Pay/creditsDetail.vue";
|
||||
import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import canvasGeneral from "@/tool/canvasGeneral";
|
||||
export default defineComponent({
|
||||
components: {
|
||||
creditsDetail,
|
||||
allOrder,
|
||||
},
|
||||
// emits: ['setSloganData'],
|
||||
props:['patchData','imgDomIndex'],
|
||||
|
||||
@@ -95,7 +95,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="habit_System_Designer">
|
||||
<a-slider id="system_silder"
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="workspaceItem.systemDesignerPercentage"
|
||||
@afterChange="setSystemDesigner"
|
||||
:tip-formatter="formatter"
|
||||
@@ -848,15 +848,13 @@ export default defineComponent({
|
||||
.habit_button {
|
||||
background-color: #fff;
|
||||
border: solid 2px #000;
|
||||
padding: 0px calc(2rem*1.2);
|
||||
box-sizing: initial;
|
||||
border-radius: 4rem;
|
||||
font-weight: 600;
|
||||
height: calc(3.2rem*1.2);
|
||||
line-height: calc(3.2rem*1.2);
|
||||
padding: calc(.4rem*1.2) calc(1.5rem*1.2);
|
||||
font-size: calc(1.2rem*1.2);
|
||||
font-size: 1.8rem;
|
||||
padding: 0 1.8rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
line-height: 6rem;
|
||||
.fi-bs-angle-down {
|
||||
margin-left: calc(1rem*1.2);
|
||||
display: inline-block;
|
||||
|
||||
@@ -7,14 +7,18 @@
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="habitSetStyleMask"
|
||||
:mask="true"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1050"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="habitSetStyle_content" v-hoverAnmi>
|
||||
@@ -213,7 +217,6 @@ methods: {
|
||||
.habitSetStyle_modal {
|
||||
&.generalModel{
|
||||
.ant-modal-body {
|
||||
height: calc(55rem*1.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,626 +0,0 @@
|
||||
<template>
|
||||
<div class="design_compile_content" id="design_compile_content">
|
||||
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
||||
<div class="detail_modal_body_title">
|
||||
<div class="detail_modal_body_nav">
|
||||
<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:designShowIndex.value == index}" @click="clothesOpen(item,index)">
|
||||
<img :src="item?.path" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designOpenrtion_imgMask">
|
||||
<!-- <canvas ref="canvasDom" ></canvas> -->
|
||||
</div>
|
||||
<div class="subitOkPreviewBtn" @click="imgClear">{{ $t('LibraryPage.Reset') }}</div>
|
||||
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
|
||||
</div>
|
||||
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import { defineComponent, h,reactive, ref ,computed, inject,nextTick, onMounted} from "vue";
|
||||
// import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { useStore } from "vuex";
|
||||
// import { Modal,message } from 'ant-design-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
export default defineComponent({
|
||||
emits: ['setDesignCoverage', 'setSubmit'],
|
||||
// props: ["frontBack"],
|
||||
setup(prop) {
|
||||
const store = useStore();
|
||||
let designItemDetail = computed(()=>{
|
||||
return store.state.DesignDetailModule.designItemDetail
|
||||
})
|
||||
let current = inject('current')//父组件传过来的数据
|
||||
let setRevocation = inject('setRevocation')//父组件传过来的数据
|
||||
let printZIndex = ref(4)//印花优先级
|
||||
let designShowIndex = reactive({value:-1})
|
||||
let frontBack = reactive({})
|
||||
let frontBackOld = reactive({})
|
||||
let canvasFontBackMove = {
|
||||
back:[],
|
||||
front:[],
|
||||
}
|
||||
|
||||
let setPostition = async (url) =>{
|
||||
let img = await loadImage(url)
|
||||
let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
|
||||
const num = modal_body?.offsetHeight / img.height;
|
||||
function loadImage(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
resolve(img)
|
||||
};
|
||||
img.onerror = reject;
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
return num
|
||||
}
|
||||
let computeZindex = (designItemDetail)=>{
|
||||
let arr = designItemDetail.clothes
|
||||
arr.sort((a, b) => {
|
||||
var a_num = a.priority;
|
||||
var b_num = b.priority;
|
||||
return a_num - b_num;
|
||||
});
|
||||
designItemDetail.clothes = arr
|
||||
return designItemDetail
|
||||
}
|
||||
let setImgSize = async ()=>{
|
||||
let designItemDetail = JSON.parse(JSON.stringify(store.state.DesignDetailModule.designItemDetail))
|
||||
|
||||
let front = []
|
||||
let back = []
|
||||
let body
|
||||
designItemDetail.others.forEach((item) => {
|
||||
if(item.type == 'Body'){
|
||||
body = item
|
||||
}
|
||||
});
|
||||
let ratio = await setPostition(body.layersObject[0]?.imageUrl)
|
||||
designItemDetail = computeZindex(designItemDetail)
|
||||
designItemDetail.clothes.forEach((v,index)=>{
|
||||
for (let i = v.layersObject.length-1; i >= 0; i--) {
|
||||
v.layersObject[i].style = {
|
||||
top:v.layersObject[i].position?.[0]*ratio+'px',
|
||||
left:v.layersObject[i].position?.[1]*ratio+'px',
|
||||
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
|
||||
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
|
||||
}
|
||||
v.layersObject[i].centers={
|
||||
left:0,
|
||||
top:0,
|
||||
}
|
||||
v.scale = ratio
|
||||
v.layersObject[i].designOpenrtionBtn = false
|
||||
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
|
||||
front[index] = v.layersObject[i]
|
||||
front[index].style.zIndex = v.priority
|
||||
front[index].id = v.id
|
||||
}else{
|
||||
back[index] = v.layersObject[i]
|
||||
back[index].style.zIndex = v.priority
|
||||
back[index].id = v.id
|
||||
}
|
||||
if(printZIndex < v.priority){
|
||||
printZIndex = v.priority
|
||||
}
|
||||
}
|
||||
printZIndex++
|
||||
})
|
||||
let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
|
||||
|
||||
body.style = {
|
||||
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
|
||||
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
|
||||
}
|
||||
frontBack = {
|
||||
front:front,
|
||||
back:back,
|
||||
body:body,
|
||||
}
|
||||
frontBackOld = JSON.parse(JSON.stringify({
|
||||
front:front,
|
||||
back:back,
|
||||
body:body,
|
||||
}))
|
||||
setCanvas(frontBack)
|
||||
}
|
||||
let canvas = reactive({})
|
||||
let setCanvas = (frontBack)=>{
|
||||
let canvasBox = document.querySelector('.design_compile_content .designOpenrtion_imgMask')
|
||||
var canvasDom = document.createElement('canvas')
|
||||
// console.log(canvasBox);
|
||||
canvasBox.innerHTML = ''; // 清空原有内容
|
||||
canvasBox.appendChild(canvasDom);
|
||||
canvas = new fabric.Canvas(canvasDom, {
|
||||
backgroundColor: "rgba(255,255,255,1)",
|
||||
// fill: '#ffde7d',
|
||||
selection: false, //设置多选
|
||||
width: Number(frontBack?.body?.style.width.match(/\d+(\.\d+)?/)[0]),
|
||||
height: Number(frontBack?.body?.style.height.match(/\d+(\.\d+)?/)[0]),
|
||||
isDrawingMode: false, // 开启绘图模式
|
||||
});
|
||||
canvas.clear();
|
||||
canvasFontBackMove = {
|
||||
back:[],
|
||||
front:[],
|
||||
}
|
||||
let fontBackMove = []
|
||||
canvas.on('selection:created', (e)=> {
|
||||
// console.log(canvas.getActiveObject());
|
||||
// // if()
|
||||
// console.log(frontBack.front.find(person => person.id === canvas.getActiveObject().id));
|
||||
// designShowIndex.value =
|
||||
|
||||
});
|
||||
// selection:updated
|
||||
canvas.on('selection:cleared', ()=>{
|
||||
designShowIndex.value = -1
|
||||
})
|
||||
frontBack.back.forEach((item) => {
|
||||
if(!item.imageUrl){
|
||||
return
|
||||
}
|
||||
fabric.Image.fromURL(item.imageUrl, (img) => {
|
||||
img.set({
|
||||
left: Number(item.style.left.match(/\d+(\.\d+)?/)[0]),
|
||||
top: Number(item.style.top.match(/\d+(\.\d+)?/)[0]),
|
||||
scaleX: Number(item.style.width.match(/\d+(\.\d+)?/)[0])/img.width,
|
||||
scaleY: Number(item.style.height.match(/\d+(\.\d+)?/)[0])/img.height,
|
||||
evented : false,
|
||||
// selectable: false
|
||||
});
|
||||
canvas.add(img);
|
||||
canvasFontBackMove.back.push({id:item.id,img:img})
|
||||
});
|
||||
});
|
||||
fabric.Image.fromURL(frontBack?.body?.layersObject?.[0].imageUrl || '', (img) => {
|
||||
img.set({
|
||||
left: 0,
|
||||
top: 0,
|
||||
// width: Number(frontBack?.body?.style.width.match(/\d+(\.\d+)?/)[0]) * scale,
|
||||
// height: Number(frontBack?.body?.style.height.match(/\d+(\.\d+)?/)[0]) * scale,
|
||||
scaleX: Number(frontBack?.body?.style.width.match(/\d+(\.\d+)?/)[0])/img.width,
|
||||
scaleY: Number(frontBack?.body?.style.height.match(/\d+(\.\d+)?/)[0])/img.height,
|
||||
evented : false,
|
||||
// selectable: false
|
||||
});
|
||||
canvas.add(img);
|
||||
});
|
||||
frontBack.front.forEach((item) => {
|
||||
if(!item.imageUrl){
|
||||
return
|
||||
}
|
||||
fabric.Image.fromURL(item.imageUrl, (img) => {
|
||||
img.set({
|
||||
left: Number(item.style.left.match(/\d+(\.\d+)?/)[0]),
|
||||
top: Number(item.style.top.match(/\d+(\.\d+)?/)[0]),
|
||||
scaleX: Number(item.style.width.match(/\d+(\.\d+)?/)[0])/img.width,
|
||||
scaleY: Number(item.style.height.match(/\d+(\.\d+)?/)[0])/img.height,
|
||||
// selectable: false
|
||||
});
|
||||
img.id = item.id
|
||||
canvas.add(img);
|
||||
canvasFontBackMove.back.forEach((backItem) => {
|
||||
if(backItem && backItem.id == item.id){
|
||||
img.on('moving', function() {
|
||||
// 计算第二个矩形应该移动的距离
|
||||
// 更新第二个矩形的位置
|
||||
backItem.img.set({
|
||||
left: img.left,
|
||||
top: img.top,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
scaleX: img.scaleX,
|
||||
scaleY: img.scaleY,
|
||||
});
|
||||
|
||||
});
|
||||
img.on('scaling', function(e) {
|
||||
backItem.img.set({
|
||||
left: img.left,
|
||||
top: img.top,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
scaleX: img.scaleX,
|
||||
scaleY: img.scaleY,
|
||||
});
|
||||
});
|
||||
canvas.renderAll();
|
||||
}
|
||||
})
|
||||
canvasFontBackMove.front.push({id:item.id,img:img})
|
||||
});
|
||||
});
|
||||
var objects = canvas.getObjects();
|
||||
|
||||
}
|
||||
let clothesOpen = (item,index)=>{
|
||||
setpitch(item,index)
|
||||
designShowIndex.value = index
|
||||
}
|
||||
let setpitch = (item,index)=>{
|
||||
canvas.discardActiveObject();
|
||||
// this.designItemDetail.clothes.forEach((item)=>{
|
||||
// item.clothesOpen = false
|
||||
// })
|
||||
// this.designItemDetail.clothes[index].clothesOpen = true
|
||||
for (const iterator in canvasFontBackMove) {
|
||||
canvasFontBackMove[iterator].forEach((canvasItem,canvasIndex) => {
|
||||
if(canvasItem.id == item.id){
|
||||
// var rect1Index = canvas.getObjects().indexOf(canvasItem.img);
|
||||
if(iterator == 'front'){
|
||||
canvas.moveTo(canvasItem.img,canvas.getObjects().length)
|
||||
canvas.setActiveObject(canvasItem.img);
|
||||
}else{
|
||||
canvas.moveTo(0)
|
||||
// canvas.moveTo(canvasItem.img,canvasFontBackMove[iterator].length-1)
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// canvas.setDepth(object1, canvas.getObjects().indexOf(object2) + 1);
|
||||
}
|
||||
let imgClear = ()=>{
|
||||
frontBack = JSON.parse(JSON.stringify(frontBackOld))
|
||||
setCanvas(frontBack)
|
||||
}
|
||||
return {
|
||||
designItemDetail,
|
||||
current,
|
||||
printZIndex,
|
||||
designShowIndex,
|
||||
frontBack,
|
||||
setRevocation,
|
||||
frontBackOld,
|
||||
canvasFontBackMove,
|
||||
setImgSize,
|
||||
clothesOpen,
|
||||
imgClear,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadingShow:false,//加载中
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.setImgSize()
|
||||
},
|
||||
|
||||
//按比设置单件衣服宽高位置
|
||||
async setPostition(url){
|
||||
let img = await loadImage(url)
|
||||
let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
|
||||
const num = modal_body?.offsetHeight / img.height;
|
||||
function loadImage(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
resolve(img)
|
||||
};
|
||||
img.onerror = reject;
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
return num
|
||||
},
|
||||
|
||||
|
||||
capitalizeFirstLetter(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
},
|
||||
setPreviewData(){
|
||||
this.$emit('setSubmit','preview');
|
||||
},
|
||||
deleteBorder(){
|
||||
this.frontBack?.front?.forEach((item)=>{
|
||||
item.designOpenrtionBtn = false
|
||||
})
|
||||
},
|
||||
|
||||
clothesOpenActive(index){
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
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
|
||||
// this.frontBack.back.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++
|
||||
item.similarity = false//新增衣服传的是衣服id会存在两件衣服id相同所以设置为false让每次赋值都是不一样的
|
||||
})
|
||||
data.designSingleItemDTOList.forEach((item)=>{
|
||||
let front = arr
|
||||
let imageCategory1
|
||||
if(arr.length > 1){
|
||||
imageCategory1 = arr[1].imageCategory
|
||||
}
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
if(item.id == arr[index].id && !arr[index].similarity){
|
||||
let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) - arr[index]?.position[0])
|
||||
let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) - arr[index]?.position[1])
|
||||
let scale = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale)).toFixed(2)):1
|
||||
item.scale = scale
|
||||
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 = 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
|
||||
}
|
||||
}
|
||||
if(arr.length > 1 && item.type == this.capitalizeFirstLetter(imageCategory1)){
|
||||
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
|
||||
}
|
||||
})
|
||||
// return
|
||||
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
||||
(rv) => {
|
||||
this.$parent.loadingShow = false
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
rv.clothes.forEach((i)=>{
|
||||
i.similarity = false//新增衣服传的是衣服id会存在两件衣服id相同所以设置为false让每次赋值都是不一样的
|
||||
})
|
||||
designItemDetail.designItemUrl = rv.designItemUrl
|
||||
designItemDetail.ifSubmit = true
|
||||
designItemDetail.currentFullBodyView = rv.currentFullBodyView
|
||||
designItemDetail.clothes.forEach((item)=>{
|
||||
for (let index = 0; index < rv.clothes.length; index++) {
|
||||
if(rv.clothes[index].id === item.id && !rv.clothes[index].similarity){
|
||||
item.layersObject = rv.clothes[index].layersObject
|
||||
item.priority = rv.clothes[index].layersObject[0].priority
|
||||
rv.clothes[index].similarity = true
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
this.$emit('setDesignCoverage');
|
||||
this.store.commit("setDesignItemDetail", designItemDetail);
|
||||
this.setRevocation(designItemDetail,data)
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.designOpenrtion_modal {
|
||||
// max-width: 1440px;
|
||||
.ant-modal-body{
|
||||
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||
// height: calc(65vh - 6.4rem*1.2));
|
||||
height: calc(65rem*1.2);
|
||||
display: flex;
|
||||
overflow-y: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.design_compile_content {
|
||||
// background: #f2f3fb;
|
||||
// padding-bottom: 2.9rem*1.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.designOpenrtion_centent{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
}
|
||||
.designOpenrtion_imgMask{
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
>img{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
>div{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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: calc(1rem*1.2);
|
||||
>div{
|
||||
width: calc(4rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin-left: calc(.3rem*1.2);
|
||||
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: calc(0rem*1.2);
|
||||
}
|
||||
}
|
||||
.designOpenrtion_print,.detail_modal_item_front{
|
||||
z-index: 1;
|
||||
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(1rem*1.2);
|
||||
height: calc(1rem*1.2);
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.active{
|
||||
opacity: 1;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.subitOkPreviewBtn{
|
||||
z-index: 2;
|
||||
margin-bottom: calc(1rem*1.2);
|
||||
width: calc(10rem*1.2);
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.designOpenrtion_imgMask_open{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,685 +0,0 @@
|
||||
<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"
|
||||
:key="item"
|
||||
:style="item.style"
|
||||
@touchstart.passive="itemMoveMousedown(index,$event)"
|
||||
class="modal_imgItem"
|
||||
@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" @touchstart.passive="itemMoveMousedown(index,$event)" @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" @touchstart.passive="itemMoveMousedown(index,$event)" @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" @touchstart.passive="itemMoveMousedown(index,$event)">
|
||||
<li class="designOpenrtion_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
|
||||
<li class="designOpenrtion_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
|
||||
<li class="designOpenrtion_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
|
||||
<li class="designOpenrtion_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
|
||||
<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subitOkPreviewBtn" @click="imgClear">{{ $t('LibraryPage.Reset') }}</div>
|
||||
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
|
||||
</div>
|
||||
<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script >
|
||||
import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import { Https } from "@/tool/https";
|
||||
export default defineComponent({
|
||||
// props: ["frontBack"],
|
||||
emits:['setParentLoadingShow','setDesignCoverage','setSubmit'],
|
||||
setup(prop) {
|
||||
const store = useStore();
|
||||
|
||||
let designItemDetail = computed(()=>{
|
||||
return store.state.DesignDetailModule.designItemDetail
|
||||
})
|
||||
let current = inject('current')//父组件传过来的数据
|
||||
let setRevocation = inject('setRevocation')//父组件传过来的数据
|
||||
let printZIndex = ref(4)//印花优先级
|
||||
let printStyleList = ref([
|
||||
{
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
},
|
||||
style:{
|
||||
left:0+"px",
|
||||
top:0+"px",
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:100+'px',
|
||||
height:100+'px',
|
||||
// zIndex:1,
|
||||
},
|
||||
transform:{
|
||||
scale:1,
|
||||
rotateZ:0,
|
||||
},
|
||||
designOpenrtionBtn:false
|
||||
}
|
||||
]);
|
||||
let direction = ref('')
|
||||
let imgDom = ref()
|
||||
let imgDomIndex = ref(0)
|
||||
let frontBack = ref({})
|
||||
let frontBackOld = ref({})
|
||||
return {
|
||||
designItemDetail,
|
||||
current,
|
||||
printZIndex,
|
||||
printStyleList,
|
||||
direction,//判断点击的是li那个边
|
||||
imgDom,
|
||||
imgDomIndex,
|
||||
frontBack,
|
||||
setRevocation,
|
||||
frontBackOld
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadingShow:false,//加载中
|
||||
store: useStore(),
|
||||
setImgSizeTimeout:null
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
window.addEventListener('resize', this.setImgSizeTime);
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
let DesignParent = this.$parent
|
||||
// this.clearModal()
|
||||
// console.log(this.current,DesignParent.frontBack);
|
||||
this.printStyleList.push({
|
||||
centers:{
|
||||
left:0,
|
||||
top:0,
|
||||
},
|
||||
style:{
|
||||
left:0+"px",
|
||||
top:0+"px",
|
||||
right:"auto",
|
||||
bottom:"auto",
|
||||
width:100+'px',
|
||||
height:100+'px',
|
||||
// zIndex:1,
|
||||
},
|
||||
transform:{
|
||||
scale:1,
|
||||
rotateZ:0,
|
||||
},
|
||||
designOpenrtionBtn:false
|
||||
})
|
||||
this.setImgSize()
|
||||
},
|
||||
setImgSizeTime(){
|
||||
clearTimeout(this.setImgSizeTimeout)
|
||||
this.setImgSizeTimeout = setTimeout(()=>{
|
||||
this.setImgSize()
|
||||
},300)
|
||||
},
|
||||
async setImgSize(){
|
||||
this.frontBack.body = null
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
let front = []
|
||||
let back = []
|
||||
let body
|
||||
|
||||
designItemDetail.others.forEach((item) => {
|
||||
if(item.type == 'Body'){
|
||||
body = item
|
||||
}
|
||||
});
|
||||
let ratio = await this.setPostition(body.layersObject[0]?.imageUrl)
|
||||
let frontIndex = 6
|
||||
let backIndex = 3
|
||||
// let front = 3
|
||||
// let back = 3
|
||||
designItemDetail.clothes.forEach((v,index)=>{
|
||||
for (let i = v.layersObject.length-1; i >= 0; i--) {
|
||||
v.layersObject[i].style = {
|
||||
top:v.layersObject[i].position?.[0]*ratio+'px',
|
||||
left:v.layersObject[i].position?.[1]*ratio+'px',
|
||||
width:v.layersObject[i].imageSize?.[0]*ratio+'px',
|
||||
height:v.layersObject[i].imageSize?.[1]*ratio+'px',
|
||||
// zIndex:zIndex-=1
|
||||
}
|
||||
v.layersObject[i].centers={
|
||||
left:0,
|
||||
top:0,
|
||||
}
|
||||
v.layersObject[i].designOpenrtionBtn = false
|
||||
if(v.layersObject[i].imageCategory.indexOf("back") == -1){
|
||||
front[index] = v.layersObject[i]
|
||||
front[index].style.zIndex = v.priority
|
||||
front[index].id = v.id
|
||||
}else{
|
||||
back[index] = v.layersObject[i]
|
||||
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]
|
||||
|
||||
body.style = {
|
||||
width:body.layersObject[0].imageSize?.[0]*ratio+'px',
|
||||
height:body.layersObject[0].imageSize?.[1]*ratio+'px',
|
||||
}
|
||||
this.frontBack = {
|
||||
front:front,
|
||||
back:back,
|
||||
body:body,
|
||||
}
|
||||
this.frontBackOld = JSON.parse(JSON.stringify({
|
||||
front:front,
|
||||
back:back,
|
||||
body:body,
|
||||
}))
|
||||
},
|
||||
imgClear(){
|
||||
this.frontBack = JSON.parse(JSON.stringify(this.frontBackOld))
|
||||
},
|
||||
//按比设置单件衣服宽高位置
|
||||
async setPostition(url){
|
||||
let img = await loadImage(url)
|
||||
let modal_body = document.getElementsByClassName('designOpenrtion_imgMask')[0]
|
||||
const num = modal_body?.offsetHeight / img.height;
|
||||
function loadImage(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
resolve(img)
|
||||
img.remove()
|
||||
};
|
||||
img.onerror = reject;
|
||||
img.src = url;
|
||||
});
|
||||
}
|
||||
return num
|
||||
},
|
||||
clear(){
|
||||
window.removeEventListener('resize', this.setImgSizeTime);
|
||||
},
|
||||
setpitch(item,index){
|
||||
this.frontBack.front.forEach((v)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
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,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++
|
||||
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.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-left
|
||||
this.frontBack.front[index].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-top
|
||||
document.addEventListener("touchend", this.touchend);
|
||||
document.addEventListener("touchmove", this.moveMousemove);
|
||||
},
|
||||
//设置尺寸
|
||||
itemSizeMousedown(direction,event){
|
||||
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.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left-li
|
||||
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top-li
|
||||
}else{
|
||||
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.changedTouches[0].pageX - this.imgDom.getBoundingClientRect().left+imgDomWH.width-li
|
||||
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.changedTouches[0].pageY - this.imgDom.getBoundingClientRect().top+imgDomWH.height-li
|
||||
this.frontBack.front[this.imgDomIndex].centers.right = this.imgDom.parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft
|
||||
this.frontBack.front[this.imgDomIndex].centers.bottom = this.imgDom.parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop
|
||||
}
|
||||
|
||||
document.addEventListener("touchend", this.sizeMouseup);
|
||||
document.addEventListener("touchmove", this.sizeMousemove);
|
||||
},
|
||||
//鼠标移动
|
||||
moveMousemove(e) {
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
||||
let x = (e.changedTouches[0].pageX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.changedTouches[0].pageY - 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){
|
||||
// this.frontBack.front[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
|
||||
// }
|
||||
// if(x.replace(/px/g,'') <= 0){
|
||||
// this.frontBack.front[this.imgDomIndex].style.left = 0+'px'
|
||||
// }
|
||||
// if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
|
||||
// this.frontBack.front[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
|
||||
// }
|
||||
// if(y.replace(/px/g,'') <= 0){
|
||||
// this.frontBack.front[this.imgDomIndex].style.top = 0+'px'
|
||||
// }
|
||||
},
|
||||
|
||||
sizeMousemove(e) {
|
||||
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.changedTouches[0].pageX -imgDomWH.left)
|
||||
h = (e.changedTouches[0].pageX -imgDomWH.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 -this.imgDom.offsetHeight - this.imgDom.offsetTop+'px'
|
||||
this.frontBack.front[this.imgDomIndex].style.bottom = this.frontBack.front[this.imgDomIndex].centers.bottom+'px'
|
||||
w = (e.changedTouches[0].pageX -imgDomWH.left)*num
|
||||
h = (this.frontBack.front[this.imgDomIndex].centers.top - e.changedTouches[0].pageY)
|
||||
|
||||
height = h+'px'
|
||||
// width = h*num+'px'
|
||||
}else if(this.direction == 'bottom'){
|
||||
num = width/height
|
||||
h = (e.changedTouches[0].pageY -imgDomWH.top)
|
||||
height = h+'px'
|
||||
// width = h*num+'px'
|
||||
}else if(this.direction == 'left'){
|
||||
w = (this.frontBack.front[this.imgDomIndex].centers.left - e.changedTouches[0].pageX)
|
||||
this.frontBack.front[this.imgDomIndex].style.left = 'auto'
|
||||
this.frontBack.front[this.imgDomIndex].style.right = this.frontBack.front[this.imgDomIndex].centers.right+'px'
|
||||
width = w+'px'
|
||||
// height = w*num+'px'
|
||||
}
|
||||
//判断尺寸是否到边
|
||||
this.frontBack.front[this.imgDomIndex].style.width = width
|
||||
this.frontBack.front[this.imgDomIndex].style.height = height
|
||||
|
||||
},
|
||||
//鼠标抬起
|
||||
sizeMouseup(e){
|
||||
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
|
||||
document.removeEventListener("touchend", this.sizeMouseup);
|
||||
document.removeEventListener("touchmove", this.sizeMousemove);
|
||||
},
|
||||
touchend(e) {
|
||||
|
||||
document.removeEventListener("touchend", this.touchend);
|
||||
document.removeEventListener("touchmove", this.moveMousemove);
|
||||
},
|
||||
clearModal(){
|
||||
this.printZIndex = 2//点击图片z-index
|
||||
this.imgDomIndex = 0//点击图片下标
|
||||
this.clothes = []
|
||||
this.printStyleList.splice(1,this.printStyleList.length-1)
|
||||
},
|
||||
capitalizeFirstLetter(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
},
|
||||
setPreviewData(){
|
||||
this.$emit('setSubmit','preview');
|
||||
},
|
||||
deleteBorder(){
|
||||
this.frontBack?.front?.forEach((item)=>{
|
||||
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
|
||||
// this.frontBack.back.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 = arr
|
||||
let imageCategory1
|
||||
if(arr.length > 1){
|
||||
imageCategory1 = arr[1].imageCategory
|
||||
}
|
||||
arr.forEach((i)=>{
|
||||
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
|
||||
let scaleWidth = i?.imageSize?Number(((i?.style?.width.replace(/px/g,'')*ratio)/(i?.imageSize[0]/i.scale[0])).toFixed(2)):1
|
||||
let scaleHeight = i?.imageSize?Number(((i?.style?.height.replace(/px/g,'')*ratio)/(i?.imageSize[1]/i.scale[1])).toFixed(2)):1
|
||||
item.scale = [scaleWidth,scaleHeight]
|
||||
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)]
|
||||
}
|
||||
})
|
||||
if(arr.length > 1 && item.type == this.capitalizeFirstLetter(imageCategory1)){
|
||||
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
|
||||
}
|
||||
})
|
||||
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
||||
(rv) => {
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
designItemDetail.designItemUrl = rv.designItemUrl
|
||||
designItemDetail.ifSubmit = true
|
||||
designItemDetail.currentFullBodyView = rv.currentFullBodyView
|
||||
rv.clothes.forEach((item)=>{
|
||||
designItemDetail.clothes.forEach((i)=>{
|
||||
if(item.id === i.id){
|
||||
i.layersObject = item.layersObject
|
||||
i.priority = item.layersObject[0].priority
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$emit('setDesignCoverage');
|
||||
this.store.commit("setDesignItemDetail", designItemDetail);
|
||||
this.setRevocation(designItemDetail,data)
|
||||
this.clear()
|
||||
}
|
||||
).catch(res=>{
|
||||
this.$emit('setParentLoadingShow');
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.designOpenrtion_modal {
|
||||
// max-width: 1440px;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
.ant-modal-body{
|
||||
padding: calc(5rem*1.2) calc(6rem*1.2) calc(0rem*1.2)!important;
|
||||
// height: calc(65vh - 6.calc(4rem*1.2));
|
||||
height: calc(65rem*1.2);
|
||||
display: flex;
|
||||
overflow-y: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-modal-content{
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.design_compile_content {
|
||||
// background: #f2f3fb;
|
||||
// padding-bottom: 2.calc(9rem*1.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.designOpenrtion_centent{
|
||||
// flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-content: space-around;
|
||||
flex-wrap: nowrap;
|
||||
margin: 0 auto;
|
||||
// overflow: hidden;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
&.active{
|
||||
flex-direction: row;
|
||||
}
|
||||
.designOpenrtion_imgMask{
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
// height: 100%;
|
||||
// overflow: hidden;
|
||||
height: calc(100% - 1.2rem - 4.8rem - 20%);
|
||||
margin: 0 auto;
|
||||
>img{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
>div{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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: calc(1rem*1.2);
|
||||
>div{
|
||||
width: calc(4rem*1.2);
|
||||
height: calc(4rem*1.2);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
margin-left: calc(.3rem*1.2);
|
||||
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: calc(0rem*1.2);
|
||||
}
|
||||
}
|
||||
.designOpenrtion_print,.detail_modal_item_front{
|
||||
z-index: 1;
|
||||
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(1.5rem*1.2);
|
||||
height: calc(1.5rem*1.2);
|
||||
padding: calc(1rem*1.2);
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
&.active{
|
||||
opacity: 1;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.subitOkPreviewBtn{
|
||||
z-index: 2;
|
||||
margin-bottom: calc(1rem*1.2);
|
||||
width: calc(10rem*1.2);
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.designOpenrtion_imgMask_open{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user