commit
This commit is contained in:
@@ -1,22 +1,25 @@
|
||||
<template>
|
||||
<div class="design_compile_content">
|
||||
<div class="designOpenrtion_centent" id="designOpenrtionCentent">
|
||||
<div class="designOpenrtion_imgMask">
|
||||
<div class="designOpenrtion_print">
|
||||
<div
|
||||
v-for="item,index in designItemDetail?.clothes"
|
||||
:key="item"
|
||||
:style="[printStyleList[index].style]"
|
||||
@mousedown.stop="itemMoveMousedown(index,$event)"
|
||||
class="modal_imgItem"
|
||||
@click="setpitch(item,index)" ref="content" >
|
||||
<img crossOrigin="anonymous" :src="item.path" class="designOpenrtion_imgItme" draggable="false">
|
||||
<!-- <img crossOrigin="anonymous" :src="item.path" :style="{transform:`scale(${printStyleList[index].transform.scale}) rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> -->
|
||||
</div>
|
||||
<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
|
||||
<!-- <div
|
||||
v-for="item,index in frontBack.back"
|
||||
:key="item"
|
||||
:style="item.style"
|
||||
@mousedown.stop="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" @mousedown.stop="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" @mousedown.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="item.style">
|
||||
<img :src="item.imageUrl" alt="">
|
||||
</div>
|
||||
<img class="perview_img" style="width: 400px; height: auto;" v-lazy="designItemDetail.designItemUrl || ''" :key="designItemDetail.designItemUrl">
|
||||
<div class="designOpenrtion_btn">
|
||||
<ul v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
|
||||
<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>
|
||||
@@ -25,8 +28,11 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="setPreview" class="subitOkPreviewBtn">OK</div>
|
||||
<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -35,14 +41,18 @@ import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "v
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { useStore } from "vuex";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import GO from '@/tool/GO';
|
||||
import { Https } from "@/tool/https";
|
||||
export default defineComponent({
|
||||
props: ["frontBack"],
|
||||
// props: ["frontBack"],
|
||||
setup(prop) {
|
||||
const store = useStore();
|
||||
|
||||
let designItemDetail = ref([])
|
||||
let designItemDetail = computed(()=>{
|
||||
return store.state.DesignDetailModule.designItemDetail
|
||||
})
|
||||
let current = inject('current')//父组件传过来的数据
|
||||
let printZIndex = ref(2)//印花优先级
|
||||
let printZIndex = ref(4)//印花优先级
|
||||
let printStyleList = ref([
|
||||
{
|
||||
centers:{
|
||||
@@ -56,7 +66,7 @@ export default defineComponent({
|
||||
bottom:"auto",
|
||||
width:100+'px',
|
||||
height:100+'px',
|
||||
zIndex:1,
|
||||
// zIndex:1,
|
||||
},
|
||||
transform:{
|
||||
scale:1,
|
||||
@@ -68,6 +78,7 @@ export default defineComponent({
|
||||
let direction = ref('')
|
||||
let imgDom = ref()
|
||||
let imgDomIndex = ref(0)
|
||||
let frontBack = ref({})
|
||||
return {
|
||||
designItemDetail,
|
||||
current,
|
||||
@@ -76,22 +87,20 @@ export default defineComponent({
|
||||
direction,//判断点击的是li那个边
|
||||
imgDom,
|
||||
imgDomIndex,
|
||||
frontBack
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadingShow:false,//加载中
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
let DesignParent = this.$parent
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
this.designItemDetail = designItemDetail
|
||||
// this.clearModal()
|
||||
console.log(this.frontBack);
|
||||
// console.log(this.current,DesignParent.frontBack);
|
||||
console.log(DesignParent);
|
||||
this.printStyleList.push({
|
||||
centers:{
|
||||
left:0,
|
||||
@@ -104,7 +113,7 @@ export default defineComponent({
|
||||
bottom:"auto",
|
||||
width:100+'px',
|
||||
height:100+'px',
|
||||
zIndex:1,
|
||||
// zIndex:1,
|
||||
},
|
||||
transform:{
|
||||
scale:1,
|
||||
@@ -112,44 +121,116 @@ export default defineComponent({
|
||||
},
|
||||
designOpenrtionBtn:false
|
||||
})
|
||||
this.setImgSize()
|
||||
},
|
||||
async setImgSize(){
|
||||
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 = frontIndex-=1
|
||||
}else{
|
||||
back[index] = v.layersObject[i]
|
||||
back[index].style.zIndex = backIndex-=1
|
||||
// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
|
||||
}
|
||||
}
|
||||
})
|
||||
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,
|
||||
}
|
||||
},
|
||||
//按比设置单件衣服宽高位置
|
||||
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
|
||||
},
|
||||
setpitch(item,index){
|
||||
this.printStyleList.forEach((v)=>{
|
||||
this.frontBack.front.forEach((v)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
this.printStyleList[index].designOpenrtionBtn = true
|
||||
this.printStyleList[index].style.zIndex = this.printZIndex++
|
||||
this.frontBack.front[index].designOpenrtionBtn = true
|
||||
this.frontBack.front[index].style.zIndex = this.printZIndex++
|
||||
this.frontBack.back[index].style.zIndex = this.printZIndex
|
||||
},
|
||||
// 设置移动
|
||||
itemMoveMousedown(index,event){
|
||||
this.imgDomIndex = index
|
||||
this.printStyleList.forEach((v)=>{
|
||||
this.frontBack.front.forEach((v)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
||||
this.printStyleList[index].designOpenrtionBtn = true
|
||||
this.printStyleList[index].style.zIndex = this.printZIndex++
|
||||
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.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.offsetX-left
|
||||
this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
|
||||
let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
|
||||
let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
|
||||
this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
|
||||
this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
|
||||
document.addEventListener("mouseup", this.mouseup);
|
||||
document.addEventListener("mousemove", this.moveMousemove);
|
||||
},
|
||||
//设置尺寸
|
||||
itemSizeMousedown(direction,event){
|
||||
this.direction = direction
|
||||
this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
|
||||
this.printStyleList[this.imgDomIndex].designOpenrtionBtn = true
|
||||
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.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
|
||||
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
|
||||
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
|
||||
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
|
||||
}else{
|
||||
this.printStyleList[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
|
||||
this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
||||
this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
|
||||
this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
||||
}
|
||||
|
||||
document.addEventListener("mouseup", this.sizeMouseup);
|
||||
@@ -159,22 +240,22 @@ export default defineComponent({
|
||||
moveMousemove(e) {
|
||||
let imgDomWH = this.imgDom.getBoundingClientRect()
|
||||
let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
||||
let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
|
||||
this.printStyleList[this.imgDomIndex].style.left = x
|
||||
this.printStyleList[this.imgDomIndex].style.top = y
|
||||
if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
|
||||
this.printStyleList[this.imgDomIndex].style.left = parentNode.width - imgDomWH.width+'px'
|
||||
}
|
||||
if(x.replace(/px/g,'') <= 0){
|
||||
this.printStyleList[this.imgDomIndex].style.left = 0+'px'
|
||||
}
|
||||
if(y.replace(/px/g,'') >= parentNode.height - imgDomWH.height){
|
||||
this.printStyleList[this.imgDomIndex].style.top = parentNode.height - imgDomWH.height+'px'
|
||||
}
|
||||
if(y.replace(/px/g,'') <= 0){
|
||||
this.printStyleList[this.imgDomIndex].style.top = 0+'px'
|
||||
}
|
||||
let x = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.y - 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) {
|
||||
@@ -182,42 +263,45 @@ export default defineComponent({
|
||||
let parentNode =this.imgDom.parentNode
|
||||
let width = imgDomWH.width
|
||||
let height = imgDomWH.height
|
||||
let num = width/height
|
||||
let w,h
|
||||
let num = height/width
|
||||
//判断移动四个边
|
||||
if(this.direction == 'right'){
|
||||
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
|
||||
h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||
w = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)
|
||||
h = (e.x - this.frontBack.front[this.imgDomIndex].centers.left)*num
|
||||
width = w+'px'
|
||||
height = w*num+'px'
|
||||
}else if(this.direction == 'top'){
|
||||
this.printStyleList[this.imgDomIndex].style.top = 'auto'
|
||||
num = width/height
|
||||
this.frontBack.front[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'
|
||||
w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
|
||||
h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
|
||||
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)
|
||||
|
||||
height = h+'px'
|
||||
width = h*num+'px'
|
||||
}else if(this.direction == 'bottom'){
|
||||
h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
|
||||
num = width/height
|
||||
h = (e.y - this.frontBack.front[this.imgDomIndex].centers.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 = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
|
||||
w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
|
||||
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)
|
||||
|
||||
width = w+'px'
|
||||
height = w*num+'px'
|
||||
}
|
||||
//判断尺寸是否到边
|
||||
this.printStyleList[this.imgDomIndex].style.width = width
|
||||
this.printStyleList[this.imgDomIndex].style.height = height
|
||||
this.frontBack.front[this.imgDomIndex].style.width = width
|
||||
this.frontBack.front[this.imgDomIndex].style.height = height
|
||||
|
||||
},
|
||||
//鼠标抬起
|
||||
sizeMouseup(e){
|
||||
this.printStyleList[this.imgDomIndex].style={
|
||||
this.frontBack.front[this.imgDomIndex].style={
|
||||
right:'auto',
|
||||
left:this.imgDom.offsetLeft+'px',
|
||||
bottom:'auto',
|
||||
@@ -226,6 +310,7 @@ export default defineComponent({
|
||||
width:this.imgDom.offsetWidth+'px',
|
||||
zIndex:this.printZIndex
|
||||
}
|
||||
this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
|
||||
document.removeEventListener("mouseup", this.sizeMouseup);
|
||||
document.removeEventListener("mousemove", this.sizeMousemove);
|
||||
},
|
||||
@@ -240,8 +325,184 @@ export default defineComponent({
|
||||
this.clothes = []
|
||||
this.printStyleList.splice(1,this.printStyleList.length-1)
|
||||
},
|
||||
setPreview(){
|
||||
|
||||
capitalizeFirstLetter(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
},
|
||||
setPreviewData(){
|
||||
this.$emit('setSubmit','preview');
|
||||
},
|
||||
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;
|
||||
// });
|
||||
// this.frontBack.front.sort((a, b) => {
|
||||
// var a_num = a.style.zIndex;
|
||||
// var b_num = b.style.zIndex;
|
||||
// return a_num - b_num;
|
||||
// });
|
||||
data.designSingleItemDTOList.forEach((item)=>{
|
||||
let front = this.frontBack.front
|
||||
let imageCategory1 = front[1].imageCategory
|
||||
front.forEach((i)=>{
|
||||
let imageCategory = i.imageCategory.split('_')[0]
|
||||
if(item.type == this.capitalizeFirstLetter(imageCategory)){
|
||||
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
|
||||
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.offset = [(i?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
|
||||
}
|
||||
})
|
||||
if(item.type == this.capitalizeFirstLetter(imageCategory1)){
|
||||
item.scale = front?.imageSize?Number(((front?.style?.width.replace(/px/g,'')*ratio)/front?.imageSize[0]).toFixed(2)):1
|
||||
}
|
||||
})
|
||||
this.loadingShow = true
|
||||
Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
||||
(rv) => {
|
||||
this.loadingShow = false
|
||||
let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
|
||||
designItemDetail.designItemUrl = rv.designItemUrl
|
||||
designItemDetail.currentFullBodyView = rv.currentFullBodyView
|
||||
rv.clothes.forEach((item)=>{
|
||||
designItemDetail.clothes.forEach((i)=>{
|
||||
if(item.type === i.type){
|
||||
// item.position = [
|
||||
// item.position[0] += left,
|
||||
// item.position[1] += top
|
||||
// ]
|
||||
// item.layersObject[1].position = [
|
||||
// item.layersObject[1].position[0]+=item.layersObject[1].offset[1],
|
||||
// item.layersObject[1].position[1]+=item.layersObject[1].offset[0]
|
||||
// ],
|
||||
// item.layersObject[0].position = [
|
||||
// item.layersObject[0].position[0]+=item.layersObject[0].offset[1],
|
||||
// item.layersObject[0].position[1]+=item.layersObject[0].offset[0]
|
||||
// ]
|
||||
i.layersObject = item.layersObject
|
||||
}
|
||||
})
|
||||
// data.designSingleItemDTOList.front.forEach((i)=>{
|
||||
// if(item.type === i.type){
|
||||
// // item.position = [
|
||||
// // item.position[0] += left,
|
||||
// // item.position[1] += top
|
||||
// // ]
|
||||
// console.log(item.position,left ,top);
|
||||
// i.layersObject = item.layersObject
|
||||
// }
|
||||
// })
|
||||
})
|
||||
this.$emit('setDesignCoverage');
|
||||
this.store.commit("setDesignItemDetail", designItemDetail);
|
||||
// let designCollectionList = this.store.state.HomeStoreModule.designCollectionList
|
||||
// let likeDesignCollectionList = this.store.state.HomeStoreModule.likeDesignCollectionList
|
||||
// designCollectionList.forEach((item) => {
|
||||
// if(item.designItemId == rv.designItemId){
|
||||
// item.designOutfitUrl = rv.designItemUrl
|
||||
// }
|
||||
// });
|
||||
// likeDesignCollectionList.forEach((item) => {
|
||||
// if(item.designItemId == rv.designItemId){
|
||||
// item.designOutfitUrl = rv.designItemUrl
|
||||
// }
|
||||
// });
|
||||
// this.store.commit('setDesignCollectionList',designCollectionList)
|
||||
// this.store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
|
||||
}
|
||||
).catch(res=>{
|
||||
this.loadingShow = false
|
||||
});
|
||||
//顺序不能乱
|
||||
// let arr = [...this.frontBack.front,...this.frontBack.back,...this.frontBack.body.layersObject]
|
||||
// let layers=[]
|
||||
// let num = 0
|
||||
// let front = this.frontBack.back.length+2
|
||||
// let back = this.frontBack.back.length-1
|
||||
// let str
|
||||
// arr.forEach(item => {
|
||||
// let obj
|
||||
// if(item.imageCategory == 'body'){
|
||||
// obj = item
|
||||
// obj.priority = this.frontBack.back.length+1
|
||||
// }else{
|
||||
// str = str?str:item?.imageCategory.split('_')[0]
|
||||
// obj = {
|
||||
// id:item.id,
|
||||
// imageCategory:item.imageCategory,
|
||||
// scale:item?.imageSize?Number(((item?.style?.width.replace(/px/g,'')*ratio)/item?.imageSize[0]).toFixed(2)):1,
|
||||
// position:[Number((item?.style?.top?.replace(/px/g,'')*ratio).toFixed(0)),Number((item?.style?.left?.replace(/px/g,'')*ratio).toFixed(0))],
|
||||
// imageSize: item.imageSize,
|
||||
// priority:item.style.zIndex,
|
||||
// }
|
||||
// if(item?.imageCategory?.indexOf("front") == -1){
|
||||
// // if(str == item?.imageCategory.split('_')[0])
|
||||
// if(str == item?.imageCategory.split('_')[0]){
|
||||
// num = 0
|
||||
// back = this.frontBack.back.length-1
|
||||
// }else{
|
||||
// num = 1
|
||||
// back++
|
||||
// }
|
||||
// obj.scale = layers[num].scale
|
||||
// obj.position = layers[num].position
|
||||
// obj.imageSize = layers[num].imageSize
|
||||
// obj.priority = back
|
||||
// }else{
|
||||
// obj.priority = front++
|
||||
// }
|
||||
|
||||
// }
|
||||
// obj.imageUrl = item.imageMinioUrl
|
||||
// obj.maskUrl = item.maskMinioUrl
|
||||
// layers.push(obj)
|
||||
// });
|
||||
// console.log(layers);
|
||||
// let data = {
|
||||
// layers:{
|
||||
// designItemId:designItemDetail.designItemId,
|
||||
// designItemUrl:designItemDetail.designItemUrl,
|
||||
// layers:layers
|
||||
// },
|
||||
// timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
// }
|
||||
|
||||
// this.loadingShow = true
|
||||
// Https.axiosPost(Https.httpUrls.designSingle, data).then(
|
||||
// (rv) => {
|
||||
// // let top,bottom
|
||||
// // let desingStr0 = designItemDetail.clothes[0].type
|
||||
// // let desingStr1 = designItemDetail.clothes[1].type
|
||||
// // rv.layers.forEach((item)=>{
|
||||
// // let str = this.capitalizeFirstLetter(item.imageCategory)
|
||||
// // if(str.split('_')[0] == desingStr0){
|
||||
// // top.push(item)
|
||||
// // }else if(str.split('_')[0] == desingStr1){
|
||||
// // bottom.push(item)
|
||||
// // }
|
||||
// // })
|
||||
// // console.log(rv,designItemDetail);
|
||||
// // designItemDetail.clothes[0]
|
||||
// // designItemDetail.clothes.forEach((item)=>{
|
||||
// // if(item.type == desingStr0){
|
||||
// // item.layersObject = top
|
||||
// // }else if(item.type == desingStr1){
|
||||
// // item.layersObject = bottom
|
||||
// // }
|
||||
// // })
|
||||
// // this.store.commit("setDesignItemDetail", designItemDetail);
|
||||
// this.loadingShow = false
|
||||
// }
|
||||
// ).catch(res=>{
|
||||
// this.loadingShow = false
|
||||
// });
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -271,7 +532,6 @@ export default defineComponent({
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.designOpenrtion_centent{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -290,7 +550,6 @@ export default defineComponent({
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
>img{
|
||||
@@ -304,23 +563,27 @@ export default defineComponent({
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.designOpenrtion_print{
|
||||
.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;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.designOpenrtion_print{
|
||||
z-index: 1 !important;
|
||||
}
|
||||
.designOpenrtion_btn{
|
||||
z-index: 3;
|
||||
z-index: 9999;
|
||||
ul{
|
||||
list-style: none;
|
||||
// width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user