huazhiyu/pages/my/mySign.vue

<template>
<view class="qianyue">
	<div class="xieyi-content" v-html="content"></div>
	<div>
		<u-form :model="form" ref="uForm" :rules="rules">
			<u-form-item label="姓名" prop="bank_username" border-bottom required>
				<u-input :border="false" placeholder="请输入姓名" v-model="form.bank_username" />
			</u-form-item>
			<u-form-item :label-width="100" label="银行卡姓名" prop="bank_realname" border-bottom required>
				<u-input :border="false" placeholder="请输入银行卡姓名" v-model="form.bank_realname" />
			</u-form-item>
			<u-form-item :label-width="85" label="银行卡号" prop="bank_no" border-bottom required>
				<u-input :border="false" placeholder="请输入银行卡号" v-model="form.bank_no" />
			</u-form-item>
			<u-form-item :label-width="70" label="开户行" prop="bank_address" border-bottom required>
				<u-input :border="false" placeholder="请输入开户行" v-model="form.bank_address" />
			</u-form-item>
			<u-form-item label="支行" prop="bank_sub_address" border-bottom required>
				<u-input :border="false" placeholder="请输入支行" v-model="form.bank_sub_address" />
			</u-form-item>
			<u-form-item label="签字" prop="sign_image" border-bottom required>
				<view v-if="!form.sign_image" class="sign-btn" @click="show=true">点击签名</view>
				<image v-else style="width: 60vw;" mode="aspectFit" @click="show=true" :src="form.sign_image"></image>
			</u-form-item>
		</u-form>
		
	</div>
	<view class="saveBtn" @click="submitSign">提交</view>
	<u-toast ref="uToast"></u-toast>
	<u-popup :show="show" mode="bottom"  @close="show=false" round="10" >
		<view style="width: 100vw; height: 60vh;">
			<l-signature disableScroll backgroundColor="#ddd" 
			ref="signatureRef"  
			:landscape="true"
			:openSmooth="openSmooth" ></l-signature>
		</view>
		<view class="btn">
			<button @click="onClick('clear')">清空</button>
			<button @click="onClick('undo')">撤消</button>
			<button @click="onClick('save')">保存</button>
		</view>
	</u-popup>
</view>
</template>

