签名

pagesFinance/user/withdrawal/signReceipt.vue

@@ -0,0 +1,278 @@
+<template>
+	<view>
+		<u-navbar title="收据签字"></u-navbar>
+		<view class="receipt">
+			<view class="title">
+				收据
+			</view>
+			<view class="content">
+				<view class="item">
+					<view class="date">
+						日期：2022年10月1日
+					</view>
+					<view class="no">
+						No.<text style="color: red;">2022100001</text>
+					</view>
+				</view>
+				
+				<view class="item company-way">
+					<view class="left">
+					<view class="name">交款单位</view><view class="text">湖北荆鹏软件开发有限公司</view>
+					</view>
+					<view class="right">
+						<view class="name">收款方式</view><view class="text">银行转账</view>
+					</view>
+				</view>
+				<view class="item company-way">
+					<view class="left">
+					<view class="name">人民币(大写)</view><view class="text">贰仟元整</view>
+					</view>
+					<view class="right">
+						<view class="name">￥</view><view class="text">2000.00</view>
+					</view>
+				</view>
+				<view class="">
+					<text class="reason">
+						收款事由
+					</text>
+					<text class="reason-content">
+						王姐的个人充电桩2022年9月1日至9月20日充电提成
+					</text>
+				</view>
+				
+				<view class="infos">
+					<view class="infos-item">
+						<p>桩主</p>
+						<p>(收款人)</p>
+					
+					</view>
+					<view class="infos-item" style="width:140rpx ;">
+						<image :src="url" style="width: 140rpx;height: 100%;"></image>
+					</view>
+					<view class="infos-item"  >
+						<p>平台</p>
+						<p>核准</p>
+						
+					</view>
+					<view class="infos-item" style="margin-left: 75rpx;">
+						<p>财务</p>
+						<p>负责人</p>
+						
+					</view>
+					<view class="infos-item" style="margin-left: 75rpx;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">提交电子收据</button>
+	</view>
+</template>
+
+<script>
+	import LSignature from '@/components/l-signature/l-signature.vue'
+	
+	export default {
+		components: {
+			LSignature
+		
+		},
+		data() {
+			
+			return {
+				penColor: '',
+				penSize: 5,
+				url: '',
+				openSmooth: true,
+			}
+		},
+		methods: {
+			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>
+	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 6rpx;
+		  	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;
+   }
+</style>