2023-10-27

上传模特截取模特图片大小功能

src/component/Detail/DesignDetail.vue

@@ -31,13 +31,16 @@
 								<img :src="item?.path" alt="">
 							</div>
 						</div>
-						<div class="detail_modal_item_back" :class="{active:body}" v-for="item,index in frontBack.back" :style="item.style">
-							<img :src="item.imageUrl" alt="">
-						</div>
-						<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
-						<div class="detail_modal_item_front" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
-							<img :src="item.imageUrl" alt="">
+						<div class="detail_modal_model_content">
+							<div class="detail_modal_item_back" :class="{active:body}" v-for="item,index in frontBack.back" :style="item.style">
+								<img :src="item.imageUrl" alt="">
+							</div>
+							<img class="detail_modal_model" :src="frontBack.body?.layersObject[0]?.imageUrl" alt="">
+							<div class="detail_modal_item_front" :class="{active:body}" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
+								<img :src="item.imageUrl" alt="">
+							</div>
 						</div>
+						
 					</div>
 					<!-- <div v-else class="detial_img detial_img1" v-for="item,index in frontBack.front" :style="item.style" @click.stop="clothesDetail(item,index)">
 						<img :src="item.imageUrl" alt="">
@@ -52,6 +55,8 @@
 						<i v-show="!body" class="fi fi-rr-edit" @click="showDesignImgDetail(3)"></i>
 						<!-- 层 -->
 						<i class="fi fi-rr-copy" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg"></i>
+						<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>
 					<div v-show="ifSubmit" class="subitOkPreviewBtn" @click="submit">
 						Submit
@@ -115,7 +120,7 @@
 
             </div>
         </a-modal>
-        <ElementReplace ref="ElementReplace"></ElementReplace>
+        <!-- <ElementReplace ref="ElementReplace"></ElementReplace> -->
         <AccessoryReplace ref="AccessoryReplace"></AccessoryReplace>
          <div class="mark_loading" v-show="loadingShow">
             <a-spin size="large" />
