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

<template>
	<view>
		<view class="receipt">
			<view class="title">
				充电收入确认单
			</view>
			<view class="content">
				<view class="item">
					<view class="date">
						日期：{{nowTime}}
					</view>
					<view class="no">
						No.<text style="color: red;">{{obj.invoiceNo }}</text>
					</view>
				</view>
				
				<view class="item company-way">
					<view class="left">
					<view class="name">付款单位</view><view class="text">{{obj.payer  }}</view>
					</view>
					<view class="right">
						<view class="name">付款方式</view><view class="text">{{obj.paymentMethod }}</view>
					</view>
				</view>
				<view class="item company-way">
					<view class="left">
					<view class="name">人民币(大写)</view><view class="text">{{getDX(obj.chargingProfitAmount)}}</view>
					</view>
					<view class="right">
						<view class="name">￥</view><view class="text">{{obj.chargingProfitAmount?showNumJP(obj.chargingProfitAmount):0}}</view>
					</view>
				</view>
				<view class="">
					<text class="reason">
						付款事由
					</text>
					<text class="reason-content">
						{{obj.stationName}}{{showTime(obj.startTime)}}至{{showTime(obj.endTime)}}充电收入
					</text>
				</view>
				
				<view class="infos">
					<view class="infos-item">
						<p>桩主</p>
						<p>(收款人)</p>
					
					</view>
					<view class="infos-item" >
						<image :src="url" style="height: 100%;width: 100%;"></image>
					</view>
					<view class="infos-item"  >
						<p>平台</p>
						<p>核准</p>
						
					</view>
					<view class="infos-item">
						<p>财务</p>
						<p>负责人</p>
						
					</view>
					<view class="infos-item" style="line-height: 64rpx;">
						会计
						
					</view>
					
				</view>
				
			</view>
			
			
		</view>
		
		<view class="sign">
			<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>
	
	    <button :class="{
			submit:this.url,
			submitNo:!this.url
		}" @click="submit()">提交确认单</button>
	</view>
</template>

<script>
	import LSignature from '@/components/l-signature/l-signature.vue'
	import * as WxJsApi from '@/utils/wxJsApi'
	import * as API_Common from '@/apis/common.js'
	
	import {
	
		parseUnixTime,
		DX
	} from '@/utils'
	export default {
		components: {
			LSignature
		
		},
		data() {
			
			return {
				penColor: '',
				penSize: 5,
				url: '',
				suburl: '',
				openSmooth: true,
				nowTime:"",
			}
		},
		props:{
			obj:{},
			
		},
		onReady() {
			
			 
		},
		created() {
			this.nowTime = parseUnixTime(new Date(), '{y}年{m}月{d}日')
			console.log(this.nowTime)
		},
		methods: {
			
			showTime(name) {
				if (!name) {
					return ''
				}
			
					return parseUnixTime(new Date(name), '{y}年{m}月{d}日');
				
				
			},
			getDX(value) {
				if (value) {
					var c = DX(value)
					return c
				} else {
					return '零元整'
				}
			},
			
			//上传图片
			uploadpic() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var formData = {
					photoName:"1.jpg",
					'photoBase64Data': this.url
				};
				// formData.append('photoName', '1.jpg');
				// formData.append('photoBase64Data', this.url);
				
				
				API_Common.uploadBase64(formData).then(response => {
					this.suburl=response.data;
					this.$emit("signsubmit",0,this.suburl)
				}).catch(error => {
					uni.hideLoading()
					uni.showModal({
						title:"提示",
						content:error,
						showCancel:false
					})
				})
				
				 
			},
			submit(){
				if(this.url){
					this.uploadpic()
				}else{
					uni.showToast({
						title: "请签字后,点击保存"
					})
				}
					
			},
			onClick(type) {
				this.url =""
				 if(type == 'openSmooth') {
					 this.openSmooth = !this.openSmooth
					 return
				 }
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							if(res.isEmpty){
								this.url ="";
							}else{
								this.url = res.tempFilePath
								
							}
							// 生成图片的临时路径
							// app | H5 | 微信小程序 生成的是base64
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.infos-item{
		min-width: 20%;
		max-width: 25%;
	}
	page{
		background-color: #f3f4f7;
	}
	@media screen and (min-width: 290px) {
		.receipt{
			margin: 24rpx 0px !important ;
		}
	}
	.receipt{
		background-color: #fff;
		margin: 24rpx 16rpx ;
		padding-bottom: 10px;
		.title{
			font-size: 18px;
			color: #101010;
			text-align: center;
			padding: 20rpx 0;
		}
		@media screen and (min-width: 290px) {
		
				
		  .content{
		  	
		  	margin: 0 0px;
		  	padding: 24rpx 0;
		  	font-size: 2px;
		  	border: 1px solid rgba(51, 51, 51, 1);
		  	.item{
		  		display: flex;
		  		justify-content: space-between;
		  		margin-bottom: 12px;
		  		
		  	}
		  	.left,.right{
		  		display: flex;
		  		.text{
		  			flex: 1;
		  			margin-left: 2px;
		  			border-bottom: 1px solid #101010;
		  		}
		  	}
		  	.right{
		  		min-width: 100px;
		  	}
		  }
		}
		@media screen and (min-width: 320px) {
		  .content{
		  	
		  	margin: 0 12rpx;
		  	padding: 24rpx 12rpx 24rpx 12rpx;
		  	font-size: 24rpx;
		  	border: 1px solid rgba(51, 51, 51, 1);
		  	.item{
		  		display: flex;
		  		justify-content: space-between;
		  		margin-bottom: 12px;
		  		
		  	}
		  	.left,.right{
		  		display: flex;
		  		.text{
		  			flex: 1;
		  			margin-left: 6rpx;
		  			border-bottom: 1px solid #101010;
		  		}
		  	}
		  	.left{
		  		//width: 65%;
		  	}
		  }
		}
		
		.reason-content{
			margin-left:2px;
			border-bottom: 1px solid #101010;
		}
		.infos{
			margin-top: 12px;
			text-align: center;
			display: flex;
			p{
				line-height: 16px;
			}
			
		}
	}
	.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-bottom: #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-right:#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>