付款页面新增按钮

src/component/DetailCopy/canvas/argument.vue

@@ -0,0 +1,197 @@
+<template>
+	<div class="canvasArgument">
+		 <div class="label_item wH">
+			 <div class="title">{{ $t('exportModel.Width') }}</div>
+			 <input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.width">
+		 </div>
+		 <div class="label_item wH">
+			 <div class="title">{{ $t('exportModel.Height') }}</div>
+			 <input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
+		 </div>
+		 <div class="label_item" v-show="
+			 canvasGeneral.operation != 'movePosition' && 
+			 canvasGeneral.operation != 'move' && 
+			 canvasGeneral.operation != 'eraser' && 
+			 canvasGeneral.operation != 'texture' && 
+			 canvasGeneral.operation != 'zoomIn'  && 
+			 canvasGeneral.operation != 'zoomOut' && 
+			 canvasGeneral.operation != 'dashedPencil' && 
+			 canvasGeneral.operation != 'dashed'">
+			 <div class="title">{{ $t('exportModel.Color') }}</div>
+			 <input type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
+			 <span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
+			 <div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
+				 <div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
+			 </div>
+		 </div>
+		 <div class="label_item" v-show="
+			 canvasGeneral.operation != 'movePosition' && 
+			 canvasGeneral.operation != 'move' && 
+			 canvasGeneral.brushwork.value != 'RibbonBrush' && 
+			 canvasGeneral.brushwork.value != 'LongfurBrush'&& 
+			 canvasGeneral.operation != 'zoomIn'  &&
+			 canvasGeneral.operation != 'zoomOut' && 
+			 canvasGeneral.operation != 'dashedPencil' && 
+			 canvasGeneral.operation != 'dashed'">
+			 <div >{{ $t('exportModel.Size') }}:</div>
+			 <input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
+		 </div>
+		 <div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
+			 <div >{{ $t('exportModel.Brushwork') }}:</div>
+			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
+				 style="width: 12rem "
+				 @change="canvasGeneral.brushworkChange"
+				 >
+				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
+					 <img style="width: 100%;" :src="item.url" alt="">
+				 </a-select-option>
+			 </a-select>
+		 </div>
+		 <div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
+			 <div >{{ $t('exportModel.Texture') }}:</div>
+			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
+				 style="width: 12rem "
+				 @change="canvasGeneral.textureValueChange"
+				 >
+				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
+					 <img :src="item.url" alt="">
+				 </a-select-option>
+			 </a-select>
+		 </div>
+		 <div class="label_item" v-show="
+			 canvasGeneral.operation != 'pencil' && 
+			 canvasGeneral.operation != 'eraser'&&
+			 canvasGeneral.operation != 'movePosition' && 
+			 canvasGeneral.operation != 'move'&&
+			 canvasGeneral.operation != 'text'&&
+			 canvasGeneral.operation != 'texture'&&
+			 canvasGeneral.operation != ''&& 
+			 canvasGeneral.operation != 'zoomIn'  && 
+			 canvasGeneral.operation != 'zoomOut' && 
+			 canvasGeneral.operation != 'dashedPencil' && 
+			 canvasGeneral.operation != 'dashed'">
+			 <div >{{ $t('exportModel.FillBack') }}:</div>
+			 <div class="leftAlign">
+				 <i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
+				 <i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
+			 </div>
+		 </div>
+		 <!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
+			 <div >{{ $t('exportModel.Layer') }}:</div>
+			 <div class="leftAlign">
+				 <i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
+				 <i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
+				 <i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
+				 <i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
+			 </div>
+		 </div> -->
+		 <div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
+			 <div>Font Family</div>
+			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
+				 style="flex: 1;width: 15rem;"
+				 @change="canvasGeneral.setFontFamily"
+				 :style="{'font-family':canvasGeneral.fontFamily}"
+				 >
+				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
+					 {{item.name}}
+				 </a-select-option>
+			 </a-select>
+		 </div>
+	 </div>
+ </template>
+ 
+ <script lang="ts">
+	 import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
+	 export default defineComponent({
+		 components:{},
+		 setup(){
+			 let testModal = ref(true)
+			 let canvasGeneral:any = inject('canvasObj')
+			 const data = reactive({
+				 colorHistoryList:[],
+				 operation:'',
+			 })
+			 const setOperation = (str:any)=>{
+				 data.operation = str
+			 }
+			 const setOper = ()=>{
+				 setOperation('')
+			 }
+			 document.addEventListener('click',setOper)
+			 const closeModal = ()=>{
+				 document.removeEventListener('click',setOper)
+			 }
+			 return {
+				 canvasGeneral,
+				 ...toRefs(data),
+				 testModal,
+				 setOperation,
+				 closeModal,
+			 }
+		 }
+	 });
+ </script>
+ 
+ <style lang='less' scoped>
+ .canvasArgument{
+	 display: flex;
+	 flex-wrap: wrap;
+	 height: 100%;
+	 .label_item{
+		 margin-right: 2rem;
+		 position: relative;
+		 display: flex;
+		 align-items: center;
+		 .leftAlign{
+			 display: flex;
+		 }
+		 .labelHover_show{
+			 position: absolute;
+			 width: 100%;
+			 height: 10rem;
+			 top: 100%;
+			 z-index: 2;
+			 display: block;
+			 border-radius: 4px;
+			 border: 1px solid;
+			 padding: .5rem 1rem;
+			 background: #fff;
+			 div{
+				 width: 2rem;
+				 height: 2rem;
+				 margin-right: .5rem;
+				 margin-bottom: .5rem;
+				 display: inline-block;
+				 cursor: pointer;
+			 }
+		 }
+		 input{
+			 height: 100%;
+		 }
+		 &.wH input{
+			 width: 5rem;
+		 }
+		 .title{
+			 margin-right: 1rem;
+		 }
+		 .icon-xiala{
+			 cursor: pointer;
+			 transform: rotate(0deg);
+			 height: 4rem;
+			 width: 4rem;
+			 transition: all .3s;
+			 line-height: 4rem;
+			 text-align: center;
+			 &.active{
+				 transform: rotate(180deg);
+			 }
+		 }
+	 }
+	 .label_item:hover{
+		 // .labelHover_show{
+		 // 	display: flex;
+		 // }
+	 }
+ }
+ 
+ </style>

