fix

2023-12-04 11:48:17 +08:00
parent c2399fd4e4
commit bcb6483ce0
25 changed files with 148 additions and 81 deletions
--- a/src/component/HomePage/ExportNewCoolection.vue
+++ b/src/component/HomePage/ExportNewCoolection.vue
@@ -79,7 +79,9 @@ import { useStore } from "vuex";
 export default defineComponent({
    components:{MoodTemplate},
    setup() {
-		let sketch:any = ref([[],[],[]])
+		let sketch:any = computed(()=>{
+			return store.state.HomeStoreModule.showSketchList})
+		// let sketch:any = ref([[],[],[]])
 		let sketchList:any = computed(()=>{
 			return store.state.UploadFilesModule.showSketchboard})
        const store = useStore();
@@ -97,10 +99,7 @@ export default defineComponent({
 	watch: {
 		sketchList:{
 			handler(newVal:any,oldVal:any){
-				// this.sketchList = []
-				// this.sketch = [[],[],[]]
-				// this.sketchList = this.allBoardData.sketchboardFiles
-				this.setSketch()
+				// this.setSketch()
 			},
 			immediate: true
 		},
@@ -130,11 +129,13 @@ export default defineComponent({
 				sketch1.num = 0
 				sketch2.num = 1
 				sketch3.num = 2
+				let aaa = JSON.parse(JSON.stringify(this.sketchList))
 				if(this.sketchList){
-					for (let i = 0; i < this.sketchList.length; i++) {
+					for (let i = 0; i < aaa.length; i++) {
 						let arr = [sketch1,sketch2,sketch3]
+
 						let image = new Image()
-						image.src = this.sketchList[i].urlWithWhiteSide
+						image.src = aaa[i].urlWithWhiteSide
 						
 						arr.sort((a,b)=>{
 							var a_num = a["height"];
@@ -142,7 +143,7 @@ export default defineComponent({
 							return a_num - b_num;
 						})
 						// console.log(arr);
-						this.sketch[arr[0].num]?.push(this.sketchList[i])
+						this.sketch[arr[0].num]?.push(aaa[i])
 						// console.log([sketch1.height,sketch2.height,sketch3.height]);
 						await new Promise((resolve:any)=>{
 							image.onload = ()=>{
@@ -150,7 +151,6 @@ export default defineComponent({
 									sketch1 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item0')[0]?.getBoundingClientRect()
 									sketch2 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item1')[0]?.getBoundingClientRect()
 									sketch3 = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item2')[0]?.getBoundingClientRect()
-									
 									sketch1.num = 0
 									sketch2.num = 1
 									sketch3.num = 2
@@ -161,7 +161,6 @@ export default defineComponent({
 						})
 					}
 				}
-				
 			})
 		}
 	}
@@ -281,6 +280,9 @@ export default defineComponent({
 				height: auto;
 				>div{
 					margin-bottom: 2rem;
+					img{
+						width: 100%;
+					}
 				}
 			}
 			>div:nth-child(1){
--- a/src/component/HomePage/MoodboardUpload.vue
+++ b/src/component/HomePage/MoodboardUpload.vue
@@ -460,7 +460,6 @@ export default defineComponent({
 					return
 				}
 			}
-			
 			if(this.moodb_[arr.length-1].length == 2){
 				this.moodb_className = this.moodb_[arr.length-1][0]
 			}else{
@@ -472,8 +471,6 @@ export default defineComponent({
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
 			})
-
-
 			nextTick().then(async ()=>{
 				let layoutCentent = document.getElementById('modal_img')
 				let file = await domTurnImg(layoutCentent)
@@ -498,8 +495,6 @@ export default defineComponent({
 					driverObj__.moveNext()
 				}
 			})
-			
-			
 		},
 		setmoodbClass(val:any){
 			this.moodb_className = val
--- a/src/component/HomePage/NewCollectionReview.vue
+++ b/src/component/HomePage/NewCollectionReview.vue
@@ -119,19 +119,19 @@ export default defineComponent({
 				sketch1.num = 0
 				sketch2.num = 1
 				sketch3.num = 2
+				let aaa = JSON.parse(JSON.stringify(this.sketchList))
 				if(this.sketchList){
-					for (let i = 0; i < this.sketchList.length; i++) {
+					for (let i = 0; i < aaa.length; i++) {
 						let arr = [sketch1,sketch2,sketch3]
 						let image = new Image()
-						image.src = this.sketchList[i].urlWithWhiteSide
-						
+						image.src = aaa[i].urlWithWhiteSide
 						arr.sort((a,b)=>{
 							var a_num = a["height"];
 							var b_num = b["height"];
 							return a_num - b_num;
 						})
 						// console.log(arr);
-						this.sketch[arr[0].num]?.push(this.sketchList[i])
+						this.sketch[arr[0].num]?.push(aaa[i])
 						// console.log([sketch1.height,sketch2.height,sketch3.height]);
 						await new Promise((resolve:any)=>{
 							image.onload = ()=>{
@@ -149,6 +149,7 @@ export default defineComponent({
 							
 						})
 					}
+					this.store.commit('setshowSketchList', this.sketch)
 				}
 			})
 		}
@@ -275,6 +276,9 @@ export default defineComponent({
 				height: auto;
 				>div{
 					margin-bottom: 2rem;
+					img{
+						width: 100%;
+					}
 				}
 			}
 			>div:nth-child(1){
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -28,7 +28,10 @@
 				</div>
 				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
 					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item,index)" ref="content" >
-						<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" v-modelImg> 
+						<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" :class="moodbClassName[index]" v-modelImg> 
+						<div>
+							
+						</div>
 						<ul v-show="item.setPitch" class="layout_btn" >
 							<li class="layout_btn_top" v-compile.stop="'top'"></li>
 							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
@@ -745,8 +748,8 @@ export default defineComponent({
 				li{
 					cursor: pointer;
 					// border-radius: 50%;
-					width: 1rem;
-					height: 1rem;
+					width: 1.5rem;
+					height: 1.5rem;
 					background-color: rgb(20, 188, 255);
 					position: absolute;
 					z-index: 1049;
--- a/src/component/HomePage/layoutMobile.vue
+++ b/src/component/HomePage/layoutMobile.vue
@@ -68,6 +68,12 @@
 						</div>
 					</div>
 				</div>
+				<div class="layout_right">
+					<div class="layout_right_text">
+						{{ $t('DesignPrintOperation.Scale') }}
+					</div>
+					<input type="text">
+				</div>
 				<!-- <div class="layout_right">
 					<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
 						<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
@@ -488,22 +494,23 @@ export default defineComponent({
 		//移动图片
 		translate:{
 			mounted (el,layout:any,binding) {
-				el.addEventListener('mousedown',(e: MouseEvent)=>{
+				el.addEventListener('touchstart',(e:any)=>{
 					e.stopPropagation()
 					let elParent = el.parentNode.parentNode
 					el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
 					el.style.top =  (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
 					let left = el.style.left? el.style.left.replace(/%/g,'') : 0
 					let top = el.style.top? el.style.top.replace(/%/g,'') : 0
-					let mouseX = e.offsetX //鼠标点击位置到domleft距离
-					let mouseY = e.offsetY
-					let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
-					let domY = e.clientY - e.offsetY - el.offsetTop
+					let mouseX = e.changedTouches[0].pageX - el.parentNode.getBoundingClientRect().left //鼠标点击位置到domleft距离
+					let mouseY = e.changedTouches[0].pageY - el.parentNode.getBoundingClientRect().top
+					let domX = e.changedTouches[0].pageX - mouseX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
+					let domY = e.changedTouches[0].pageY  - mouseY - el.offsetTop
 					let mouse = true
-					document.onmousemove = function(e:any){
+					let touchMove = function(e:any){
+
 						if(mouse){
-							let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
-							let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
+							let left = ( e.changedTouches[0].pageX-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
+							let top = (e.changedTouches[0].pageY-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
 							el.style.left = left
 							el.style.top = top;
 							el.previousSibling.style.top = top
@@ -539,33 +546,39 @@ export default defineComponent({
 							}
 						}
 					}
-					document.onmouseup = function(){
-						mouse = false
-					}
+					el.parentNode.addEventListener('touchmove',touchMove ,false);
+					document.addEventListener('touchend', () => {
+						mouse = false;
+						el.parentNode.removeEventListener('touchmove',touchMove );
+						el.parentNode.children.forEach((v:any) =>{
+							v.classList.remove('eventNode')
+
+						})
+					});
 				})
 			},
 		},
 		modelImg:{
-			mounted(el) {
-				let parentNode = el.parentNode
-				if(parentNode.offsetHeight > parentNode.offsetWidth){
-					el.style.height = 100+'%'
-					el.style.width = 'auto'
-				}else{
-					el.style.width = 100+'%'
-					el.style.height = 'auto'
-				}
-			},
-			updated (el) {
-				let parentNode = el.parentNode
-				if(parentNode.offsetHeight > parentNode.offsetWidth){
-					el.style.height = 100+'%'
-					el.style.width = 'auto'
-				}else{
-					el.style.width = 100+'%'
-					el.style.height = 'auto'
-				}
-			}
+			// mounted(el) {
+			// 	let parentNode = el.parentNode
+			// 	if(parentNode.offsetHeight > parentNode.offsetWidth){
+			// 		el.style.height = 100+'%'
+			// 		el.style.width = 'auto'
+			// 	}else{
+			// 		el.style.width = 100+'%'
+			// 		el.style.height = 'auto'
+			// 	}
+			// },
+			// updated (el) {
+			// 	let parentNode = el.parentNode
+			// 	if(parentNode.offsetHeight > parentNode.offsetWidth){
+			// 		el.style.height = 100+'%'
+			// 		el.style.width = 'auto'
+			// 	}else{
+			// 		el.style.width = 100+'%'
+			// 		el.style.height = 'auto'
+			// 	}
+			// }
 		}
 	},
    methods: {
@@ -774,8 +787,8 @@ export default defineComponent({
 				li{
 					cursor: pointer;
 					// border-radius: 50%;
-					width: 1rem;
-					height: 1rem;
+					width: 2rem;
+					height: 2rem;
 					background-color: rgb(20, 188, 255);
 					position: absolute;
 					z-index: 1049;
@@ -826,8 +839,8 @@ export default defineComponent({
 					top: calc(50% - 30px);
 					left: 50%;
 					transform: translate(-50%,-50%) ;
-					width: 1.5rem;
-					height: 1.5rem;
+					width: 2rem;
+					height: 2rem;
 					border-radius: 50%;
 				}
 				.layout_translate{
@@ -839,8 +852,8 @@ export default defineComponent({
 				}
 				.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
 					// opacity: 0;
-					width: .8rem;
-					height: .8rem;
+					width:  2rem;
+					height:  2rem;
 				}
 				.layout_angle_tr{
 					right: 0%;
@@ -952,6 +965,39 @@ export default defineComponent({
 				}
 			}
 		}
+		.layout_right{
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			right: 5rem;
+			overflow-x: hidden;
+			// background-color: #000;
+			width: 8%;
+			height: 50%;
+			&.layout_left::-webkit-scrollbar {
+                display: none;
+            }
+			.layout_left_text{
+				font-size: var(--aida-fsize1-6);
+				margin-bottom: 1rem;
+				color: #000;
+			}
+			.layout_left_items{
+				width: 100%;
+				height: 6rem;
+				display: flex;
+				align-content: space-between;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				flex-direction: column;
+				margin-bottom: 2rem;
+                cursor: pointer;
+				.layout_left_item{
+					box-sizing: border-box;
+					border: 1px solid #000;
+				}
+			}
+		}
        .submit_button {
            margin: 2rem auto 0;
        }