From f7a022c3e86793a70b96c0fae657bf482cf75e09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E8=BE=89?= <814457906@qq.com>
Date: Wed, 12 Apr 2023 11:01:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/v-sign/v-sign.vue                  | 435 +++++++++---------
 pages.json                                    |   3 +-
 pages/confirmCompletion/confirmCompletion.vue |  14 +-
 pages/signature/signature.vue                 |   2 +-
 4 files changed, 235 insertions(+), 219 deletions(-)

diff --git a/components/v-sign/v-sign.vue b/components/v-sign/v-sign.vue
index afb3020..d638552 100644
--- a/components/v-sign/v-sign.vue
+++ b/components/v-sign/v-sign.vue
@@ -1,238 +1,245 @@
 <template>
 	<view class="signature-wrap">
-		<canvas
-			:canvas-id="cid"
-			:id="cid"
-			@touchstart="onTouchStart"
-			@touchmove="onTouchMove"
-			@touchend="onTouchEnd"
-			style="height:600rpx"
-			:style="[{ width: formatSize(width)}, customStyle]"
-		></canvas>
+		<canvas :canvas-id="cid" :id="cid" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"
+			style="height:600rpx" :style="[{ width: formatSize(width)}, customStyle]"></canvas>
 		<slot />
 	</view>
 </template>
 
 <script>
-/**
- * sign canvas 手写签名
- * @description 设置线条宽度、颜色，撤回，清空
- * @tutorial
- * @property {String} cid canvas id 不设置则默认为 v-sign-时间戳
- * @property {String, Number} width canvas 宽度
- * @property {String, Number} height canvas 高度
- * @property {Object} customStyle 自定义样式
- * @property {String} lineColor 画笔颜色
- * @property {Number} lineWidth 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
- * @event {Function} init 当创建完 canvas 实例后触发，向外提供 canvas实例，撤回，清空方法
- * @example <v-sign @init="signInit"></v-sign>
- */
-import { formatSize } from './utils'
-// convas 实例
-let canvasCtx
+	/**
+	 * sign canvas 手写签名
+	 * @description 设置线条宽度、颜色，撤回，清空
+	 * @tutorial
+	 * @property {String} cid canvas id 不设置则默认为 v-sign-时间戳
+	 * @property {String, Number} width canvas 宽度
+	 * @property {String, Number} height canvas 高度
+	 * @property {Object} customStyle 自定义样式
+	 * @property {String} lineColor 画笔颜色
+	 * @property {Number} lineWidth 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
+	 * @event {Function} init 当创建完 canvas 实例后触发，向外提供 canvas实例，撤回，清空方法
+	 * @example <v-sign @init="signInit"></v-sign>
+	 */
+	import {
+		formatSize
+	} from './utils'
+	// convas 实例
+	let canvasCtx
 
