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>
</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 {
				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
			this.getInfo()
			// alert(this.carhelp.getToken({
			// 						jp_identity:
			// 					}))
		},
		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
					})
				})
				
				 
			},
			submitFrom(){
				
				
				uni.showLoading({
					title: "提交中...",
					mask: true,
				})
				
				//this.info.status=0;
				
				//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
					})
				})
			},
			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;
				}
			}
		}
	}
</style>