mkw-visit-wx/pages/bd/signpic.vue

<template>
	<view class="containers">
		
		<view class="signwrap">
			<l-signature disableScroll backgroundColor="#ddd" ref="signatureRef" :penColor="penColor"
				:penSize="penSize"></l-signature>
			<view class="signarea">签字区</view>
		</view>
		<view class="signbtns justify-evenly">
			<button type="primary" @click="onClick('clear')">清空</button>
			<button type="primary" @click="onClick('undo')">撤消</button>
			<button type="primary" @click="onClick('save')">保存</button>
			<!-- <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button> -->
		</view>
	</view>
</template>

<script>
	import {
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				id: "",
				title: 'Hello',
				penColor: 'black',
				penSize: 5,
				urls: '',
				accept_admin_sign: "",
				picForm: {},
				host: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.host = this.util.HOST
			this.loadDetail()
		},
		methods: {
			onClick(type) {
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							if (res.isEmpty) {
								return
							}
							// 生成图片的临时路径
							// app | H5 | 微信小程序 生成的是base64
							this.urls = res.tempFilePath
							base64ToPath(this.urls)
								.then(path => {
									this.uploadImg(path)
								})
								.catch(error => {
									console.error(error)
								})
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},

			uploadImg(url) {
				let that = this
				uni.uploadFile({
					url: this.host + '/api/admin/upload-file',
					filePath: url,
					name: 'file',
					header: {
						token: uni.getStorageSync('userInfo_BD_token').token
					},
					success: (res) => {
						console.log("respic", res.data)
						let data = JSON.parse(res.data)
						that.picForm.accept_admin_sign = data.response ? data.response.id : data.id
						console.log("that.accept_admin_sign", that.picForm)
						that.picSubmit()
					}
				});
			},
			loadDetail() {
				let that = this
				console.log("that.id", that.id)
				this.util.request({
					api: '/api/admin/visit/show',
					method: "get",
					requestType: 'bd',
					data: {
						id: that.id
					},
					utilSuccess: function(res) {
						that.picForm = res
					},
					utilFail: function(res) {
						uni.showToast({
							title: res.errmsg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			picSubmit() {
				let that = this
				// return
				this.util.request({
					api: '/api/admin/visit/save',
					method: "POST",
					requestType: 'bd',
					data: that.picForm,
					utilSuccess: function(res) {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
						uni.navigateTo({
							url: '/pages/bd/record?type=myrecord'
						})
					},
					utilFail: function(res) {
						uni.showToast({
							title: res.errmsg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},

		}
	}
</script>

<style scoped>
	.signwrap {
		width: 100%;
		height: 100vh;
		position: relative;
		background-color: #ddd;
	}
	.signarea{
		    position: absolute;
		    top: 47%;
		    right: 0%;
		    transform: translate(-50%, -50%),;
		    z-index: 99;
		    font-size: 32px;
		    transform: rotate(90deg);
		    color: #ddd;
	}
	/deep/ .lime-signature,
	.lime-signature__canvas {
		height: 80% !important;
		width: 80% !important;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0, -50%);
		background: #fff !important;
		z-index: 99
	}

	.signbtns {
		position: absolute;
		top: 50%;
		left: -8px;
		width: 100%;
		flex-direction: column;
		height: 80%;
		z-index: 9;
		transform: translate(0, -50%);
	}

	.signbtns button {
		background: #fff;
		border: none;
		width: 25%;
		margin-top: 20rpx;
		/* padding: 40rpx; */
		color: #333;
		transform: rotate(90deg);
	}
</style>