From edf79911efc3c5be29d12c85816d63f84756c409 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 15:39:24 +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                  | 245 --------------
 pages.json                                    |  15 +-
 pages/confirmCompletion/confirmCompletion.vue |  20 +-
 pages/signature/signature.vue                 |  11 +-
 pages/v-sign/changelog.md                     |  48 +++
 .../v-sign-action}/v-sign-action.vue          |  27 +-
 .../components/v-sign-color/v-sign-color.vue  | 212 ++++++++++++
 .../components/v-sign-pen}/v-sign-pen.vue     |  10 +-
 pages/v-sign/components/v-sign/v-sign.vue     | 314 ++++++++++++++++++
 pages/v-sign/package.json                     |  83 +++++
 pages/v-sign/readme.md                        | 245 ++++++++++++++
 pages/v-sign/static/image/clear.png           | Bin 0 -> 6420 bytes
 pages/v-sign/static/image/clear.svg           |   1 +
 pages/v-sign/static/image/next.png            | Bin 0 -> 7319 bytes
 pages/v-sign/static/image/next.svg            |   1 +
 pages/v-sign/static/image/prev.png            | Bin 0 -> 7356 bytes
 pages/v-sign/static/image/prev.svg            |   1 +
 pages/v-sign/static/image/save.png            | Bin 0 -> 3573 bytes
 pages/v-sign/static/image/save.svg            |   1 +
 .../utils.js => pages/v-sign/utils/index.js   |   4 +-
 20 files changed, 954 insertions(+), 284 deletions(-)
 delete mode 100644 components/v-sign/v-sign.vue
 create mode 100644 pages/v-sign/changelog.md
 rename {components/v-sign => pages/v-sign/components/v-sign-action}/v-sign-action.vue (83%)
 create mode 100644 pages/v-sign/components/v-sign-color/v-sign-color.vue
 rename {components/v-sign => pages/v-sign/components/v-sign-pen}/v-sign-pen.vue (95%)
 create mode 100644 pages/v-sign/components/v-sign/v-sign.vue
 create mode 100644 pages/v-sign/package.json
 create mode 100644 pages/v-sign/readme.md
 create mode 100644 pages/v-sign/static/image/clear.png
 create mode 100644 pages/v-sign/static/image/clear.svg
 create mode 100644 pages/v-sign/static/image/next.png
 create mode 100644 pages/v-sign/static/image/next.svg
 create mode 100644 pages/v-sign/static/image/prev.png
 create mode 100644 pages/v-sign/static/image/prev.svg
 create mode 100644 pages/v-sign/static/image/save.png
 create mode 100644 pages/v-sign/static/image/save.svg
 rename components/v-sign/utils.js => pages/v-sign/utils/index.js (64%)

