commit

2023-09-25 10:09:00 +08:00
parent 173f35042d
commit d9868d5cf0
37 changed files with 1618 additions and 1146 deletions
--- a/src/component/Detail/DesignPrintOperation.vue
+++ b/src/component/Detail/DesignPrintOperation.vue
@@ -4,11 +4,11 @@
            class="designOpenrtion_modal"
            v-model:visible="designOpenrtion"
            :footer="null"
-            width="80%"
+            width="65%"
            :maskClosable="false"
            :centered="true"
            :closable="false"
-            :mask="false"
+            :mask="true"
        >
            <div class="designOpenrtion_content">
 				<div class="design_title_text">
@@ -35,7 +35,7 @@
 								Single
 							</div>
 						</div>
-						<div class="habit_System_Designer">
+						<div v-show="!overallSingle" class="habit_System_Designer">
 							<a-slider id="system_silder"
 								v-model:value="systemDesignerPercentage"
 								@afterChange="systemDesigner"
@@ -43,16 +43,17 @@
 							>
 							</a-slider>
 						</div>
-						<div v-show="current.printObject.ifSingle" @click="random" class="button_second">Random</div>
-						<div v-show="current.printObject.ifSingle" class="print_input">
+						<div v-show="overallSingle" @click="random" class="button_second">Random</div>
+						<div v-show="overallSingle" class="print_input">
 							<input class="search_input" placeholder="Please input" type="Number" v-model="printAmount" @input="setprintAmount">
+							<i class="fi fi-rr-trash" @click="deletePrint"></i>
 						</div>
 						<div class="designOpenrtion_nav">
-							<div class="designOpenrtion_single" v-show="current.printObject.ifSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index].designOpenrtionBtn}">
-								<img :src="item.url" @click="setpitch(item,index)">
+							<div class="designOpenrtion_single" v-show="overallSingle" v-for="item,index in designOpenrtionList" :key="item" :class="{active:printStyleList[index].designOpenrtionBtn}">
+								<img :src="item.path" @click="setpitch(item,index)">
 							</div>
-							<div class="designOpenrtion_overall" v-show="!current.printObject.ifSingle">
-								<img :src="designOpenrtionList[0].url">
+							<div class="designOpenrtion_overall" v-show="!overallSingle">
+								<img :src="designOpenrtionList[0].path">
 							</div>
 						</div>
 						<div class="subitOkPreviewBtn" @click.stop="setPreview">preview</div>
@@ -60,7 +61,7 @@
 				</div>
 				<div class="designOpenrtion_centent" id="designOpenrtionCentent">
 					<div class="designOpenrtion_imgMask" :style="sketch">
-						<div class="designOpenrtion_print">
+						<div class="designOpenrtion_print" v-show="overallSingle">
 							<div 
 								v-for="item,index in designOpenrtionList" 
 								:key="item"
@@ -68,18 +69,24 @@
 								@mousedown.stop="itemMoveMousedown(index,$event)"
 								class="modal_imgItem" 
 								@click="setpitch(item,index)" ref="content" >
-								<img crossOrigin="anonymous" :src="item.url" :style="{transform:`rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> 
+								<img crossOrigin="anonymous" :src="item.path" :style="{transform:`rotateZ(${printStyleList[index].transform.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> 
 							</div>
 						</div>
-						<img :src="current?.path" alt="" class="designOpenrtion_sketch">
+						<!-- <img v-if="overallSingle" :src="current?.layersObject?.[1]?.maskUrl" alt="" class="designOpenrtion_sketch"> -->
+						<img :src="current?.layersObject?.[1]?.imageUrl" alt="" class="designOpenrtion_sketch">
 						<div class="designOpenrtion_btn">
-							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
+							<ul v-if="overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
 								<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
 								<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
 								<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
 								<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
 								<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
 							</ul>
+							<div v-show="!overallSingle"></div>
+							<ul v-if="!overallSingle" v-for="item,index in printStyleList" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_Mouoverall" :style="'left:'+item.style.left+';top:'+item.style.top" @mousedown.stop="itemMoveMousedown(index,$event)">
+								<i class="fi fi-rr-arrows animtion1"></i>
+								<i class="fi fi-rr-arrows animtion2"></i>
+							</ul>
 						</div>
 					</div>
 				</div>
