From e2a98459ad1c25eaca9863ca29df1164faeca20e Mon Sep 17 00:00:00 2001
From: WangXiaoDong <1627315083@qq.com>
Date: Sat, 18 May 2024 15:39:32 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=AF=AD=E8=A8=80=E5=92=8Cip?=
 =?UTF-8?q?ad=E5=AF=BC=E5=87=BA=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/HomePage/ExportModel.vue | 92 +++++++++++++++++++++-----
 src/lang/cn.ts                         |  2 +-
 src/lang/en.ts                         |  2 +-
 src/tool/util.js                       | 11 ++-
 4 files changed, 84 insertions(+), 23 deletions(-)

diff --git a/src/component/HomePage/ExportModel.vue b/src/component/HomePage/ExportModel.vue
index bc76e734..6f3392b4 100644
--- a/src/component/HomePage/ExportModel.vue
+++ b/src/component/HomePage/ExportModel.vue
@@ -194,11 +194,13 @@
 						<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</div>
 					</div>
 				</div>
-				
             </div>
 			<!-- <div @click="toSvg">12312312312</div> -->
-            <div class="exportCanvasBox_center">
-            </div>
+            <div class="exportCanvasBox_center" :style="[isMoible?'overflow: hidden;':'']">
+			</div>
+			<div v-if="isMoible" class="exportCanvasBox_scroll">
+				<div></div>
+			</div>
             <!-- <div class="exportCanvasBox_right">
                 <div class="exportCanvasBox_title">
 					High-definition Download
@@ -308,7 +310,7 @@ export default defineComponent({
         // let canvasDom = ref()
         let canvasWH = ref({
             width: 400,
-            height: 1200,
+            height: 100,
         });
 		
 		// canvasWH.value.width = [window.innerWidth/2.4]
@@ -341,6 +343,7 @@ export default defineComponent({
 		let normalCanvasState = ref([])//存放canvas操作
 		let isLoadCanvas = false//撤回或者反撤回false为撤回
         let init = () => {
+			canvasWH.value.height = 100
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
             showUpgradePlan.value = true;
@@ -1666,23 +1669,64 @@ export default defineComponent({
         };
     },
     data(prop) {
-        return {};
+        return {
+			isMoible:isMoible()
+		};
     },
-
-    mounted() {},
     watch: {
-        // driver__:{
-        // 	handler(newVal,oldVal){
-        // 		if(this.type_.type2 == 'Printboard'){
-        // 			if(newVal.index >= 14 && newVal.index < 15){
-        // 				this.setKeyword(newVal.index-14)
-        // 			}else{
-        // 			}
-        // 		}else if(this.type_.type2 == 'Sketchboard'){
-        // 		}
-        // 	}
-        // },
+        'canvasWH.height':{
+        	handler(newVal,oldVal){
+				if(!this.isMoible){
+					return
+				}
+				let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
+				let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
+				canvasBox.scroll({
+					top: 0, // 纵向滚动距离
+					left: 0, // 横向滚动距离
+				});
+				scrollBox.style.marginTop = 0+'px'
+				let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
+				scrollBox.style.height = height +'px'
+				let scale = (newVal - canvasBox.offsetHeight) / (canvasBox.offsetHeight - height)
+				
+
+				let mousedown = (event)=>{//按下
+					// console.log(event.target.getBoundingClientRect());
+					let position = {
+						y:event.touches[0].screenY,
+						top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
+					}
+					// let top = 
+					let scrollMousemove = (e)=>{
+						let height = scrollBox.style.height.split('px')[0]*1
+						let offsetTop = position.top+e.touches[0].screenY - position.y
+						offsetTop = offsetTop <= 0? 0 : offsetTop
+						offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
+						console.log();
+						scrollBox.style.marginTop = offsetTop+'px'
+						canvasBox.scroll({
+							top: offsetTop*scale, // 纵向滚动距离
+							left: 0, // 横向滚动距离
+						});
+					}
+					let mouseup = ()=>{//抬起
+						window.removeEventListener('touchmove',scrollMousemove)
+						scrollBox.removeEventListener('touchend',mouseup)
+					}
+					window.addEventListener('touchmove',scrollMousemove)
+					scrollBox.addEventListener('touchend',mouseup)
+				}
+				scrollBox.removeEventListener('touchstart',mousedown)
+				scrollBox.addEventListener('touchstart',mousedown)
+				
+
+				
+        	}
+        },
     },
+    mounted() {},
+
     methods: {
 		
 	},
@@ -1909,6 +1953,18 @@ export default defineComponent({
             height: 100%;
             overflow-x: hidden;
         }
+		.exportCanvasBox_scroll{
+			height: 100%;
+			width: 2rem;
+			background: #d6cfe3;
+			border-radius: 1rem;
+			div{
+				background: #543087;
+				border-radius: 1rem;
+				width: 100%;
+				height: 30rem;
+			}
+		}
         .export_new_collection_review {
             position: initial;
             margin: 10rem auto;
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index f328444f..d5d43ee4 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -61,7 +61,7 @@ export default {
 		jsContent2:'我们只支持对印花进行超分',
 		jsContent3:'您的积分小于一次超分',
 		jsContent4:'您的积分余额不足',
-		jsContent5:'您选择的{str}张图像在超分辨率增强后的分辨率超过2048。请选择较低的放大倍数。',
+		jsContent5:'您选择的第{str}张图像在超分辨率增强后的分辨率超过2048。请选择较低的放大倍数。',
 		jsContent6:'请选择需要超分的图片',
 	},
 	upgradePlan:{
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 521d4243..58163e6d 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -62,7 +62,7 @@ export default {
 		jsContent2:'We only provide super-resolution capabilities for printboard images.',
 		jsContent3:'Your points are less than one SR',
 		jsContent4:'Your points balance is insufficient',
-		jsContent5:'The resolution of the {str} images you selected exceeds 2048 after super-resolution enhancement, Please choose a lower magnification level.',
+		jsContent5:'After super-resolution enhancement, the {str} th image you selected has a resolution exceeding 2048, Please choose a lower magnification level.',
 		jsContent6:'Please select the picture that requires upscale',
 	},
 	upgradePlan:{
diff --git a/src/tool/util.js b/src/tool/util.js
index d4c3ff6d..3eacdc46 100644
--- a/src/tool/util.js
+++ b/src/tool/util.js
@@ -150,11 +150,16 @@ const isMoible = () => {//判断是否是移动端
 	let is_mobile = navigator.userAgent.toLowerCase().match(/(ipad|ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
 	// alert(navigator.userAgent.toLowerCase())
 	var isiPad = (navigator.maxTouchPoints && navigator.maxTouchPoints > 0);
+	// if (is_mobile) {
+	// 	return true//判断是否在正则内
+	// } else if(window.matchMedia("(pointer:fine)").matches){
+	// 	return false//判断是否支持鼠标
+	// }else{
+	// 	isiPad//判断触摸点
+	// }
 	if (is_mobile) {
 		return true//判断是否在正则内
-	} else if(window.matchMedia("(pointer:fine)").matches){
-		return false//判断是否支持鼠标
-	}else{
+	} else{
 		isiPad//判断触摸点
 	}
 }