detail更新

2025-02-25 15:32:55 +08:00
parent 3b230ae222
commit 6cfcd4ce16
28 changed files with 1701 additions and 1056 deletions
--- a/src/component/DetailCopy/model/index.vue
+++ b/src/component/DetailCopy/model/index.vue
@@ -1,14 +1,17 @@
 <template>
    <div class="modelindex">
 		<div class="modelindex_left">
-			<modelNav></modelNav>
+			<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')"></modelNav>
 		</div>
 		<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" :class="{active:isEditPattern.value}" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail('edit')"></i>
+				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></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> -->

@@ -17,7 +20,7 @@
 				<!-- <i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
 				<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i> -->
 			</div>
-			<position ref="position"></position>
+			<position ref="position" :imgDesignImg=imgDesignImg></position>
 		</div>
 		
    </div>
@@ -35,7 +38,7 @@ export default defineComponent({
    components:{
 		position,modelNav
    },
-	emits:['detailEdit'],
+	emits:['detailEdit','canvasReload','addSketch'],
    setup(props,{emit}) {
        const store = useStore();
 		const detailData = reactive({
@@ -46,7 +49,8 @@ export default defineComponent({
 			pageSize:10,
 			currentPage:1,
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
-			isEditPattern:inject('isEditPattern') as any
+			isEditPattern:inject('isEditPattern') as any,
+			imgDesignImg:false,
 		})
 		const getDetailListDom = reactive({
 			libraryList:null as any,
@@ -58,8 +62,10 @@ export default defineComponent({
 		const showDesignImgDetail = (str:any)=>{
 			emit('detailEdit',str)
 		}
-		const deleteNav = ()=>{
-
+	
+		//图片按下样子
+		const mousedownDesignImg = ()=>{
+			getDetailListData.imgDesignImg = !getDetailListData.imgDesignImg
 		}
        return{
 			...toRefs(detailData),
@@ -67,7 +73,7 @@ export default defineComponent({
 			...toRefs(getDetailListDom),
 			getSubmitData,
 			showDesignImgDetail,
-			deleteNav,
+			mousedownDesignImg,
        }
    },

--- a/src/component/DetailCopy/model/modelNav.vue
+++ b/src/component/DetailCopy/model/modelNav.vue
@@ -1,9 +1,10 @@
 <template>
    <div class="modelNav">
-		<div class="modelNav_item" v-for="item,index in designvDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
+		<div class="modelNav_item" v-for="item,index in designDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
+			<i v-if="item?.id != selectDetail?.id" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
 			<img :src="item.path" alt="">
 		</div>
-		<div class="modelNav_item add" @click="">
+		<div v-if="currentDetailType == 'sketch' || currentDetailType == ''" :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
 			+
 		</div>
    </div>
@@ -21,13 +22,15 @@ export default defineComponent({
    components:{
 		position,
    },
+	emits:['canvasReload','addSketch'],
    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),
+			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
 			frontBack:{} as any,
 			isEditPattern:inject('isEditPattern') as any
 		})
@@ -46,6 +49,7 @@ export default defineComponent({
 						centered:true,
 						onOk() {
 							resolve(true)
+							emit('canvasReload')
 						},
 						onCancel(){
 							resolve(false)
@@ -58,12 +62,24 @@ export default defineComponent({
 				if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
 			})
 		}
+		const deleteDetailItem = (id:number)=>{
+			detailData.designDetail.clothes = detailData.designDetail.clothes.filter((item:any)=>item.id != id)
+			detailData.frontBack_.back = detailData.frontBack_.back.filter((item:any)=>item.id != id)
+			detailData.frontBack_.front = detailData.frontBack_.front.filter((item:any)=>item.id != id)
+		}
+		const addSketch = ()=>{
+			if(detailData.currentDetailType != 'sketch')store.commit('DesignDetailCopy/setCurrentDetailType','sketch')
+			store.commit('DesignDetailCopy/addDesignColthes')
+			emit('addSketch')
+		}
 		// onBeforeUnmount(()=>{
 		// 	detailData.selectIndex = -1
 		// })
        return{
 			...toRefs(detailData),
 			selectDetailItem,
+			deleteDetailItem,
+			addSketch,
        }
    },

@@ -84,6 +100,20 @@ export default defineComponent({
 			border: 2px solid #B4B4B4;
 			margin-bottom: 1.5rem;
 			cursor: pointer;
+			position: relative;
+			&:hover{
+				> i{
+					display: block;
+				}
+			}
+			> i{
+				display: none;
+				position: absolute;
+				right: 1rem;
+				top: 1rem;
+				cursor: pointer;
+				font-size: 2rem;
+			}
 			&:last-child{
 			    margin-bottom: 0;
 			}
--- a/src/component/DetailCopy/model/modelPosition.vue
+++ b/src/component/DetailCopy/model/modelPosition.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="molepositon">
+    <div class="molepositon" :class="{active:!imgDesignImg}">
 		<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.style">
 			<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
 				<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
@@ -21,6 +21,13 @@
 			<img src="" alt="">
 		</div>
    </div>
+	<div class="molepositon" :class="{active:imgDesignImg}">
+		<div class="designOpenrtion_imgMask">
+			<div class="detail_modal_item_front">
+				<img :src="designDetail.designItemUrl" alt="">
+			</div>
+		</div>
+	</div>
 </template>
 <script lang="ts">
 import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -34,6 +41,12 @@ import newFollowVue from '@/component/Account/message/newFollow.vue';
 export default defineComponent({
    components:{
    },
+	props:{
+	    imgDesignImg:{
+            default:false,
+			type:Boolean,
+		}
+	},
    setup(props,{emit}) {
        const store = useStore();
 		const detailData = reactive({
@@ -211,23 +224,27 @@ export default defineComponent({
 				item.priority = num++
 			})
 			let data:any = {
-				scale:[],
-				offset:[],
-				priority:-1,
+				scale:null,
+				offset:null,
+				priority:'',
 				maskUrl:'',
 				maskMinioUrl:'',
 			}
+			let state = false
 			for (let index = 0; index < arr.length; index++) {
 				if(value.id == arr[index].id){
+					state = true
 					let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[0])
 					let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[1])
 					let scaleWidth = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale[0])).toFixed(2)):1
 					let scaleHeight = arr[index]?.imageSize?Number(((arr[index]?.style?.height.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[1]/arr[index].scale[1])).toFixed(2)):1
+					
 					// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)
 					data.scale = [scaleWidth,scaleHeight]
 					let top = y == 0 ? value.layersObject[0].offset[1]:y+value.layersObject[0].offset[1]
 					let left = x == 0 ? value.layersObject[0].offset[0]:x+value.layersObject[0].offset[0]
-					data.offset = [left,top]
+					data.offset = [left?left:0,top?top:0]
+					// data.offset = [left?left:0,top?top:0]
 					data.maskUrl = arr[index].maskUrl
 					data.maskMinioUrl = arr[index].maskMinioUrl
 					// data.priority = arr[index].style.zIndex
@@ -237,7 +254,11 @@ export default defineComponent({
 					break
 				}
 			}
-			
+			if(!state){
+				data.scale = [1,1]
+				data.offset = [0,0]
+				data.priority = 10+arr.length
+			}
 			return data
 		}
 		const deleteNav = ()=>{
@@ -304,6 +325,12 @@ export default defineComponent({
 		flex-direction: column;
 		// margin: auto 0;
 		padding-top: 3rem;
+		position: relative;
+		display: none;
+		&.active{
+			display: block;
+			z-index: 2;
+		}
 		> .designOpenrtion_imgMask{
 			width: auto;
 			height: auto;
@@ -341,7 +368,7 @@ export default defineComponent({
 				z-index: 1 !important;
 			}
 			> .designOpenrtion_btn{
-				z-index: 9999;
+				z-index: 99;
 				ul{
 					list-style: none;
 					// width: 100%;