yicangzongtai_app_240321/pages/user/authentication.vue

<template>
	<view>
		<navbar :config="config" backColor="#999999"></navbar>
		<view class="box">
			<u-form :model="form" ref="uForm" label-width="156">
				<u-form-item label="真实姓名">
					<u-input v-model="form.realName" placeholder="请输入真实姓名" />
				</u-form-item>
				<u-form-item label="身份证号">
					<u-input v-model="form.identityNumber" placeholder="请输入身份号码" />
				</u-form-item>
				<u-form-item label="验证码">
					<u-input v-model="form.captcha" placeholder="本账户手机验证码" />
					<!-- <template v-slot:right> -->
						<view class="get-code" @click.stop="getCode()">{{ captchaText }}</view>
					<!-- </template> -->
				</u-form-item>
			</u-form>
			<view class="agreement-box" @click.stop="readAgreement()">
				<text :class="['agreement-select' , readStatus ? 'read-agreement' : '']"></text>
				<text class="agreement-text">已阅读并同意</text>
				<text class="agreement-info" @click.stop="openAgreement()">《用户隐私协议》</text>
			</view>
			<view class="submit-btn" @click.stop="setRealNameAuth()">
				确认提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		realNameAuth,
		getVerifyCodeByParam
	} from "@/api/personal-center.js"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '实名认证',
					color: '#1A1A1A',
					// autoBack:true,
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A'
				},
				mobile: '',
				readStatus: false, // 协议阅读状态
				form: {
					realName: '',
					identityNumber: '',
					captcha: ''
				},
				captchaText: '获取验证码',
				captchaInterval: null,
				realNameAuthLoading: false
			}
		},
		created() {
			// this.getCode()
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 查看协议
			openAgreement(){
				uni.navigateTo({
					url:'/pages/protocol/index?code=privacy-agreement'
				})
			},
			readAgreement() {
				this.readStatus = !this.readStatus
				console.log('this.readStatus = ', this.readStatus)
			},
			//获取个人信息
			getUserInfo() {
				let personal = uni.getStorageSync('personal')
				this.mobile = personal ? personal.mobile : '';
			},
			getCode() {
				this.getUserInfo()
				if (!this.mobile) {
					uni.showToast({
						title: '当前账号暂未绑定手机号',
						icon: 'none'
					});
					return false
				}
				if (this.captchaText !== '获取验证码') {
					return false
				}
				this.captchaText = '获取中...'
				try {
					clearInterval(this.captchaInterval)
				} catch {}

				try {
					this.$http.post(getVerifyCodeByParam, {
						mobile: this.mobile,
						verifyCodeType: 1
					}).then(res => {
						let num = 60
						this.captchaInterval = setInterval(() => {
							this.captchaText = `${num}s`;
							num--;
							if (num < 0) {
								clearInterval(this.captchaInterval)
								this.captchaText = '获取验证码'
							}
						}, 1000)
					}).catch(err => {
						this.captchaText = '获取验证码'
					})
				} catch (err) {
					this.captchaText = '获取验证码'
				}
			},
			// 实名认证
			setRealNameAuth() {

				if (this.realNameAuthLoading) {
					return false;
				}
				if (!this.readStatus) {
					uni.showToast({
						title: '请先阅读协议',
						icon: 'none'
					});
					return false;
				}
				this.realNameAuthLoading = true;
				try {
					if (!this.form.realName) {
						uni.showToast({
							title: '请填写真实姓名',
							icon: 'none'
						});
						throw new Error()
					}
					if (!this.form.identityNumber) {
						this.$mUtil.toast("请填写身份证号")
						throw new Error()
					}
					if (!(this.form.identityNumber.match(this.$mConfig.telIdentity))) {
						this.$mUtil.toast("请输入正确的身份证号")
						return false
					}
					if (!this.form.captcha) {
						uni.showToast({
							title: '请填写验证码',
							icon: 'none'
						});
						throw new Error()
					};
					this.$http.post(realNameAuth, this.form).then(res => {
						console.log('realNameAuth = res', res)
						uni.showToast({
							title: '绑定成功',
							icon: 'none'
						});
						this.realNameAuthLoading = false;
            uni.navigateBack()
					}).catch(err => {
						this.realNameAuthLoading = false;
					})
				} catch (err) {
					this.realNameAuthLoading = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 88rpx 50rpx 0;
	}

	.get-code {
		width: 200rpx;
		text-align: center;
		height: 70rpx;
		background: #e7eefc;
		border: 1px solid #3775f6;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #FA6138;
	}

	.agreement-box {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 97rpx 0 22rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #999999;

		.agreement-select {
			width: 25rpx;
			height: 25rpx;
			background: #ffffff;
			border: 1rpx solid #0043fb;
			border-radius: 6rpx;
			margin-right: 8rpx;
		}

		.read-agreement {
			position: relative;

			&:before {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 15rpx;
				height: 15rpx;
				background-color: #0043fb;
			}
		}

		.agreement-info {
			color: #004BFB;
		}
	}

	.submit-btn {
		width: 630rpx;
		height: 90rpx;
		background: #3d93fc;
		border-radius: 45rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #ffffff;
	}
</style>