From 030aa55d3890ccca0f0f9d784f729f8ff695c9b1 Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Thu, 22 Feb 2024 10:03:51 +0800
Subject: [PATCH] fix

---
 src/assets/style/style.css                    |  48 +-
 src/assets/style/style.less                   |   2 +-
 src/component/Detail/DesignDetail.vue         |   2 +-
 src/component/Detail/DesignDetailAlter.vue    |  41 +-
 .../Detail/DesignPrintOperationMobile.vue     |  14 +-
 src/component/Detail/habit.vue                |   2 +-
 src/component/Detail/magnifyingGlass.vue      |   2 +-
 src/component/Detail/setDesignItem2.vue       | 664 ++++++++++++++++++
 src/component/Detail/setDesignItemMobile.vue  |  16 +-
 src/views/HomeView.vue                        |   2 +-
 10 files changed, 730 insertions(+), 63 deletions(-)
 create mode 100644 src/component/Detail/setDesignItem2.vue

diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 1941986e..ef58b821 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -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;
 }
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index 29a715f1..222d866c 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -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;
diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue
index f96273e2..e59834a6 100644
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -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';
diff --git a/src/component/Detail/DesignDetailAlter.vue b/src/component/Detail/DesignDetailAlter.vue
index f86aaf70..f39e4592 100644
--- a/src/component/Detail/DesignDetailAlter.vue
+++ b/src/component/Detail/DesignDetailAlter.vue
@@ -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:{
 		//点击判断
diff --git a/src/component/Detail/DesignPrintOperationMobile.vue b/src/component/Detail/DesignPrintOperationMobile.vue
index 6afe2bec..03de1dc3 100644
--- a/src/component/Detail/DesignPrintOperationMobile.vue
+++ b/src/component/Detail/DesignPrintOperationMobile.vue
@@ -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
diff --git a/src/component/Detail/habit.vue b/src/component/Detail/habit.vue
index 70978f8c..88fcd294 100644
--- a/src/component/Detail/habit.vue
+++ b/src/component/Detail/habit.vue
@@ -367,7 +367,7 @@ export default defineComponent({
 						num = -25
 					}
 					el.scrollBy(num, 0);
-				})
+				},{ passive: true })
 			}
 		},
 		observe:{
diff --git a/src/component/Detail/magnifyingGlass.vue b/src/component/Detail/magnifyingGlass.vue
index 13dbe830..800055b6 100644
--- a/src/component/Detail/magnifyingGlass.vue
+++ b/src/component/Detail/magnifyingGlass.vue
@@ -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)
diff --git a/src/component/Detail/setDesignItem2.vue b/src/component/Detail/setDesignItem2.vue
new file mode 100644
index 00000000..d447fb83
--- /dev/null
+++ b/src/component/Detail/setDesignItem2.vue
@@ -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>
\ No newline at end of file
diff --git a/src/component/Detail/setDesignItemMobile.vue b/src/component/Detail/setDesignItemMobile.vue
index e890863b..f4bde99d 100644
--- a/src/component/Detail/setDesignItemMobile.vue
+++ b/src/component/Detail/setDesignItemMobile.vue
@@ -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>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index ea187ba7..492a085d 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -478,7 +478,7 @@ export default defineComponent({
 						num = -25
 					}
 					el.scrollBy(num, 0);
-				},true)
+				},{ passive: true })
 			}
 		}
 	},