medicine-xcx/pagesB/nameAuthentication/nameAuthentication.vue

<template>
	<view class="name-authentication">
		<view class="name-authentication-header flex justify-center flex-column m-b-40">
			<text class="text-white font-28 m-b-10">个人实名认证</text>
			<text class="text-white font-26">请如实填写个人信息</text>
		</view>

		<view class="p-l-30 p-r-30">
			<view class="name-authentication-form">
				<view class="name-authentication-form-item flex align-center m-b-40">
					<text class="font-28 text-black m-r-10">姓名：</text>
					<u-input class="flex-1" v-model="form.name" placeholder="请输入真实姓名" />
				</view>
				<view class="name-authentication-form-item flex align-center">
					<text class="font-28 text-black m-r-10">身份证号：</text>
					<u-input class="flex-1" v-model="form.idCard" placeholder="请输入身份证号码" />
				</view>
			</view>

			<view class="name-authentication-upload">
				<view class="name-authentication-upload-title font028 text-black font-weight-bold">身份证照片</view>
				<view class="flex align-center justify-between">
					<view class="flex align-center flex-column">
						<u-upload
							@on-choose-complete="list => uplpadComplete(list, 'front')"
							width="280"
							height="190"
							auto-upload
							max-count="1"
							customBtn
							:action="action"
							:file-list="form.front"
						>
							<image class="name-authentication-upload-image" :src="IMG_URL + 'idCardFront.png'" slot="addBtn"></image>
						</u-upload>
						<text class="font-28 text-grey m-t-40">身份证头像面</text>
					</view>
					<view class="flex align-center flex-column">
						<u-upload
							@on-choose-complete="list => uplpadComplete(list, 'opposite')"
							width="280"
							height="190"
							auto-upload
							max-count="1"
							customBtn
							:action="action"
							:file-list="form.opposite"
						>
							<image class="name-authentication-upload-image" :src="IMG_URL + 'idCardOpposite.png'" slot="addBtn"></image>
						</u-upload>
						<text class="font-28 text-grey m-t-40">身份证国徽面</text>
					</view>
				</view>
			</view>
			<u-button type="primary" shape="circle" class="confirm-order-footer-button" @click="submit">提交认证</u-button>
		</view>
	</view>
</template>

<script>
	import { IMG_URL } from '@/env.js'
export default {
	data() {
		return {
			IMG_URL,
			form: {
				name: '',
				idCard: '',
				front: [],
				opposite: []
			},
			fileList: [],
			rules: {
				name: [
					{
						message: '请输入姓名'
					},
					{
						validator: (rule, value, callback) => {
							let username = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,99}$/;
							return username.test(value);
						},
						message: '请输入正确格式的姓名',
						trigger: ['blur']
					}
				],
				idCard: [
					{
						message: '请输入身份证号码'
					},
					{
						message: '请输入正确格式的身份证号码',
						validator: (rule, value, callback) => {
							return this.$u.test.idCard(value);
						}
					}
				],
				front: {
					message: '请上传身份证头像面照片'
				},
				opposite: {
					message: '请上传身份证国徽面照片'
				}
			}
		};
	},
	onReady() {},
	methods: {
		submit() {
			console.log(this.form);
			let { disabled, message } = this.$util.validate(this.rules, this.form);
			if (disabled) return this.$Toast(message);
		},
		uplpadComplete(lists, name) {
			let { error, file } = lists[0];
			if (error) return this.$Toast(error);
			this.form[name] = file;
		}
	}
};
</script>

<style lang="scss" scoped>
.name-authentication {
	&-header {
		background: $u-type-primary;
		height: 160rpx;
		padding: 0 30rpx;
	}
	&-form {
		margin-bottom: 60rpx;
		&-item {
			height: 80rpx;
			border-bottom: 2rpx solid #f1f1f1;
		}
	}

	&-upload {
		margin-bottom: 120rpx;
		&-title {
			margin-bottom: 50rpx;
		}

		&-image {
			width: 280rpx;
			height: 190rpx;
		}
	}
}
</style>