index.vue
3.96 KB
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<template>
<!-- 头部导航栏 -->
<nav-bar title='实名认证'></nav-bar>
<view class="realName-authentication">
<view class="tips">当前仅支持持有中国内地居民身份证的用户进行线上实名认证</view>
<view class="content">
根据《邮件快件实名收寄管理办法》等相关法律法规的要求，为了更好地向您提供邮件快件的收寄件服务，需您提供真实的身份信息。后续您本人寄件时仅需出示有效身份证件供查阅确认即可，无需再次采集。
</view>
<view class="form">
<view class="name-item">
<view class="label">姓名</view>
<view class="input-box">
<input @input="clearInputName" :value="nameInputValue" placeholder-class="phcolor" class="uni-input" :placeholder="namePlaceholder" />
<image class="uni-icon" src='../../static/shanchu.png' v-if="showClearIconName"
@click="clearIconName" />
</view>
</view>
<view class="identify-item">
<view class="label">身份证号</view>
<view class="input-box">
<input @input="clearInput" :value="inputClearValue" placeholder-class="phcolor" class="uni-input" :placeholder="idcardPlaceholder" />
<image class="uni-icon" src='../../static/shanchu.png' v-if="showClearIcon" @click="clearIcon" />
</view>
</view>
</view>
<view class="footer">
<view class="btn" :class="isCanAuth?'active':''" @click="doAuth">开始认证</view>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
computed
} from 'vue';
import {
validateIdentityCard
} from '@/utils/validate.js'
import {
getRealNameStatusApi
} from '@/pages/api/my.js'
let namePlaceholder = ref('请填写')
let idcardPlaceholder = ref('请填写')
let showClearIconName = ref(false)
let showClearIcon = ref(false)
let nameInputValue = ref('')
let inputClearValue = ref('')
//是否可以开始认证
const isCanAuth = computed(() => {
return validateIdentityCard(inputClearValue.value) && nameInputValue.value
})
//聚焦时清空占位字
const clearNamePlaceholder = ()=>{
namePlaceholder.value = ''
if(!nameInputValue.value){
idcardPlaceholder.value ='请填写'
}
}
const clearIdcardPlaceholder = ()=>{
idcardPlaceholder.value = ''
if(!inputClearValue.value){
namePlaceholder.value ='请填写'
}
}
const clearInput = (event) => {
inputClearValue.value = event.detail.value;
if (event.detail.value.length > 0) {
showClearIcon.value = true;
} else {
showClearIcon.value = false;
idcardPlaceholder.value = '请填写'
}
}
const clearInputName = (event) => {
nameInputValue.value = event.detail.value;
if (event.detail.value.length > 0) {
showClearIconName.value = true;
} else {
showClearIconName.value = false;
namePlaceholder.value = '请填写'
}
}
const clearIconName = () => {
nameInputValue.value = '';
showClearIconName.value = false;
namePlaceholder.value = '请填写'
if(!inputClearValue.value){
idcardPlaceholder.value = '请填写'
}
}
const clearIcon = () => {
inputClearValue.value = '';
showClearIcon.value = false;
idcardPlaceholder.value = '请填写'
if(!nameInputValue.value){
namePlaceholder.value = '请填写'
}
}
//开始身份认证
const doAuth = () => {
if (!isCanAuth.value) {
return uni.showToast({
title: '信息填写不完整',
icon: 'none',
duration: 1000
})
}
getRealNameStatusApi({
flag: 1,
idCard: inputClearValue.value,
name: nameInputValue.value
}).then((res) => {
if (res.code !== 200) {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1000
})
} else {
uni.showToast({
title: '认证成功',
icon: 'none',
duration: 1000,
})
setTimeout(() => {
uni.switchTab({
url: '/pages/my/index'
})
}, 2000)
}
}).catch(()=>{
uni.showToast({
title: '网络异常',
duration: 2000,
icon: 'none'
});
})
}
</script>
<style src="./index.scss" lang="scss" scoped></style>