huazhiyu/pages/my/mySign.vue

<template>
<view class="qianyue">
	<div v-if="showXieyi&&content&&!userInfo.sign_image" style="position: relative;" class="xieyi-content" v-html="content">
		
	</div>
	<view v-if="showXieyi&&content&&!userInfo.sign_image" class="interval">{{intervalTime}}</view>
	<u-icon v-if="showXieyi&&content&&intervalTime===0&&!userInfo.sign_image" class="close" name="close" color="#909399" size="28" @click="showXieyi=false"></u-icon>
	<div v-if="!showXieyi||userInfo.sign_image">
		<view v-if="userInfo.sign_status === 1" style="text-align: center;color:green;font-weight: 600;width: 100%;">已签约</view>
		<view v-if="userInfo.sign_status === 2" style="text-align: center;color:red;font-weight: 600;width: 100%;">审核不通过</view>
		<view v-if="userInfo.sign_status === 0&&userInfo.sign_image" style="text-align: center;color:grey;font-weight: 600;width: 100%;">审核中</view>
		<u-form :model="form" ref="uForm" :rules="rules">
			<u-form-item label="姓名" prop="bank_username" border-bottom required>
				<u-input :border="false" :disabled="isEdit" 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" :disabled="isEdit" 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" :disabled="isEdit" 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" :disabled="isEdit" placeholder="请输入开户行" v-model="form.bank_address" />
			</u-form-item>
			<u-form-item label="支行" prop="bank_sub_address" border-bottom required>
				<u-input :disabled="isEdit" :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="showSign">点击签名</view>
				<image v-else style="width: 60vw;" mode="aspectFit" @click="showSign" :src="form.sign_image"></image>
			</u-form-item>
		</u-form>
		
	</div>
	<view v-if="!showXieyi||userInfo.sign_image">
		<view v-if="!userInfo.sign_image||userInfo.sign_status === 2" class="saveBtn" @click="submitSign">提交</view>
	</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{
			userInfo: {}, // sign_status 1已签  2 审核拒绝   0 且sign_image不为空  审核中
			showXieyi: true,
			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: '',
			intervalTime: 15,
		}
	},
	computed:{
		isEdit(){
			let val = false;
			if(this.userInfo.sign_status === 1){
				val = true
			}else if(this.userInfo.sign_status === 0&&this.userInfo.sign_image){
				val = true
			}
			return val
		}
	},
	methods:{
		showSign(){
			if(this.userInfo.sign_status === 1||(this.userInfo.sign_status === 0&&this.userInfo.sign_image)){
				return;
			}
			this.show = true;
		},
		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(){
		getUserInfo().then(res=>{
			this.userInfo =Object.assign(({},this.userInfo,res.data))
			if(this.userInfo.sign_image){
				this.form = {
					bank_username: this.userInfo.bank_username,
					bank_realname: this.userInfo.bank_realname,
					bank_no: this.userInfo.bank_no,
					bank_address: this.userInfo.bank_address,
					bank_sub_address: this.userInfo.bank_sub_address,
					sign_image: this.userInfo.sign_image,
				}
			}
		})
		privacyPolicy({id:2}).then(res => {
			console.log(res, 'privacyPolicy');
			this.content = res.data.content;
		})
		const tem = setInterval(() => {
			if(this.intervalTime>0){
				this.intervalTime --;
			}else{
				clearInterval(tem)
			}
		},1000)
		
		this.getUserInfoHandle()
		this.show = false
	},
	onLoad() {
	},
	onReady() {
	},
}
</script>

<style lang="scss" scoped>
.interval{
	position: fixed;
	top: 40px;
	left: 5px;
	border-radius: 50%;
	height: 40px;
	width: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: red;
	font-size: 25px;
}
.close{
	top: 45px;
	right: 15px;
	position: fixed;
	z-index: 99;
}
.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>