zc_saas_h5/pages2/register/bind.vue

<template>
	<view style="height: 100%;">
		<image mode="widthFix" src="/pages2/static/login_bg.jpg" class="full_img"></image>
		<u-navbar title="关联学员身份" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff"></u-navbar>
		<view style="padding: 30rpx;">
			<view class="login_box">
				<u-form :model="form" ref="uForm" >
					<u-form-item ><u-input  v-model="form.realname" placeholder="学员姓名"/></u-form-item>
					<u-form-item ><u-input v-model="form.idCard" type="idcard"  placeholder="学员身份证号"/></u-form-item>
				</u-form>
			</view>	
			<button :disabled="isUse" class="loginBtn" @click="jumpBind">
				确定
			</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			code: '',
			form:{
				realname:'',
				idCard:''
			},
			codeTips: '',
			read:'',
			scanCode: '', // 获取扫码的路径最后面的6位标识码
		};
	},
	mounted() {},
	methods: {
		jumpBind(){
			let that = this
			
			if(!this.form.realname.trim()){
				this.$u.toast('请输入学员姓名');
				return 
			}
			if(!this.form.idCard.trim()){
				this.$u.toast('请输入身份证卡号');
				return 
			}
			
			let IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
			let IDre15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
			
			if( !IDRe18.test( this.form.idCard ) && !IDre15.test( this.form.idCard )  ) {
				this.$u.toast('请输入格式正确的身份证卡号');
				console.log(' 验证未通过 ')
				return 
			}
			
			
			this.$set(this.form,'realname',this.form.realname.trim()) //去除姓名两头空格
			
			that.isUse = true
			// 绑定身份证号信息 /app/user/bind_idcard
			that.$api.bindId(this.form).then(
				res => {
					that.isUse = false
					if (res.data.code == 200) {
						uni.setStorageSync('user_account',uni.getStorageSync('user_account_temp'));
						uni.setStorageSync('token',uni.getStorageSync('token_temp'));
						uni.removeStorageSync('user_account_temp') //移除临时账号
						uni.removeStorageSync('token_temp') //移除临时token
						if (this.scanCode) { // pc扫码注册成功后提交/跳转
							this.$api.scanLoginCheck({
								scanCode: this.scanCode
							}).then((res) => {
								if (res.data.code == 200) {
									uni.navigateTo({
										url: '/pages4/login/pcLoginSuccess'
									})
								}
							})
						} else { // 跳转到首页是原来的逻辑
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
						
						this.$method.setUuid(new Date().valueOf() + "")
						that.$api.getInfo().then(resdata => {
							if(resdata.data.code == 200){
								that.$store.state.userInfo = resdata.data.data;
							}
							
						});
					} else {
						that.$u.toast(res.data.msg);
					}
				},
				err => {
					that.isUse = false
				}
			);
			
		},
	},
	onLoad(option) {
		console.log('注册：', option.scanCode)
		let that = this;
		option.scanCode && (this.scanCode = option.scanCode)
		uni.removeStorageSync('user_account') //移除临时账号
		uni.removeStorageSync('token')
		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
				that.code = loginRes.code;
			}
		});
	}
};
</script>

<style scoped>
	.wxBtn{
		position: fixed;
		bottom: 10%;
		width: 100%;
		left: 0;
	}
	/deep/ .wxBtn button::after{
	    border: none; 
	}
	.loginBtn{
		width: 526rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #015EEA, #00C0FA);
		box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
		opacity: 0.6;
		border-radius: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin: 40rpx auto;
	}
	
	
	.wxloginBtn{
		background: url("/static/loginBtn.png") no-repeat;
		background-size:100% 100%;
		border:none;
		width: 100rpx;
		height: 100rpx;
	}
	
	/deep/page {
		background-color: #FFFFFF;
		height: 100%;
		width: 100%;
	}
	.login_box{
		width: 100%;
		height: 360rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(1, 99, 235, 0.1);
		border-radius: 24rpx;
		margin-top: 30rpx;
		padding:40rpx 35rpx;
	}
	/deep/ .u-item-bg{
		border-radius: 32px !important;
	}
	/deep/ .u-subsection{
		border-radius: 32px !important;
	}
.full_img {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	z-index: -999;
	top: 0;
}

.head {
	height: 96rpx;
	width: 100%;
	line-height: 96rpx;
	margin-top: 40rpx;
	text-align: center;
	display: flex;
	position: relative;
	justify-content: center;
}
.icon {
	position: absolute;
	left: 30rpx;
}
</style>