付款页面新增按钮

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