diff --git a/components/v-sign/v-sign.vue b/components/v-sign/v-sign.vue
deleted file mode 100644
index d638552..0000000
--- a/components/v-sign/v-sign.vue
+++ /dev/null
@@ -1,245 +0,0 @@
-<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>
-		<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
-
-	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
-				}
-			})
-		},
-		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
-					}
-				} 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)
-							},
-							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
-				}
-			},
-			/**
-			 * 计算二次贝塞尔曲线 控制点 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;
-	}
-</style>
diff --git a/pages.json b/pages.json
index e298cb4..857666c 100644
--- a/pages.json
+++ b/pages.json
@@ -9,7 +9,13 @@
 				"navigationBarTitleText": "",
 				"navigationStyle": "custom"
 			}
-		}, {
+		},{
+			"path": "pages/confirmCompletion/confirmCompletion",
+			"style": {
+				"navigationBarTitleText": "当前工单",
+				"enablePullDownRefresh": false
+			}
+		},  {
 			"path": "pages/MyBenefits/MyBenefits",
 			"style": {
 				"navigationBarTitleText": "我的收益",
@@ -48,13 +54,6 @@
 				"navigationBarTitleText": "",
 				"navigationStyle": "custom"
 			}
-		}, {
-			"path": "pages/confirmCompletion/confirmCompletion",
-			"style": {
-				"navigationBarTitleText": "当前工单",
-				"enablePullDownRefresh": false,
-				"disableScroll": true
-			}
 		}, {
 			"path": "pages/taskReturn/taskReturn",
 			"style": {
diff --git a/pages/confirmCompletion/confirmCompletion.vue b/pages/confirmCompletion/confirmCompletion.vue
index e21dd1d..08b373c 100644
--- a/pages/confirmCompletion/confirmCompletion.vue
+++ b/pages/confirmCompletion/confirmCompletion.vue
@@ -101,15 +101,11 @@
 				</view>
 			</view>
 		</u-popup>
-		<!-- 		<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 :show="show" @click="show = false">
+			<view style="position:absolute;bottom:0;height:800rpx;width:100%;background-color: #fff;" v-if='show'>
+				<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop
+					style='background-color: #F4F5F7;width: 100%;height: 800rpx;'></signature>
+			</view>
 		</u-mask>
 		<u-toast ref="uToast" />
 	</view>
@@ -292,8 +288,10 @@
 	.app {
 		font-size: 36rpx;
 		padding: 0;
-		overflow: scroll;
-		height: 100vh;
+
+		::v-deep .u-mask {
+			height: 100vh !important;
+		}
 
 		.finishmask {
 			height: 300rpx;
diff --git a/pages/signature/signature.vue b/pages/signature/signature.vue
index b9fe469..630b06c 100644
--- a/pages/signature/signature.vue
+++ b/pages/signature/signature.vue
@@ -1,6 +1,6 @@
 <template>
-	<view class="" style="background-color: #F4F5F7;">
-		<Signature @init="onSignInit" style='background-color: #fff;'></Signature>
+	<view class="signature" style="background-color: #F4F5F7;height: 400rpx;">
+		<Signature @init="onSignInit" style='background-color: #fff;height: 700rpx;width: 100%;'></Signature>
 		<view class="btns">
 			<button @click="clear">清空</button>
 			<button @click="revoke">撤回</button>
@@ -10,7 +10,7 @@
 </template>
 
 <script>
-	import Signature from '@/components/v-sign/v-sign.vue'
+	import Signature from '../v-sign/components/v-sign/v-sign.vue'
 	export default {
 		components: {
 			Signature
@@ -37,6 +37,11 @@
 </script>
 
 <style lang='scss'>
+	.signature {
+		height: 800rpx;
+		position: relative;
+	}
+
 	.btns {
 		margin-top: 50rpx;
 		display: flex;
diff --git a/pages/v-sign/changelog.md b/pages/v-sign/changelog.md
new file mode 100644
index 0000000..17deb52
--- /dev/null
+++ b/pages/v-sign/changelog.md
@@ -0,0 +1,48 @@
+## 0.5.2（2022-06-10）
+- canvas 默认设置 disable-scroll 属性为true,  当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
+## 0.5.1（2022-05-27）
+- 取消属性 width, height 默认值
+## 0.5.0（2022-05-27）
+- 新增 v-sgin 组件获取坐标信息数组方法 `getLineData`
+- 新增 v-sign 组件事件触发 @clear, @revoke, @end
+- 修复撤销操作重设背景色导致线条消失问题
+## 0.4.0（2022-05-15）
+- 新增属性 bgColor 设置画布背景色，修复导出图片无背景色问题
+## 0.3.4（2022-03-30）
+修复 v-sign-action 子组件 svg 加载报错
+## 0.3.3（2022-03-30）
+修复 v-sign-action 子组件 svg 加载报错
+## 0.3.2（2022-01-12）
+- 修复多组件共存绘制问题
+## 0.3.1（2021-12-14）
+-  【新增】保存 png 图片方法 saveImage;
+- 【修改】 控件子组件保存按钮动作由保存为临时文件路径改为保存图片
+## 0.3.0（2021-12-11）
+- 添加颜色选择器组件
+## 0.2.0（2021-12-10）
+- 修改为 uni_modules 规范
+## 0.1.7 (2021-12-09)
+
+- 画笔组件优化
+
+## 0.1.6 (2021-12-08)
+
+- 画笔样式优化
+
+## 0.1.5 (2021-12-08)
+
+- 画笔子组件样式修改，支持circle、line 两种样式
+
+## 0.1.4 (2021-12-08)
+
+- 添加画笔子组件
+
+## 0.1.3 (2021-12-02)
+
+- 添加按钮控件子组件
+
+## 0.1.0 (2021-11-28)
+
+- 支持线宽、颜色自定义，自定义画布样式
+- 支持画布清空、撤回、保存图片
+- 事件 init 暴露清空、撤回、保存图片方法
\ No newline at end of file
diff --git a/components/v-sign/v-sign-action.vue b/pages/v-sign/components/v-sign-action/v-sign-action.vue
similarity index 83%
rename from components/v-sign/v-sign-action.vue
rename to pages/v-sign/components/v-sign-action/v-sign-action.vue
index 65d11d1..06984d0 100644
--- a/components/v-sign/v-sign-action.vue
+++ b/pages/v-sign/components/v-sign-action/v-sign-action.vue
@@ -7,7 +7,7 @@
 			:style="[{ 'margin-right': formatSize(space) }]"
 			@click="onBtnClick(item)"
 		>
-			<image :class="['icon', 'icon-' + item.action]" :src="item.icon"></image>
+			<image v-if="item.icon" :class="['icon', 'icon-' + item.action]" :src="item.icon"></image>
 			<text class="text">{{ item.label }}</text>
 		</view>
 	</view>
@@ -25,7 +25,7 @@
  * @event {Function} 点击对应类型按钮触发对应事件， 例如点击 clear 则触发 clear 事件
  * @example 示例
  **/
-import { formatSize } from './utils'
+import { formatSize } from '../../utils'
 
 // v-sign 父组件提供的接口
 let vSignInterface
