分割

2024-09-03 16:39:06 +08:00
parent eb54023940 d840d3de35
commit d7a57a39ee
54 changed files with 1298 additions and 723 deletions
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -59,7 +59,7 @@
 						<!-- 全屏 --> 
 						<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
 						<!-- 编辑 -->
-						<i v-show="!body" class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
+						<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
 						<i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
 						<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i>

@@ -470,6 +470,9 @@ export default defineComponent({
 				
            }else{
                this.designShowPrview = 1;
+				this.frontBack = {}
+				let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
+				setDesignItem.clear()
 				// this.designItemDetailUrl = {}
            }
        },
@@ -741,6 +744,8 @@ export default defineComponent({
 					changed:item.changed?item.changed:false,
 					designType:item.designType?item.designType:"Library",
 					offset:item.layersObject?.[1]?.offset == null?[0,0]:item.layersObject[1].offset,
+					maskMinioUrl:item.layersObject[1].maskMinioUrl,
+					maskUrl:item.layersObject[1].maskUrl,
 					scale:item.layersObject?.[1]?.scale?item.layersObject[1].scale:[1,1],
 					printObject:{
 						// path:item.printObject.path?item.printObject.path :'',
@@ -937,6 +942,7 @@ export default defineComponent({
 					designItemDetail.clothes[this.currentIndex].minIOPath = rv.clothes[this.currentIndex].minIOPath
 					this.current.path = rv.clothes[this.currentIndex].minIOPath
 					designItemDetail.clothes[this.currentIndex].path = rv.clothes[this.currentIndex].path
+					designItemDetail.clothes[this.currentIndex].layersObject = rv.clothes[this.currentIndex].layersObject
 					designItemDetail.clothes[this.currentIndex].sketchString = ''
 					data.designSingleItemDTOList[this.currentIndex].sketchString =''
 					data.designSingleItemDTOList[this.currentIndex].path =rv.clothes[this.currentIndex].minIOPath
@@ -1088,6 +1094,8 @@ export default defineComponent({
 				designType:this.current.designType?this.current.designType:'Library',
 				path:this.current.minIOPath?this.current.minIOPath:'',
 				offset:this.current.layersObject?.[1]?.offset?this.current.layersObject[1].offset:[0,0],
+				maskMinioUrl:this.current.layersObject[1].maskMinioUrl,
+				maskUrl:this.current.layersObject[1].maskUrl,
 				priority:this.current.priority,
 				trims:this.current.trims,
 				scale:this.current.layersObject?.[1]?.scale?this.current.layersObject[1].scale:[1,1],
--- a/src/component/Detail/DesignElements.vue
+++ b/src/component/Detail/DesignElements.vue
@@ -49,7 +49,8 @@
 								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElements_imgItme" draggable="false"> 
 							</div>
 						</div>
-						<img :src="current?.path" alt="" class="designElements_sketch">
+						<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElements_sketch">
+						<!-- <img :src="current?.path" alt="" class="designElements_sketch"> -->
 						<div class="designElements_btn">
 							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
 								<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
--- a/src/component/Detail/DesignElementsMobile.vue
+++ b/src/component/Detail/DesignElementsMobile.vue
@@ -49,7 +49,8 @@
 								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElementsMobile_imgItme" draggable="false"> 
 							</div>
 						</div>
-						<img :src="current?.path" alt="" class="designElementsMobile_sketch">
+						<!-- <img :src="current?.path" alt="" class="designElementsMobile_sketch"> -->
+						<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElementsMobile_sketch">
 						<div class="designElementsMobile_btn">
 							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
 								<li class="designElementsMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
@@ -491,7 +492,7 @@ export default defineComponent({
 			// let num = this.sketch/
 			return new Promise(async (resolve, reject) => {
 				let arr = JSON.parse(JSON.stringify(this.printStyleList))
-				let sketch = document.getElementsByClassName("designElements_sketch")[0]
+				let sketch = document.getElementsByClassName("designElementsMobile_modal")[0]?.getElementsByClassName('designElementsMobile_sketch')[0]
 				let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
 				let prints = []
 				let scale
@@ -833,8 +834,8 @@ export default defineComponent({
 					li{
 						cursor: pointer;
 						// border-radius: 50%;
-						width: calc(1rem*1.2);
-						height: calc(1rem*1.2);
+						width: calc(2.5rem*1.2);
+						height: calc(2.5rem*1.2);
 						background-color: rgb(20, 188, 255);
 						position: absolute;
 						pointer-events: none;
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -63,6 +63,7 @@
 								<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
 								<a-slider id="system_silder"
 									:min="20"
+									:max="1000"
 									v-model:value="systemDesignerPercentage"
 									@afterChange="systemDesigner"
 									:tip-formatter="formatter"
@@ -366,10 +367,9 @@ export default defineComponent({
 			})
 		},
 		systemDesigner(num) {
-			
        },
 		formatter(value) {
-			return `${value*3}%`;
+			return `${value}%`;
 		},
 		
 		setOveralSingle(){
--- a/src/component/Detail/DesignPrintOperationMobile.vue
+++ b/src/component/Detail/DesignPrintOperationMobile.vue
@@ -65,7 +65,8 @@
 							<div v-show="!overallSingle" class="habit_System_Designer">
 								<div class="habit_System_Designer_text">Scale</div>
 								<a-slider id="system_silder"
-									:min="1"
+									:min="20"
+									:max="1000"
 									v-model:value="systemDesignerPercentage"
 									@afterChange="systemDesigner"
 									:tip-formatter="formatter"
@@ -366,11 +367,9 @@ export default defineComponent({
 			})
 		},
 		systemDesigner(num) {
-			let DesignPrintOperationParent = this.$parent
-			DesignPrintOperationParent.systemDesignerPercentage = num
        },
 		formatter(value) {
-			return `${value*3}%`;
+			return `${value}%`;
 		},
 		
 		setOveralSingle(){
@@ -808,14 +807,13 @@ export default defineComponent({
 					index = ind
 				}
 			})
-			this.designOpenrtion = false
 			if(this.designItemDetailTS.rv){
 				designItemDetail.currentFullBodyView = this.designItemDetailTS.rv.currentFullBodyView
 				designItemDetail.clothes[index].printObject.ifSingle = this.overallSingle
 				designItemDetail.clothes[index].layersObject = this.designItemDetailTS.rv.clothes[index].layersObject
+				designItemDetail.clothes[index].undividedLayer = this.designItemDetailTS.rv.clothes[index].undividedLayer
 				designItemDetail.clothes[index].trims = this.designItemDetailTS.rv.clothes[index].trims
 				designItemDetail.clothes[index].printObject.prints = this.setOkData
-				// designItemDetail.clothes[index].printObject.prints = this.computeZindex()
 				designItemDetail.ifSubmit = true
 				designItemDetail.clothes.forEach((item,i)=>{
 					let a
@@ -832,6 +830,7 @@ export default defineComponent({
 				this.setRevocation(designItemDetail,this.designItemDetailTS.data)
 				this.designItemDetailTS = {}
 			}
+			this.designOpenrtion = false
 			if(this.driver__.driver){
 				nextTick(()=>{
 					driverObj__.moveNext();
--- a/src/component/Detail/addDetails.vue
+++ b/src/component/Detail/addDetails.vue
@@ -290,6 +290,7 @@ export default defineComponent({
 			if(str != 'mouseUp'){
 				canvas.remove(brushIndicator)
 			}
+			if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
 			const canvasAsJson = JSON.stringify(canvas.toJSON());
 			normalCanvasState.value.push(canvasAsJson);
 		}
@@ -344,7 +345,7 @@ export default defineComponent({
 							top:item.top*scale,
 						}
 					)
-					exportCanvas.add(obj)
+				Z	exportCanvas.add(obj)
 					if(allObjects.length-1 == index){
 						let data = exportCanvas.toDataURL('jpg')
 						cancelDsign()
--- a/src/component/Detail/editFrontBack.vue
+++ b/src/component/Detail/editFrontBack.vue
@@ -10,6 +10,8 @@
 				<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
 				<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
 				<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
+				<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:rgba == 'rgb(255,0,0)'}" title="front"></div>
+				<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:rgba == 'rgb(0,255,0)'}" title="back"></div>
 				<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
 				<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
 				<div @click="setSubmit">保存</div>
@@ -48,9 +50,8 @@ export default defineComponent({
 		// 	return props.patchData
 		// })
 		watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
+			if(newVal == -1) return
 			imgDomIndex = newVal
-			console.log(newVal,oldVal)
-			console.log(props.patchData);
 			props.patchData.front.imageUrl=  ''
 			init(props.patchData.front[newVal],'')
 		})
@@ -112,8 +113,8 @@ export default defineComponent({
 					
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
-					exportUrl = data.imageUrl
-					fabric.Image.fromURL(data.imageUrl, function(img) {
+					exportUrl = data.maskUrl
+					fabric.Image.fromURL(data.maskUrl, function(img) {
 						// 设置背景图对象的宽度和高度与 canvas 相同
 						img.scaleToWidth(canvas.width);
 						img.scaleToHeight(canvas.height);;
@@ -133,24 +134,29 @@ export default defineComponent({
 						}else{
 							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
 						}
+						setPencilWidth()
 						updateCanvasState()
 						loadingShow.value = false
 					},{ crossOrigin: "Anonymous" });
 					// 鼠标抬起事件
 					canvas.on('mouse:up', function(event) {
-							console.log(event);
 							if(canvasBtn.canvasState != 'move'){
 							updateCanvasState('mouseUp')
 						}
 					});
-
+					
 					//画布上移动
 					canvas.on("mouse:move", event =>setCanvasMove(event));
 					canvas.add(brushIndicator)
+					canvas.on("mouse:down", event=>brushIndicator.bringToFront());
+					canvas.on('object:added', function() {
+						brushIndicator.bringToFront();
+					});
 					setOperation('pencil')
+					createSetTimeSubmit()
 					img.remove()
 				}
-				img.src = data.imageUrl
+				img.src = data.maskUrl
 				
 			})
        }
@@ -171,13 +177,20 @@ export default defineComponent({
 				})
 				
 			}
+		let setClone = ()=>{
+			// canvasBtn.canvasState = 'move'
+		    // canvasBtn.spreadState = false
+			let canvasBox = document.querySelector(".exportCanvasBox_center");
+			let oldCanvasDom = canvasBox.querySelector('.canvas-container')
+			let oldCanvasDom1 =  canvasBox.querySelector('canvas')
+			if(oldCanvasDom)oldCanvasDom.remove()
+			if(oldCanvasDom1)oldCanvasDom1.remove()
+		}
 		let clearCanvas = ()=>{
-		    canvasBtn.canvasState = 'move'
-		    canvasBtn.spreadState = false
 			document.removeEventListener("keydown", canvasKeyDown);
 			document.removeEventListener("keyup", canvasKeyUp);
 		}
-		let rgba = 'rgba(0, 0, 0, 1)'
+		let rgba = ref('rgb(255,0,0)')
 		let brushIndicator = new fabric.Circle({
 			radius:2,
 			fill: 'rgba(0, 0, 0, 0)',
@@ -205,6 +218,7 @@ export default defineComponent({
 				}
 				// brushIndicator.fill = canvasPencilColor.value
 				brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
+				brushIndicator.bringToFront()
 			}
 			canvas.requestRenderAll()
 		}
@@ -216,12 +230,18 @@ export default defineComponent({
 			}else if(str == 'pencil'){
 				setPencil()
 				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
-				
 			}else if(str == 'eraser'){
 				setEraser()
+				rgba.value = ''
 				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
 			}
 		}
+		let setOperationColor = (color)=>{
+			brushIndicator.set({fill: color});
+			rgba.value = color
+			canvas.freeDrawingBrush.color = color
+			setOperation('pencil')
+		}
 		let setMove = ()=>{
 			canvas.isDrawingMode = false
 			canvas.forEachObject((obj) =>obj.selectable = true);
@@ -230,8 +250,8 @@ export default defineComponent({
 			canvas.isDrawingMode = true//开启绘画模式
 			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
 			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			canvas.freeDrawingBrush.color = rgba
-			brushIndicator.set('fill',rgba)
+			canvas.freeDrawingBrush.color = rgba.value
+			brushIndicator.set('fill',rgba.value)
 			canvas.freeDrawingBrush.isEraser = false
 		}
 		let setEraser = ()=>{
@@ -265,10 +285,20 @@ export default defineComponent({
 				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
 			},300)
 		}
+		let setTimeSubmit = null
+		let createSetTimeSubmit = ()=>{
+			clearTimeout(setTimeSubmit)
+			setTimeSubmit = setTimeout(()=>{
+				setSubmit()
+			},1000)
+		}
 		let updateCanvasState = (str) =>{
 			if(str != 'mouseUp'){
 				canvas.remove(brushIndicator)
+			}else{
+				createSetTimeSubmit()
 			}
+			if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
 			const canvasAsJson = JSON.stringify(canvas.toJSON());
 			normalCanvasState.value.push(canvasAsJson);
 		}
@@ -287,19 +317,9 @@ export default defineComponent({
 				return
 			}
 			canvas.loadFromJSON(canvasState.value, () => {});
+			createSetTimeSubmit()
 		}
 		let setSubmit = ()=>{
-			let mark = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/e30c06b3-ce93-4fd8-a381-f3bdb4b5d318.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083215Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=40356ec75617430e7cef2d8cc0524ff0b18411559f4f52ab6a8f8522d7348250'
-			let full = 'https://www.minio.aida.com.hk:12024/aida-users/83/toProductImageElement/ad929cf8-61e9-4e73-9d1b-8338d8d151d2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240822%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240822T083909Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=7e7facf97ebce6e621f0cd68188fdebef0e238092cd3b3dd4f70ed783433d637'
-			let size = {
-				width: exportWH * ratio[0],
-				height: exportWH * ratio[1],
-			}
-			segmentImage(mark,full,size).then((rv)=>{
-				console.log(rv);
-
-			})
-			return
 			var allObjects = canvas.getObjects('path');
 			var canvasDom = document.createElement("canvas");
 			let exportCanvas = new fabric.Canvas(canvasDom, {
@@ -337,10 +357,21 @@ export default defineComponent({
 				let data = exportCanvas.toDataURL('png')
 				cancelDsign()
 				clearCanvas()
+				// props.props.patchData.front[imgDomIndex].imageUrl = data
+				let mark = data
+				let full = props.patchData.front[imgDomIndex].undividedLayer
+				let size = {
+					width: Math.round(exportWH * ratio[0]),
+					height: Math.round(exportWH * ratio[1]),
+				}
 				console.log(data);
-				props.patchData.front[imgDomIndex].imageUrl = data
-					// emit('setSloganData',data)
-				
+				segmentImage(mark,full,size).then((rv)=>{
+					// console.log(rv.targetFrontUrl,rv.targetBackUrl)
+					props.patchData.front[imgDomIndex].imageUrl = rv.targetFrontUrl
+					props.patchData.back[imgDomIndex].imageUrl = rv.targetBackUrl
+					props.patchData.front[imgDomIndex].maskUrl = data
+				})
+				return
 			})
 		}
 		let cancelDsign = ()=>{
@@ -352,11 +383,14 @@ export default defineComponent({
 			loadingShow,
            t,
 			...toRefs(canvasBtn),
+			rgba,
 			init,
 			setOperation,
+			setOperationColor,
 			setPencilWidth,
 			historyState,
 			setSubmit,
+			setClone,
 			cancelDsign,
        };
    },
@@ -387,13 +421,15 @@ export default defineComponent({
 		
 		display: flex;
 		border: 0.2rem solid #c4c4c4;
-		width: 25rem;
+		width: 35rem;
 		border-radius: 4px; /* 设置圆角半径 */
 		flex-wrap: wrap;
+		align-items: center;
 		.editFrontBack_center_btn_item{
 			display: flex;
 			align-items: center;
 			padding: 1rem 0;
+			
 		}
 	}
 	.exportCanvasBox_center{
@@ -433,6 +469,24 @@ export default defineComponent({
 					display: block;
 				}
 			}
+			.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen{
+				width: 4rem;
+				height: 2rem;
+				border-radius: 4px;
+				margin: 0 .5rem;
+				cursor: pointer;
+				padding: .5rem 1;
+				&.active{
+					border: 2px solid;
+					border-radius: .4rem;
+				}
+			}
+			.editFrontBack_center_btn_colorRed{
+				background: rgba(255,0,0);
+			}
+			.editFrontBack_center_btn_colorGreen{
+				background: rgba(0,255,0);
+			}
 			i{
 				font-size: 2.5rem;
 				cursor: pointer;
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -3,7 +3,7 @@
 		<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:item.clothesOpen}" @click="clothesOpen(index)">
+				<div v-for="item,index in designItemDetail?.clothes" v-show="item.id" :class="{active:item.clothesOpenItem}" @click="clothesOpen(index)">
 					<img :src="item?.path" alt="">
 				</div>
 			</div>
@@ -42,7 +42,7 @@
 		<div class="designOpenrtion_imgMask_open" @click.stop="deleteBorder"></div>
 	</div>
 	<div class="design_compile_content">
-		<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex"></editFrontBack>
+		<editFrontBack :patchData="frontBack" :imgDomIndex="imgDomIndex" ref="editFrontBack"></editFrontBack>
 	</div>
 	
 </template>
@@ -92,9 +92,10 @@ export default defineComponent({
 		]);
 		let direction = ref('')
 		let imgDom = ref()
-		let imgDomIndex = ref(2)
+		let imgDomIndex = ref(-1)
 		let frontBack = ref({})
 		let frontBackOld = ref({})
+		let editFrontBack = ref(null)
        return {
 			designItemDetail,
 			current,
@@ -106,6 +107,7 @@ export default defineComponent({
 			frontBack,
 			setRevocation,
 			frontBackOld,
+			editFrontBack,
        };
    },
    data() {
@@ -156,7 +158,7 @@ export default defineComponent({
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let front = []
 			let back = []
-			let body
+			let body = {}
 			designItemDetail.others.forEach((item) => {
 				if(item.type == 'Body'){
 					body = item
@@ -185,11 +187,12 @@ export default defineComponent({
 						front[index] = v.layersObject[i]
 						front[index].style.zIndex = v.priority
 						front[index].id = v.id
+						front[index].undividedLayer = v.undividedLayer
 					}else{
 						back[index] = v.layersObject[i]
 						back[index].style.zIndex = v.priority
 						back[index].id = v.id
-
+						back[index].undividedLayer = v.undividedLayer
 						// back[index].style.zIndex = backIndex==0?v.layersObject[i]:backIndex++
 					}
 					if(this.printZIndex < v.priority){
@@ -198,10 +201,13 @@ export default defineComponent({
 				}
 				this.printZIndex++
 			})
-			body.style = {
-				width:body.layersObject[0].imageSize?.[0]*ratio+'px',
-				height:body.layersObject[0].imageSize?.[1]*ratio+'px',
+			if(body){
+				body.style = {
+					width:body.layersObject[0].imageSize?.[0]*ratio+'px',
+					height:body.layersObject[0].imageSize?.[1]*ratio+'px',
+				}
 			}
+			
 			this.frontBack = {
 				front:front,
 				back:back,
@@ -235,6 +241,10 @@ export default defineComponent({
 			return num
 		},
 		clear(){
+			this.imgDomIndex = -1
+			console.log(this.editFrontBack);
+			this.clothesOpenActive(-1)
+			this.editFrontBack.setClone()
 			window.removeEventListener('resize', this.setImgSizeTime);
 		},
 		setpitch(item,index){
@@ -391,9 +401,11 @@ export default defineComponent({
 		},
 		clothesOpenActive(index){
 			this.designItemDetail.clothes.forEach((item)=>{
-				item.clothesOpen = false
+				item.clothesOpenItem = false
 			})
-			this.designItemDetail.clothes[index].clothesOpen = true
+			if(index != -1){
+				this.designItemDetail.clothes[index].clothesOpenItem = true
+			}
 		},
 		sort(arr){
 			arr.sort((a, b) => {
@@ -412,15 +424,14 @@ export default defineComponent({
 			// 	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让每次赋值都是不一样的
 			})
+			let front = arr
+			let imageCategory1
 			data.designSingleItemDTOList.forEach((item)=>{
-				let front = arr
-				let imageCategory1
 				if(arr.length > 1){
 					imageCategory1 = arr[1].imageCategory
 				}
@@ -435,6 +446,7 @@ export default defineComponent({
 						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.maskUrl = arr[index].maskUrl
 						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)]
@@ -445,7 +457,6 @@ export default defineComponent({
 					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