From 461bb7fd56bea10cbb5c0c9062be7c2b8c659217 Mon Sep 17 00:00:00 2001
From: bb_pan <max_163email@163.com>
Date: Fri, 29 Aug 2025 11:21:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AD=BE=E5=90=8D=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../miliu-autograph/miliu-autograph.vue       | 405 +++++++++---------
 src/pages/my/signature.vue                    |   8 +-
 2 files changed, 207 insertions(+), 206 deletions(-)

diff --git a/src/components/miliu-autograph/miliu-autograph.vue b/src/components/miliu-autograph/miliu-autograph.vue
index 911cd81..fafb713 100644
--- a/src/components/miliu-autograph/miliu-autograph.vue
+++ b/src/components/miliu-autograph/miliu-autograph.vue
@@ -1,228 +1,229 @@
 <template>
-	<view class="whole canvas-autograph flexc" @touchmove.prevent.stop @wheel.prevent.stop v-show="modelValue">
-		<canvas class="scroll-view" id="mycanvas" canvas-id="mycanvas" 
-			@touchstart="touchstart" 
-			@touchmove="touchmove" 
-			@touchend="touchend"
-			disable-scroll="true"/>
-		<view class="fun-box">
-			<div class="hint">
-				<text class="rotate">请在下方空白区域横向书写签名</text>
-			</div>
-			<view class="fun-box-btn clear flex" @click="clear">
-				<text>清空</text>
-			</view>
-			<view class="fun-box-btn confirm flex" @click="confirm">
-				<text>确认</text>
-			</view>
-			<view class="fun-box-btn cancel flex" @click="cancel">
-				<text>取消</text>
-			</view>
-		</view>
-	</view>
+  <view
+    class="whole canvas-autograph flexc"
+    @touchmove.prevent.stop
+    @wheel.prevent.stop
+    v-show="modelValue"
+  >
+    <canvas
+      class="scroll-view"
+      id="mycanvas"
+      canvas-id="mycanvas"
+      @touchstart="touchstart"
+      @touchmove="touchmove"
+      @touchend="touchend"
+      disable-scroll="true"
+    />
+    <view class="fun-box">
+      <div class="hint">
+        <text class="rotate">请在下方空白区域横向书写签名</text>
+      </div>
+      <view class="fun-box-btn clear flex" @click="clear">
+        <text>清空</text>
+      </view>
+      <view class="fun-box-btn confirm flex" @click="confirm">
+        <text>确认</text>
+      </view>
+      <view class="fun-box-btn cancel flex" @click="cancel">
+        <text>取消</text>
+      </view>
+    </view>
+
+    <!-- 横向提示 -->
+    <view v-if="showToast" class="rotate-toast">
+      <text class="rotate-text">{{ toastMsg }}</text>
+    </view>
+  </view>
 </template>
 
 <script setup>
