付款页面新增按钮

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;