From f3483776c0ad2518dd8e3e5109cb9b9eb25ef59e 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 17:18:33 +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

---
 api/MyBenefits/MyBenefits.js                  |   1 -
 pages/confirmCompletion/confirmCompletion.vue |   5 +-
 pages/signature/signature.vue                 |   2 +-
 pages/v-sign/components/v-sign/v-sign.vue     | 572 +++++++++---------
 4 files changed, 292 insertions(+), 288 deletions(-)

diff --git a/api/MyBenefits/MyBenefits.js b/api/MyBenefits/MyBenefits.js
index 257131f..179e0a2 100644
--- a/api/MyBenefits/MyBenefits.js
+++ b/api/MyBenefits/MyBenefits.js
@@ -7,7 +7,6 @@ export function personRevenue(nurseStationPersonId, monthTime, monthStartTime, m
 		method: 'GET'
 	})
 }
-
 // 个人中心 我的收益  订单列表分页
 export function personRevenueDetails(pageNum, pageSize, nurseStationPersonId, monthTime, monthStartTime, monthEndTime) {
 	return request({
diff --git a/pages/confirmCompletion/confirmCompletion.vue b/pages/confirmCompletion/confirmCompletion.vue
index 08b373c..bc07bce 100644
--- a/pages/confirmCompletion/confirmCompletion.vue
+++ b/pages/confirmCompletion/confirmCompletion.vue
@@ -102,9 +102,9 @@
 			</view>
 		</u-popup>
 		<u-mask :show="show" @click="show = false">
-			<view style="position:absolute;bottom:0;height:800rpx;width:100%;background-color: #fff;" v-if='show'>
+			<view style="position:absolute;bottom:0;height:800rpx;width:100%;background-color: #F4F5F7;" v-if='show'>
 				<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop
-					style='background-color: #F4F5F7;width: 100%;height: 800rpx;'></signature>
+					style='width: 100%;height: 800rpx;'></signature>
 			</view>
 		</u-mask>
 		<u-toast ref="uToast" />
@@ -131,7 +131,6 @@
 				serviceEndPictureUrl: null,
 				userSignaturePictureUrl: null,
 				list: {
-					res: {},
 					id: null,
 					serviceLocationName: null,
 					onDutyPictureUrl: null,
diff --git a/pages/signature/signature.vue b/pages/signature/signature.vue
index cde9596..04d2799 100644
--- a/pages/signature/signature.vue
+++ b/pages/signature/signature.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="signature" style="background-color: #F4F5F7;height: 400rpx;">
+	<view class="signature" style="background-color: #F4F5F7;height: 800rpx;width: 100%;">
 		<Signature @init="onSignInit" style='background-color: #fff;height: 700rpx;width: 100%;'></Signature>
 		<view class="btns">
 			<button @click="clear">清空</button>
diff --git a/pages/v-sign/components/v-sign/v-sign.vue b/pages/v-sign/components/v-sign/v-sign.vue
index 3377e64..312c43b 100644
--- a/pages/v-sign/components/v-sign/v-sign.vue
+++ b/pages/v-sign/components/v-sign/v-sign.vue
@@ -1,314 +1,320 @@
 <template>
 	<view class="signature-wrap">
-		<canvas
-			:canvas-id="cid"
-			:id="cid"
-			@touchstart="onTouchStart"
-			@touchmove="onTouchMove"
-			@touchend="onTouchEnd"
-			disable-scroll
-			style="width: 100%;height: 600rpx;"
-		></canvas>
+		<canvas :canvas-id="cid" :id="cid" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"
+			disable-scroll style="width: 100%;height: 600rpx;"></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 {bgColor} bgColor 画布背景颜色
- * @property {Object} customStyle canvas 自定义样式
- * @property {String} lineWidth 画笔大小，权重小于 v-sign-pen 组件设置的画笔大小
- * @property {Number} lineColor 画笔颜色，权重小于 v-sign-pen 组件设置的画笔大小
- * @event {Function} init 当创建完 canvas 实例后触发，向外提供 canvas实例，撤回，清空方法
- * @example <v-sign @init="signInit"></v-sign>
- */
-import { formatSize } from '../../utils'
+	/**
+	 * sign canvas 手写签名
+	 * @description 设置线条宽度、颜色，撤回，清空
+	 * @tutorial
+	 * @property {String} cid canvas id 不设置则默认为 v-sign-时间戳
+	 * @property {String, Number} width canvas 宽度
+	 * @property {String, Number} height canvas 高度
+	 * @property {bgColor} bgColor 画布背景颜色
+	 * @property {Object} customStyle canvas 自定义样式
+	 * @property {String} lineWidth 画笔大小，权重小于 v-sign-pen 组件设置的画笔大小
+	 * @property {Number} lineColor 画笔颜色，权重小于 v-sign-pen 组件设置的画笔大小
+	 * @event {Function} init 当创建完 canvas 实例后触发，向外提供 canvas实例，撤回，清空方法
+	 * @example <v-sign @init="signInit"></v-sign>
+	 */
+	import {
+		formatSize
+	} from '../../utils'
 
-export default {
-	name: 'v-sign',
-	props: {
-		// canvas id
-		cid: {
-			type: String,
-			default: `v-sign-${Date.now()}`
-			// required: true
+	export default {
+		name: 'v-sign',
+		props: {
+			// canvas id
+			cid: {
+				type: String,
+				default: `v-sign-${Date.now()}`
+				// required: true
+			},
+			// canvas 宽度
+			width: {
+				type: [String, Number]
+			},
+			// canvas 高度
+			height: {
+				type: [String, Number]
+			},
+			// 画笔大小，权重小于 v-sign-pen 组件设置的画笔大小 penLineWidth
+			lineWidth: {
+				type: Number,
+				default: 4
+			},
+			// 线颜色，权重小于 v-sign-color 组件设置的画笔颜色 penLineColor
+			lineColor: {
+				type: String,
+				default: '#333'
+			},
+			// 画布背景颜色
+			bgColor: {
+				type: String,
+				default: '#fff'
+			},
+			// canvas自定义样式
+			customStyle: {
+				type: Object,
+				default: () => ({})
+			}
 		},
-		// canvas 宽度
-		width: {
-			type: [String, Number]
+		provide() {
+			return {
+				getSignInterface: this.provideSignInterface
+			}
 		},
-		// canvas 高度
-		height: {
-			type: [String, Number]
+		data() {
+			return {
+				formatSize,
+				lineData: [],
+				winWidth: 0,
+				winHeight: 0,
+				penLineWidth: null, // v-sign-pen 组件设置的画笔大小
+				penLineColor: null // v-sign-color 组件设置的颜色
+			}
 		},
-		// 画笔大小，权重小于 v-sign-pen 组件设置的画笔大小 penLineWidth
-		lineWidth: {
-			type: Number,
-			default: 4
+		created() {
+			// 获取窗口宽高
+			const {
+				windowWidth,
+				windowHeight
+			} = uni.getSystemInfoSync()
+			this.winWidth = windowWidth
+			this.winHeight = windowHeight
 		},
-		// 线颜色，权重小于 v-sign-color 组件设置的画笔颜色 penLineColor
-		lineColor: {
-			type: String,
-			default: '#333'
-		},
-		// 画布背景颜色
-		bgColor: {
-			type: String,
-			default: '#fff'
-		},
-		// canvas自定义样式
-		customStyle: {
-			type: Object,
-			default: () => ({})
-		}
-	},
-	provide() {
-		return {
-			getSignInterface: this.provideSignInterface
-		}
-	},
-	data() {
-		return {
-			formatSize,
-			lineData: [],
-			winWidth: 0,
-			winHeight: 0,
-			penLineWidth: null, // v-sign-pen 组件设置的画笔大小
-			penLineColor: null // v-sign-color 组件设置的颜色
-		}
-	},
-	created() {
-		// 获取窗口宽高
-		const { windowWidth, windowHeight } = uni.getSystemInfoSync()
-		this.winWidth = windowWidth
-		this.winHeight = windowHeight
-	},
-	mounted() {
-		this.canvasCtx = uni.createCanvasContext(this.cid, this)
-		// h5 需延迟绘制，否则绘制失败
-		// #ifdef H5
-		setTimeout(() => {
-			// #endif
-			this.setBackgroundColor(this.bgColor)
+		mounted() {
+			this.canvasCtx = uni.createCanvasContext(this.cid, this)
+			// h5 需延迟绘制，否则绘制失败
 			// #ifdef H5
-		}, 10)
-		// #endif
-		// 初始化完成，触发 init 事件
-		this.$emit('init', this.provideSignInterface())
-	},
-	methods: {
-		onTouchStart(e) {
-			const pos = e.touches[0]
-			this.lineData.push({
-				style: {
-					color: this.penLineColor || this.lineColor,
-					width: this.penLineWidth || this.lineWidth
-				},
-				// 屏幕坐标
-				coordinates: [
-					{
+			setTimeout(() => {
+				// #endif
+				this.setBackgroundColor(this.bgColor)
+				// #ifdef H5
+			}, 10)
+			// #endif
+			// 初始化完成，触发 init 事件
+			this.$emit('init', this.provideSignInterface())
+		},
+		methods: {
+			onTouchStart(e) {
+				const pos = e.touches[0]
+				this.lineData.push({
+					style: {
+						color: this.penLineColor || this.lineColor,
+						width: this.penLineWidth || this.lineWidth
+					},
+					// 屏幕坐标
+					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) {
+				this.$emit('end', this.lineData)
+			},
+			// 清空画布
+			clear() {
+				this.lineData = []
+				this.canvasCtx.clearRect(0, 0, this.winWidth, this.winHeight)
+				this.canvasCtx.draw()
+				this.setBackgroundColor(this.bgColor)
+				this.$emit('clear')
+			},
+			// 撤销
+			revoke() {
+				this.setBackgroundColor(this.bgColor)
+				this.lineData.pop()
+				this.lineData.forEach((item, index) => {
+					this.canvasCtx.beginPath()
+					this.canvasCtx.setLineCap('round')
+					this.canvasCtx.setStrokeStyle(item.style.color)
+					this.canvasCtx.setLineWidth(item.style.width)
+					if (item.coordinates.length < 2) {
+						const pos = item.coordinates[0]
+						this.canvasCtx.moveTo(pos.x, pos.y)
+						this.canvasCtx.lineTo(pos.x + 1, pos.y)
+					} else {
+						item.coordinates.forEach(pos => {
+							if (pos.type == 'touchstart') {
+								this.canvasCtx.moveTo(pos.x, pos.y)
+							} else {
+								this.canvasCtx.lineTo(pos.x, 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) {
-			this.$emit('end', this.lineData)
-		},
-		// 清空画布
-		clear() {
-			this.lineData = []
-			this.canvasCtx.clearRect(0, 0, this.winWidth, this.winHeight)
-			this.canvasCtx.draw()
-			this.setBackgroundColor(this.bgColor)
-			this.$emit('clear')
-		},
-		// 撤销
-		revoke() {
-			this.setBackgroundColor(this.bgColor)
-			this.lineData.pop()
-			this.lineData.forEach((item, index) => {
+					this.canvasCtx.stroke()
+				})
+				this.canvasCtx.draw(true)
+				this.$emit('revoke', this.lineData)
+			},
+			// 绘制线条
+			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
 				this.canvasCtx.beginPath()
 				this.canvasCtx.setLineCap('round')
-				this.canvasCtx.setStrokeStyle(item.style.color)
-				this.canvasCtx.setLineWidth(item.style.width)
-				if (item.coordinates.length < 2) {
-					const pos = item.coordinates[0]
-					this.canvasCtx.moveTo(pos.x, pos.y)
-					this.canvasCtx.lineTo(pos.x + 1, pos.y)
-				} else {
-					item.coordinates.forEach(pos => {
-						if (pos.type == 'touchstart') {
-							this.canvasCtx.moveTo(pos.x, pos.y)
-						} else {
-							this.canvasCtx.lineTo(pos.x, pos.y)
-						}
-					})
-				}
+				this.canvasCtx.setStrokeStyle(style.color)
+				this.canvasCtx.setLineWidth(style.width)
+				this.canvasCtx.moveTo(startPos.x, startPos.y)
+				this.canvasCtx.lineTo(endPos.x, endPos.y)
+				// const P1 = this.caculateBezier(startPos, endPos, centerPos)
+				// console.log(P1.x, P1.y)
+				// this.canvasCtx.moveTo(startPos.x, startPos.y)
+				// this.canvasCtx.quadraticCurveTo(P1.x, P1.y, endPos.x, endPos.y)
 				this.canvasCtx.stroke()
-			})
-			this.canvasCtx.draw(true)
-			this.$emit('revoke', this.lineData)
-		},
-		// 绘制线条
-		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
-			this.canvasCtx.beginPath()
-			this.canvasCtx.setLineCap('round')
-			this.canvasCtx.setStrokeStyle(style.color)
-			this.canvasCtx.setLineWidth(style.width)
-			this.canvasCtx.moveTo(startPos.x, startPos.y)
-			this.canvasCtx.lineTo(endPos.x, endPos.y)
-			// const P1 = this.caculateBezier(startPos, endPos, centerPos)
-			// console.log(P1.x, P1.y)
-			// this.canvasCtx.moveTo(startPos.x, startPos.y)
-			// this.canvasCtx.quadraticCurveTo(P1.x, P1.y, endPos.x, endPos.y)
-			this.canvasCtx.stroke()
-			this.canvasCtx.draw(true)
-		},
-		// 保存png图片，文件名配置 filename 仅支持 h5
-		async saveImage(filename = '签名') {
-			const tempFilePath = await this.canvasToTempFilePath()
-			return new Promise((resolve, reject) => {
-				// #ifdef H5
-				try {
-					const a = document.createElement('a')
-					a.href = tempFilePath
-					a.download = filename
-					document.body.appendChild(a)
-					a.click()
-					a.remove()
-					resolve({
-						errMsg: 'saveImageH5:ok'
-					})
-				} catch (e) {
-					console.error(e)
-					reject(e)
-				}
-				// #endif
-				// #ifndef H5
-				uni.saveImageToPhotosAlbum({
-					filePath: tempFilePath,
-					success(resObj) {
-						resolve(resObj)
-					},
-					fail(err) {
-						reject(err)
+				this.canvasCtx.draw(true)
+			},
+			// 保存png图片，文件名配置 filename 仅支持 h5
+			async saveImage(filename = '签名') {
+				const tempFilePath = await this.canvasToTempFilePath()
+				return new Promise((resolve, reject) => {
+					// #ifdef H5
+					try {
+						const a = document.createElement('a')
+						a.href = tempFilePath
+						a.download = filename
+						document.body.appendChild(a)
+						a.click()
+						a.remove()
+						resolve({
+							errMsg: 'saveImageH5:ok'
+						})
+					} catch (e) {
+						console.error(e)
+						reject(e)
 					}
-				})
-				// #endif
-			})
-		},
-		// canvas 保存为临时图片路径，h5返回 base64
-		canvasToTempFilePath(conf = {}) {
-			return new Promise((resolve, reject) => {
-				uni.canvasToTempFilePath(
-					{
-						canvasId: this.cid,
-						...conf,
-						success: res => {
-							resolve(res.tempFilePath)
+					// #endif
+					// #ifndef H5
+					uni.saveImageToPhotosAlbum({
+						filePath: tempFilePath,
+						success(resObj) {
+							resolve(resObj)
 						},
-						fail: err => {
-							console.log('fail', err)
+						fail(err) {
 							reject(err)
 						}
-					},
-					this
-				)
-			})
-		},
-		setBackgroundColor(color = '#fff') {
-			this.canvasCtx.beginPath()
-			this.canvasCtx.setFillStyle(color)
-			this.canvasCtx.fillRect(0, 0, this.winWidth, this.winHeight)
-			this.canvasCtx.fill()
-			this.canvasCtx.draw(true)
-		},
-		setLineWidth(numberVal) {
-			this.penLineWidth = numberVal
-		},
-		setLineColor(strValue) {
-			this.penLineColor = strValue
-		},
-		// 向外暴露内部方法
-		provideSignInterface() {
-			return {
-				cid: this.cid,
-				ctx: this.canvasCtx,
-				clear: this.clear,
-				revoke: this.revoke,
-				saveImage: this.saveImage,
-				canvasToTempFilePath: this.canvasToTempFilePath,
-				setLineWidth: this.setLineWidth,
-				setLineColor: this.setLineColor,
-				setBackgroundColor: this.setBackgroundColor,
-				getLineData: () => this.lineData
-			}
-		},
-		/**
-		 * 计算二次贝塞尔曲线 控制点 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
+					})
+					// #endif
+				})
+			},
+			// canvas 保存为临时图片路径，h5返回 base64
+			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)
+							}
+						},
+						this
+					)
+				})
+			},
+			setBackgroundColor(color = '#fff') {
+				this.canvasCtx.beginPath()
+				this.canvasCtx.setFillStyle(color)
+				this.canvasCtx.fillRect(0, 0, this.winWidth, this.winHeight)
+				this.canvasCtx.fill()
+				this.canvasCtx.draw(true)
+			},
+			setLineWidth(numberVal) {
+				this.penLineWidth = numberVal
+			},
+			setLineColor(strValue) {
+				this.penLineColor = strValue
+			},
+			// 向外暴露内部方法
+			provideSignInterface() {
+				return {
+					cid: this.cid,
+					ctx: this.canvasCtx,
+					clear: this.clear,
+					revoke: this.revoke,
+					saveImage: this.saveImage,
+					canvasToTempFilePath: this.canvasToTempFilePath,
+					setLineWidth: this.setLineWidth,
+					setLineColor: this.setLineColor,
+					setBackgroundColor: this.setBackgroundColor,
+					getLineData: () => this.lineData
+				}
+			},
+			/**
+			 * 计算二次贝塞尔曲线 控制点 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;
+		height: 600rpx;
+		width: 100%;
+	}
 </style>