recruitment-wechat-uniapp-241012/pages_order/contract/electronicSignature.vue

<template>
	<div class="contain">
		<navbar 
		title="电子签名" 
		v-if="!crosswise"
		leftClick 
		@leftClick="$utils.navigateBack"/>
		
		<view 
		class="electronic-contract"
		:class="{crosswise}">
			<canvas 
			canvas-id="mycanvas" 
			class="mycanvas" 
			:style="{height, width}"
			disable-scroll="true"
			@touchstart="ontouchstart" 
			@touchmove="touchmove"></canvas>
			<view class="title"
			v-if="crosswise">
				请旋转屏幕，按文字方向开始签名
			</view>
		</view>

		<view class="btn-list">
			<view class="uni-color-btn" @click="clear">
				清除
			</view>
			<view class="uni-color-btn" @click="close">
				完成
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				oc: null,
				points: [], //路径点集合
				show: true,
				height : '350rpx',
				width : '700rpx',
				crosswise : false,
				options : {},
			}
		},
		onReady() {
			this.open()
		},
		onLoad(options) {
			this.options = options
		},
		onShow() {
			this.initPM()
		},
		methods: {
			initPM(){
				if(!this.crosswise) return
				let info = uni.getSystemInfoSync();
				console.log(info.windowWidth);
				console.log(info.windowHeight);
				
				
			},
			open() {
				this.initCanvas();
			},
			close() {
				uni.canvasToTempFilePath({
					canvasId: "mycanvas",
					success: (res) => {
						console.log(res.tempFilePath);
						const canvas = res.tempFilePath;
						
						uni.setStorageSync('electronicSignature', canvas)
						let o = this.options
						uni.navigateBack(-1)
					},
					fail(error) {
						console.error("转化图片错误!", error)
					}
				});
			},

			initCanvas() {
				this.oc = uni.createCanvasContext("mycanvas");
			},

			ontouchstart(e) {
				this.points = []

				const startX = e.changedTouches[0].x;
				const startY = e.changedTouches[0].y;

				let startPoint = {
					X: startX,
					Y: startY,
				};
				this.points.push(startPoint);
			},

			touchmove(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY,
				};
				this.points.push(movePoint);
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
			},

			draw() {
				if (this.points.length < 2) return;

				this.oc.beginPath();
				this.oc.moveTo(this.points[0].X, this.points[0].Y);

				// for (let i = 1; i < this.points.length; i++) {
				// 	let point = this.points[i];
				// 	this.oc.lineTo(point.X, point.Y);
				// }
				
				this.oc.lineTo(this.points[1].X, this.points[1].Y);
				
				this.points.shift()

				this.oc.setStrokeStyle('#000000');
				this.oc.setLineWidth(5);
				this.oc.setLineCap('round');
				this.oc.setLineJoin('round');
				this.oc.stroke();
				this.oc.draw(true);
			},
			//清空画布
			clear() {
				let that = this;
				uni.getSystemInfo({
					success: (res) => {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.oc.clearRect(0, 0, canvasw, canvash);
						that.oc.draw(true);
					},
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.contain {
		position: relative;
		.mycanvas {
			background-color: #fff;
			border-radius: 20rpx;
		}
		.electronic-contract{
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 25rpx;
		}
		.crosswise{
			.title{
				writing-mode: vertical-lr; /* 垂直从上到下 */
				transform: skewY(180deg); /* 颠倒文本 */
				display: inline-block; /* 需要设置为内联块 */
			}
		}
		.btn-list {
			display: flex;
			padding: 20rpx;
			justify-content: space-around;

			.uni-color-btn {
				border-radius: 10rpx;
				margin: 0;
				padding: 20rpx 40rpx;
			}
		}
	}
</style>