You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.8 KiB
150 lines
3.8 KiB
<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>
|