details功能

src/component/DetailCopy/model/modelPosition.vue

@@ -37,6 +37,7 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import { getMousePosition } from "@/tool/mdEvent";
+import { Modal,message } from 'ant-design-vue';
 import newFollowVue from '@/component/Account/message/newFollow.vue';
 export default defineComponent({
     components:{
@@ -47,11 +48,15 @@ export default defineComponent({
 			type:Boolean,
 		}
 	},
+	emits:['canvasReload'],
     setup(props,{emit}) {
+		const {t} = useI18n()
         const store = useStore();
 		const detailData = reactive({
 			frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			isEditPattern:inject('isEditPattern') as any
+
 		})
 		const selectItem = reactive({
 		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
@@ -183,7 +188,45 @@ export default defineComponent({
 			// 	this.designItemDetail.clothes[index].clothesOpenItem = true
 			// }
 		}
-		const itemMoveMousedown = (index:any,e:any)=>{
+		const itemMoveMousedown = async (index:any,e:any)=>{
+			let isOpen = false
+			let isModal = false
+			await new Promise((resolve, reject) => {
+				if(
+					detailData.isEditPattern.value && 
+					selectItem.selectDetail?.id && 
+					(detailData.frontBack.front[index].id != selectItem.selectDetail.id)
+				){
+					isModal = true
+					Modal.confirm({
+						title: t('collectionModal.jsContent2'),
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							resolve(true)
+							isOpen = true
+						},
+						onCancel(){
+							resolve(false)
+							isOpen = false
+						}
+					});
+				}else{
+					resolve(true)
+					isModal = false
+				}
+			}).then((rv)=>{
+			})
+			if(isOpen){
+				store.commit('DesignDetailCopy/setDesignColthes',detailData.frontBack.front[index].id)
+				emit('canvasReload')	
+				return 
+			}						
+			
+			if(isModal)return						
 			store.commit('DesignDetailCopy/setDesignColthes',detailData.frontBack.front[index].id)
 			selectItem.imgDomIndex = index
 			detailData.frontBack.front.forEach((v:any)=>{
@@ -273,6 +316,27 @@ export default defineComponent({
 			detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
 			clothesOpenActive(index)
 		}
+		const updataPosition = ()=>{
+			let url = detailData.frontBack?.body?.path
+			let sacle = 0
+			const img = new Image();
+				img.onload = () => {
+					let dom:any = document.querySelector('.molepositon .perview_img')
+					// resolve(img)
+					sacle = dom.parentNode.offsetWidth / img.width
+					detailData.frontBack.front.forEach((item:any,index:number) => {
+						for (const key in item.style) {
+							if(key == 'zIndex')return
+							item.style[key] = item.style[key]*sacle+'px'
+						}
+						for (const key in detailData.frontBack.back[index].style) {
+							if(key == 'zIndex')return
+							detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
+						}
+					});
+				};
+				img.src = url;
+		}
         return{
 			...toRefs(detailData),
 			...toRefs(getDetailListDom),
@@ -283,6 +347,7 @@ export default defineComponent({
 			setpitch,
 			getSubmitData,
 			getMousePosition,
+			updataPosition,
         }
     },
 	directives:{
@@ -303,8 +368,6 @@ export default defineComponent({
 							data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key]*sacle+'px'
 						}
 					});
-
-					console.log(el.parentNode.offsetWidth);
 				};
 				img.src = data.value;
 			}
@@ -320,7 +383,8 @@ export default defineComponent({
 <style lang="less" scoped>
     .molepositon{
 		width: 30rem;
-		height: 80rem;
+		height: 65rem;
+		// height: 80rem;
 		display: flex;
 		flex-direction: column;
 		// margin: auto 0;
@@ -337,11 +401,14 @@ export default defineComponent({
 			position: relative;
 			height: 100%;
 			// overflow: hidden;
+			display: flex;
+			align-items: center;
+			justify-content: center;
 			>img{
 				z-index: 2;
 				position: relative;
-				width: 100%;
-				// height: 100%;
+				// width: 100%;
+				height: 100%;
 				object-fit: contain;
 			}
 			>div{
@@ -350,6 +417,7 @@ export default defineComponent({
 			}
 			.detail_modal_item_front,.designOpenrtion_print{
 				z-index: 2;
+				height: 100%;
 				img{
 					width: 100%;
 					height: 100%;
@@ -369,6 +437,7 @@ export default defineComponent({
 			}
 			> .designOpenrtion_btn{
 				z-index: 99;
+				left: 0;
 				ul{
 					list-style: none;
 					// width: 100%;