detail页面sketch支持镜像、detail图片合成由前端来做，但是新增sketch还是要过接口，sketch调整细节位置变更

src/component/Detail/canvas/index.vue

@@ -6,16 +6,15 @@
 			<div class="content-bottom" ref="canvasContent">
 				<div class="contet">
 							<!-- :clothingImageUrl="selectDetail?.undividedLayerWithSinglePrint || selectDetail.undividedLayer || selectDetail.path" -->
-					<div class="canvas" v-if="currentView === 'canvasEditor'" @click.stop>
+					<div class="canvas" :class="{'active': currentView === 'canvasEditor'}"@click.stop>
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							@canvasInit="canvasInit"
-							@changeCanvas="changeCanvas" 
 							is-edit
 							:clothingImageUrl="selectDetail.path"
-							:clothingImageUrl2="selectDetail.undividedLayer"
+							:clothingImageUrl2="selectDetail.undividedLayer_"
 							showFixedLayer
 							:canvasJSON="canvasJSON"
-							:otherData="otherData"
+							@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
@@ -25,12 +24,6 @@
 						<!-- <canvasContent ref="canvasContent"></canvasContent> -->
 					</div>
 					<div class="editFrontBack" v-if="currentView === 'redGreenExample'" @click.stop>
-						<!-- <editFrontBack 
-							:patchData="frontBack" 
-							:imgDomIndex="imgDomIndex" 
-							
-							ref="editFrontBack">
-						</editFrontBack> -->
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							@canvasInit="canvasInit"
 							:enabledRedGreenMode="true"
@@ -45,6 +38,9 @@
 							ref="editCanvasBackFront">
 						</editCanvas>
 					</div>
+					<div class="editSketch" v-if="currentView === 'editSketch'" @click.stop>
+						<generalMiniCanvas ref="generalMiniCanvas" :btnShow="false" :imgUrl="selectDetail.sketchString || selectDetail.path"></generalMiniCanvas>
+					</div>
 				</div>
 				
 				<!-- <div class="Finish">
@@ -69,15 +65,20 @@ import { useI18n } from 'vue-i18n'
 import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
 import { formatTime,segmentImage,getMinioUrl } from "@/tool/util";
 import { useRouter, useRoute } from 'vue-router'
+import generalMiniCanvas from "../../modules/generalMiniCanvas.vue";
 
 export default defineComponent({
     components:{
-		editCanvas
+		editCanvas,generalMiniCanvas
     },
 	props:{
 		isEditPattern:{
 			type:String,
 			default:''
+		},
+		updateOtherLayers:{
+			type:Function,
+			default:()=>{}
 		}
 	},
     setup(props,{emit}) {
@@ -90,6 +91,7 @@ export default defineComponent({
 			editCanvas:null as any,
 			editCanvasBackFront:null as any,
 			canvasContent:null as any,
+			generalMiniCanvas:null as any,
 		})
 		const userDetail = computed(()=>{
 			return store.state.UserHabit.userDetail
@@ -130,14 +132,14 @@ export default defineComponent({
 			if(detailData.currentView === 'canvasEditor'){
 				sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
 				canvasJSON = sessionStorage.getItem('frontBackEdit');
-			}else{
+			}else if(detailData.currentView === 'redGreenExample'){
 				sessionStorage.setItem('frontBackEdit',detailDom.editCanvasBackFront.getJSON())
 				canvasJSON = sessionStorage.getItem('sketchEdit');
 			}
-			detailData.canvasLoad = false
+			// detailData.canvasLoad = false
 			detailData.currentView = str
 			if(canvasJSON){
-				detailData.canvasLoad = true
+				// detailData.canvasLoad = true
 				nextTick(()=>{
 					if(detailData.currentView === 'redGreenExample'){
 						detailDom.editCanvas.loadJSON(canvasJSON)
@@ -149,28 +151,38 @@ export default defineComponent({
 				if(detailData.currentView === 'redGreenExample'){
 					nextTick(()=>{
 						setCanvas(detailData.selectDetail?.undividedLayerWithSinglePrint || detailData.selectDetail.undividedLayer || detailData.selectDetail.path).then(()=>{
-							detailData.canvasLoad = true
+							// detailData.canvasLoad = true
 						})
 					})
 				}else{
 					nextTick(()=>{
 						setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
-							detailData.canvasLoad = true
+							// detailData.canvasLoad = true
 						})
 					})
 				}
 			}
 		}
-		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
+		const updateOtherLayers = (obj:any)=>{
 			if(!detailDom.editCanvas)return
+			return new Promise(async (res,reject)=>{
+				console.log(obj,'====')
+				await detailDom?.editCanvas.updateOtherLayers(obj)
+				res('')
+			})
+		}
+		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
+			// if(!detailDom.editCanvas)return
 			return new Promise((res,reject)=>{
-				detailDom.editCanvas.exportImage({isContainBg:false,isContainFixed:false}).then((rv)=>{
+				detailDom.editCanvas.exportImage({isContainFixedOther:true,isContainFixed:true}).then((rv)=>{
 					if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
 					res('')
 				})
 			})
-			
-			
+		}
+		const getCanvasElement = ()=>{
+			if(!detailDom?.editCanvas)return ''
+			return detailDom?.editCanvas.exportExtraInfo();
 		}
 		const setFrontBackColor = (data:any)=>{
 			detailDom.editFrontBack.setBackground(data)
@@ -258,7 +270,8 @@ export default defineComponent({
 		const canvasInit = (value:any)=>{
 			detailData.canvasInstance = value
 			detailData.getCanvasIfEdit.fun = getCanvasLength
-			detailData.isShowMark = false
+			detailData.isShowMark = false			
+			console.log('初始化完成')
 		}
 		const getCanvasLength = ()=>{
 			return detailData.canvasInstance?.commandManager?.undoStack?.length
@@ -297,14 +310,21 @@ export default defineComponent({
 				});
 			})
 		}
-		let time = null as any
-		const changeCanvas = ()=>{
-			clearTimeout(time)
-			time = setTimeout(()=>{
-				saveCanvas('auto')
-			},3000)
+		// let time = null as any
+		// const changeCanvas = ()=>{
+		// 	clearTimeout(time)
+		// 	time = setTimeout(()=>{
+		// 		saveCanvas('auto')
+		// 	},3000)
+		// }
+		const canvasLoadJsonSuccess = async ()=>{
+			let otherData = await props.updateOtherLayers()
+			updateOtherLayers(otherData)
 		}
 
+		const submitBase64Data = ()=>{
+			return detailDom.generalMiniCanvas.submitBase64Data()
+		}
 		onBeforeUnmount(()=>{
 			let front = detailData.frontBack.front[detailData.imgDomIndex]
 			let back = detailData.frontBack.back[detailData.imgDomIndex]
@@ -353,7 +373,10 @@ export default defineComponent({
 			frontBackChange,
 			canvasInit,
 			saveCanvas,
-			changeCanvas,
+			getCanvasElement,
+			updateOtherLayers,
+			canvasLoadJsonSuccess,
+			submitBase64Data,
         }
     },
 	provide() {
@@ -434,7 +457,15 @@ export default defineComponent({
 				flex: 1;
 				overflow: hidden;
 				position: relative;
-				.canvas,.editFrontBack{
+				.canvas{
+					opacity: 0;
+					position: absolute;
+					&.active{
+						opacity: 1;
+						position: relative;
+					}
+				}
+				.canvas,.editFrontBack,.editSketch{
 					width: 100%;
 					height: 100%;
 				}