fix

src/component/Detail/DesignDetail.vue

@@ -772,7 +772,7 @@ export default defineComponent({
 			this.designShowPrview = num
 			let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem
 			if(this.designShowPrview == 3){
-				setDesignItem.init()
+				setDesignItem.setImgSize()
 			}
 			// this.others = designItemDetail.others
 

src/component/Detail/setDesignItem2.vue

@@ -8,7 +8,9 @@
 				</div>
 			</div>
 			</div>
-			<canvas class="designOpenrtion_imgMask" ref="canvasDom" ></canvas>
+			<div class="designOpenrtion_imgMask">
+				<canvas ref="canvasDom" ></canvas>
+			</div>
 			<div class="subitOkPreviewBtn" @click="imgClear">{{ $t('LibraryPage.Reset') }}</div>
 			<div @click="setPreviewData" class="subitOkPreviewBtn">OK</div>
 		</div>
@@ -57,6 +59,16 @@ export default defineComponent({
 			}
 			return num
 		}
+		let computeZindex = (designItemDetail)=>{
+			let arr = designItemDetail.clothes
+			arr.sort((a, b) => {
+				var a_num = a.priority;
+				var b_num = b.priority;
+				return a_num - b_num;
+			});
+			designItemDetail.clothes = arr
+			return designItemDetail
+		}
 		let setImgSize = async ()=>{
 			let designItemDetail = JSON.parse(JSON.stringify(store.state.DesignDetailModule.designItemDetail))
 			let front = []
@@ -68,6 +80,7 @@ export default defineComponent({
 				}
 			});
 			let ratio = await setPostition(body.layersObject[0]?.imageUrl)
+			designItemDetail = computeZindex(designItemDetail)
 			designItemDetail.clothes.forEach((v,index)=>{
 				for (let i = v.layersObject.length-1; i >= 0; i--) {
 					v.layersObject[i].style = {
@@ -115,9 +128,14 @@ export default defineComponent({
 			}))
 			setCanvas(frontBack)
 		}
-		const canvasDom = ref(null)
 		let canvas = reactive({})
 		let setCanvas = (frontBack)=>{
+			let canvasBox = document.querySelector('.design_compile_content .designOpenrtion_imgMask')
+			var canvasDom = document.createElement('canvas')
+			console.log(canvasDom);
+			canvasBox.innerHTML = ''; // 清空原有内容
+			canvasBox.appendChild(canvas);
+			canvas = reactive(null) 
 			canvas = new fabric.Canvas(canvasDom.value, {
 				backgroundColor: "rgba(255,255,255,1)",
 				// fill: '#ffde7d',
@@ -127,13 +145,16 @@ export default defineComponent({
 				isDrawingMode: false, // 开启绘图模式
 			});
 			canvas.clear();
+			canvasFontBackMove = reactive({
+				back:[],
+				front:[],
+			})
+			console.log(canvas.getObjects());
 			let fontBackMove = []
 			canvas.on('selection:cleared', ()=>{
 				designShowIndex.value = -1
 			})
 			frontBack.back.forEach((item) => {
-
-				console.log(item);
 				if(!item.imageUrl){
 					return
 				}
@@ -164,6 +185,7 @@ export default defineComponent({
 				canvas.add(img);
             });
 			frontBack.front.forEach((item) => {
+				console.log(item);
 				if(!item.imageUrl){
 					return
 				}
@@ -178,7 +200,6 @@ export default defineComponent({
 					canvas.add(img);
 					canvasFontBackMove.back.forEach((backItem) => {
 						if(backItem && backItem.id == item.id){
-							console.log(backItem);
 							img.on('moving', function() {
 								// 计算第二个矩形应该移动的距离
 								// 更新第二个矩形的位置
@@ -210,14 +231,16 @@ export default defineComponent({
 			});
 			
 			var objects = canvas.getObjects();
-			console.log(objects);
 
 		}
 		let clothesOpen = (item,index)=>{
-			setpitch(item,index)
-			designShowIndex.value = index
+			setCanvas(frontBack)
+			// setpitch(item,index)
+			// designShowIndex.value = index
 		}
 		let setpitch = (item,index)=>{
+			console.log(canvas.discardActiveObject);
+			canvas.discardActiveObject();
 			// this.designItemDetail.clothes.forEach((item)=>{
 			// 	item.clothesOpen = false
 			// })
@@ -247,7 +270,6 @@ export default defineComponent({
 			frontBack,
 			setRevocation,
 			frontBackOld,
-			canvasDom,
 			canvasFontBackMove,
 			setImgSize,
 			clothesOpen,