init
This commit is contained in:
shuhongfan
@@ -0,0 +1,83 @@
|
||||
.realName-authentication{
|
||||
.tips{
|
||||
height: 60rpx;
|
||||
width: 100%;
|
||||
background: #FAF4DE;
|
||||
color: #EA8A57;
|
||||
font-size: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.tips::before{
|
||||
content: '';
|
||||
display: block;
|
||||
width:10rpx ;
|
||||
height: 10rpx;
|
||||
border-radius: 50%;
|
||||
background: #E88649;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
.content{
|
||||
height: 136rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #919191;
|
||||
margin: 21rpx;
|
||||
padding: 40rpx 36rpx;
|
||||
}
|
||||
.form{
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
margin: 0 21rpx;
|
||||
.name-item,.identify-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 104rpx;
|
||||
.label{
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.input-box{
|
||||
display: flex;
|
||||
.uni-input{
|
||||
text-align: right;
|
||||
}
|
||||
.uni-icon{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.name-item{
|
||||
border-bottom: 2rpx solid #F4F4F4;
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 164rpx;
|
||||
background: #FFFFFF;
|
||||
bottom: 0;
|
||||
.btn{
|
||||
width: 400rpx;
|
||||
height:88rpx;
|
||||
background: #CCCCCC;
|
||||
border-radius: 44rpx;
|
||||
text-align: center;
|
||||
line-height: 88rpx;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
margin: 17rpx auto;
|
||||
}
|
||||
.btn.active{
|
||||
background-color:#E84134 ;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,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>
|
||||
Reference in New Issue
Block a user