@@ -41,22 +41,22 @@ const btnsConf = [
 	{
 		label: '清空',
 		action: btn_type.CLEAR,
-		icon: '/static/v-sign/clear.png'
+		icon: require('../../static/image/clear.svg')
 	},
 	{
 		label: '撤回',
 		action: btn_type.PREV,
-		icon: '/static/v-sign/prev.png'
+		icon: require('../../static/image/prev.svg')
 	},
 	// {
 	// 	label: '取消撤回',
 	// 	action: btn_type.NEXT,
-	// 	icon: '/static/v-sign/next.png'
+	// 	icon: '/uni_modules/v-sign/static/image/next.svg'
 	// },
 	{
 		label: '保存',
 		action: btn_type.SAVE,
-		icon: '/static/v-sign/save.png'
+		icon: require('../../static/image/save.svg')
 	}
 ]
 export default {
@@ -83,7 +83,7 @@ export default {
 			default: () => ({})
 		}
 	},
-	inject: ['getInterface'],
+	inject: ['getSignInterface'],
 	data() {
 		return {
 			formatSize
@@ -95,11 +95,10 @@ export default {
 		}
 	},
 	mounted() {
-		vSignInterface = this.getInterface()
+		vSignInterface = this.getSignInterface()
 	},
 	methods: {
 		async onBtnClick(btn) {
-			// console.log(btn, btn.action)
 			let emit_result
 			switch (btn.action) {
 				case btn_type.CLEAR:
@@ -112,7 +111,7 @@ export default {
 				// 	console.log('next')
 				// 	break
 				case btn_type.SAVE:
-					emit_result = await vSignInterface.canvasToTempFilePath()
+					emit_result = await vSignInterface.saveImage()
 					break
 				default:
 					break
@@ -138,8 +137,12 @@ export default {
 		&:last-child {
 			margin-right: 0;
 		}
+		&:active {
+			transition: transform 0.3s;
+			transform: scale(1.1);
+		}
 		&.border {
-			border: 2rpx solid #666;
+			border: 2rpx solid #333;
 			border-radius: 12rpx;
 		}
 		.icon {
@@ -154,7 +157,7 @@ export default {
 			}
 		}
 		.text {
-			color: #666;
+			color: #333;
 			font-size: 28rpx;
 		}
 	}
diff --git a/pages/v-sign/components/v-sign-color/v-sign-color.vue b/pages/v-sign/components/v-sign-color/v-sign-color.vue
new file mode 100644
index 0000000..f335349
--- /dev/null
+++ b/pages/v-sign/components/v-sign-color/v-sign-color.vue
@@ -0,0 +1,212 @@
+<template>
+	<view class="v-sign-color">
+		<view class="options">
+			<view
+				class="option-item"
+				v-for="(color, index) in options"
+				:key="color"
+				:style="[optionStyle(color, index)]"
+				@click="onSelect(color, index)"
+			>
+				<view class="option-inner" :style="[optionInnerStyle(color, index)]">
+					{{ tick && currentIndex === index ? '✓' : '' }}
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * v-sign-color 颜色选择器（v-sign 子组件）
+ * @description 设置 v-sign 画笔的颜色
+ * @tutorial
+ * @property {String} type 选项样式，可选 SQUARE \ CIRCLE
+ * @property {String} color 默认颜色
+ * @property {Array} options 备选色
+ * @property {Number/String} size 圆/方形大小
+ * @property {Boolean} tick 是否选中打勾
+ * @property {Number/String} tickSize 勾大小
+ * @property {String} borderColor 边框颜色
+ * @property {Boolean} border 是否有边框
+ * @property {Number/String} space 选项间隙
+ * @event {Function} change 改变颜色时触发
+ * @example 示例
+ **/
+import { formatSize } from '../../utils'
+// 选项样式
+const type_style = {
+	CIRCLE: 'circle',
+	SQUARE: 'square'
+}
+// v-sign 父组件提供的接口
+let vSignInterface
+
+export default {
+	name: 'v-sign-color',
+	props: {
+		// 选项样式
+		type: {
+			type: String,
+			default: type_style.SQUARE
+		},
+		// 默认色，需在备选中
+		color: {
+			type: String
+		},
+		// 备选色
+		options: {
+			type: Array,
+			default: () => ['#333', '#f44236', '#3f51b5', '#2195f3', '#ffeb3b', '#ff9900']
+		},
+		// 圆/方形大小
+		size: {
+			type: [Number, String],
+			default: 44
+		},
+		// 是否选中打勾
+		tick: {
+			type: Boolean,
+			default: true
+		},
+		// 勾大小
+		tickSize: {
+			type: [Number, String],
+			default: 24
+		},
+		// 边框颜色
+		borderColor: {
+			type: String,
+			default: '#fff'
+		},
+		// 是否有边框
+		border: {
+			type: Boolean,
+			default: false
+		},
+		// 选项间隙
+		space: {
+			type: [Number, String],
+			default: 16
+		}
+	},
+	inject: ['getSignInterface'],
+	data() {
+		return {
+			formatSize,
+			currentIndex: null
+		}
+	},
+	watch: {
+		color: {
+			handler(val) {
+				if (!val) {
+					this.currentIndex = 0
+					return
+				}
+				const index = this.options.findIndex(item => item === this.color)
+				if (index > 0) {
+					this.currentIndex = index
+				}
+			},
+			immediate: true
+		}
+	},
+	computed: {
+		currentColor() {
+			return this.options[this.currentIndex]
+		}
+	},
+	mounted() {
+		vSignInterface = this.getSignInterface()
+		this.setLineColor()
+	},
+	methods: {
+		onSelect(color, index) {
+			this.currentIndex = index
+			this.$emit('change', color)
+			this.setLineColor()
+		},
+		setLineColor() {
+			vSignInterface.setLineColor(this.currentColor)
+		},
+		optionStyle(color, index) {
+			const size = formatSize(this.size)
+			let style = {
+				marginRight: formatSize(this.space),
+				width: size,
+				height: size,
+				lineHeight: size,
+				border:
+					this.border && this.currentIndex === index
+						? `4rpx solid ${this.borderColor}`
+						: '',
+				padding: this.currentIndex === index ? 0 : this.border ? '4rpx' : ''
+			}
+			switch (this.type) {
+				case type_style.SQUARE:
+					style = {
+						...style,
+						borderRadius: this.currentIndex === index ? '8rpx' : 0
+					}
+					break
+				case type_style.CIRCLE:
+					style = {
+						...style,
+						borderRadius: '50%'
+					}
+					break
+			}
+			return style
+		},
+		optionInnerStyle(color, index) {
+			let style = {
+				background: color,
+				fontSize: formatSize(this.tickSize)
+			}
+			switch (this.type) {
+				case type_style.SQUARE:
+					style = {
+						...style,
+						borderRadius: this.currentIndex === index ? 0 : '8rpx'
+					}
+					break
+				case type_style.CIRCLE:
+					style = {
+						...style,
+						borderRadius: '50%'
+					}
+					break
+			}
+			return style
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.options {
+	padding: 8rpx;
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.option-item {
+	overflow: hidden;
+	&:last-child {
+		margin-right: 0;
+	}
+	&:active {
+		transition: transform 0.3s;
+		transform: scale(1.1);
+	}
+}
+
+.option-inner {
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	font-weight: bold;
+	color: #fff;
+}
+</style>
diff --git a/components/v-sign/v-sign-pen.vue b/pages/v-sign/components/v-sign-pen/v-sign-pen.vue
similarity index 95%
rename from components/v-sign/v-sign-pen.vue
rename to pages/v-sign/components/v-sign-pen/v-sign-pen.vue
index 9c26a66..41786a3 100644
--- a/components/v-sign/v-sign-pen.vue
+++ b/pages/v-sign/components/v-sign-pen/v-sign-pen.vue
@@ -31,7 +31,7 @@
 <script>
 /**
  * v-sign-pen 画笔（v-sign 子组件）
- * @description 控制 v-sign 画笔的线宽
+ * @description 设置 v-sign 画笔的线宽
  * @tutorial
  * @property {String} type 选项样式 line / circle
  * @property {String} label 标签
@@ -105,7 +105,7 @@ export default {
 			default: 4
 		}
 	},
-	inject: ['getInterface'],
+	inject: ['getSignInterface'],
 	data() {
 		return {
 			type_style,
@@ -142,7 +142,7 @@ export default {
 		this.currentSelect = this.csizes[0]
 	},
 	mounted() {
-		vSignInterface = this.getInterface()
+		vSignInterface = this.getSignInterface()
 		this.setLineWidth()
 	},
 	methods: {
@@ -195,6 +195,10 @@ export default {
 			&:last-child {
 				margin-right: 0;
 			}
+			&:active {
+				transition: transform 0.3s;
+				transform: scale(1.1);
+			}
 			.circle {
 				border-radius: 50%;
 				padding: 4rpx;
diff --git a/pages/v-sign/components/v-sign/v-sign.vue b/pages/v-sign/components/v-sign/v-sign.vue
new file mode 100644
index 0000000..3377e64
--- /dev/null
+++ b/pages/v-sign/components/v-sign/v-sign.vue
@@ -0,0 +1,314 @@
+<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>
+		<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'
+
+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: () => ({})
+		}
+	},
+	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)
+			// #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.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)
+					}
+				})
+				// #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;
+}
+</style>
diff --git a/pages/v-sign/package.json b/pages/v-sign/package.json
new file mode 100644
index 0000000..e78eb3d
--- /dev/null
+++ b/pages/v-sign/package.json
@@ -0,0 +1,83 @@
+{
+  "id": "v-sign",
+  "displayName": "canvas 手写 签名 签字 画板组件",
+  "version": "0.5.2",
+  "description": "基于 canvas 实现；1. 支持线条、背景色自定义样式；2. 支持撤回、清空、导出图片等功能；3. 内置按钮、画笔等子组件。",
+  "keywords": [
+    "canvas",
+    "签名",
+    "签字",
+    "电子签名",
+    "signature"
+],
+  "repository": "https://github.com/jizai1125/v-sign",
+"engines": {
+  },
+  "dcloudext": {
+    "category": [
+        "前端组件",
+        "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "n"
+        },
+        "App": {
+          "app-vue": "u",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/pages/v-sign/readme.md b/pages/v-sign/readme.md
new file mode 100644
index 0000000..696e33d
--- /dev/null
+++ b/pages/v-sign/readme.md
@@ -0,0 +1,245 @@
+# v-sign 手写签名
+
+**如有问题或者建议，欢迎留言或加群联系我（群号：736123963）！！！将保持维护！！！**
+
+<img src="https://i.loli.net/2021/12/02/bgsfnDmCzXGq8ct.png" alt="uniapp 交流群群聊二维码" style="zoom: 80%;" />
+
+## 快速使用
+
+基础示例，具体说明见下方 API，**若需要使用内置子组件，见下方子组件说明。**
+
+```html
+<template>
+	<v-sign :width="winWidth + 'px'" @init="onSignInit"></v-sign>
+	<button @click="clear">清空<button>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        winWidth: 0
+      }
+    },
+    created() {
+      // 宽度设为可使用窗口宽度
+      const { windowWidth } = uni.getSystemInfoSync()
+      this.winWidth = windowWidth
+    },
+    methods: {
+      onSignInit(signCtx) {
+        this.signCtx = signCtx
+      },
+      // 清空
+      clear() {
+        this.signCtx.clear()
+      }
+    }
+  }
+</script>
+```
+
+## API
+
+### 属性 (Props)
+
+|   属性名    |     类型      |    默认值     |             说明             |
+| :---------: | :-----------: | :-----------: | :--------------------------: |
+|     cid     |    String     | v-sign-时间戳 |          canvas id           |
+|    width    | String/Number |       -       | canvas 宽度，Number 单位 rpx |
+|   height    | String/Number |       -       | canvas 高度，Number 单位 rpx |
+| customStyle |    Object     |       -       |      canvas 自定义样式       |
+|  lineWidth  |    Number     |       4       |        线宽，单位 px         |
+|  lineColor  |    String     |     #333      |            线颜色            |
+|   bgColor   |    String     |     #fff      |         画布背景颜色         |
+
+### 事件（Events）
+
+| 事件称名 |                              说明                              |               返回值               |
+| :------: | :------------------------------------------------------------: | :--------------------------------: |
+|  @init   | 创建完 canvas 实例后触发，向外提供 canvas 实例，撤回，清空方法 | Object：具体见下方事件回调参数说明 |
+|  @clear  |                         清空画布后触发                         |                 -                  |
+| @revoke  |                         撤销操作后触发                         |            坐标信息数组            |
+|   @end   |                       每次绘制结束后触发                       |            坐标信息数组            |
+
+### 事件回调参数说明
+
+#### **`init(ctx: SignContext)`**
+
+可以通过该事件回调暴露的 clear、revoke 等方法操作画布。
+
+```java
+interface SignContext {
+  // canvas 实例
+	ctx: object;
+	// 清空画布
+	clear(): void;
+	// 撤回
+	revoke(): void;
+  // 保存 png 图片，文件名 filename 配置仅支持 h5
+  saveImage(filename: string): Promise<object>;
+  // 返回图片临时文件路径，config 参数同 uni.canvasToTempFilePath方法，内部只是做了 Promise 化处理而已
+  canvasToTempFilePath(config: object): Promise<object>;
+  // 设置画布背景色
+  setBackgroundColor(color: string): void;
+  setLineWidth(value: number): void;
+  setLineColor(value: string): void;
+  // 获取坐标信息数组
+  getLineData(): Array<object>;
+}
+```
+
+示例：
+
+```html
+<template>
+	<v-sign @init="onSignInit"></v-sign>
+	<button @click="clear">清空<button>
+	<button @click="revoke">撤回<button>
+    <button @click="saveTempFilePath">保存临时图片路径<button>
+    <button @click="saveImage">保存图片<button>
+</template>
+<script>
+  export default {
+    methods: {
+      onSignInit(signCtx) {
+          this.signCtx = signCtx
+      },
+      // 清空
+      clear() {
+          this.signCtx.clear()
+      },
+      // 撤回
+      revoke() {
+          this.signCtx.revoke()
+      },
+      // 保存为临时图片路径，h5返回 base64
+      saveTempFilePath() {
+          this.signCtx.canvasToTempFilePath()
+      },
+      // 保存 png 图片
+      saveImage() {
+          this.signCtx.saveImage()
+      }
+    }
+  }
+</script>
+```
+
+# 子组件
+
+子组件需要包裹在 `v-sign` 组件内使用！！！
+
+## 按钮控件（v-sign-action）
+
+### 示例
+
+```html
+<template>
+  <v-sign>
+    <v-sign-action @save="save" @clear="clear" @prev="revoke"></v-sign-action>
+  </v-sign>
+</template>
+<script>
+  export default {
+    methods: {
+      save(tempFilePath) {
+        console.log(tempFilePath);
+      },
+    },
+  };
+</script>
+```
+
+### API
+
+### 属性 (Props)
+
+|   属性名    |     类型      |          默认值           |                          说明                          |
+| :---------: | :-----------: | :-----------------------: | :----------------------------------------------------: |
+|   actions   |     Array     | ["clear", "prev", "save"] | 按钮配置；清空（clear）, 撤回（prev） 保存图片（save） |
+|   border    |    Boolean    |           true            |                     按钮是否有边框                     |
+|    space    | String/Number |            12             |               按钮间隔，Number 单位 rpx                |
+| customStyle |    Object     |             -             |                    根元素自定义样式                    |
+
+### 事件（Events）
+
+点击对应类型按钮触发对应事件， 例如：配置了清空（clear）按钮，点击则触发 clear 事件。
+
+---
+
+## 画笔组件（v-sign-pen）
+
+### 示例
+
+```html
+<template>
+  <v-sign>
+    <v-sign-pen></v-sign-pen>
+  </v-sign>
+</template>
+<script>
+  export default {};
+</script>
+```
+
+### API
+
+### 属性 (Props)
+
+|   属性名    |  类型   |      默认值      |             说明             |
+| :---------: | :-----: | :--------------: | :--------------------------: |
+|    type     | String  |      circle      | 选项样式，可选 circle \ line |
+|    label    | String  |        -         |             标签             |
+|    sizes    |  Array  | [2, 4, 6, 8, 10] |    画笔尺寸数组，单位 px     |
+|    color    | String  |       #333       |           选项颜色           |
+| activeColor | String  |       #333       |          选中项颜色          |
+|   border    | Boolean |       true       |       选中项是否有边框       |
+| borderWidth | Number  |        4         |      边框大小，单位 rpx      |
+|    space    | Number  |        20        |      选项间隙，单位 rpx      |
+|   bigger    | Number  |        2         |       圆点变大变粗倍数       |
+|   minSize   | Number  |        4         |    圆点最小尺寸，单位 px     |
+
+### 事件（Events）
+
+| 事件称名 |        说明        |       返回值       |
+| :------: | :----------------: | :----------------: |
+| @change  | 选择画笔大小时触发 | size：画笔尺寸大小 |
+
+---
+
+## 颜色选择器组件（v-sign-color）
+
+### 示例
+
+```html
+<template>
+  <v-sign>
+    <v-sign-color></v-sign-color>
+  </v-sign>
+</template>
+<script>
+  export default {};
+</script>
+```
+
+### API
+
+### 属性 (Props)
+
+|   属性名    |     类型      |                             默认值                              |         说明          |
+| :---------: | :-----------: | :-------------------------------------------------------------: | :-------------------: |
+|    type     |    String     |                             square                              | 选项样式，可选 circle |
+|    color    |    String     |                                -                                |       默认颜色        |
+|   options   |     Array     | ['#333', '#f44236', '#3f51b5', '#2195f3', '#ffeb3b', '#ff9900'] |        备选色         |
+|    size     | Number/String |                               44                                | 圆/方形大小，单位 rpx |
+|    tick     |    Boolean    |                              true                               |     是否选中打勾      |
+|  tickSize   | Number/String |                               24                                |        勾大小         |
+| borderColor |    String     |                              #fff                               |       边框颜色        |
+|   border    |    Boolean    |                              false                              |      是否有边框       |
+|    space    | Number/String |                               16                                |       选项间隙        |
+
+### 事件（Events）
+
+| 事件称名 |      说明      | 返回值 |
+| :------: | :------------: | :----: |
+| @change  | 选择颜色时触发 | color  |
diff --git a/pages/v-sign/static/image/clear.png b/pages/v-sign/static/image/clear.png
new file mode 100644
index 0000000000000000000000000000000000000000..032e7aa232545ca6c6554a04b5fa34eee1239f10
GIT binary patch
literal 6420
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
aGtT;P;JIqq)adn?1JG2{Rjqtz8}@$yNCH*>

literal 0
HcmV?d00001

diff --git a/pages/v-sign/static/image/clear.svg b/pages/v-sign/static/image/clear.svg
new file mode 100644
index 0000000..0285fbe
--- /dev/null
+++ b/pages/v-sign/static/image/clear.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639214313546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="827" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M274.56 798.997333l19.434667-25.130666-33.792 68.565333a18.133333 18.133333 0 0 0 11.562666 25.536l59.733334 16a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.818667 35.626667-35.989333 45.290666-48.469333l19.456-25.130667-33.813333 68.565333a18.133333 18.133333 0 0 0 11.562667 25.536l84.48 22.634667a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.84 35.626667-35.989333 45.269333-48.469333l19.456-25.130667-33.813333 68.565333A18.133333 18.133333 0 0 0 535.530667 938.666667l72.106666 19.328a18.133333 18.133333 0 0 0 17.28-4.48c20.522667-19.84 35.626667-36.010667 45.269334-48.490667l19.456-25.130667-33.813334 68.586667a18.133333 18.133333 0 0 0 11.584 25.514667l86.421334 23.338666 3.84-0.213333c13.269333-0.704 29.056-5.034667 43.84-12.8 29.781333-15.701333 48.170667-43.2 52.181333-78.250667 2.133333-18.517333 4.778667-38.549333 8.405333-63.530666 1.642667-11.221333 2.944-20.010667 6.229334-41.834667 11.050667-73.322667 14.634667-101.034667 17.130666-133.674667l0.938667-12.373333 2.837333-2.922667 12.330667-1.344a41.813333 41.813333 0 0 0 24.810667-11.221333c10.730667-10.24 14.805333-25.386667 11.093333-42.197333l-37.546667-171.584c-3.029333-13.696-11.264-27.946667-23.146666-39.829334-11.648-11.626667-25.92-20.138667-39.893334-23.893333L723.626667 331.306667l-2.261334-3.925334L774.250667 130.133333c8.32-31.061333-11.754667-63.744-44.970667-72.64l-79.509333-21.312c-33.194667-8.896-66.922667 9.365333-75.264 40.426667l-52.842667 197.269333-3.925333 2.261334-118.101334-31.637334c-13.994667-3.754667-30.634667-3.498667-46.506666 0.746667-16.256 4.352-30.506667 12.586667-39.957334 22.933333l-118.314666 129.792c-11.605333 12.714667-15.658667 27.84-11.52 42.090667 4.16 14.229333 15.850667 25.194667 32.896 30.528l13.610666 4.266667 2.133334 3.882666-3.626667 13.802667c-21.12 79.850667-52.885333 136.917333-85.717333 150.890667-47.530667 20.202667-72.938667 49.429333-78.421334 85.034666-5.034667 32.682667 9.28 67.114667 37.589334 91.541334l22.037333 8.341333 74.666667 20.010667a42.666667 42.666667 0 0 0 41.216-11.050667c15.274667-15.274667 26.88-28.032 34.837333-38.293333z m551.381333-396.565333c14.144 3.797333 29.952 19.2 32.768 32l34.56 157.781333a10.666667 10.666667 0 0 1-13.184 12.586667L240.64 433.493333a10.666667 10.666667 0 0 1-5.12-17.493333l108.8-119.36c8.832-9.685333 30.229333-15.146667 44.373333-11.349333l141.333334 37.866666a21.333333 21.333333 0 0 0 26.133333-15.082666l58.304-217.642667a21.333333 21.333333 0 0 1 26.133333-15.082667l77.056 20.650667a21.333333 21.333333 0 0 1 15.082667 26.133333l-58.325333 217.642667a21.333333 21.333333 0 0 0 15.082666 26.112l136.448 36.565333zM315.456 701.568c-33.664 45.141333-64.597333 79.082667-92.8 101.802667l-5.909333 4.778666-2.837334 0.597334-88.106666-24.106667-2.922667-3.2c-13.034667-14.165333-19.370667-31.04-16.981333-46.592 3.285333-21.333333 22.058667-39.338667 53.205333-52.586667 31.722667-13.482667 59.818667-47.104 82.922667-99.904 10.026667-22.954667 18.88-48.725333 26.389333-76.586666l3.882667-14.4 3.904-2.261334 566.165333 151.701334 2.346667 3.306666-0.789334 12.224c-1.984 30.592-30.336 229.397333-32.128 244.906667-2.346667 20.416-11.306667 34.986667-27.605333 44.394667a73.237333 73.237333 0 0 1-21.397333 8.106666l-5.013334 0.725334-60.373333-16.170667 11.242667-20.288c8.277333-14.976 22.656-43.84 43.093333-86.613333a21.12 21.12 0 0 0-9.962667-28.16l-3.136-1.493334a21.333333 21.333333 0 0 0-26.261333 6.485334c-33.642667 45.056-64.533333 78.912-92.672 101.546666l-5.909333 4.757334-2.837334 0.597333-52.544-14.08 11.114667-20.266667c3.562667-6.485333 7.04-13.013333 10.453333-19.626666 7.04-13.504 17.898667-35.797333 32.597334-66.816a21.290667 21.290667 0 0 0-9.984-28.309334l-3.029334-1.450666a21.333333 21.333333 0 0 0-26.368 6.442666c-33.6 45.013333-64.469333 78.826667-92.608 101.482667l-5.909333 4.757333-2.837333 0.597334-52.138667-13.973334 11.114667-20.266666c3.242667-5.888 6.72-12.416 10.453333-19.626667 6.997333-13.461333 17.962667-35.946667 32.896-67.434667a20.970667 20.970667 0 0 0-10.112-28.010666l-3.328-1.536a21.333333 21.333333 0 0 0-26.069333 6.613333c-33.642667 45.056-64.554667 78.976-92.778667 101.696l-5.909333 4.757333-2.837334 0.597334-32.64-8.746667 11.093334-20.245333c3.541333-6.506667 7.04-13.034667 10.453333-19.626667 6.976-13.482667 17.941333-35.968 32.874667-67.456a21.056 21.056 0 0 0-10.069334-28.074667l-3.242666-1.514666a21.333333 21.333333 0 0 0-26.154667 6.549333z" fill="#333333" p-id="828"></path></svg>
\ No newline at end of file
diff --git a/pages/v-sign/static/image/next.png b/pages/v-sign/static/image/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..20cbf6c8023a5f96939ad11820457e63bf601302
GIT binary patch
literal 7319
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

literal 0
HcmV?d00001

diff --git a/pages/v-sign/static/image/next.svg b/pages/v-sign/static/image/next.svg
new file mode 100644
index 0000000..36e2445
--- /dev/null
+++ b/pages/v-sign/static/image/next.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639214327673" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1119" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M588.8 934.4c-17.066667-4.266667-25.6-21.333333-25.6-38.4v-204.8c-68.266667-8.533333-128-4.266667-192 12.8-76.8 21.333333-170.666667 93.866667-273.066667 213.333333-12.8 17.066667-34.133333 21.333333-51.2 12.8-17.066667-8.533333-29.866667-25.6-25.6-42.666666 17.066667-162.133333 76.8-298.666667 187.733334-405.333334 98.133333-98.133333 213.333333-153.6 349.866666-166.4V128c0-17.066667 8.533333-34.133333 25.6-38.4 17.066667-8.533333 34.133333-4.266667 46.933334 8.533333l358.4 375.466667c17.066667 17.066667 17.066667 42.666667 0 59.733333l-358.4 392.533334c-8.533333 8.533333-21.333333 12.8-29.866667 12.8-4.266667 0-8.533333 0-12.8-4.266667z m55.466667-699.733333v123.733333c0 21.333333-17.066667 42.666667-42.666667 42.666667-132.266667 0-243.2 46.933333-337.066667 140.8-59.733333 59.733333-102.4 128-128 204.8 72.533333-68.266667 145.066667-110.933333 209.066667-128 85.333333-21.333333 166.4-25.6 260.266667-8.533334 21.333333 4.266667 34.133333 21.333333 34.133333 42.666667v132.266667l256-281.6-251.733333-268.8z" fill="#333333" p-id="1120"></path></svg>
\ No newline at end of file
diff --git a/pages/v-sign/static/image/prev.png b/pages/v-sign/static/image/prev.png
new file mode 100644
index 0000000000000000000000000000000000000000..e81d3b9b629775099f4fffbc10347281c1b0f07c
GIT binary patch
literal 7356
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%0DV%M_Jy#bdyZ8?8nMghL72
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
MX@D)cbwA>N00B4zL;wH)

literal 0
HcmV?d00001

diff --git a/pages/v-sign/static/image/prev.svg b/pages/v-sign/static/image/prev.svg
new file mode 100644
index 0000000..5a67586
--- /dev/null
+++ b/pages/v-sign/static/image/prev.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639214320974" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="973" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M422.4 938.666667c-12.8 0-21.333333-4.266667-29.866667-12.8L34.133333 533.333333c-17.066667-17.066667-12.8-42.666667 0-59.733333l358.4-375.466667c8.533333-12.8 25.6-17.066667 42.666667-8.533333s25.6 21.333333 25.6 38.4v187.733333c136.533333 8.533333 256 64 354.133333 166.4 106.666667 106.666667 170.666667 243.2 187.733334 405.333334 0 17.066667-8.533333 38.4-25.6 42.666666-17.066667 8.533333-38.4 4.266667-51.2-12.8-98.133333-119.466667-192-196.266667-273.066667-213.333333-64-17.066667-123.733333-21.333333-192-12.8V896c0 17.066667-12.8 34.133333-25.6 38.4-4.266667 4.266667-8.533333 4.266667-12.8 4.266667z m-298.666667-435.2l256 281.6v-132.266667c0-21.333333 17.066667-38.4 34.133334-42.666667 93.866667-17.066667 174.933333-12.8 260.266666 8.533334 64 17.066667 136.533333 59.733333 209.066667 128-25.6-76.8-72.533333-149.333333-128-204.8-93.866667-93.866667-204.8-140.8-337.066667-140.8-21.333333 0-42.666667-21.333333-42.666666-42.666667V234.666667l-251.733334 268.8z" fill="#333333" p-id="974"></path></svg>
\ No newline at end of file
diff --git a/pages/v-sign/static/image/save.png b/pages/v-sign/static/image/save.png
new file mode 100644
index 0000000000000000000000000000000000000000..5269210fa987d4b07c2820b7ed4419162a9badb2
GIT binary patch
literal 3573
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

literal 0
HcmV?d00001

diff --git a/pages/v-sign/static/image/save.svg b/pages/v-sign/static/image/save.svg
new file mode 100644
index 0000000..e97dcf7
--- /dev/null
+++ b/pages/v-sign/static/image/save.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1639214153477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="861" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M62.848 60.992h704v64h-704zM62.848 640.832h543.936v64H62.848z" fill="#333333" p-id="862"></path><path d="M702.848 60.992h64v320h-64zM62.848 113.536h64v527.296h-64z" fill="#333333" p-id="863"></path><path d="M70.528 498.304l218.24-117.312 30.4 56.32-218.304 117.376z" fill="#333333" p-id="864"></path><path d="M298.432 375.04l144.896 274.176-56.576 29.888L241.92 404.928zM512 194.176h126.592v127.168H512zM663.296 448.448h128v320h-128z" fill="#333333" p-id="865"></path><path d="M599.36 764.992l127.936 128 128.064-128z" fill="#333333" p-id="866"></path></svg>
\ No newline at end of file
diff --git a/components/v-sign/utils.js b/pages/v-sign/utils/index.js
similarity index 64%
rename from components/v-sign/utils.js
rename to pages/v-sign/utils/index.js
index a5a9ab7..270dcf7 100644
--- a/components/v-sign/utils.js
+++ b/pages/v-sign/utils/index.js
@@ -10,6 +10,6 @@ export function isNumber(val) {
  * 处理大小单位
  * @param {Object} val
  */
-export function formatSize(val) {
-	return isNumber(val) ? `${val}rpx` : val
+export function formatSize(val, unit = 'rpx') {
+	return isNumber(val) ? `${val}${unit}` : val
 }