src/component/DetailCopy/canvas/canvasContent.vue

@@ -0,0 +1,184 @@
+<template>
+	<div class="canvasContent_box">
+		<div class="canvasContent" ref="canvasScaleDom">
+			<div v-if="isPresuppose" class="generalCanvas_center presuppose">
+				<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
+				<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
+				<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
+			</div>
+			<div v-else class="generalCanvas_center canvas" ref="canvasDom">
+				<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+	import { defineComponent,ref,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
+	import { Modal,message } from 'ant-design-vue';
+	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+	import { useI18n } from 'vue-i18n'
+	export default defineComponent({
+		component:{},
+		setup(){
+			let {t} = useI18n()
+			let canvasType = inject('canvasType')
+			let canvasGeneral:any = inject('canvasObj')
+			const data:any = reactive({
+				canvasScaleDom:null,
+				canvasDom:null,
+				isPresuppose:false,
+				isShowMark:false,
+				pencilbtnStyle:{},
+				
+			})
+			const createCanvas = (canvasSize:any)=>{
+				data.isPresuppose = false
+				nextTick(()=>{
+					canvasGeneral.canvasInit(data.canvasDom,canvasSize)
+					console.log(canvasGeneral);
+
+				})
+			}
+			const openMode = (data:any)=>{
+				let {yes,no} = data
+				console.log(yes,no);
+				Modal.confirm({
+						title: '是否栅格化',
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							yes()
+						},
+						onCancel(){
+							no()
+						}
+					});
+				yes()
+				
+			}
+			// canvasGeneral.openMode.fun = openMode
+			const setPresuppose = (presuppose:any)=>{
+				let canvasDomSize = {
+					width:data.canvasScaleDom.offsetWidth,
+					height:data.canvasScaleDom.offsetHeight,
+				}
+				let width,height
+				let scale = [0,0]
+				if(presuppose == '16/9'){
+					// scale[0] = 16
+					// scale[1] = 9
+					width = 1600
+					height = 900
+				}else if(presuppose == '1/1'){
+					// scale[0] = 1
+					// scale[1] = 1
+					width = 1000
+					height = 1000
+				}else if(presuppose == '9/16'){
+				    // scale[0] = 9
+					// scale[1] = 16
+					width = 900
+					height = 1600
+				}
+				// let mbHeight = canvasDomSize.width / scale[0] * scale[1]
+				// if(mbHeight < canvasDomSize.height){
+				// 	width = canvasDomSize.width
+				// 	height = mbHeight
+				// }else{
+				// 	width = canvasDomSize.height / scale[1] * scale[0]
+				// 	height = canvasDomSize.height
+				// }
+				let canvasSize = {width,height}
+				createCanvas(canvasSize)
+			}
+			onMounted(()=>{
+				if(canvasType == 'export'){
+					data.isPresuppose = true
+				}else{
+					createCanvas({})
+				}
+				
+			})
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				setPresuppose,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.canvasContent_box{
+	height: 100%;
+	width: 100%;
+	// padding: 2rem;
+	background: #e6e6e6;
+	.canvasContent{
+		height: 100%;
+		width: 100%;
+		position: relative;
+	}
+}
+
+.generalCanvas_center{
+	width: 100%;
+	height: 100%;
+	position: relative;
+	overflow: hidden;
+	&.canvas{
+	}
+	&.presuppose{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		> div{
+			border: 1rem solid #6b6b6b;
+			color: #6b6b6b;
+			display: flex;
+			margin-right: 2rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 3rem;
+			font-weight: 900;
+			cursor: pointer;
+			border-radius: 4px;
+			&:last-child{
+				margin-right: 0;
+			}
+			&.presuppose16-9{
+				height: calc(30rem / 16 * 9);
+				width: 30rem;
+			}
+			&.presuppose1-1{
+				height: 30rem;
+				width: 30rem;
+			}
+			&.presuppose9-16{
+				height: 30rem;
+				width: calc(30rem / 16 * 9);
+			}
+		}
+	}
+	.editFrontBack_pencilbtn{
+		position: absolute;
+		z-index: 1;
+		border-radius: 50%;
+		border: 1px solid #000;
+		pointer-events: none;
+		transform: translate(-50%,-50%);
+	}
+	:deep(.canvas-container){
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+	}
+}
+
+</style>

src/component/DetailCopy/canvas/index.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="canvasBox">
+		<!-- designDetailShow -->
+		<!-- :class="[driver__.driver?'hideEvents':'']" -->
+		 <div class="canvasContent">
+			<div class="argument-box">
+				<argument ref="argument" v-if="canvasObj.canvas"></argument>
+			</div>
+			<div class="canvas">
+				<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
+				<div class="canvas">
+					<canvasContent ref="canvasContent"></canvasContent>
+				</div>
+			</div>
+		 </div>
+		
+		<!-- <div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div> -->
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+
+import canvasGeneral from "@/tool/canvasGeneralCopy";
+import argument from './argument.vue'
+import canvasContent from './canvasContent.vue'
+import tool from "./tool.vue"
+
+export default defineComponent({
+    components:{
+		tool,argument,canvasContent,
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+      
+		const detailDom = reactive({
+			model:null
+		})
+		const userDetail = computed(()=>{
+			return store.state.UserHabit.userDetail
+		})
+		const detailData = reactive({
+			canvasObj:canvasGeneral,
+
+
+			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			designDetailShow:false,
+			loadingShow:false,
+			isEditPattern:{
+				value:false,
+			},// 是否编辑图案
+		})
+ 	
+		onBeforeUnmount(()=>{
+		})
+        return{
+			...toRefs(detailDom),
+			...toRefs(detailData),
+        }
+    },
+	provide() {
+		return {
+		}
+	},
+	mounted(){
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .canvasBox{
+		flex: 1;
+		overflow: hidden;
+		// top: -100%;
+		display: flex;
+		align-items: center;
+		.argument-box,
+		.canvas,
+		.detail-box{
+			:deep(i){
+				font-size: 2.5rem;
+				cursor: pointer;
+				width: 3rem;
+				height: 3rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+				transition: all .3s;
+				margin-bottom: .5rem;
+				&.active{
+					border: 1px solid;
+					border-radius: .4rem;
+				}
+				&.icon-xiala{
+					transform: rotate(-90deg);
+				}
+				&.icon-xialaActive{
+					transform: rotate(90deg);
+				}
+			}
+		}
+		.canvasContent{
+			height: 73rem;
+			width: 100%;
+			border: 2px solid #000;
+			border-radius: 3rem;
+			padding: 4rem;
+		}
+		
+	}
+</style>

src/component/DetailCopy/canvas/tool.vue

@@ -0,0 +1,168 @@
+<template>
+   <div class="canvasTool">
+		<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+		<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+		<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
+		<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture'}"></i>
+		<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
+		<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
+		<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
+		<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i> -->
+		<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
+		<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
+		<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
+		<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
+		<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
+		<div class="label_item uploadImage">
+			<i class="icon fi fi-br-upload" ></i>
+			<input type="file" @change="uploadImage">
+		</div>
+		<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
+		<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
+		<div class="btnModal" v-show="isMove" :style="moveStyle">
+			<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
+			<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
+			<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
+			<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
+			<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
+			<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
+import {base64ToFile} from '@/tool/util'
+import { Https } from "@/tool/https";
+	export default defineComponent({
+		component:{},
+		emits:['toolLiquefaction'],
+		setup(props,{emit}){
+			let canvasGeneral:any = inject('canvasObj')
+			let isShowMark:any = inject('isShowMark')
+			const data:any = reactive({
+				isMove:false,
+				moveStyle:{},
+			})
+			const uploadImage = (event:any)=>{
+				isShowMark.value = true
+				const file = event.target.files[0];
+				let input = event.target
+				setOperation('movePosition')
+				if (file) {
+					const reader = new FileReader();
+					reader.onload = (e:any) => {
+						let file = base64ToFile(e.target.result,'upload')
+						let formData = new FormData();
+						formData.append("file", file);
+						let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+						Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
+							rv.imgUrl = rv.minioUrl
+							isShowMark.value = false
+							canvasGeneral.addImage(rv)
+						})
+						input.value = ''
+					};
+					reader.readAsDataURL(file);
+				}
+			}
+			const historyState = (str:any)=>{
+				canvasGeneral.historyState(str)
+			}
+			const setOperation = (str:any)=>{
+				canvasGeneral.setOperation(str)
+			}
+			const openMore = (e:any)=>{
+				data.isMove=!data.isMove
+				if(data.isMove){
+					let domPoint = e.target.getBoundingClientRect()
+					let domParentPoint = e.target.parentElement.getBoundingClientRect()
+					const left = domPoint.left - domParentPoint.left;
+					const top = domPoint.top - domParentPoint.top;
+
+					data.moveStyle.top = top + 'px'
+					data.moveStyle.left = left + domPoint.width + 2 + 'px'
+				}
+			}
+			const setMore = ()=>{
+				data.isMove = false
+			}
+			let setLiquefaction = ()=>{
+				emit('toolLiquefaction')
+			}
+			document.addEventListener('click',setMore)
+			const closeModal = ()=>{
+				document.removeEventListener('click',setMore)
+			}
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				uploadImage,
+				historyState,
+				setOperation,
+				openMore,
+				closeModal,
+				setLiquefaction,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.canvasTool::-webkit-scrollbar{
+	display: none;
+}
+.canvasTool{
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	align-items: center;
+	&.leftAlign{
+		justify-content: flex-start;
+	}
+	&.leftAlign{
+		justify-content: flex-start;
+	}
+	
+	.uploadImage{
+		width: 3rem;
+		height: 3rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		i{
+			zoom:.8;
+		}
+		input{
+			height: 0;
+			width: 0;
+			border: none;
+		}
+	}
+	.uploadImage{
+		position: relative;
+		input{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+			opacity: 0;
+			z-index: 2;
+			cursor: pointer;
+		}
+	}
+	.btnModal{
+		position: absolute;
+		z-index: 2;
+		background: #fff;
+		top: 0;
+		border: 1px solid;
+		display: flex;
+		padding: .5rem 1rem;
+		border-radius: 4px;
+	}
+}
+
+</style>

src/component/DetailCopy/designDetail.vue

@@ -41,12 +41,13 @@
 						</div>
 					</div>
 				</div>
-				<div class="item detailLeft">
+				<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
 					<detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft>
 				</div>
+
 				<div class="item model">
-					<model ref="model"></model>
-					<div>
+					<model ref="model" @detailEdit="detailEdit"></model>
+					<div class="btn">
 						<div class="gallery_btn" @click="submit">Submit</div>
 						<div class="gallery_btn" @click="previwe">Preview</div>
 					</div>
@@ -54,9 +55,12 @@
 				<div class="item detailRight">
 					<div class="submit">
 					</div>
-					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType">
+					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && !isEditPattern.value">
 						<detailRight></detailRight>
 					</div>
+					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
+						<canvasBox></canvasBox>
+					</div>
 					<!-- 画布 -->
 					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
 					</div> -->
@@ -77,6 +81,7 @@ import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,t
 import detailLeft from './detailLeft/index.vue'
 import model from './model/index.vue'
 import detailRight from './detailRight/index.vue'
+import canvasBox from './canvas/index.vue'
 
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -89,7 +94,7 @@ import { useI18n } from 'vue-i18n'
 import addDetails from '@/component/Detail/addDetails.vue'
 export default defineComponent({
     components:{
-		detailLeft,model,detailRight
+		detailLeft,model,detailRight,canvasBox
     },
 	emits:['destroy'],
     setup(props,{emit}) {
@@ -107,14 +112,17 @@ export default defineComponent({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			designDetailShow:false,
 			loadingShow:false,
+			isEditPattern:{
+				value:false,
+			},// 是否编辑图案
 		})
+		provide('isEditPattern',detailData.isEditPattern)
 		const closeModal = ()=>{
 			detailData.designDetailShow = false
 			emit('destroy')
 		}
 		
 		const showDesignDetailModal = (data:any,str:any)=>{
-			
             let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
             detailData.loadingShow = true
             Https.axiosGet(url).then(
@@ -147,14 +155,6 @@ export default defineComponent({
 					// this.deleteShow = false
 
 					setRevocation(rv,'')
-					// if(rv.singleOverall == 'overall'){
-					// 	this.body = false
-					// }else{
-					// 	this.body = true
-					// }
-					// await this.setImgSize()
-                    // this.generateHighDesignImg = rv.highDesignUrl
-                    // this.designDetailShow = true
                     detailData.loadingShow = false
 					// await this.setImgSize() 
                 }
@@ -268,6 +268,14 @@ export default defineComponent({
 			let data = getSubmitData('preview')
 			store.dispatch('DesignDetailCopy/setSubmit',data)
 		}
+		const detailEdit = (str:any)=>{
+			console.log(str);
+			if(str == 'edit'){
+				detailData.isEditPattern.value = !detailData.isEditPattern.value 
+				console.log(detailData.isEditPattern);
+				
+			}
+		}
 		onBeforeUnmount(()=>{
 			store.commit('DesignDetailCopy/clearDesignDetail')
 		})
@@ -279,6 +287,7 @@ export default defineComponent({
 			setCurrentDetail,
 			previwe,
 			submit,
+			detailEdit,
         }
     },
 	provide() {
@@ -350,9 +359,11 @@ export default defineComponent({
 			width: 100%;
 			> .item{
 				height: 100%;
+				overflow: hidden;
 				&.detailLeft{
 					width: 34rem;
 				}
+				&.isEditPattern{width: 0;}
 				&.model{
 					width: 50rem;
 					margin: 0 10rem;
@@ -380,6 +391,16 @@ export default defineComponent({
 						margin-bottom: 0;
 					}
 				}
+				> .btn{
+					display: flex;
+					justify-content: center;
+					> div{
+						margin-right: 2rem;
+					}
+					> div:last-child{
+						margin-right: 0rem;
+					}
+				}
 			}
 			> .nav{
 				margin-right: 5rem;

src/component/DetailCopy/detailLeft/index.vue

@@ -15,7 +15,7 @@ import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import sketch from './sketch.vue'
 import print from './print.vue'
-import color from './color/index.vue'
+import color from './colorBox/index.vue'
 
 export default defineComponent({
     components:{

src/component/DetailCopy/model/index.vue

@@ -6,9 +6,9 @@
 		<div class="modelindex_right">
 			<div class="detail_btn">
 				<!-- 全屏 --> 
-				<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
+				<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i>
 				<!-- 编辑 -->
-				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
+				<i class="fi fi-rr-edit" :class="{active:isEditPattern.value}" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail('edit')"></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> -->
 
@@ -35,6 +35,7 @@ export default defineComponent({
     components:{
 		position,modelNav
     },
+	emits:['detailEdit'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -45,6 +46,7 @@ export default defineComponent({
 			pageSize:10,
 			currentPage:1,
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			isEditPattern:inject('isEditPattern') as any
 		})
 		const getDetailListDom = reactive({
 			libraryList:null as any,
@@ -53,8 +55,8 @@ export default defineComponent({
 		const getSubmitData = (value:any)=>{
 			return getDetailListDom.position.getSubmitData(value)
 		}
-		const showDesignImgDetail = ()=>{
-
+		const showDesignImgDetail = (str:any)=>{
+			emit('detailEdit',str)
 		}
 		const deleteNav = ()=>{
 
@@ -98,13 +100,32 @@ export default defineComponent({
 				width: 100%;
 				display: flex;
 				justify-content: space-between;
+				border-radius: 1rem;
+				padding: .7rem ;
 				> i{
 					font-size: 2rem;
+					line-height: 4rem;
+					cursor: pointer;
+					padding: 1.5rem;
+					display: flex;
+					align-items: center;
+					border-radius: .6rem;
+					overflow: hidden;
+					transition: all .3s;
 				}
+				> i:hover{
+					background: #000000;
+					color: #fff;
+				}
+				> .active{
+					background: #000000;
+					color: #fff;
+				}	
 			}
 		}
 		.modelindex_left{
 			justify-content: center;
 		}
+	
 	}
 </style>

src/component/DetailCopy/model/modelNav.vue

@@ -9,10 +9,11 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,inject,watch,onBeforeUnmount,toRefs, reactive} from 'vue'
+import { defineComponent,computed,createVNode,inject,watch,onBeforeUnmount,toRefs, reactive} from 'vue'
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { ExclamationCircleOutlined, } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import position from './modelPosition.vue';
@@ -22,17 +23,40 @@ export default defineComponent({
     },
     setup(props,{emit}) {
         const store = useStore();
+		const {t} = useI18n()
 		const detailData = reactive({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
 			designvDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
 			frontBack:{} as any,
+			isEditPattern:inject('isEditPattern') as any
 		})
 		watch(()=>detailData.frontBack_,(newFollowVue)=>{
 			detailData.frontBack = newFollowVue
 		})
 		const selectDetailItem = (item:any,index:number)=>{
-			store.commit('DesignDetailCopy/setDesignColthes',item.id)
+			new Promise((resolve, reject) => {
+				if(detailData.isEditPattern.value && detailData.selectDetail?.id){
+					Modal.confirm({
+						title: t('collectionModal.jsContent2'),
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							resolve(true)
+						},
+						onCancel(){
+							resolve(false)
+						}
+					});
+				}else{
+					resolve(true)
+				}
+			}).then((rv)=>{
+				if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
+			})
 		}
 		// onBeforeUnmount(()=>{
 		// 	detailData.selectIndex = -1