2023-10-27

上传模特截取模特图片大小功能
2023-10-27 11:09:32 +08:00
parent bd9dabd21d
commit 9fc8b925ce
25 changed files with 717 additions and 868 deletions
--- a/src/component/Detail/DesignDetail.vue
+++ b/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);
 					}
 				}
 			}
--- a/src/component/Detail/DesignDetailEnd.vue
+++ b/src/component/Detail/DesignDetailEnd.vue
@@ -58,7 +58,10 @@
 			</div>
 			<div class="result_apparel_print_img">
 				<img v-show="type_==1" class="result_appare_img" :src="sketchImg?.id_?sketchImg?.path:current?.path" :title="current?.type">
-				<img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint">
+				<!-- <img v-show="type_==2" class="result_print_img" :src="current?.path" :title="current?.type" @click="setPrint"> -->
+				<div v-show="type_==2" class="result_print_img" @click="setPrint" :title="current?.type">
+					<img v-for="item in current.layersObject" :src="item.imageUrl" alt="">
+				</div>
 			
 			</div>
 		</div>
@@ -109,6 +112,7 @@ export default defineComponent({
        const store = useStore();
 		let type_ = ref(0);
        let current = inject('current')//父组件传过来的数据
+        let setRevocation = inject('setRevocation')//父组件传过来的数据
 		let sketchImg = ref({})
 		//印花
 		let overallSingle = ref(false)
@@ -122,6 +126,7 @@ export default defineComponent({
        return{
 			store,
 			current,
+			setRevocation,
 			sketchImg,
 			type_,
 			overallSingle,
@@ -143,6 +148,7 @@ export default defineComponent({
 		//点击判断
 		init(num){
 			// this.current = JSON.parse(JSON.stringify(this.currentItem))
+			console.log(this.current);
 			this.type_ = num
 			this.colorList[this.selectIndex] = this.$parent.selectColor
 			this.overallSingle = this.current?.printObject?.ifSingle == null?false:this.current?.printObject?.ifSingle
@@ -271,6 +277,7 @@ export default defineComponent({
 					this.loadingShow = false
 					this.store.commit("setDesignItemDetail", designItemDetail);
 					this.store.commit("setDesignPreviewData", data);
+					this.setRevocation(designItemDetail,data)
 				}
 			).catch(res=>{
 				this.loadingShow = false
@@ -324,6 +331,9 @@ export default defineComponent({
 				transform: scale(.85);
 				transform-origin: center top;
 				cursor: pointer;
+				img:nth-child(1){
+					position: absolute;
+				}
 			}
 		}
 	}
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -113,6 +113,7 @@ export default defineComponent({
        let designOpenrtion = ref(false);
 		let designOpenrtionList = ref([])
 		let current = inject('current')//父组件传过来的数据
+        let setRevocation = inject('setRevocation')//父组件传过来的数据
 		let overallSingle = ref(false)
 		let systemDesignerPercentage = ref(0)
 		let printAmount = ref(1)//印花数量
@@ -165,6 +166,7 @@ export default defineComponent({
 			print,
 			sketch,
 			loadingShow,
+			setRevocation
        };
    },
    data() {
@@ -255,6 +257,13 @@ export default defineComponent({
 						this.designOpenrtionList.forEach((item,index)=>{
 							this.setTemplate(item,index)
 							this.printAmount = this.printStyleList.length
+							if (!this.overallSingle) {
+								this.printAmount = 1
+								this.setprintAmount()
+							}
+							if(this.current.printObject.ifSingle != this.overallSingle){
+								this.refetchTemplate(0)
+							}

 						})
 					}else{
@@ -439,6 +448,7 @@ export default defineComponent({
 				let num = this.printAmount - this.printStyleList.length
 				for (let index = 0; index < num; index++) {
 					this.printStyleList.push(this.printStyleList[this.printStyleList.length-1])
+					this.printStyleList[this.printStyleList.length-1].transform.rotateZ = 0
 					this.refetchTemplate(this.printStyleList.length-1)
 					this.designOpenrtionList.push(this.current.printObject.prints[this.current.printObject.prints.length-1])
 				}
@@ -601,7 +611,6 @@ export default defineComponent({
 				prints:this.computeZindex(),
 			}
 			data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
-			this.store.commit("setDesignPreviewData", data);
 			this.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designSingle, data).then(
 				(rv) => {
@@ -623,6 +632,8 @@ export default defineComponent({
 						item.layersObject[1].id = this.store.state.DesignDetailModule.designItemDetail.clothes[i].layersObject[1].id
 					})
 					this.store.commit("setDesignItemDetail", designItemDetail);
+					this.store.commit("setDesignPreviewData", data);
+					this.setRevocation(designItemDetail,data)
 					this.loadingShow = false
 					this.designOpenrtion = false
 					// this.closeModal()
--- a/src/component/Detail/habit.vue
+++ b/src/component/Detail/habit.vue
@@ -632,6 +632,7 @@ export default defineComponent({
        border-radius: 1rem;
        padding: 2rem;
 		// zoom: .75;
+		font-size: 1.6rem;
        transform-origin: top right;
        position: absolute;
        right: -.3rem;
@@ -776,6 +777,9 @@ export default defineComponent({
 				justify-content: space-between;
 				.model_current{
 					margin-right: 3rem;
+					.model_text{
+						text-align: center;
+					}
 				}
 			}
 			.habit_model_list{
@@ -831,6 +835,7 @@ export default defineComponent({
 				flex-direction: column;
 				.model_text{
 					display: flex;
+					justify-content: center;
 					:deep(.ant-switch) {
 						margin: 0 1rem;
 					}
@@ -910,6 +915,19 @@ export default defineComponent({
 }
 :deep(.ant-switch-checked) {
 	background-color: #000;
+	.ant-switch-handle{
+		left: calc(100% - 1.8rem - .2rem);
+	}
+	
+}
+:deep(.ant-switch){
+	min-width: 4.4rem;
+	height: 2.2rem;
+	line-height: 2.2rem;
+	.ant-switch-handle{
+		width: 1.8rem;
+		height: 1.8rem;
+	}
 }
 .habit :deep(.ant-btn) {
    box-shadow: none !important;
@@ -922,6 +940,7 @@ export default defineComponent({
    display: flex;
    align-items: center;
    justify-content: space-between;
+	font-size: 1.4rem;
 }
 </style>
 <style>
--- a/src/component/Detail/setDesignItem.vue
+++ b/src/component/Detail/setDesignItem.vue
@@ -53,6 +53,7 @@ export default defineComponent({
 			return store.state.DesignDetailModule.designItemDetail
 		})
 		let current = inject('current')//父组件传过来的数据
+        let setRevocation = inject('setRevocation')//父组件传过来的数据
 		let printZIndex = ref(4)//印花优先级
        let printStyleList = ref([
 			{
@@ -88,7 +89,8 @@ export default defineComponent({
 			direction,//判断点击的是li那个边
 			imgDom,
 			imgDomIndex,
-			frontBack
+			frontBack,
+			setRevocation
        };
    },
    data() {
@@ -381,26 +383,13 @@ export default defineComponent({
 					rv.clothes.forEach((item)=>{
 						designItemDetail.clothes.forEach((i)=>{
 							if(item.type === i.type){
-								// item.position = [
-								// 	item.position[0] += left,
-								// 	item.position[1] += top
-								// ]
-								// item.layersObject[1].position = [
-								// 	item.layersObject[1].position[0]+=item.layersObject[1].offset[1],
-								// 	item.layersObject[1].position[1]+=item.layersObject[1].offset[0]
-								// ],
-								// item.layersObject[0].position = [
-								// 	item.layersObject[0].position[0]+=item.layersObject[0].offset[1],
-								// 	item.layersObject[0].position[1]+=item.layersObject[0].offset[0]
-								// ]
 								i.layersObject = item.layersObject
 							}
 						})
-					
 					})
 					this.$emit('setDesignCoverage');
 					this.store.commit("setDesignItemDetail", designItemDetail);
-				
+					this.setRevocation(designItemDetail,data)
                }
            ).catch(res=>{ 
                this.loadingShow = false