LSM_OIL_SITE/packageElectron/components/autograph.vue

<template>
	<view class="sign-contain">
		<view class="sign-top">
			请在空白处签字
		</view>
		<my-sign @init="onSignInit" @end="endConfirm" bgColor="#fff" width="100%" :height="signHeight">
		</my-sign>

		<!-- 按钮 -->
		<view class="signBtn-box">
			<view class="signBtn-item1">
				<button type="default" plain="true" class="lnvestor-btn" hover-class="hover"
					@click="cancelBtn">取消</button>
			</view>
			<view class="signBtn-item2">
				<button type="default" plain="true" class="lnvestor-btn1" hover-class="hover"
					@click="clear">清空重写</button>
				<button type="primary" class="lnvestor-btn2" hover-class="hover"
					@click="submitBtn" :disabled="vsignDisabled">提交签名</button>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/utils/encode'
	export default {
		data() {
			return {
				signHeight: '375px',
				vsignDisabled: true,
				detailsData:{}
			}
		},
		onLoad(option) {
			if(option!='{}'){
				let stationData = JSON.parse(option.data)
				this.detailsData = stationData
			}
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log('屏幕信息', res)
					that.signHeight = (res.windowHeight-130)+"px";
				}
			})
		},
		methods: {
			submitBtn(){
				let File = this.signCtx.canvasToTempFilePath()
				let imageUrl = ''
				File.then(res=>{
					let _that = this
					const JSESSIONID = utils.uuid()
					uni.uploadFile({
						url: 'http://uat.xingoil.com/adminapi/oil-oss/obejct/uploadFile',
						filePath: res,
						formData: {
							ossKey: 'xingyou',
							pathKey: 'publicxingyou',
							encrypt: 'PUBLIC',
						},
						name: 'file',
						header: {
							"Content-Type": "multipart/form-data",
							"Authorization": uni.getStorageSync('Authorization'),
							'dataSources': 'MP',
							"imei": uni.getStorageSync('unionid'),
							"openId": uni.getStorageSync('openid'),
							'JSESSIONID': JSESSIONID,
							'token': utils.md5Salt(JSESSIONID)
						},
						success(e) {
							let obj = JSON.parse(e.data),
								imageUrl = obj.data.publicUrl
								_that.getImage(imageUrl)
						},
						fail(err) {}
					})
					
				})
				
				
				
			},
			getImage(imageUrl){
				this.detailsData.signatureUrl = imageUrl
				let stationInfo = JSON.stringify(this.detailsData)
				uni.redirectTo({
					url: `../reconciliationDetails/index?data=${stationInfo}`
				})
			},
			// 取消
			cancelBtn(){
				uni.navigateBack({
					delta: 1
				})
			},
			// 清除
			clear() {
				this.signCtx.clear();
				this.vsignDisabled = true;
			},
			onSignInit(signCtx) {
				this.signCtx = signCtx
			},
			// 绘画结束触发
			endConfirm() {
				this.vsignDisabled = false;
			}
		}
	}
</script>

<style lang="scss">
	.sign-contain {
		padding-left: 35rpx;
		padding-right: 35rpx;

		.sign-top {
			width: 100%;
			height: 50px;
			line-height: 50px;
			font-size: 16px;
			text-align: center;
			color: #999999;
		}

		.signBtn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.signBtn-item1 {

				// 按钮样式
				.lnvestor-btn {
					margin-top: 11px;
					width: 94px;
					height: 40px;
					border-radius: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 16px;
				}

				.hover {
					border: 1px solid #ccc !important;
					color: #ccc !important;
					font-size: 16px !important;
				}
			}

			.signBtn-item2 {
				display: flex;

				// 按钮样式
				.lnvestor-btn1 {
					margin-top: 11px;
					width: 128px;
					height: 40px;
					border-radius: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 16px;
					margin-right: 16px;
				}

				.lnvestor-btn2 {
					margin-top: 11px;
					width: 128px;
					height: 40px;
					border-radius: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #b99c65;
					font-size: 16px;
				}

				.hover {
					border: 1px solid #ccc !important;
					color: #ccc !important;
					font-size: 16px !important;
				}
			}
		}
	}
</style>