画布新增icon

src/component/Detail/canvas/index.vue

@@ -23,6 +23,10 @@
 									<i class="fi fi-sr-layers"></i>
 									<div class="tool-tooltip">{{ $t('Canvas.editFrontBack') }}</div>
 								</div>
+								<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" style="margin-top: auto;" @click="editFront('redGreenExample')">
+									<SvgIcon name="CHelp" size="30" />
+									<div class="tool-tooltip">{{ $t('Canvas.help') }}</div>
+								</div>
 							</template>
 						</editCanvas>
 						<!-- <canvasContent ref="canvasContent"></canvasContent> -->
@@ -36,6 +40,7 @@
 						</editFrontBack> -->
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							:enabledRedGreenMode="true"
+							@canvasInit="canvasInit"
 							:clothingImageUrl="selectDetail.undividedLayer || selectDetail.path" 
 							:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
 							@trigger-red-green-mouseup="frontBackChange"
@@ -43,19 +48,6 @@
 								imageMode:'contains',
 							}"
 							ref="editCanvasBackFront">
-							<template #customToolsTop="{ toolTopProps }">
-								<!-- 也可以直接使用普通的按钮 -->
-								<div class="custom-tool-btn" @click="()=>currentView = 'canvasEditor'">
-									<i class="fi fi-ss-arrow-small-left" style="font-size: 3.5rem;"></i>
-									<div class="tool-tooltip">{{ $t('Canvas.back') }}</div>
-								</div>
-							</template>
-							<template #customTools="{ toolButtonProps }">
-								<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('canvasEditor')">
-									<i class="fi fi-sr-layers"></i>
-									<div class="tool-tooltip">Edit the front and back sections</div>
-								</div>
-							</template>
 						</editCanvas>
 					</div>
 				</div>
@@ -87,6 +79,10 @@ export default defineComponent({
 		editCanvas
     },
 	props:{
+		isEditPattern:{
+			type:String,
+			default:''
+		}
 	},
     setup(props,{emit}) {
         const store = useStore();
@@ -114,7 +110,7 @@ export default defineComponent({
 			canvasLoad:false,
 			canvasConfig:{
 			} as any,
-			currentView:'',
+			currentView:props.isEditPattern,
 			getCanvasIfEdit:inject('getCanvasIfEdit')as any,
 			canvasInstance:null as any,
 			canvasJSON:'',
@@ -202,7 +198,7 @@ export default defineComponent({
 				let front = detailData.frontBack.front[detailData.imgDomIndex]
 				let back = detailData.frontBack.back[detailData.imgDomIndex]
 				if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
-				if(!front?.oldMaskUrl)front.oldMaskUrl = front.imageUrl
+				if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
 				if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
 				if(!front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl})
 
@@ -267,9 +263,11 @@ export default defineComponent({
 		onBeforeUnmount(()=>{
 			let front = detailData.frontBack.front[detailData.imgDomIndex]
 			let back = detailData.frontBack.back[detailData.imgDomIndex]
+
 			if(front?.oldImageUrl)front.imageUrl = front.oldImageUrl
 			if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl
 			if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl
+			console.log(front)
 			if(front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl})
 
 			sessionStorage.removeItem('frontBackEdit');
@@ -279,9 +277,7 @@ export default defineComponent({
 		})
 		onMounted(()=>{
 			nextTick(async ()=>{
-				detailData.currentView = 'canvasEditor'
-				setTimeout(()=>{
-				})
+				// detailData.currentView = 'canvasEditor'
 				if(detailData.selectDetail.canvasId){
 					detailData.isShowMark = true
 					await new Promise((resolve, reject) => {