web-app_taiwan/pages/auth-identity/auth-identity.vue

<template>
	<view class="auth-identity">
		<custom-nav noback="noback" transparent="transparent" ref="ltm" title=" " />
		<view class="content">
			<view class="app-item item">
				<text>分享人</text>
				<text>{{ userinfo.recom_nickname }}</text>
			</view>
			<view class="app-item item">
				<text>联系方式</text>
				<text>{{ userinfo.recom_mobile }}</text>
			</view>

			<view class="app-item item item-space">
				<text>手机区号</text>
				<input v-model="area_name" disabled />
			</view>
			<view class="app-item item ">
				<text>联系方式</text>
				<input v-model="userinfo.mobile" disabled />
			</view>
			<view class="app-item item">
				<text>微信昵称</text>
				<input v-model="wx_nickname" placeholder="请填写微信昵称" />
			</view>
			<view class="app-item item">
				<text>真实姓名</text>
				<input v-model="real_name" maxlength="32" placeholder="请填写真实姓名" />
			</view>
			<view class="app-item item">
				<text>身份证号</text>
				<input @input="inputChange" v-model="id_card_num" maxlength="18" placeholder="请填写身份证号" />
			</view>
			<view class="btn_box">
				<button class="big-btn bg" @tap="submit">提交</button>
				<button class="big-btn bg" @click="toback">退出</button>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		_API_Logout
	} from '@/apis/verify.js'
	import {
		_API_SubAuthInfo
	} from '@/apis/user.js'
	export default {
		data() {
			return {
				title: '身份认证',
				wx_nickname: '',
				real_name: '',
				id_card_num: '',
				isMatch: '', //身份验证
				area_name: '',
				code: '' //手机区号
			}
		},
		computed: {
			userinfo() {
				return this.$store.state.userinfo
			}
		},
		onLoad() {
			this.getCode()
		},
		methods: {
			inputChange() {
				this.id_card_num = this.id_card_num.trim()
			},
			toback() {
				uni.showLoading({
					mask: true
				})
				_API_Logout().then(() => {
					this.$store.commit('app/LOGOUT')
					uni.navigateBack()
					window.history.replaceState({}, '', '/api/gzh')
					location.reload()
				})
			},
			getCodeInfo(code) {
				let areaInfo = {
					isMatch: '',
					area_name: ''
				}
				if (code === 86) {
					areaInfo.isMatch =
						/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
					areaInfo.area_name = `中国大陆（+86）`
				} else if (code === 853) { //澳门
					areaInfo.isMatch = /^[1|5|7][0-9]{6}[0-9A-Z]$/
					areaInfo.area_name = `澳门（+853）`
				} else if (code === 886) { //台湾
					areaInfo.isMatch = /^[a-zA-Z][0-9]{9}$/
					areaInfo.area_name = `台湾（+866）`
				} else if (code === 852) { //香港
					areaInfo.isMatch = /^[A-Z]{1,2}[0-9]{6,10}[0-9A-Z]$/
					areaInfo.area_name = `香港（+852）`
				}
				return areaInfo
			},
			getCode() {
				var code = this.userinfo.area_code
				if (code) {
					let index = code.indexOf('+')
					code = code.substring(index + 1)
					this.isMatch = this.getCodeInfo(Number(code)).isMatch
					this.area_name = this.getCodeInfo(Number(code)).area_name
				}
			},
			submit() { // 点击提交
				if (!this.wx_nickname.length) {
					uni.toast('微信昵称不能为空')
					return
				}
				if (!this.real_name.match(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/)) {
					uni.toast('真实姓名不符合要求')
					return
				}
				if (this.isMatch && !this.id_card_num.match(this.isMatch)) {
					uni.toast('身份号码不合法')
					return
				}
				uni.showLoading({
					mask: true
				}) // 显示 loading
				_API_SubAuthInfo({ // 提交信息
					wechatname: this.wx_nickname,
					realname: this.real_name,
					cre_num: this.id_card_num
				}).then(res => {
					if (res.code === 200) { // 提交成功
						this.$store.commit('userinfo/UPDATA_USERINFO', {
							cert_status: 1
						})
						uni.redirectTo({
							url: '../auth-progress/auth-progress'
						}) // redirect 到 审核进度页面
					} else if (res.code === 300) {
						uni.showToast({
							duration: 3333,
							title: res.message
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.auth-identity {
		@include page();

		.content {}
	}

	.btn_box {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.big-btn {
			width: 40%;

			&:nth-last-of-type(1) {
				background-color: #007AFF;
				border-color: #007AFF;
			}
		}
	}
</style>