jp-charge/pagesFinance/user/withdrawal/signature.vue

<template>
	<view class="sign">
		<ujp-navbar title="签字"></ujp-navbar>
		
		<p>请在下方空白区域使用正楷字体进行电子签名</p>
	
		<view class="signature">
			<l-signature 
			 
			 disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
				:openSmooth="openSmooth"></l-signature>
		</view>
		<view class="clean-save">
			<view class="clean" @click="onClick('clear')">
				<img src="../../../assets/img/riLine-eraser-line.svg" alt="">
				<view class="">
					清除
				</view>
			</view>
			<view class="save" @click="onClick('save')">
				<img src="../../../assets/img/riLine-eraser-line.svg" alt="">
				<view class="">
					保存并提交
				</view>
			</view>
			
		</view>
		<view  v-if="info&&info.signUrl" style="margin-top: 20px;">使用上一次签字</view>
		<img :src="info.signUrl" v-if="info&&info.signUrl" style="width: 100%;border: 1px solid;">
		
		<button v-if="info" :class="{
			submit:info.signUrl,
			submitNo:!info.signUrl
		}"  @click="submit()">提交确认单</button>
	</view>
</template>

<script>
	import LSignature from '@/components/l-signature/l-signature.vue'
		import * as API from '@/apis/finance.js'
		import * as API_Common from '@/apis/common.js'
		import {
		
			parseUnixTime,
		
		} from '@/utils'
	export default {
		data() {
			return {
				init:true,
				info: null,
				detailList:null,
				penColor: '',
				penSize: 5,
				url: '',
				suburl: '',
				openSmooth: true,
				nowTime:"",
				serverUrl: "",
				token: "",
				uuid:"",
			}
		},onLoad(op){
			//this.userInfo=this.carhelp.getPersonInfo()
			this.uuid=op.uuid;
			this.id=op.id
			
			// alert(this.carhelp.getToken({
			// 						jp_identity:
			// 					}))
		},
		onReady() {
			this.getInfo()
		},
		methods: {
			
			//上传图片
			uploadpic() {
				uni.showLoading({
					title: "图片上传中",
					mask: true,
				})
				var formData = {
									"photoName":"signature.png",
									"photoBase64Data": this.url
								}
				// formData.append('photoName', '1.jpg');
				// formData.append('photoBase64Data', this.url);
				
				
				API_Common.uploadBase64Json(formData).then(response => {
					//this.suburl=response.data;
					this.info.status=0;
					 this.info.signUrl=response.data;
					//this.$emit("signsubmit",0,this.suburl)
					this.submitFrom()
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						title:"提示",
						content:error,
						showCancel:false
					})
				})
				
				 
			},
			submit(){
				if(this.info.signUrl){
					this.submitFrom()
				}else{
					uni.showToast({
						title: "请签字后提交"
					})
				}
			},
			
			submitFrom(){
				
				
				uni.showLoading({
					title: "提交中...",
					mask: true,
				})
				
				//this.info.status=5;
				//var str=JSON.stringify();
				API.applyWithdrawByAccounting({
					
					record:this.info,
					detailList:this.detailList
				
				}).then((res) => {
					
					this.carhelp.set("withdrawRecord",{
						uuid:this.uuid,
					})
					this.id=res.data;
					uni.hideLoading()
					uni.redirectTo({
						url:"/pagesFinance/user/applyResult?value="+this.info.applicationAmount
					})
					
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						title:"提示",
						content:error,
						showCancel:false
					})
				})
			},
			getBase64(url,callback){
			 //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建 <img> 省去了 append()，也就避免了文档冗余和污染
			 var Img = new Image(),
			  dataURL='';
			
			 Img.src=url;
			 Img.onload=function(){ //要先确保图片完整获取到，这是个异步事件
			 
			  var canvas = document.createElement("canvas"), //创建canvas元素
			   width=Img.width, //确保canvas的尺寸和图片一样
			   height=Img.height;
			  canvas.width=width;
			  canvas.height=height;
			  canvas.getContext("2d").drawImage(Img,0,0,width,height); //将图片绘制到canvas中
			  dataURL=canvas.toDataURL('image/jpeg'); //转换图片为dataURL
			  
			     callback?callback(dataURL):null; //调用回调函数
			
			 };
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.getWithdrawInfoByAccounting(this.id).then((res) => {
					
					this.info=res.data.record
				
					this.detailList=res.data.detailList
					
					uni.hideLoading()
					
				
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			onClick(type) {
				this.url =""
				 if(type == 'openSmooth') {
					 this.openSmooth = !this.openSmooth
					 return
				 }
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							if(res.isEmpty){
								this.url ="";
							}else{
								this.url = res.tempFilePath
							
								console.log(this.url)
								// 生成图片的临时路径
								// app | H5 | 微信小程序 生成的是base64
								//this.uploadpic()
								uni.showLoading({
									title: '上传中'
								});
								this.token=this.carhelp.getToken();
								this.serverUrl=process.car.BASE_URL;
								var time= "";//parseUnixTime(new Date(), '{y}{m}{d}-{h}-{i}');

								uni.request({
									url: this.serverUrl + "/uploadBase64Json",
									method: "POST",
									header: {
										Authorization: this.token
									},
									data: {
										"photoName":"signature"+time+".png",
										"photoBase64Data": this.url
									},
									success: (res) => {
										uni.hideLoading();
										
										console.log(res)
										
										if(res.data.result){
											uni.showToast({
												title: '签名保存成功!',
												duration: 2000
											});
											
											this.info.status=0;
											 this.info.signUrl=res.data.data;
											//this.$emit("signsubmit",0,this.suburl)
											this.submitFrom()
										}
										else{
											uni.showToast({
												title: '签名保存失败!'+ JSON.stringify(res),
												duration: 2000
											});
										}
									}
								})
							}
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			}
		}
	}
</script>
<style lang="scss" scoped>
.sign{
		margin: 32rpx 16rpx ;
		font-weight: bold;
		line-height: 20px;
		p{
			color: rgba(16, 16, 16, 1);
		}
		.signature{
			background-color: #fff;
			margin-top: 8px;
			height: 160px;
			border: #c2c2c2  1px solid;
		}
		.clean-save{
			background-color: #fff;
			display: flex;
			.clean,.save{
				width: 50%;
				text-align: center;
				color: #252525;
				line-height: 40px;
			}
			.clean,.save{
				border:#c2c2c2  1px solid;
				display: flex;
				justify-content: center;
				img{
					margin-right: 4px;
				}
			}
		}
	}
	.submit{
		   border-radius: 8px;
		   background-color: rgba(24, 90, 198, 1);
		   color: rgba(255, 255, 255, 1);
		   font-size: 16px;
		   line-height: 44px;
		   margin: 0 16px;
		   position: fixed;
		   bottom: 12px;
		   left: 0;
		   right: 0;
	}
	.submitNo{
		   border-radius: 8px;
		   background-color: #185ac6a8;
		   color: rgba(255, 255, 255, 1);
		   font-size: 16px;
		   line-height: 44px;
		   margin: 0 16px;
		   position: fixed;
		   bottom: 12px;
		   left: 0;
		   right: 0;
	}
</style>