-	/*
-		使用如下
-		<canvas-autograph v-model="isCanvas" @complete="complete"/>
-		
-		// 打开、关闭
-		let isCanvas = ref(false)
-		// 确认事件
-		const complete = e=>{
-			console.log(e)
-		}
-	
-	*/
-	import { ref, reactive, watch, getCurrentInstance } from 'vue'
-	
-	const emits = defineEmits(['update:modelValue','complete'])
-	
-	const props = defineProps({
-		modelValue:Boolean,
-	})
-	const _this = getCurrentInstance()
-	watch(()=>props.modelValue,e=>{
-		// 这里可进行 tabbar 的 显示、隐藏  不要也可以
-		// 自己写
-	},{
-		immediate:true, // 是否默认执行一次  默认为false
-	})
-	
-	let points = reactive([]) //路径点集合 
-	
-	let canvaCtx = reactive(uni.createCanvasContext('mycanvas', _this))   //创建绘图对象
-	//设置画笔样式
-	canvaCtx.lineWidth = 6;
-	canvaCtx.lineCap = 'round'
-	canvaCtx.lineJoin = 'round'
-	
-	
-	//触摸开始，获取到起点
-	const touchstart = e=>{
-		let startX = e.changedTouches[0].x
-		let startY = e.changedTouches[0].y
-		let startPoint = {X:startX,Y:startY}
-		points.push(startPoint);
-		//每次触摸开始，开启新的路径
-		canvaCtx.beginPath();
-	}
-	//触摸移动，获取到路径点
-	const touchmove = e=>{
-		let moveX = e.changedTouches[0].x
-		let moveY = e.changedTouches[0].y
-		let movePoint = {X:moveX,Y:moveY}
-		points.push(movePoint)       //存点
-		let len = points.length
-		if(len>=2){
-			draw()
-		}
-	}
-	//绘制路径
-	// const draw = ()=> {
-	// 	let point1 = points[0]
-	// 	let point2 = points[1]
-	// 	points.shift()
-	// 	canvaCtx.moveTo(point1.X, point1.Y)
-	// 	canvaCtx.lineTo(point2.X, point2.Y)
-	// 	canvaCtx.stroke()
-	// 	canvaCtx.draw(true)
-	// }
-	const draw = () => {
-		if (points.length < 2) return;
+import { ref, reactive, watch, getCurrentInstance } from 'vue'
 
-		canvaCtx.beginPath();
-		canvaCtx.moveTo(points[0].X, points[0].Y);
-		for (let i = 1; i < points.length; i++) {
-			canvaCtx.lineTo(points[i].X, points[i].Y);
-		}
-		canvaCtx.stroke();
-		canvaCtx.draw(true);
+const emits = defineEmits(['update:modelValue', 'complete'])
+const props = defineProps({
+  modelValue: Boolean,
+})
+const _this = getCurrentInstance()
 
-		// 绘制后清空已绘制点
-		points = [points[points.length - 1]]; // 保留最后一个点作为下一次起点
-	}
-	// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
-	const touchend = e=>{                   
-		points = [];
-	}
-	// 清空画布
-	// const clear = ()=>{
-	// 	return uni.getSystemInfo()
-	// 	.then(res=>{
-	// 		canvaCtx.clearRect(0, 0, res.windowWidth, res.windowHeight);
-	// 		canvaCtx.draw(true);
-	// 		return res
-	// 	})
-	// 	.catch(err=>{
-	// 		// console.log(err);
-	// 	})
-	// }
+let points = reactive([]) // 路径点集合
+let canvaCtx = reactive(uni.createCanvasContext('mycanvas', _this)) // 创建绘图对象
+canvaCtx.lineWidth = 6
+canvaCtx.lineCap = 'round'
+canvaCtx.lineJoin = 'round'
+
+// 是否有签名
+let hasDrawn = ref(false)
+
+// 横向提示
+const showToast = ref(false)
+const toastMsg = ref('')
+const showRotateToast = (msg) => {
+  toastMsg.value = msg
+  showToast.value = true
+  setTimeout(() => (showToast.value = false), 2000)
+}
+
+// 触摸开始
+const touchstart = (e) => {
+  let startX = e.changedTouches[0].x
+  let startY = e.changedTouches[0].y
+  let startPoint = { X: startX, Y: startY }
+  points.push(startPoint)
+  canvaCtx.beginPath()
+  hasDrawn.value = true // 标记已签名
+}
+// 触摸移动
+const touchmove = (e) => {
+  let moveX = e.changedTouches[0].x
+  let moveY = e.changedTouches[0].y
+  let movePoint = { X: moveX, Y: moveY }
+  points.push(movePoint)
+  if (points.length >= 2) {
+    draw()
+  }
+}
+// 绘制
+const draw = () => {
+  if (points.length < 2) return
+  canvaCtx.beginPath()
+  canvaCtx.moveTo(points[0].X, points[0].Y)
+  for (let i = 1; i < points.length; i++) {
+    canvaCtx.lineTo(points[i].X, points[i].Y)
+  }
+  canvaCtx.stroke()
+  canvaCtx.draw(true)
+  points = [points[points.length - 1]]
+}
+// 触摸结束
+const touchend = () => {
+  points = []
+}
+// 清空画布
 const clear = () => {
   return new Promise((resolve, reject) => {
-    uni.createSelectorQuery()
+    uni
+      .createSelectorQuery()
       .in(_this)
-      .select('#mycanvas') // 确保 id 和 canvas 的一致性
-      .fields({ size: true, rect: true }, data => {
+      .select('#mycanvas')
+      .fields({ size: true, rect: true }, (data) => {
         if (!data) {
           reject('Canvas not found')
           return
         }
-
         const { width, height } = data
-
-        // 真正按 canvas 实际尺寸清除
         canvaCtx.clearRect(0, 0, width, height)
         canvaCtx.draw(true)
+        hasDrawn.value = false
         resolve()
       })
       .exec()
   })
 }
-
-	// 确认
-	const confirm = ()=>{
-		uni.canvasToTempFilePath({ canvasId: 'mycanvas', }, _this, _this.parent)
-		.then(res=>{
-			console.log(res.tempFilePath);
-			emits('complete',res.tempFilePath)
-			cancel()
-		})
-	}
-	// 取消
-	const cancel = ()=>{
-		clear().then(res=>emits('update:modelValue',false))
-	}
-
+// 确认
+const confirm = () => {
+  if (!hasDrawn.value) {
+    showRotateToast('请先签名再确认')
+    return
+  }
+  uni.canvasToTempFilePath({ canvasId: 'mycanvas' }, _this, _this.parent).then((res) => {
+    emits('complete', res.tempFilePath)
+    cancel()
+  })
+}
+// 取消
+const cancel = () => {
+  clear().then(() => emits('update:modelValue', false))
+}
 </script>
 
 <style scoped lang="scss">
-	.canvas-autograph {
-		position: fixed;
-		z-index: 998;
-		width: 100vw;
-		height: 100vh;
-		top: 0;
-		left: 0;
-		background-color: #fff;
-		.scroll-view {
-			width: calc(100% - 120rpx);
-			height: 99.6%;
-			background-color: #FFFFFF;
-			border: 2px solid #333;
-		}
-		.fun-box {
-			position: absolute;
-			height: 90rpx;
-			right: 0;
-			bottom: 0px;
-			height: auto;
-			display: flex;
-			flex-direction: column;
-			.fun-box-btn {
-				width: 100rpx;
-				height: 160rpx;
-				color: #FFFFFF;
-				border-radius: 20rpx;
-				border: 1rpx solid #C0C0C0;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				text {
-					transform: rotate(90deg);
-				}
-			}
-			.clear {
-				color: #909399;
-				background-color: #F4F4F5;
-			}
-			.confirm {
-				background-color: #409EFF;
-				margin: 3px 0;
-			}
-			.cancel {
-				background-color: #F67D7D;
-			}
-			.hint {
-				width: 100rpx;          
-				min-height: 240rpx;     
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				color: #F67D7D;
-				background: transparent;
-				margin-bottom: 150rpx;
+.canvas-autograph {
+  position: fixed;
+  z-index: 998;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  .scroll-view {
+    width: calc(100% - 120rpx);
+    height: 99.6%;
+    background-color: #ffffff;
+    border: 2px solid #333;
+  }
+  .fun-box {
+    position: absolute;
+    right: 0;
+    bottom: 0px;
+    display: flex;
+    flex-direction: column;
+    .fun-box-btn {
+      width: 100rpx;
+      height: 160rpx;
+      color: #ffffff;
+      border-radius: 20rpx;
+      border: 1rpx solid #c0c0c0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text {
+        transform: rotate(90deg);
+      }
+    }
+    .clear {
+      color: #909399;
+      background-color: #f4f4f5;
+    }
+    .confirm {
+      background-color: #409eff;
+      margin: 3px 0;
+    }
+    .cancel {
+      background-color: #f67d7d;
+    }
+    .hint {
+      width: 100rpx;
+      min-height: 240rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #f67d7d;
+      background: transparent;
+      margin-bottom: 150rpx;
+      .rotate {
+        display: inline-block;
+        transform: rotate(90deg);
+        white-space: nowrap;
+        font-size: 33rpx;
+      }
+    }
+  }
+}
 
-				.rotate {
-					display: inline-block;
-					transform: rotate(90deg);
-					transform-origin: center;
-					white-space: nowrap;
-					font-size: 33rpx;
-				}
-			}
-		}
-	
-	}
+/* 横向提示样式 */
+.rotate-toast {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.75);
+  padding: 20rpx;
+  border-radius: 24rpx;
+  z-index: 999;
+
+  /* 重点调整 */
+  width: 100rpx; /* 宽度只需少量，留给旋转文字 */
+  min-height: 400rpx; /* 高度拉长，保证横向文字能完整显示 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rotate-text {
+  color: #fff;
+  font-size: 36rpx;
+  transform: rotate(90deg);
+  display: inline-block;
+  white-space: nowrap; /* 保证一行显示 */
+}
 </style>
diff --git a/src/pages/my/signature.vue b/src/pages/my/signature.vue
index 19431e3..76d8ddc 100644
--- a/src/pages/my/signature.vue
+++ b/src/pages/my/signature.vue
@@ -8,7 +8,7 @@
             个人电子签名维护,支持手机拍照、上传图片以及手写签名，推荐使用手写签名，请横向书写签名！
         </div>
         <div class="btns">
-            <button class="btn" type="primary" @click="handlePhoto">拍照/上传</button>
+            <!-- <button class="btn" type="primary" @click="handlePhoto">拍照/上传</button> -->
             <button class="btn" type="primary" @click="open">手写签名</button>
         </div>
         <miliu-autograph v-model="isCanvas" @complete="complete"></miliu-autograph>
@@ -327,10 +327,10 @@ const uploadSignUrl = async (url) => {
     margin: 10rpx;
     border-radius: 20rpx;
     .btn {
-        width: 40%;
-        &:first-child {
+        width: 100%;
+        /* &:first-child {
             margin-right: 20px;
-        }
+        } */
     }
 }
 .signature-page {