1b44ac51
 chenbiao
add 信用等级 实名认证form表单
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<template>
<view>
<uni-section title="实名认证" type="line">
<view class="paddinglr30">
<!-- 基础用法，不包含校验规则 -->
<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
<uni-forms-item label="姓名" name="username" required>
<uni-easyinput v-model="baseFormData.username" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="身份证号" name="userId" required>
<uni-easyinput v-model="baseFormData.userId" placeholder="请输入身份证号" />
</uni-forms-item>
<uni-file-picker
v-model="baseFormData.fontimageValue"
fileMediatype="image"
:image-styles="imageStyles"
return-type="array"
file-extname="png,jpg"
:limit="1"
@select="select"
@progress="progress"
@success="success"
@fail="fail"
title="身份证正面" />
<uni-file-picker
v-model="baseFormData.sideimageValue"
fileMediatype="image"
:image-styles="imageStyles"
return-type="array"
file-extname="png,jpg"
:limit="1"
@select="select"
@progress="progress"
@success="success"
@fail="fail"
title="身份证反面" />
</uni-forms>
</view>
</uni-section>
<view class="paddinglr30 margin-top-30 uni-common-mb">
<button type="primary" @click="submit('baseForm')">确认</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
baseFormData: {
invoicetitle: '',
userId: '',
fontimageValue:[],
sideimageValue:[],
},
// 校验规则
rules: {
username: {
rules: [{
required: true,
errorMessage: '姓名不能为空'
}]
},
userId: {
rules: [{
required: true,
errorMessage: '身份证号不能为空'
}, {
format: 'number',
errorMessage: '身份证号只能输入数字'
}]
},
},
imageStyles: {
width: 300,
height: 200,
// 线条样式
borderStyle: {
width: 1,
color: 'blue',
style: 'dashed',
radius: 2
}
},
}
},
methods: {
// 获取上传状态
select(e) {
console.log('选择文件：', e)
},
// 获取上传进度
progress(e) {
console.log('上传进度：', e)
},
// 上传成功
success(e) {
console.log('上传成功')
},
// 上传失败
fail(e) {
console.log('上传失败：', e)
},
// 提交
submit(ref) {
this.$refs[ref].validate().then(res => {
console.log('success', res);
uni.showToast({
title: `校验通过`
})
}).catch(err => {
console.log('err', err);
})
}
}
}
</script>
<style lang="scss">
</style>
|
