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

fix

Browse Source
This commit is contained in:
X1627315083
2024-02-22 10:03:51 +08:00
parent 729da18df8
commit 030aa55d38
10 changed files with 730 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/assets/style/style.css
View File

@@ -618,17 +618,17 @@ li {
color: #000000;
}
.collection_modal .ant-modal-body,
.payOrder_modal.design_detail_modal_component .ant-modal-body,
.payOrder_modal .ant-modal-body,
.design_detail_modal_component .ant-modal-body,
.designOpenrtion_modal .ant-modal-body,
.library_page .ant-modal-body,
.detail_modal_body_select .ant-modal-body {
.library_page .ant-modal-body {
overflow-y: hidden;
}
.collection_modal .design_title_text,
.payOrder_modal.design_detail_modal_component .design_title_text,
.payOrder_modal .design_title_text,
.design_detail_modal_component .design_title_text,
.designOpenrtion_modal .design_title_text,
.library_page .design_title_text,
.detail_modal_body_select .design_title_text {
.library_page .design_title_text {
font-size: var(--aida-fsize2);
font-weight: 900;
color: rgba(0, 0, 0, 0.65);
@@ -636,19 +636,19 @@ li {
margin-bottom: calc(2rem*1.2);
}
.collection_modal .design_title_text .design_title_text_intro,
.payOrder_modal.design_detail_modal_component .design_title_text .design_title_text_intro,
.payOrder_modal .design_title_text .design_title_text_intro,
.design_detail_modal_component .design_title_text .design_title_text_intro,
.designOpenrtion_modal .design_title_text .design_title_text_intro,
.library_page .design_title_text .design_title_text_intro,
.detail_modal_body_select .design_title_text .design_title_text_intro {
.library_page .design_title_text .design_title_text_intro {
font-size: var(--aida-fsize1-4);
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
}
.collection_modal .ant-upload.ant-upload-select-picture-card,
.payOrder_modal.design_detail_modal_component .ant-upload.ant-upload-select-picture-card,
.payOrder_modal .ant-upload.ant-upload-select-picture-card,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card,
.library_page .ant-upload.ant-upload-select-picture-card,
.detail_modal_body_select .ant-upload.ant-upload-select-picture-card {
.library_page .ant-upload.ant-upload-select-picture-card {
background: #FFFFFF;
width: calc(6rem*1.2);
height: calc(6rem*1.2);
@@ -657,33 +657,33 @@ li {
margin: 0;
}
.collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.payOrder_modal.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.payOrder_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.library_page .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
.detail_modal_body_select .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
.library_page .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
font-size: calc(3.2rem*1.2);
color: #B7B7B7;
}
.collection_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.payOrder_modal.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.payOrder_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.library_page .ant-upload.ant-upload-select-picture-card .ant-upload-text,
.detail_modal_body_select .ant-upload.ant-upload-select-picture-card .ant-upload-text {
.library_page .ant-upload.ant-upload-select-picture-card .ant-upload-text {
font-size: calc(1.6rem*1.2);
color: #B7B7B7;
}
.collection_modal .ant-upload-list-picture-card-container,
.payOrder_modal.design_detail_modal_component .ant-upload-list-picture-card-container,
.payOrder_modal .ant-upload-list-picture-card-container,
.design_detail_modal_component .ant-upload-list-picture-card-container,
.designOpenrtion_modal .ant-upload-list-picture-card-container,
.library_page .ant-upload-list-picture-card-container,
.detail_modal_body_select .ant-upload-list-picture-card-container {
.library_page .ant-upload-list-picture-card-container {
display: none !important;
}
.collection_modal .ant-upload-picture-card-wrapper,
.payOrder_modal.design_detail_modal_component .ant-upload-picture-card-wrapper,
.payOrder_modal .ant-upload-picture-card-wrapper,
.design_detail_modal_component .ant-upload-picture-card-wrapper,
.designOpenrtion_modal .ant-upload-picture-card-wrapper,
.library_page .ant-upload-picture-card-wrapper,
.detail_modal_body_select .ant-upload-picture-card-wrapper {
.library_page .ant-upload-picture-card-wrapper {
width: auto;
vertical-align: top;
}

2
src/assets/style/style.less
View File

@@ -722,7 +722,7 @@ ul,li{
}
}
//collection 弹窗
.collection_modal,.payOrder_modal.design_detail_modal_component,.designOpenrtion_modal,.library_page,.detail_modal_body_select{
.collection_modal,.payOrder_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page{
.ant-modal-body{
overflow-y: hidden;

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

@@ -148,7 +148,7 @@
import { defineComponent,computed,ref,provide,nextTick,createVNode} from 'vue'
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';

41
src/component/Detail/DesignDetailAlter.vue
View File

@@ -490,26 +490,29 @@ export default defineComponent({
mounted () {
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("detail_modal_body_select")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
let hex = result.sRGBHex.replace("#", "");
// 将十六进制颜色码拆分成红、绿、蓝三个部分
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
message.info(this.t('DesignDetailAlter.jsContent1'))
}
nextTick().then(()=>{
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("detail_modal_body_select")?.[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
let hex = result.sRGBHex.replace("#", "");
// 将十六进制颜色码拆分成红、绿、蓝三个部分
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
// return `rgb(${r}, ${g}, ${b})`;
// box.style.backgroundColor = label.textContent = result.sRGBHex;
} catch (e) {
message.info(this.t('DesignDetailAlter.jsContent1'))
}
})
})
},
methods:{
//点击判断

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

@@ -73,7 +73,7 @@
v-for="item,index in designOpenrtionList"
:key="item"
:style="[printStyleList?.[index]?.style]"
@touchstart.stop="itemMoveMousedown(index,$event)"
@touchstart.passive="itemMoveMousedown(index,$event)"
class="modal_imgItem"
@click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false">
@@ -83,11 +83,11 @@
<img :src="current?.path" alt="" class="designOpenrtion_sketch">
<img v-show="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch_mask">
<div class="designOpenrtion_btn">
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :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 v-show="!overallSingle"></div>
@@ -232,7 +232,7 @@ export default defineComponent({
el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
}
}
document.addEventListener('touchmove', touchmove);
document.addEventListener('touchmove', touchmove,{passive:true});
// 添加鼠标松开事件监听器
let touchend = () => {
value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle

2
src/component/Detail/habit.vue
View File

@@ -367,7 +367,7 @@ export default defineComponent({
num = -25
}
el.scrollBy(num, 0);
})
},{ passive: true })
}
},
observe:{

2
src/component/Detail/magnifyingGlass.vue
View File

@@ -60,7 +60,7 @@ export default defineComponent({
bigImg.style.backgroundPosition = `${bgPosX}px ${bgPosY}px`;
bigImg.style.backgroundSize = `${bgPosW}px ${bgPosH}px`;
}
document.addEventListener('touchmove',touchmove)
document.addEventListener('touchmove',touchmove,{passive:true})
el.addEventListener('touchend',()=>{
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('touchstart',touchstart)

664
src/component/Detail/setDesignItem2.vue Normal file
View File

@@ -0,0 +1,664 @@
<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>
<canvas class="designOpenrtion_imgMask" ref="canvasDom" ></canvas>
<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 = reactive({
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 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.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)
}
const canvasDom = ref(null)
let canvas = reactive({})
let setCanvas = (frontBack)=>{
canvas = new fabric.Canvas(canvasDom.value, {
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();
let fontBackMove = []
canvas.on('selection:cleared', ()=>{
designShowIndex.value = -1
})
frontBack.back.forEach((item) => {
console.log(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
});
canvas.add(img);
canvasFontBackMove.back.forEach((backItem) => {
if(backItem && backItem.id == item.id){
console.log(backItem);
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();
console.log(objects);
}
let clothesOpen = (item,index)=>{
setpitch(item,index)
designShowIndex.value = index
}
let setpitch = (item,index)=>{
// this.designItemDetail.clothes.forEach((item)=>{
// item.clothesOpen = false
// })
// this.designItemDetail.clothes[index].clothesOpen = true
// console.log(canvas.getActiveObject());
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);
}
return {
designItemDetail,
current,
printZIndex,
designShowIndex,
frontBack,
setRevocation,
frontBackOld,
canvasDom,
canvasFontBackMove,
setImgSize,
clothesOpen,
};
},
data() {
return {
loadingShow:false,//加载中
store: useStore(),
};
},
mounted () {
},
methods: {
init(){
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.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
// // 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,
// }))
// this.setCanvas(this.frontBack)
// },
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.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(4rem*1.2) calc(5rem*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;
>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>

16
src/component/Detail/setDesignItemMobile.vue
View File

@@ -11,24 +11,24 @@
v-for="item,index in frontBack.back"
:key="item"
:style="item.style"
@touchstart.stop="itemMoveMousedown(index,$event)"
@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.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="frontBack.front[index].style">
<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.stop="itemMoveMousedown(index,$event)" @click="setpitch(item,index)" :style="item.style">
<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.stop="itemMoveMousedown(index,$event)">
<li class="designOpenrtion_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
<li class="designOpenrtion_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
<li class="designOpenrtion_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
<li class="designOpenrtion_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @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>

2
src/views/HomeView.vue
View File

@@ -478,7 +478,7 @@ export default defineComponent({
num = -25
}
el.scrollBy(num, 0);
},true)
},{ passive: true })
}
}
},