-export default {
-	name: 'v-sign',
-	props: {
-		// canvas id
-		cid: {
-			type: String,
-			default: `v-sign-${Date.now()}`
-			// required: true
-		},
-		// canvas 宽度
-		width: {
-			type: [String, Number],
-			default: '100%'
-		},
-		// canvas 高度
-		height: {
-			type: [String, Number],
-			default: 300
-		},
-		// 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
-		lineWidth: {
-			type: Number
-		},
-		// 线颜色
-		lineColor: {
-			type: String,
-			default: '#000'
-		},
-		// canvas自定义样式
-		customStyle: {
-			type: Object,
-			default: () => ({})
-		}
-	},
-	provide() {
-		return {
-			getInterface: this.provideInterface
-		}
-	},
-	data() {
-		return {
-			formatSize,
-			lineData: [],
-			winWidth: 0,
-			winHeight: 0,
-			penLineWidth: null, // v-sign-pen 组件设置的画笔大小
-		}
-	},
-	mounted() {
-		canvasCtx = uni.createCanvasContext(this.cid, this)
-		// 初始化完成，向外暴露接口
-		this.$emit('init', this.provideInterface())
-		// 获取窗口宽高
-		uni.getSystemInfo({
-			success: res => {
-				this.winWidth = res.windowWidth
-				this.winHeight = res.windowHeight
+	export default {
+		name: 'v-sign',
+		props: {
+			// canvas id
+			cid: {
+				type: String,
+				default: `v-sign-${Date.now()}`
+				// required: true
+			},
+			// canvas 宽度
+			width: {
+				type: [String, Number],
+				default: '100%'
+			},
+			// canvas 高度
+			height: {
+				type: [String, Number],
+				default: 300
+			},
+			// 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
+			lineWidth: {
+				type: Number
+			},
+			// 线颜色
+			lineColor: {
+				type: String,
+				default: '#000'
+			},
+			// canvas自定义样式
+			customStyle: {
+				type: Object,
+				default: () => ({})
 			}
-		})
-	},
-	methods: {
-		onTouchStart(e) {
-			const pos = e.touches[0]
-			this.lineData.push({
-				style: {
-					color: this.lineColor,
-					width: this.lineWidth || this.penLineWidth || 4
-				},
-				// 屏幕坐标
-				coordinates: [
-					{
+		},
+		provide() {
+			return {
+				getInterface: this.provideInterface
+			}
+		},
+		data() {
+			return {
+				formatSize,
+				lineData: [],
+				winWidth: 0,
+				winHeight: 0,
+				penLineWidth: null, // v-sign-pen 组件设置的画笔大小
+			}
+		},
+		mounted() {
+			canvasCtx = uni.createCanvasContext(this.cid, this)
+			// 初始化完成，向外暴露接口
+			this.$emit('init', this.provideInterface())
+			// 获取窗口宽高
+			uni.getSystemInfo({
+				success: res => {
+					this.winWidth = res.windowWidth
+					this.winHeight = res.windowHeight
+				}
+			})
+		},
+		methods: {
+			onTouchStart(e) {
+				const pos = e.touches[0]
+				this.lineData.push({
+					style: {
+						color: this.lineColor,
+						width: this.lineWidth || this.penLineWidth || 4
+					},
+					// 屏幕坐标
+					coordinates: [{
 						type: e.type,
 						x: pos.x,
 						y: pos.y
+					}]
+				})
+				this.drawLine()
+			},
+			onTouchMove(e) {
+				const pos = e.touches[0]
+				this.lineData[this.lineData.length - 1].coordinates.push({
+					type: e.type,
+					x: pos.x,
+					y: pos.y
+				})
+				this.drawLine()
+			},
+			onTouchEnd(e) {
+				// console.log(e.type, e)
+			},
+			// 清空画布
+			clear() {
+				this.lineData = []
+				canvasCtx.clearRect(0, 0, this.winWidth, this.winHeight)
+				canvasCtx.draw()
+			},
+			// 撤销
+			revoke() {
+				this.lineData.pop()
+				this.lineData.forEach((item, index) => {
+					canvasCtx.beginPath()
+					canvasCtx.setLineCap('round')
+					canvasCtx.setStrokeStyle(item.style.color)
+					canvasCtx.setLineWidth(item.style.width)
+					item.coordinates.forEach(pos => {
+						if (pos.type == 'touchstart') {
+							canvasCtx.moveTo(pos.x, pos.y)
+						} else {
+							canvasCtx.lineTo(pos.x, pos.y)
+						}
+					})
+					canvasCtx.stroke()
+				})
+				canvasCtx.draw()
+			},
+			// 绘制线条
+			drawLine() {
+				const lineDataLen = this.lineData.length
+				if (!lineDataLen) return
+				const currentLineData = this.lineData[lineDataLen - 1]
+				const coordinates = currentLineData.coordinates
+				const coordinatesLen = coordinates.length
+				if (!coordinatesLen) return
+				let startPos
+				let endPos
+				if (coordinatesLen < 2) {
+					// only start, no move event
+					startPos = coordinates[coordinatesLen - 1]
+					endPos = {
+						x: startPos.x + 1,
+						y: startPos.y
 					}
-				]
-			})
-			this.drawLine()
-		},
-		onTouchMove(e) {
-			const pos = e.touches[0]
-			this.lineData[this.lineData.length - 1].coordinates.push({
-				type: e.type,
-				x: pos.x,
-				y: pos.y
-			})
-			this.drawLine()
-		},
-		onTouchEnd(e) {
-			// console.log(e.type, e)
-		},
-		// 清空画布
-		clear() {
-			this.lineData = []
-			canvasCtx.clearRect(0, 0, this.winWidth, this.winHeight)
-			canvasCtx.draw()
-		},
-		// 撤销
-		revoke() {
-			this.lineData.pop()
-			this.lineData.forEach((item, index) => {
+				} else {
+					startPos = coordinates[coordinatesLen - 2]
+					endPos = coordinates[coordinatesLen - 1]
+				}
+
+				const style = currentLineData.style
 				canvasCtx.beginPath()
 				canvasCtx.setLineCap('round')
-				canvasCtx.setStrokeStyle(item.style.color)
-				canvasCtx.setLineWidth(item.style.width)
-				item.coordinates.forEach(pos => {
-					if (pos.type == 'touchstart') {
-						canvasCtx.moveTo(pos.x, pos.y)
-					} else {
-						canvasCtx.lineTo(pos.x, pos.y)
-					}
-				})
+				canvasCtx.setStrokeStyle(style.color)
+				canvasCtx.setLineWidth(style.width)
+				canvasCtx.moveTo(startPos.x, startPos.y)
+				canvasCtx.lineTo(endPos.x, endPos.y)
+				// const P1 = this.caculateBezier(startPos, endPos, centerPos)
+				// console.log(P1.x, P1.y)
+				// canvasCtx.moveTo(startPos.x, startPos.y)
+				// canvasCtx.quadraticCurveTo(P1.x, P1.y, endPos.x, endPos.y)
 				canvasCtx.stroke()
-			})
-			canvasCtx.draw()
-		},
-		// 绘制线条
-		drawLine() {
-			const lineDataLen = this.lineData.length
-			if (!lineDataLen) return
-			const currentLineData = this.lineData[lineDataLen - 1]
-			const coordinates = currentLineData.coordinates
-			const coordinatesLen = coordinates.length
-			if (!coordinatesLen) return
-			let startPos
-			let endPos
-			if (coordinatesLen < 2) {
-				// only start, no move event
-				startPos = coordinates[coordinatesLen - 1]
-				endPos = { x: startPos.x + 1, y: startPos.y }
-			} else {
-				startPos = coordinates[coordinatesLen - 2]
-				endPos = coordinates[coordinatesLen - 1]
-			}
-			
-			const style = currentLineData.style
-			canvasCtx.beginPath()
-			canvasCtx.setLineCap('round')
-			canvasCtx.setStrokeStyle(style.color)
-			canvasCtx.setLineWidth(style.width)
-			canvasCtx.moveTo(startPos.x, startPos.y)
-			canvasCtx.lineTo(endPos.x, endPos.y)
-			// const P1 = this.caculateBezier(startPos, endPos, centerPos)
-			// console.log(P1.x, P1.y)
-			// canvasCtx.moveTo(startPos.x, startPos.y)
-			// canvasCtx.quadraticCurveTo(P1.x, P1.y, endPos.x, endPos.y)
-			canvasCtx.stroke()
-			canvasCtx.draw(true)
-		},
-		canvasToTempFilePath(conf = {}) {
-			return new Promise((resolve, reject) => {
-				uni.canvasToTempFilePath(
-					{
-						canvasId: this.cid,
-						...conf,
-						success: res => {
-							resolve(res.tempFilePath)
+				canvasCtx.draw(true)
+			},
+			canvasToTempFilePath(conf = {}) {
+				return new Promise((resolve, reject) => {
+					uni.canvasToTempFilePath({
+							canvasId: this.cid,
+							...conf,
+							success: res => {
+								resolve(res.tempFilePath)
+							},
+							fail: err => {
+								console.log('fail', err)
+								reject(err)
+							}
 						},
-						fail: err => {
-							console.log('fail', err)
-							reject(err)
-						}
-					},
-					this
-				)
-			})
-		},
-		setLineWidth(numberVal) {
-			this.penLineWidth = numberVal
-		},
-		provideInterface() {
-			return {
-				cid: this.cid,
-				ctx: canvasCtx,
-				clear: this.clear,
-				revoke: this.revoke,
-				canvasToTempFilePath: this.canvasToTempFilePath,
-				setLineWidth: this.setLineWidth
+						this
+					)
+				})
+			},
+			setLineWidth(numberVal) {
+				this.penLineWidth = numberVal
+			},
+			provideInterface() {
+				return {
+					cid: this.cid,
+					ctx: canvasCtx,
+					clear: this.clear,
+					revoke: this.revoke,
+					canvasToTempFilePath: this.canvasToTempFilePath,
+					setLineWidth: this.setLineWidth
+				}
+			},
+			/**
+			 * 计算二次贝塞尔曲线 控制点 P1
+			 * 起点 P0(x0,y0)、控制点P1(x1, y1)、P2(x2, y2)、曲线上任意点B(x, y)
+			 * 二次贝塞尔公式：B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2
+			 * 代入坐标得：
+			 * x = (1-t)²*x0 + 2t(1-t)*x1 + t²*x2
+			 * y = (1-t)²*y0 + 2t(1-t)*y1 + t²*y2
+			 */
+			caculateBezier(P0, P2, B, t = 0.5) {
+				const {
+					x: x0,
+					y: y0
+				} = P0
+				const {
+					x: x2,
+					y: y2
+				} = P2
+				const {
+					x,
+					y
+				} = B
+				let x1 = (x - (1 - t) * (1 - t) * x0 - t * t * x2) / (2 * t * (1 - t))
+				let y1 = (y - (1 - t) * (1 - t) * y0 - t * t * y2) / (2 * t * (1 - t))
+				return {
+					x: x1,
+					y: y1
+				}
 			}
-		},
-		/**
-		 * 计算二次贝塞尔曲线 控制点 P1
-		 * 起点 P0(x0,y0)、控制点P1(x1, y1)、P2(x2, y2)、曲线上任意点B(x, y)
-		 * 二次贝塞尔公式：B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2
-		 * 代入坐标得：
-		 * x = (1-t)²*x0 + 2t(1-t)*x1 + t²*x2
-		 * y = (1-t)²*y0 + 2t(1-t)*y1 + t²*y2
-		 */
-		caculateBezier(P0, P2, B, t = 0.5) {
-			const { x: x0, y: y0 } = P0
-			const { x: x2, y: y2 } = P2
-			const { x, y } = B
-			let x1 = (x - (1 - t) * (1 - t) * x0 - t * t * x2) / (2 * t * (1 - t))
-			let y1 = (y - (1 - t) * (1 - t) * y0 - t * t * y2) / (2 * t * (1 - t))
-			return { x: x1, y: y1 }
 		}
 	}
-}
 </script>
 
 <style lang="scss" scoped>
-.signature-wrap {
-	position: relative;
-}
+	.signature-wrap {
+		position: relative;
+	}
 </style>
diff --git a/pages.json b/pages.json
index 341e7e1..bc93cfe 100644
--- a/pages.json
+++ b/pages.json
@@ -51,7 +51,8 @@
 			"path": "pages/confirmCompletion/confirmCompletion",
 			"style": {
 				"navigationBarTitleText": "当前工单",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"disableScroll": true
 			}
 		}, {
 			"path": "pages/taskReturn/taskReturn",
diff --git a/pages/confirmCompletion/confirmCompletion.vue b/pages/confirmCompletion/confirmCompletion.vue
index 02a1741..1af1771 100644
--- a/pages/confirmCompletion/confirmCompletion.vue
+++ b/pages/confirmCompletion/confirmCompletion.vue
@@ -72,7 +72,7 @@
 				<view class="attendantImg" style="border-bottom: 1rpx solid #BAB7B8;">
 					用户签名
 				</view>
-				<!-- 	<view class="receive">
+				<!-- <view class="receive">
 					我确认已接受服务
 				</view> -->
 				<view class="uppicture" @tap='show=true'>
@@ -101,8 +101,14 @@
 				</view>
 			</view>
 		</u-popup>
-		<u-mask :show="show" @click="show = false">
+		<!-- 		<u-popup v-model="show" mode='bottom' :closeable='true' :safe-area-inset-bottom='true' @touchmove.stop.prevent
+			height='900'>
 			<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop
+				style='background-color: #F4F5F7;width: 100%;height: 800rpx;'>
+			</signature>
+		</u-popup> -->
+		<u-mask :show="show" @click="show = false" @touchmove.stop.prevent>
+			<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop v-if='show'
 				style='background-color: #F4F5F7;position:absolute;bottom:0%;width: 100%;height: 800rpx;'></signature>
 		</u-mask>
 		<u-toast ref="uToast" />
@@ -284,7 +290,9 @@
 <style lang="scss">
 	.app {
 		font-size: 36rpx;
-		padding: 0 0 100rpx;
+		padding: 0;
+		overflow: scroll;
+		height: 100vh;
 
 		.finishmask {
 			height: 300rpx;
diff --git a/pages/signature/signature.vue b/pages/signature/signature.vue
index b9fe469..9cb984f 100644
--- a/pages/signature/signature.vue
+++ b/pages/signature/signature.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="" style="background-color: #F4F5F7;">
+	<view class="" style="background-color: #F4F5F7;" @touchmove.stop.prevent>
 		<Signature @init="onSignInit" style='background-color: #fff;'></Signature>
 		<view class="btns">
 			<button @click="clear">清空</button>