@@ -95,6 +102,7 @@
 import { defineComponent, h,createVNode, ref ,computed, inject,nextTick} from "vue";
 import { LoadingOutlined } from "@ant-design/icons-vue";
 import { useStore } from "vuex";
+import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 export default defineComponent({
@@ -231,7 +239,6 @@ export default defineComponent({
 				// 				timeSwitch = true
 				// 			}, 100);
 				// 			elParent.firstElementChild.style.transform = "scale("+ num + ") rotateZ("+ angle + "deg)"
-				// 			console.log(num);
 				// 		}
 				// 	});
 				// });
@@ -247,15 +254,18 @@ export default defineComponent({
 			this.designOpenrtionList.push(this.current.printObject)
 			this.overallSingle = DesignPrintOperationParent.overallSingle
 			this.systemDesignerPercentage = DesignPrintOperationParent.systemDesignerPercentage
-
 			let skecth = new Image
-			skecth.src = this.current.path
+			if(!this.overallSingle){
+				skecth.src = this.current.layersObject[1].imageUrl
+			}else{
+				skecth.src = this.current.layersObject[1].maskUrl
+			}
 			skecth.onload=()=>{
 				this.sketch.width = skecth.width/10+'rem'
 				this.sketch.height = skecth.height/10+'rem'
 			}
 			let print = new Image
-			print.src = this.current.printObject.url
+			print.src = this.current.printObject.path
 			print.onload=()=>{
 				this.print.width = print.width+'px'
 				this.print.height = print.height+'px'
@@ -264,26 +274,37 @@ export default defineComponent({
 			}
 		},
 		systemDesigner(num) {
-			this.current.printObject.scale = num
+			let DesignPrintOperationParent = this.$parent
+			DesignPrintOperationParent.systemDesignerPercentage = num
        },
-		setOveralSingle(){
-		},
 		formatter(value) {
-
-			return `${value}%`;
+			return `${value*3}%`;
 		},
 		
 		setOveralSingle(){
-			this.current.printObject.ifSingle = this.overallSingle
-			if (!this.current.printObject.ifSingle) {
+			let DesignPrintOperationParent = this.$parent
+			DesignPrintOperationParent.overallSingle = this.overallSingle
+			if (!this.overallSingle) {
 				this.printAmount = 1
 				this.setprintAmount()
 			}
+			let skecth = new Image
+			// if(!this.overallSingle){
+			// 	skecth.src = this.current.layersObject[1].imageUrl
+			// }else{
+			// 	skecth.src = this.current.layersObject[1].maskUrl
+			// }
+			skecth.src = this.current.layersObject[1].imageUrl
+			skecth.onload=()=>{
+				this.sketch.width = skecth.width/10+'rem'
+				this.sketch.height = skecth.height/10+'rem'
+			}
 		},
 		setpitch(item,index){
 			this.printStyleList.forEach((v)=>{
 				v.designOpenrtionBtn = false
 			})
+			this.imgDomIndex = index
 			this.printStyleList[index].designOpenrtionBtn = true
 			this.printStyleList[index].style.zIndex = this.printZIndex++
 		},
@@ -293,7 +314,11 @@ export default defineComponent({
 			this.printStyleList.forEach((v)=>{
 				v.designOpenrtionBtn = false
 			})
-			this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			if(!this.overallSingle){
+				this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
+			}else{
+				this.imgDom = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("modal_imgItem")[this.imgDomIndex]
+			}
 			let scale = Number(this.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
 			let rotateZ = Number(this.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
 			this.printStyleList[index].designOpenrtionBtn = true
@@ -443,6 +468,14 @@ export default defineComponent({
 			this.printStyleList[this.printStyleList.length-1].designOpenrtionBtn = true
 			this.imgDomIndex = this.printStyleList.length-1
 		},
+		deletePrint(){
+			if(this.designOpenrtionList.length <= 1){
+				return
+			}
+			this.designOpenrtionList.splice(this.imgDomIndex,1)
+			this.printStyleList.splice(this.imgDomIndex,1)
+			this.printAmount = this.designOpenrtionList.length
+		},
 		random(){
 			this.printStyleList.forEach((v,index)=>{
 				this.refetchTemplate(index)
@@ -450,13 +483,17 @@ export default defineComponent({
 		},
        //随机重置图片顺序
        refetchTemplate(index) {
-			let scale = (Math.trunc(Math.random()*15)+1)*.1
+			// let scale = (Math.trunc(Math.random()*15)+1)*.1
 			let rotateZ1 = Math.trunc(Math.random()*360)+1
 			let rotateZ2 = Math.trunc(Math.random()*360)+1
 			let sketch = document.getElementsByClassName('designOpenrtion_sketch')[0]
-			console.log(sketch.offsetHeight);
-			let x = sketch.width-Number(this.print.width.replace(/px/g,''))
-			let y = sketch.height-Number(this.print.height.replace(/px/g,''))
+			let width = Math.trunc(Math.random()*(sketch.width-sketch.width/3))+1+sketch.width/3
+			let scale = width / this.print.width.replace(/px/g,'')
+			console.log(scale,width,this.print.width);
+			// let x = sketch.width-Number(this.print.width.replace(/px/g,''))
+			// let y = sketch.height-Number(this.print.height.replace(/px/g,''))
+			let x = sketch.width-20
+			let y = sketch.height-20
 			this.printStyleList[index]={
 				centers:{
 					left:0,
@@ -478,6 +515,44 @@ export default defineComponent({
 				designOpenrtionBtn:false
 			}
        },
+		computeZindex(){
+			let arr = JSON.parse(JSON.stringify(this.printStyleList))
+			arr.sort((a, b) => {
+				var a_num = a["style"].zIndex;
+				var b_num = b["style"].zIndex;
+				return a_num - b_num;
+			});
+			let num = 1
+			arr.forEach((v)=>{
+				v.style.zIndex = num++
+			})
+			return this.computeSize(arr)//计算单件衣服初始大小到目前大小的缩放比
+		},
+		computeSize(arr){
+			// let num = this.sketch/
+			let sketch = document.getElementsByClassName("designOpenrtion_sketch")[0]
+			let sketchNum = this.sketch.width.replace(/rem/g,'')*10/sketch.offsetWidth
+			let prints = []
+			let scale
+			let location
+			arr.forEach((v,index)=>{
+				if(!this.overallSingle){
+					scale = this.systemDesignerPercentage*3/100
+					location = [arr[index].style.left.replace(/px/g,'')*sketchNum+this.print.width.replace(/px/g,'')/2-7,arr[index].style.top.replace(/px/g,'')*sketchNum+this.print.height.replace(/px/g,'')/2-7]
+				}else{
+					scale = (arr[index].style.width.replace(/px/g,'')/this.print.width.replace(/px/g,''))
+					location = [arr[index].style.left.replace(/px/g,'')*sketchNum,arr[index].style.top.replace(/px/g,'')*sketchNum]
+				}
+				let obj = {
+					angle : arr[index].transform.rotateZ,
+					location : location,
+					priority:arr[index].style.zIndex,
+					scale:scale,
+				}
+				prints.push(obj)
+			})
+			return prints	
+		},
 		setPreview(){
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let index 
@@ -490,27 +565,37 @@ export default defineComponent({
 			let priority = designItemDetail.clothes.map((v)=>{
                return v.type
            })
-			// let 
-			let data = {
-                ...designItemDetail,
-                priority:priority,
-                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-            }
-			// this.loadingShow = true
-			// Https.axiosPost(Https.httpUrls.designSingle, data).then(
-			// 	(rv) => {
-			// 		// this.parentData.design.designItemUrl = rv.designItemUrl
-			// 		// this.$emit('finishRedesign',this.parentData)
-			// 		// this.closeModal()
-			// 		let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
-			// 		console.log(designItemDetail);
-			// 		this.loadingShow = false
-			// 		// this.closeModal()
-			// 		console.log(rv);
-			// 	}
-			// ).catch(res=>{
-			// 	this.loadingShow = false
-			// });
+			// let data = {
+            //     ...designItemDetail,
+            //     priority:priority,
+            //     timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            // }
+			let data = this.store.state.DesignDetailModule.designPreviewData
+			data.designSingleItemDTOList[0].printObject={
+				ifSingle:this.overallSingle,
+				path:this.designOpenrtionList[0].path,
+				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) => {
+					// this.parentData.design.designItemUrl = rv.designItemUrl
+					// this.$emit('finishRedesign',this.parentData)
+					// this.closeModal()
+					designItemDetail.clothes[index].printObject.path = rv.clothes[0].printObject.path
+					designItemDetail.clothes[index].layersObject = rv.clothes[0].layersObject
+					designItemDetail.clothes[index].printObject.prints = this.computeZindex()
+					console.log(rv);
+					this.store.commit("setDesignItemDetail", designItemDetail);
+					this.loadingShow = false
+					this.designOpenrtion = false
+					// this.closeModal()
+				}
+			).catch(res=>{
+				this.loadingShow = false
+			});
 		},
 		clearModal(){
 			this.printAmount = 1//显示数量
@@ -561,7 +646,7 @@ export default defineComponent({

 <style lang="less">
 .designOpenrtion_modal {
-	max-width: 1440px;
+	// max-width: 1440px;
 	.ant-modal-body{
 		padding: 4rem 5rem 0rem!important;
 		// height: calc(65vh - 6.4rem);
@@ -660,8 +745,11 @@ export default defineComponent({
 				}
 				.print_input{
 					margin-top: 1rem;
+					width: 9.85rem;
+					display: flex;
 					.search_input{
-						width: 9.85rem;
+						width: 6.85rem;
+						margin-right: 1rem;
 						padding: 0 1.5rem;
 						border: 2px solid #000;
 						font-size: 1.2rem;
@@ -672,13 +760,19 @@ export default defineComponent({
 							color: #C2C2C2;
 						}
 					}
+					i{
+						width: 2rem;
+						cursor: pointer;
+						display: flex;
+						align-items: center;
+					}
 				}
 				.designOpenrtion_nav{
 					display: flex;
 					margin-top: 2rem;
 					flex-wrap: wrap;
 					width: 100%;
-					height: 10rem;
+					height: 12rem;
 					overflow-x: hidden;
 					justify-content: space-evenly;
 					&.designOpenrtion_nav::-webkit-scrollbar {
@@ -693,6 +787,7 @@ export default defineComponent({
 					}
 					.designOpenrtion_single{
 						width: 40%;
+						margin-bottom: 2rem;
 					}
 					img{
 						width: 100%;
@@ -751,6 +846,12 @@ export default defineComponent({
 			}
 			.designOpenrtion_btn{
 				z-index: 3;
+				>div{
+					width: 100%;
+					height: 100%;
+					border: 2px solid rgb(20, 188, 255);
+					position: absolute;
+				}
 				ul{
 					list-style: none;
 					// width: 100%;
@@ -765,7 +866,38 @@ export default defineComponent({
 					user-select:none;
 					opacity: 0;
 					margin: 0;
-					
+				
+					&.designOpenrtion_Mouoverall{
+						opacity: 1;
+						border: none;
+						width: 1.4rem;
+						height: 1.4rem;
+						i{
+							display: flex;
+							color: #14bcff;
+						}
+						.animtion1{
+							animation: anim 4s 2s linear infinite;
+							// animation-delay: .5;
+						}
+						.animtion2{
+							animation: anim 4s linear infinite;
+							position: absolute;
+							top: 0;
+							left: 0;
+						}
+						@keyframes anim{
+							0% {
+								opacity: 1;
+								transform: scale(1);
+							}
+							100% {
+								opacity: 0;
+								transform: scale(3);
+							}
+						}
+
+					}
 					li{
 						cursor: pointer;
 						// border-radius: 50%;
@@ -814,8 +946,8 @@ export default defineComponent({
 						position: absolute;
 						content: "";
 						background-color: #14bcff;
-						width: 2px;
-						height: 30px;
+						width: .2rem;
+						height: 3rem;
 						left: 50%;
 						bottom: 0;
 						transform: translateX(-50%);
@@ -824,7 +956,7 @@ export default defineComponent({
 						position: absolute;
 						content: "";
 						background-color: #14bcff;
-						top: calc(50% - 30px);
+						top: calc(50% - 3rem);
 						left: 50%;
 						transform: translate(-50%,-50%) ;
 						width: 1.5rem;