mall_client/zyhs3_uniapp/pages/user/authentication/authentication.vue

<template>
	<view class="containear">
		<view class="realname-Info">
			<u-tabs v-if="type == 2" class="bg-w" :list="tabsList" @click="handlerTabClick"></u-tabs>
			<u--form
				:model="model1"
				:rules="rules"
				ref="uForm"
				labelPosition="left"
				labelWidth="90">
				<u-form-item
					label="真实姓名"
					prop="form.realName"
					borderBottom
				>
					<u--input
						v-model="model1.form.realName"
						disabledColor="#ffffff"
						placeholder="请输入真实姓名"
						border="none"
					></u--input>
				</u-form-item>
				<u-form-item
					label="身份证号"
					prop="form.idCard"
					borderBottom
				>
					<u--input
						type="text"
						v-model="model1.form.idCard"
						disabledColor="#ffffff"
						placeholder="请输入身份证号"
						border="none"
					></u--input>
				</u-form-item>
				<u-form-item
					label="手机号"
					prop="form.phone"
					borderBottom
				>
					<u--input
						v-model="model1.form.phone"
						disabledColor="#ffffff"
						placeholder="请输入手机号"
						border="none"
						maxlength="11"
					></u--input>
				</u-form-item>

				<u-form-item
					label="用户地址"
					prop="form.address"
					borderBottom
				>
					<u--input
						v-model="model1.form.address"
						disabledColor="#ffffff"
						placeholder="请输入地址"
						border="none"
					></u--input>
				</u-form-item>
			</u--form>
			<u-button
				type="primary"
				text="提交认证"
				customStyle="margin-top: 50px"
				@click="handlerSubmit"
			></u-button>
		</view>
		
	</view>
</template>

<script>
	import url from '@/common/http/url.js';
	import sms from "@/components/sms.vue";
	import { mapState } from 'vuex';
	import { regIdCard, regCn } from '@/utils/regular.js';
	import { getAuthentication } from "@/api/system/user"
	export default {
		components: {
			sms
		},
		data() {
			return {
				disabled1: false,
				tabsIndex: 0,
				transferType: 1,
				nickname: null,
				model1: {
					form: {
						realName: null,
						phone: null,
						idCard: null,
						address: null
					}
				},
				rules: {
					'form.realName': {
						type: 'string',
						required: true,
						message: '请输入真实姓名',
						trigger: ['blur', 'change']
					},
					'form.phone': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'form.idCard': {
						type: 'string',
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					},
					'form.address': {
						type: 'string',
						required: true,
						message: '请输入地址',
						trigger: ['blur', 'change']
					},
				},
				type: null,
				result: null
			};
		},
		onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			console.log('this.$refs.uForm', this.$refs.uForm)
		    this.$refs.uForm.setRules(this.rules)
		},
		onLoad() {
			const data = uni.getStorageSync('auth-result')
			if (data) {
				this.result = data;
				this.model1.form.id = this.result.id;
				this.model1.form.realName = this.result.realName;
				this.model1.form.phone = this.result.phone;
				this.model1.form.idCard = this.result.idCard;
				this.model1.form.address = this.result.address;
				uni.removeStorageSync('auth-result')
			}
		},
		computed: {
			...mapState(["userInfo"])
		},
		methods: {
			handlerVerify() {
				if (!regCn.test(this.model1.form.realName)) return this.$msg('请输入中文姓名');
				if (!regIdCard.test(this.model1.form.idCard)) return this.$msg('请输入正确的身份证号');
				if (this.model1.form.phone.length != 11) return this.$msg('请输入正确的手机号')

				const params = { ...this.model1.form };
				params.type = "1";
				getAuthentication(params).then(response => {
					if (response && response.code == 200) {
						this.$msg('实名认证成功');
						setTimeout(() => {
							let path = { url: '/pages/user/authentication/result' };
							uni.redirectTo(path)
						}, 1000)
					} else if (response && response.msg) {
						this.$msg(response.msg)
					}
				})

				// this.$httpJson('POST', url.user.userVerify, {
				// 	...this.model1.form
				// }).then(({ code, msg }) => {
				// 	this.$msg(msg);
				// 	if (code == 200) {
				// 		setTimeout(() => {
				// 			let path = {url:'/pages/user/authentication/result'}
				// 			uni.redirectTo(path)
				// 		},1000)
				// 	}
				// })
			},
			handlerSubmit () {
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.uForm.validate().then(res => {
					this.handlerVerify()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-tabs__wrapper__nav__item {
		flex: 1;
	}
	.containear {
		height: 100%;
		padding: 0 20rpx;
	}
	.realname-Info {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
</style>