salaryAccounting/pages/sign/sign.vue

<template>
	<view class="sing-box">
		<view class="canvas-box">
			<canvas
				:width="width * scale"
				:height="height * scale"
				:style="{ width: width, height: height }"
				:disable-scroll="true"
				canvas-id="cansignature"
				id="cansignature"
				@touchstart="handleTouchStart"
				@touchMove="handleTouchMove"
				@touchCancel="handleTouchEnd"
				@touchEnd="handleTouchEnd"
			></canvas>
		</view>
		<view class="tips">请在空白区域内横向签字</view>
		<view class="button-box">
			<view @click="onClickClear" class="clear-button">清空</view>
			<view @click="onClickAffirm" class="affirm-button">确认</view>
		</view>
	</view>
</template>

<script>
import Signature from 'mini-smooth-signature';
import baseUrl from '@/api/baseUrl.js';
import { signatureOfMeetingMinutesApi } from '@/api/create.js';
export default {
	data() {
		return {
			signature: '',
			width: '',
			height: '',
			scale: 1,
			imgurl: '',
			
		};
	},
	onLoad(obj) {
		this.$setNavigationBar('手写签名');
		this.initSignature();
		dd.getSystemInfo({
			success: res => {
				// console.log(res)
				this.width = res.windowWidth;
				this.height = res.windowHeight;
			}
		});
	},
	methods: {
		// 点击清除
		onClickClear() {
			setTimeout(() => {
				this.initSignature();
			}, 10);
		},
		// 点击确认
		onClickAffirm() {
			uni.showLoading({ title: '提交中', mask: true });
			this.signature.getImagePath().then(res => {
				var pages = getCurrentPages();
				var previousPage = pages[pages.length - 2];
				uni.uploadFile({
					url: baseUrl + '/file/upload',
					fileName: 'file',
					header: {
						Authorization: JSON.parse(uni.getStorageSync('token'))
					},
					fileType: 'image', // 必填
					filePath: res,
					success: async res => {
						let data = JSON.parse(res.data);
						if (data.code == 200) {
							uni.hideLoading();
							// 把值给前一个页面中的data
							// previousPage.$vm.signatureAddress = data.data
							console.log(data, '地址');
							let obj = {
								id: '',
								meetingMinutesSign: ''
							};
							obj.id = this.meetingId;
							obj.meetingMinutesSign = data.data;
							let signRes = await signatureOfMeetingMinutesApi(obj);
							if (signRes.code == 200) {
								uni.showToast({
									title: '签字成功',
									duration: 2000
								});
							} else {
								uni.showToast({
									title: '服务器错误，有结果！'
								});
							}

							uni.navigateBack();
						} else {
							uni.showToast({ title: data.msg, icon: 'error' });
						}
					},
					fail: err => {
						uni.showToast({ title: err, icon: 'error' });
					}
				});
			});
		},
		// 初始化
		initSignature() {
			const ctx = uni.createCanvasContext('cansignature');
			const _this = this;
			this.signature = new Signature(ctx, {
				width: _this.width,
				height: _this.height,
				scale: 1,
				color: '#000000',
				bgColor: '#ffffff',
				getImagePath: () => {
					return new Promise(resolve => {
						ctx.toTempFilePath({
							success: res => resolve(res.filePath)
						});
					});
				},
				toDataURL: function(res) {
					return this;
				}
			});
		},
		// 绑定touchstart事件
		handleTouchStart(e) {
			const pos = e.touches[0];
			this.signature.onDrawStart(pos.x, pos.y);
		},
		// 绑定touchmove事件
		handleTouchMove(e) {
			const pos = e.touches[0];
			this.signature.onDrawMove(pos.x, pos.y);
		},
		// 绑定touchend/touchcancel事件
		handleTouchEnd() {
			this.signature.onDrawEnd();
		}
	}
};
</script>

<style lang="scss" scoped>
.sing-box {
	width: 100vw;
	height: 100vh;
	// border-bottom: 2rpx dashed rgba(94,110,254,0.20);
	padding: 0 0rpx 0 0;
	box-sizing: border-box;
	display: flex;
	overflow: hidden;
	.tips {
		position: fixed;
		right: 0;
		top: 0;
		z-index: 100000000000;
		// top: 200rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: LEFT;
		color: #b9b9c2;
		line-height: 40rpx;
		transform: rotateZ(90deg) translateX(60%) translateY(-250%);
	}
	.label {
		width: 150rpx;
		color: #002567;
		font-size: 28rpx;
		line-height: 70rpx;
		font-weight: 500;
	}
	.canvas-box {
		position: relative;
		z-index: 0;
		width: 100%;
		height: 100%;
	}
	.button-box {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10000;
		display: flex;
		transform: rotate(90deg) translateX(-50%) translateY(80%);
		.clear-button {
			width: 142rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #ffffff;
			border: 2rpx solid #2976ff;
			color: #2976ff;
			font-size: 24rpx;
			border-radius: 10rpx;
			text-align: center;
			box-sizing: border-box;
			margin-right: 18rpx;
		}
		.affirm-button {
			width: 142rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #2976ff;
			border-radius: 10rpx;
			text-align: center;
			color: #ffffff;
			font-size: 24rpx;
		}
	}
}
</style>