canvas -- 画布

pages.json

@@ -407,6 +407,15 @@
 		        "enablePullDownRefresh": false
 		    }
 		    
+		},
+		{
+		    "path" : "pages/sign/sign",
+		    "style" :                                                                                    
+		    {
+		        "navigationBarTitleText": "签名",
+		        "enablePullDownRefresh": false
+		    }
+		    
 		}
     ],
 	// "tabBar": {

pages/personalCenter/personalCenter.vue

@@ -156,9 +156,13 @@
 				}
 			},
 			userinfo(){
+				// uni.navigateTo({
+				// 	url:`/pages/personalCenter/user-information?customerBasicInfo=` + JSON.stringify(this.customerBasicInfo)
+				// })
 				uni.navigateTo({
-					url:`/pages/personalCenter/user-information?customerBasicInfo=` + JSON.stringify(this.customerBasicInfo)
+					url:`/pages/sign/sign`
 				})
+				
 			},
 			// 弹窗
 			errorDialog(type,content){

pages/sign/sign.vue

+<template>
+	<view class="signa">
+		<canvas class="canvas" disable-scroll="true" :style="{'width':'100vw','height':'80vh'}" canvas-id="designature"
+			@touchstart="starts" @touchmove="moves" @touchend="end"></canvas>
+		<view class="btn">
+			<view class="cancel-btn" @click="clear">
+				重写
+			</view>
+			<view class="save-btn" @click="save">
+				保存
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script>
+	/*
+	 *	已兼容h5和小程序端
+	 * 
+	 *	如有问题可以加qq：549791959
+	 * 	里面的计算都是自己转换公式得出的，不容易啊
+	 * 
+	 */
+	export default {
+		data() {
+			return {
+				resultUrl: '',
+				dom: null,
+				line: [],
+				width: '0px',
+				height: '0px',
+				radius: 0,
+				staffDeptId: '',
+				id: '',
+				type: '',
+				inspectTemplateId: ''
+			}
+		},
+		onLoad(option) {
+			this.staffDeptId = option.staffDeptId
+			this.id = option.id
+			this.type = option.type
+			this.inspectTemplateId = option.inspectTemplateId
+		},
+		created() {
+			uni.getSystemInfo({
+				success: (res) => {
+					this.width = res.windowWidth - 50 + 'px';
+					this.height = res.windowHeight - 15 + 'px';
+				}
+			});
+			this.dom = uni.createCanvasContext('designature', this);
+		},
+		methods: {
+			end(e) {
+
+			},
+			distance(a, b) {
+				let x = b.x - a.x;
+				let y = b.y - a.y;
+				return Math.sqrt(x * x + y * y);
+			},
+			starts(e) {
+				this.line.push({
+					points: [{
+						time: new Date().getTime(),
+						x: e.touches[0].x,
+						y: e.touches[0].y,
+						dis: 0
+					}]
+				})
+				let currentPoint = {
+					x: e.touches[0].x,
+					y: e.touches[0].y
+				}
+				this.currentPoint = currentPoint
+				this.drawer(this.line[this.line.length - 1])
+			},
+			moves(e) {
+				let point = {
+					x: e.touches[0].x,
+					y: e.touches[0].y
+				}
+				this.lastPoint = this.currentPoint,
+					this.currentPoint = point
+				this.line[this.line.length - 1].points.push({
+					time: new Date().getTime(),
+					x: e.touches[0].x,
+					y: e.touches[0].y,
+					dis: this.distance(this.currentPoint, this.lastPoint)
+				})
+				this.drawer(this.line[this.line.length - 1])
+			},
+			drawer(item) {
+				let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5,
+					x, y;
+				var time = 0;
+				if (item.points.length > 2) {
+					let lines = item.points[item.points.length - 3];
+					let line = item.points[item.points.length - 2];
+					let end = item.points[item.points.length - 1];
+					x = line.x;
+					y = line.y;
+					x1 = lines.x;
+					y1 = lines.y;
+					x2 = end.x;
+					y2 = end.y;
+					var dis = 0;
+					time = (line.time - lines.time) + (end.time - line.time)
+					dis = line.dis + lines.dis + end.dis;
+					var dom = this.dom;
+					var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax);
+					cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t))
+					cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t))
+					dom.setLineCap('round')
+					dom.beginPath();
+					dom.setStrokeStyle('black')
+					dom.setLineWidth(5)
+					dom.moveTo(x1, y1);
+					dom.quadraticCurveTo(cx, cy, x2, y2);
+
+					dom.stroke();
+					dom.draw(true)
+				}
+
+			},
+			clear() {
+				this.dom.clearRect(0, 0, 1000, 1000)
+				this.dom.draw()
+				this.line = []
+			},
+			save() {
+				var t = this;
+				if (t.line.length != 0) {
+					uni.canvasToTempFilePath({
+						canvasId: 'designature',
+						fileType: 'png',
+						quality: 1, //图片质量
+						success: function(res) {
+							// t.uploadFile(res.tempFilePath)
+							// t.$emit('getImg',res.tempFilePath)
+							// uni.navigateBack({
+							// 	delta:1
+							// })
+						},
+						fail(e) {
+							// console.log(e)
+						}
+					}, this)
+				} else {
+					uni.showToast({
+						title: '请上传签字内容',
+						icon: 'none'
+					});
+				}
+
+			},
+			uploadFile(event) {
+				uni.uploadFile({
+					url: '/api/file/upload', // 后端api接口
+					filePath: event, // uni.chooseImage函数调用后获取的本地文件路劲
+					name: 'file', //后端通过'file'获取上传的文件对象
+					// formData: this.sendDate,
+					formData: { //后台所需除图片外的参数可以写在这里面 ，单张多张都可
+						requestVO: JSON.stringify(dataForm)
+					},
+					header: {
+						'X-Authorization': uni.getStorageSync('uni-token') ? uni.getStorageSync('uni-token') : ''
+					},
+					success: (res) => {
+						let data = JSON.parse(res.data)
+						var recordId = data.data.recordId
+						var url = data.data.link
+						if (this.type == 1) {
+							const data = {
+								shopownerFileRecordId: recordId,
+								manager: url
+							}
+							uni.$emit("handClick", {
+								data: data
+							});
+							uni.navigateBack({
+								delta: 1
+							})
+						} else {
+							const data = {
+								inspectFileRecordId: recordId,
+								inspector: url
+							}
+							uni.$emit("handClick", {
+								data: data
+							});
+							uni.navigateBack({
+								delta: 1
+							})
+							uni.navigateTo({
+								url:'/pages/report/report?managerUrl='+managerUrl + '&id=' + this.id + '&staffDeptId=' + this.staffDeptId + '&inspectTemplateId=' + this.inspectTemplateId + '&inspectFileRecordId=' + inspectFileRecordId
+							})
+						}
+						uni.hideLoading();
+
+					}
+				});
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.canvas {
+		width: 100%;
+		background-color: #FFFFFF;
+		// position: absolute;
+		z-index: 100;
+		// left: 45px;
+		border: 1px solid #d6d6d6;
+	}
+
+	.btn {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0 40upx 0 40upx;
+		margin-top: 60upx;
+	}
+
+	.cancel-btn {
+		background: #C0C0C0;
+		width: 300upx;
+		text-align: center;
+		height: 80upx;
+		line-height: 80upx;
+	}
+
+	.save-btn {
+		width: 300upx;
+		height: 80upx;
+		text-align: center;
+		color: #FFFFFF;
+		line-height: 80upx;
+		background: #007AFF;
+	}
+
+	// .signa {
+	// 	position: relative;
+	// 	overflow: hidden;
+	// 	background-color: #fbfbfb;
+	// 	height: 100vh;
+	// 	width: 100vw;
+	// 	.canvas {
+	// 		background-color: #FFFFFF;
+	// 		position: absolute;
+	// 		z-index: 9999;
+	// 		left: 45px;
+	// 		border: 1px solid #d6d6d6;
+	// 	}
+	// 	.btn {
+	// 		height: 100vh;
+	// 		position: fixed;
+	// 		background-color: #007AFF;
+	// 		font-size: 32rpx;
+	// 		.cancel-btn {
+	// 			width: 42vh;
+	// 			position: fixed;
+	// 			left: 50rpx;
+	// 			border: 1rpx solid #a9a1a1;
+	// 			transform: rotate(90deg);
+	// 			color: #666;
+	// 			margin-left: -21vh;
+	// 			margin-top: 21vh;
+	// 			height: 65rpx;
+	// 			line-height: 65rpx;
+	// 			border-radius: 3px;
+	// 			text-align: center;
+	// 			justify-content: center;
+	// 		}
+
+	// 		.save-btn {
+	// 			position: absolute;
+	// 			z-index: 999;
+	// 			display: inline-flex;
+	// 			margin-top: 67vh;
+	// 			margin-left: -21vh;
+	// 			transform: rotate(90deg);
+	// 			background: #A91F52;
+	// 			width: 42vh;
+	// 			left: 50rpx;
+	// 			border-radius: 3px;
+	// 			border: 1rpx solid #A91F52;
+	// 			color: #fff;
+	// 			height: 65rpx;
+	// 			line-height: 65rpx;
+	// 			text-align: center;
+	// 			justify-content: center;
+	// 		}
+	// 	}
+	// }
+</style>