<script>
import {getWarehouseList,getUserInfo,privacyPolicy, confirmSign} from '@/common/api.js'
import {getToken} from '@/common/auth.js'
import {updateUserInfo} from '@/common/api.js'
var base64Img = require('base64-img');
export default{
	components:{
		
	},
	data(){
		return{
			form: {
				bank_username: '',
				bank_realname: '',
				bank_no: '',
				bank_address: '',
				bank_sub_address: '',
				sign_image: '',
			},
			rules: {
				bank_username: [
					{ 
						required: true, 
						message: '请输入姓名', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				bank_realname: [
					{ 
						required: true, 
						message: '请输入银行卡姓名', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				bank_no: [
					{ 
						required: true, 
						message: '请输入银行卡号', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				bank_address: [
					{ 
						required: true, 
						message: '请输入开户行', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				bank_address: [
					{ 
						required: true, 
						message: '请输入开户行', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
				bank_sub_address: [
					{ 
						required: true, 
						message: '请输入支行', 
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change','blur'],
					}
				],
			},
			showList:true,
			show:false,
			content: "<p class=\"MsoNormal\" style=\"text-align: center; \"><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\">隐私协议<\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\"><o:p><\/o:p><\/span><\/p><p class=\"MsoNormal\" style=\"text-align: center;\"><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\">提示条款<\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\"><o:p><\/o:p><\/span><\/p><p class=\"MsoNormal\"><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\">珞嘉<\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\"><font face=\"宋体\">科技有限公司运营并管理的<\/font><font face=\"Calibri\">H5<\/font><font face=\"宋体\">“<\/font><\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\">珞嘉<\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\"><font face=\"宋体\">科技商城<\/font><font face=\"宋体\">”<\/font><font face=\"Calibri\">(<\/font><font face=\"宋体\">以下称<\/font><\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\">珞嘉<\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\"><font face=\"宋体\">科技商城<\/font><font face=\"Calibri\">)<\/font><font face=\"宋体\">尊重并保护所有使用<\/font><\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\">珞嘉<\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\">科技商城平台享受各项互联网服务用户的隐私权，<\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\">珞嘉<\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\">科技商城会按照本声明的规定使用和披露用户的个人隐私及非个人隐私。<\/span><span style=\"mso-spacerun:'yes';font-family:宋体;mso-ascii-font-family:Calibri;\r\nmso-hansi-font-family:Calibri;mso-bidi-font-family:'Times New Roman';font-size:10.5000pt;\r\nmso-font-kerning:1.0000pt;\"><o:p><\/o:p><\/span><\/p><p class=\"MsoNormal\"><span style=\

		}
	},
	methods:{
		submitSign(){
			console.log('submit')
			console.log(this.$refs.uForm.validate,'submit')
			if(!this.form.bank_address||!this.form.bank_no||!this.form.bank_realname||!this.form.bank_sub_address||!this.form.bank_username||!this.form.sign_image){
				return
			}
			confirmSign(this.form).then(res => {
				if(res.code === 1){
					this.$refs.uToast.show({
						message:'签约信息已提交'
					})
					const tem = setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
						clearTimeout(tem)
					},1000)
					
				}
			})
			// this.$refs.uForm.validate(valid => {
			// 	debugger
			// 	console.log(valid, 'ca')
			// 	if (valid) {
					
			// 	} else {
			// 		console.log('验证失败');
			// 	}
			// });
			
		},
		base64toBlob(dataurl) {
		    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
		        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
		  
			while (n--) {
		        u8arr[n] = bstr.charCodeAt(n);
		    }
		    return new Blob([u8arr], { type: mime });
		},
		onClick(type) {
			console.log(type, 'type')
			 if(type == 'openSmooth') {
				 this.openSmooth = !this.openSmooth
				 return
			 }
			if (type == 'save') {
				this.$refs.signatureRef.canvasToTempFilePath({
					success: (res) => {
						
						if(res.isEmpty){
							uni.$u.toast("请签名")
							return;
						}
						var path = URL.createObjectURL(this.base64toBlob(res.tempFilePath))
						uni.uploadFile({
							url: this.baseUrl+'api/common/upload', 
							filePath: path,
							name: 'file',
							header:{
								token:getToken()
							},
							formData: {
							},
							success: (res) => {
								const data = JSON.parse(res.data)
								if(data.code==1){
									this.form.sign_image = data.data.fullurl
									console.log(data, 'this.form.sign_image')
									this.show = false
								}else{
									uni.$u.toast(JSON.parse(res.data).msg)
									
								}
							},
							fail: (res) => {
								console.log(res,"rrr")
							}
						});
					}
				})
				return
			}
			if (this.$refs.signatureRef)
				this.$refs.signatureRef[type]()
		},
		
		saveSignPic(picurl){
			console.log(picurl)
			updateUserInfo({sign_image:picurl}).then(res=>{
				console.log(res,"ooooo")
				if(res.code==1){
					uni.switchTab({
						url:"/pages/qianyue/qianyue"
					})
				}
			})
		}
	},
	onShow(){
		
		this.getUserInfoHandle()
		this.show = false
	},
	onLoad() {
	},
	onReady() {
	},
}
</script>

<style lang="scss" scoped>
.qianyue{
	padding:24rpx;
	.banner{
		height: 260rpx;
		margin-bottom: 10rpx;
		// margin: -200rpx auto 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.u-swiper{
			background-color: #fff !important;
		}
	}
	.qgList{
		.qgItem{
			height:286rpx;
			width: 100%;
			position: relative;
			overflow: hidden;
			margin-bottom:20rpx;
			.bgPic{
				width:100%;
			}
			.qgInfo{
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				height: 100%;
				width: 100%;
				text-align: center;
				background: rgba(0,0,0,.6);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				z-index:99;
				.conpany{
					display: flex;
					align-items: center;
					color: rgb(193, 193, 193);;
					.line{
						height:4rpx;
						width:100rpx;
						background-color: rgb(193, 193, 193);;
					}
					.text{
						font-size: 30rpx;
						color: rgb(193, 193, 193);
						margin:0 10rpx;
					}
				}
				.time{
					font-size: 38rpx;
					color: #fff;
					margin-top: 26px;
				}
			}
			
		}
	}
}
.gobottom{
	color: rgba(165, 165, 165, 0.5);
	font-size: 30rpx;
	margin-top:20rpx;
	text-align: center;
}
.istruction{
	text-align: center;
	color:#9f751f;
	margin-top:80rpx;
}
.xieyi{
	border:1px solid $base;
	color:$base;
	border-radius: 10rpx;
	width:40%;
	text-align: center;
	margin:30rpx auto;
	padding:10rpx 0;
}
.sign{
	border:1px solid $base;
	color:$base;
	border-radius: 10rpx;
	width:40%;
	text-align: center;
	margin:30rpx auto;
	padding:10rpx 0;
}

.btn{
	  // transform: rotate(90deg);
	  display: flex;
	  position: fixed;
	  bottom:10px;
	  width:100%;
	  button{
		  flex:1;
		  margin:0 10rpx;
		  background-color: $base;
		  color:#fff;
		  font-size: 28rpx;
	  }
   }
   .sign-btn{
	   width: 80px;
	   height: 30px;
	   line-height: 30px;
	   background-color: #fff;
	   text-align: center;
   }
   .saveBtn{
   	background: rgb(35, 96, 48);
   	color: rgb(255, 255, 255);
   	border: 1px solid rgb(35, 96, 48);
   	overflow: hidden;
   	font-size: 28rpx;
   	height: 44px;
   	line-height: 44px;
   	text-align: center;
   	border-radius: 10rpx;
   	margin-top:100rpx;
   }
</style>