@@ -174,6 +179,9 @@ export default defineComponent({
 		let userInfo:any = {}
 		let ifSubmit = ref(false)
 		let designItemDetailUrl = ref({})
+		let setRevocationShow = ref(false)//判断是不是第一次进来和切换下一张
+		let oppositeRevocationShow:any = ref()
+		let revocationShow:any = ref()
         return{
             designItemDetail,
             store,
@@ -187,7 +195,10 @@ export default defineComponent({
 			designOutfitId,
 			userInfo,
 			ifSubmit,
-			designItemDetailUrl
+			designItemDetailUrl,
+			setRevocationShow,
+			oppositeRevocationShow,
+			revocationShow
         }
     },
     data(){
@@ -213,8 +224,6 @@ export default defineComponent({
 				}
 				await this.setImgSize()
 				this.designItemDetailUrl = designItemDetail.currentFullBodyView?designItemDetail.currentFullBodyView:designItemDetail.designItemUrl
-				console.log(this.designItemDetailUrl);
-				
 			}
 		},
 		currentIndex:{
@@ -222,7 +231,29 @@ export default defineComponent({
 			}
 		},
 	},
+	provide() {
+		return {
+			setRevocation:this.setRevocation
+		}
+	},
 	mounted(){
+		let beforeunload =  () => {
+			this.removeRevocation()
+			window.removeEventListener('beforeunload',beforeunload)
+		}
+		window.addEventListener('beforeunload',beforeunload)
+		let onresizeTime:any
+		let this_ = this
+		window.onresize = () => {
+        return (() => {
+			clearTimeout(onresizeTime)
+			onresizeTime = setTimeout(async ()=>{
+				await this_.setImgSize()
+			},500)
+			
+			})()
+		}
+
 		let userInfo:any = getCookie("userInfo")
         this.userInfo = JSON.parse(userInfo);
 		// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
@@ -258,7 +289,6 @@ export default defineComponent({
 	},
     methods:{
 		openCurrent(num: Number) {
-			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			DesignDetailAlter.init(num)
 			if(num ==2 ){
@@ -271,8 +301,9 @@ export default defineComponent({
 				this.designOrder = false
 				let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 				DesignDetailAlter.terminate()
-				this.designItemDetail = {}
+				// this.designItemDetail = {}
 				this.frontBack = {}
+				this.removeRevocation()
             }else{
                 this.designShowPrview = 1;
 				this.designItemDetailUrl = {}
@@ -300,6 +331,7 @@ export default defineComponent({
 					})
 					
                     this.store.commit('setDesignItemDetail',rv)
+					this.setRevocation(rv,'')
 					if(rv.others[0].layersObject.length != 0){
 						this.body = false
 					}else{
@@ -336,7 +368,7 @@ export default defineComponent({
 					}
 				})
 			}else{
-				designItemDetail.others.forEach((item:any) => {
+				designItemDetail?.others?.forEach((item:any) => {
 					if(item.type == 'Body'){
 						body = item
 					}
@@ -369,8 +401,6 @@ export default defineComponent({
 						}
 					}
 				})
-				let bodyImgWH = document.getElementsByClassName("design_compile_content")[0].getElementsByClassName("perview_img")[0]
-
 				body.style = {
 					width:body.layersObject[0].imageSize?.[0]*ratio+'px',
 					height:body.layersObject[0].imageSize?.[1]*ratio+'px',
@@ -402,7 +432,57 @@ export default defineComponent({
 			this.designShowPrview = 1
             // this.showDesignDetailModal(data,str)
 		},
-		
+		removeRevocation(){
+			sessionStorage.removeItem('oppositeRevocation')
+			sessionStorage.removeItem('revocation')
+			this.setRevocationShow = false
+		},
+		setRevocation(designItemDetail:any,data:any){//设置撤销
+			let itemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
+			// let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
+			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			if(revocation?.[0]?.designItemDetail.designItemId != itemDetail.designItemId || sessionStorage.getItem("revocation") == null){
+				// sessionStorage.setItem('revocation', JSON.stringify([]));
+				// sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
+				revocation = []
+			}
+			let detail = {
+				designItemDetail:designItemDetail,
+				data:data?data:''
+			}
+			revocation.push(detail)
+			this.revocationShow = revocation?.length
+			this.oppositeRevocationShow = 0
+			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
+		},
+		revocation(){//撤回
+			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			oppositeRevocation.push(revocation[revocation.length-1])
+			this.oppositeRevocationShow = oppositeRevocation.length
+			revocation.splice(revocation.length-1,1)
+			this.revocationShow = revocation.length
+			if(this.revocationShow > 1){
+				this.store.commit('setDesignPreviewData',revocation[revocation.length-1].data)
+			}
+			this.store.commit("setDesignItemDetail", revocation[revocation.length-1].designItemDetail);
+			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
+			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+		},
+		oppositeRevocation(){//反撤回
+			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			this.store.commit('setDesignPreviewData',oppositeRevocation[oppositeRevocation.length-1].data)
+			this.store.commit("setDesignItemDetail", oppositeRevocation[oppositeRevocation.length-1].designItemDetail);
+			revocation.push(oppositeRevocation[oppositeRevocation.length-1])
+			this.revocationShow = revocation.length
+			oppositeRevocation.splice(oppositeRevocation.length-1,1)
+			this.oppositeRevocationShow = oppositeRevocation.length
+			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
+			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+		},
 		setSubmitItem(str:any){
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let clothes:any = []
@@ -478,7 +558,9 @@ export default defineComponent({
 		//按比设置单件衣服宽高位置
 		async setPostition(url:any){
 			let img:any = await loadImage(url)
-			let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_body')[0]
+			let modal_body = <HTMLImageElement>document.getElementsByClassName('detail_modal_model')[0]
+				console.log(modal_body);
+				
 			const num = modal_body?.offsetWidth / img.width;
 			function loadImage(url:any) {
 				return new Promise((resolve, reject) => {
@@ -499,6 +581,7 @@ export default defineComponent({
             let newDesign = {}
             let newIndex = 0
 			this.designOrder = false
+			this.removeRevocation()
 			let DesignDetailAlter:any = this.$refs.DesignDetailAlter
 			DesignDetailAlter.terminate()
             if(type === 'last'){
@@ -692,6 +775,7 @@ export default defineComponent({
         // padding: 1.5rem 1rem 2.5rem;
         box-sizing: border-box;
         .detail_modal_body_img{
+			overflow: hidden;
             // width: 43.3rem;
 			width: 23%;
             height: 100%;
@@ -700,7 +784,6 @@ export default defineComponent({
             justify-content: center;
             align-items: center;
 			position: relative;
-
 			flex-direction: column;
 				// height: 50%;
 			.detail_modal_body{
@@ -714,7 +797,8 @@ export default defineComponent({
 					top: 0;
 					left: 50%;
 					z-index: 999;
-					transform: translateX(-50%);
+					transform: translate(-50%,-120%);
+					transition: all .3s;
 					>div{
 						width: 4rem;
 						height: 4rem;
@@ -744,30 +828,41 @@ export default defineComponent({
 				>img{
 					width: 100%;
 				}
-				.detail_modal_model{
+				.detail_modal_model_content{
+					top: 50%;
+					transform: translate(-50%, -50%);
+					left: 50%;
 					position: relative;
-					z-index: 1;
-				}
-				.detail_modal_item_front,.detail_modal_item_back{
-					cursor: pointer;
-					position: absolute;
-					img{
-						// width: 100%;
-						max-height: 100%;
+					height: 80%;
+					display: inline-block;
+					.detail_modal_model{
+						z-index: 1;
+						position: relative;
 						width: auto;
+						max-height: 100%;
 					}
-					&.active{
-						top: 50%;
-						left: 50%;
-						transform: translate(-50%,-50%);
+					.detail_modal_item_front,.detail_modal_item_back{
+						cursor: pointer;
+						position: absolute;
+						img{
+							// width: 100%;
+							max-height: 100%;
+							width: auto;
+						}
+						&.active{
+							top: 50%;
+							left: 50%;
+							transform: translate(-50%,-50%);
+						}
 					}
-				}
-				.detail_modal_item_back{
-					z-index: 1 !important;
-				}
-				.detail_modal_item_front{
+					.detail_modal_item_back{
+						z-index: 1 !important;
+					}
+					.detail_modal_item_front{
 
+					}
 				}
+				
 			}
 			.subitOkPreviewBtn{
 				bottom: 2rem;
@@ -778,7 +873,7 @@ export default defineComponent({
 			}
             .detial_img{
                 max-width: 100%;
-                max-height: 100%;
+                max-height: 80%;
             }
 			.detail_btn{
 				z-index: 9999;
@@ -791,17 +886,46 @@ export default defineComponent({
 					position: absolute;
 					cursor: pointer;
 					zoom: 1.2;
+					transition: all .3s;
 					&.fi-bs-expand-arrows-alt{
 						top: 0;
 						left: 0;
+						transform: translateX(-120%);
 					}
 					&.fi-rr-edit{
 						left: 0;
 						top: 3rem;
+						transform: translateX(-120%);
 					}
 					&.fi-rr-copy{
 						top: 0;
 						right: 0;
+						transform: translateX(120%);
+					}
+					&.icon-fanchehui{
+						top: 6rem;
+						right: 0;
+						transform: translateX(120%);
+					}
+					&.icon-chehui{
+						top: 3rem;
+						right: 0;
+						transform: translateX(120%);
+					}
+				}
+				i:hover{
+
+				}
+			}
+			&.detail_modal_body_img:hover{
+				.detail_modal_body{
+					.detail_modal_body_nav{
+						transform: translate(-50%,0%);
+					}
+				}
+				div{
+					i{
+						transform: translateX(0);
 					}
 				}
 			}