画布新增icon

src/component/Detail/DesignDetail.vue

@@ -59,7 +59,7 @@
 						:key="positionKey"
 						@canvasReload="canvasReload" 
 						@detailEdit="detailEdit" 
-						@addSketch="()=>isEditPattern.value=false"
+						@addSketch="()=>isEditPattern.value = ''"
 						@revocation="revocation"
 						@oppositeRevocation="oppositeRevocation"
 					></model>
@@ -87,7 +87,7 @@
 						</div>
 					</div>
 					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
-						<canvasBox ref="canvasBox" :key="canvasKey"></canvasBox>
+						<canvasBox ref="canvasBox" :key="canvasKey || isEditPattern.value" :isEditPattern="isEditPattern.value"></canvasBox>
 					</div>
 					<!-- 画布 -->
 					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
@@ -144,7 +144,7 @@ export default defineComponent({
 			oppositeRevocationShow:-1,
 			revocationShow:-1,
 			isEditPattern:{
-				value:false,
+				value:'' as any,
 			},// 是否编辑图案
 			canvasKey:0,
 			singleOveral:{
@@ -421,11 +421,18 @@ export default defineComponent({
 			store.dispatch('DesignDetail/setSubmit',data)
 		}
 		const detailEdit = async (str:any)=>{
-			if(str == 'edit'){
-				if(detailData.isEditPattern.value){
+			if(str){
+				if(detailData.isEditPattern.value && detailData.isEditPattern.value == str){
 					await detailDom.canvasBox.saveCanvas()
+					detailData.isEditPattern.value = ''
+				}else{
+					if(detailData.isEditPattern.value){
+						detailDom.canvasBox.editFront(str)
+					}
+					detailData.isEditPattern.value = str
 				}
-				detailData.isEditPattern.value = !detailData.isEditPattern.value 
+			}else{
+				detailData.isEditPattern.value = ''
 			}
 		}
 		const canvasReload = async ()=>{

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) => {

src/component/Detail/model/index.vue

@@ -4,7 +4,7 @@
 			<div class="back" v-show="isEditPattern.value">
 				<i class="fi fi-br-angle-left" @click="setBack"></i>
 			</div>
-			<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @deleteItem="deleteItem" :isEditPattern="isEditPattern.value"></modelNav>
+			<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @deleteItem="deleteItem"></modelNav>
 		</div>
 		<div class="modelindex_right">
 			<div class="detail_btn">
@@ -14,7 +14,12 @@
 				<i v-show="true" class="icon iconfont icon-chehui" @click="revocation"></i>
 				<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
 				<!-- 编辑 -->
-				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value,'pointerEventsNone':!selectDetail?.id}" @click="showDesignImgDetail('edit')"></i>
+				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value == 'canvasEditor','pointerEventsNone':!selectDetail?.id}" @click="showDesignImgDetail('canvasEditor')"></i>
+
+				<i @click="showDesignImgDetail('redGreenExample')" :class="{active:isEditPattern.value == 'redGreenExample','pointerEventsNone':!selectDetail?.id}">
+					<SvgIcon name="editFrontBack" size="30" />
+				</i>
+
 				<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></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> -->
@@ -65,29 +70,29 @@ export default defineComponent({
 		}
 		const showDesignImgDetail = (str:any)=>{
 			new Promise((resolve, reject) => {
-				// if(
-				// 	getDetailListData.isEditPattern.value&&
-				// 	detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
-				// ){
-				// 	Modal.confirm({
-				// 		title: t('collectionModal.jsContent2'),
-				// 		icon: createVNode(ExclamationCircleOutlined),
-				// 		okText: 'Yes',
-				// 		cancelText: 'No',
-				// 		mask:false,
-				// 		centered:true,
-				// 		onOk() {
-				// 			resolve(true)
-				// 			emit('detailEdit',str)
-				// 		},
-				// 		onCancel(){
-				// 			resolve(false)
-				// 		}
-				// 	});
-				// }else{
+				if(
+					getDetailListData.isEditPattern.value&&
+					detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
+				){
+					Modal.confirm({
+						title: t('collectionModal.jsContent2'),
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							resolve(true)
+							emit('detailEdit',str)
+						},
+						onCancel(){
+							resolve(false)
+						}
+					});
+				}else{
 					resolve(true)
 					emit('detailEdit',str)
-				// }
+				}
 			})
 		}
 		const deleteItem = ()=>{
@@ -117,7 +122,7 @@ export default defineComponent({
 			},1000)
 		}
 		const setBack = ()=>{
-			emit('detailEdit','edit')
+			emit('detailEdit')
 		}
 		onMounted(()=>{
 			window.addEventListener('resize', handleResize);
@@ -196,6 +201,11 @@ export default defineComponent({
 					@media (min-width: 1024px) {
 						font-size: 2.4rem;
 					}
+					> img{
+						width: 80%;
+						color: #fff;
+						height: 80%;
+					}
 				}
 				> i:hover{
 					background: #000000;

src/component/Detail/model/modelNav.vue

@@ -32,10 +32,6 @@ export default defineComponent({
     },
 	emits:['canvasReload','addSketch','deleteItem'],
 	props:{
-		isEditPattern:{
-			type:Boolean,
-			default:false,
-		},
 	},
     setup(props,{emit}) {
         const store = useStore();
@@ -95,7 +91,9 @@ export default defineComponent({
 				// 	});
 				// }else{
 					resolve(true)
-					emit('canvasReload')
+					if(detailData.selectDetail.id !== item.id){
+						emit('canvasReload')
+					}
 				// }
 			}).then((rv)=>{
 				if(rv)store.commit('DesignDetail/setDesignColthes',item.id)