|
|
<template>
|
<view class="content">
|
<view class="col-1">拍摄本人身份证 预估最高可借 <text style="color: #2865F2;font-size: 34rpx">20万</text></view>
|
<view class="col-2">
|
<image style="width: 34rpx;height: 44rpx;margin-right: 20rpx;" :src="`${$images}/static/img/facial/icon-safe.png`"></image>
|
<view class="tips"> 信息已智能加密，仅用于身份审核</view>
|
</view>
|
|
<view class="col-3">
|
<view class="front">
|
<view class="title">
|
<view class="name">人像面</view>
|
<view class="tips">上传身份证人像面</view>
|
</view>
|
<view class="img" v-if="!OcrFront" @click="openStartEid">
|
<image class="img-card" :src="`${$images}/static/img/facial/card-1.png`" ></image>
|
<image class="img-icon" :src="`${$images}/static/img/facial/take-blue.png`" ></image>
|
</view>
|
<view class="img" v-else>
|
<image class="img-card" :src="OcrFront" ></image>
|
</view>
|
|
|
</view>
|
<view class="front" style="margin-top: 52rpx;">
|
<view class="title">
|
<view class="name">国徽面</view>
|
<view class="tips">上传身份证国徽面</view>
|
</view>
|
<view class="img" v-if="!OcrBack" @click="openStartEid">
|
<image class="img-card" :src="`${$images}/static/img/facial/card-2.png`" ></image>
|
<image class="img-icon" :src="`${$images}/static/img/facial/take-blue.png`" ></image>
|
</view>
|
<view class="img" v-else>
|
<image class="img-card" :src="OcrBack" ></image>
|
</view>
|
|
</view>
|
</view>
|
|
|
<view class="foot">
|
|
<view v-if="handFlg" class="hand" @click="$refs.handOpen.open()">手动输入身份证信息</view>
|
<view class="tips">当前正在签约，请知悉～</view>
|
|
<view class="agreement" >
|
<uv-checkbox-group
|
v-model="protocolChecked">
|
<uv-checkbox size="14" :name="1">
|
<view style="display: flex;flex-direction: row;font-size: 24rpx">
|
我已阅读并同意<text class="protocol" @click="open">《平台服务协议》</text>
|
</view>
|
</uv-checkbox>
|
</uv-checkbox-group>
|
|
</view>
|
|
<view style="margin: 0 70rpx;margin-top: 80rpx;">
|
<uv-button color="linear-gradient(104deg, #6d89ff 0%, #2865f2 100%), linear-gradient(270deg, #4766fe 0%, #7d9fff 100%)"
|
@click="nextStep" :loading="loading" :disabled="!protocolChecked" shape="circle" type="primary" text="下一步"></uv-button>
|
</view>
|
</view>
|
|
<uv-popup ref="popup" mode="bottom"
|
round="24rpx"
|
zIndex="3">
|
<uv-cell-group>
|
<view class="popup-title">
|
<view>请阅读以下协议</view>
|
</view>
|
<view class="setting-list-item">
|
<view
|
class="setting-text"
|
style="font-size: 32rpx; font-weight: bold; justify-content: left"
|
>平台服务协议</view
|
>
|
</view>
|
<uv-cell @click="toProtocol(item)" v-for="(item,index) in list" :key="index" :isLink="true" :title="item.name"></uv-cell>
|
|
</uv-cell-group>
|
</uv-popup>
|
|
<uv-popup ref="handOpen" mode="center"
|
round="24rpx"
|
@close="handOpen = false"
|
:customStyle="{
|
width: '80vw',
|
}">
|
<view style="padding: 30px">
|
<uv-form labelWidth="65">
|
<uv-form-item label="用户名" prop="name" borderBottom>
|
<uv-input v-model="formData.name" border="none" placeholder="请填写用户名">
|
</uv-input>
|
</uv-form-item>
|
<uv-form-item label="身份证号" prop="idCard" borderBottom>
|
<uv-input maxlength="18" v-model="formData.idCard" border="none" placeholder="请填写身份证号">
|
</uv-input>
|
</uv-form-item>
|
<uv-button color="linear-gradient(104deg, #6d89ff 0%, #2865f2 100%), linear-gradient(270deg, #4766fe 0%, #7d9fff 100%)"
|
:disabled="!(formData.name && formData.idCard.length ===18)"
|
style="margin-top: 20rpx;" shape="circle"
|
type="primary" text="确认提交"
|
customStyle="margin-top: 10px" @click="submit"></uv-button>
|
</uv-form>
|
</view>
|
</uv-popup>
|
|
</view>
|
|
</template>
|
<script>
|
import { idCard } from '@/uni_modules/uv-ui-tools/libs/function/test.js';
|
import {getPlatformProtocolNew, getTXEidResult, getTXEidToken} from "@/api/modules/user";
|
import { startEid } from '@/pages/mp_ecard_sdk/main'
|
export default {
|
name: "index",
|
data() {
|
return {
|
openFace:false,
|
handFlg:false,
|
handOpen:false,
|
loading:false,
|
disabled:false,
|
protocolChecked: [0],
|
list: [],
|
OcrFront:null,
|
OcrBack:null,
|
formData:{
|
name:'',
|
idCard:'',
|
},
|
token:''
|
}
|
},
|
onShow() {
|
|
// #ifdef MP-WEIXIN
|
|
if(this.token && this.openFace){
|
getTXEidResult({eidToken:this.token}).then(res=>{
|
if(res?.Response?.IdCardData?.OcrFront){
|
this.OcrFront = 'data:image/png;base64,'+res.Response.IdCardData.OcrFront
|
}
|
if(res?.Response?.IdCardData?.OcrBack){
|
this.OcrBack = 'data:image/png;base64,'+res.Response.IdCardData.OcrBack
|
}
|
if(!(this.OcrFront && this.OcrBack)){
|
uni.showToast({
|
icon: 'none',
|
title: '身份信息核验不通过'
|
})
|
this.handFlg = true;
|
return
|
}
|
if(res?.Response?.EidInfo?.UserInfo?.name && res?.Response?.EidInfo?.UserInfo?.idnum){
|
this.formData.name =res.Response.EidInfo.UserInfo.name;
|
this.formData.idCard = res.Response.EidInfo.UserInfo.idnum;
|
uni.setStorageSync('isOcr', 1);
|
}
|
|
uni.hideLoading();
|
if(!(this.formData.name && this.formData.idCard)){
|
this.handFlg = true
|
}
|
|
})
|
}
|
|
// #endif
|
|
},
|
created() {
|
|
getPlatformProtocolNew().then(res=>{
|
console.log(res);
|
this.list = res;
|
})
|
},
|
methods: {
|
async openStartEid(){
|
// #ifdef MP-WEIXIN
|
uni.showLoading({mask: true})
|
await getTXEidToken().then(res=>{
|
this.openFace = true;
|
this.token = res.token
|
})
|
const param = {
|
data: {
|
token:this.token,
|
},
|
verifyDoneCallback(res) {
|
uni.hideLoading()
|
},
|
};
|
startEid(param)
|
// #endif
|
},
|
open() {
|
this.$refs.popup.open();
|
},
|
toProtocol(e){
|
let title = e.name;
|
let code = e.code;
|
uni.navigateTo({
|
url: `/pages/protocol/index?code=${code}&title=${title}`
|
});
|
},
|
|
submit(){
|
if(!this.protocolChecked[0]){
|
uni.showToast({
|
icon: 'none',
|
title: '请勾选隐私协议'
|
})
|
return
|
}
|
|
if(!idCard(this.formData.idCard) || !this.formData.name){
|
uni.showToast({
|
icon: 'none',
|
title: '请输入正确的身份证信息'
|
})
|
|
return;
|
}
|
uni.navigateTo({
|
url: `/pages/apply/index?name=${this.formData.name}&idCard=${this.formData.idCard}`
|
});
|
|
|
},
|
nextStep(){
|
if(!this.protocolChecked[0]){
|
uni.showToast({
|
icon: 'none',
|
title: '请勾选隐私协议'
|
})
|
return
|
}
|
if(!(this.OcrBack && this.OcrFront)){
|
uni.showToast({
|
icon: 'none',
|
title: '请拍上传正面照片'
|
})
|
return
|
}
|
if(!idCard(this.formData.idCard) || !this.formData.name){
|
uni.showToast({
|
icon: 'none',
|
title: '请输入正确的身份证信息'
|
})
|
this.$refs.handOpen.open()
|
return;
|
}
|
uni.navigateTo({
|
url: `/pages/apply/index?name=${this.formData.name}&idCard=${this.formData.idCard}`
|
});
|
}
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
.content{
|
.col-1{
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
font-size: 34rpx;
|
color: #252938;
|
font-weight: 600;
|
margin-top: 60rpx;
|
}
|
.col-2{
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
color: #8B8D96;
|
margin-top: 18rpx;
|
margin-bottom: 62rpx;
|
.tips{
|
position: relative;top: 5rpx;
|
font-size: 28rpx;
|
}
|
}
|
.col-3{
|
padding-left: 60rpx;
|
padding-right: 40rpx;
|
.front{
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
.title{
|
display: flex;
|
justify-content: center;
|
.name{
|
font-weight: 700;color: #252938;font-size: 34rpx;
|
}
|
.tips{
|
color: #8B8D96;font-size: 28rpx;margin-top: 20rpx;
|
}
|
}
|
.img{
|
position: relative;
|
.img-card{
|
height: 228rpx;width: 386rpx;
|
}
|
.img-icon{
|
width: 84rpx;height: 84rpx;
|
position: absolute;
|
top: calc( 50% - 42rpx);
|
left: calc( 50% - 42rpx);
|
}
|
}
|
}
|
}
|
|
.foot{
|
position: fixed;
|
width: 100%;
|
bottom: 40px;
|
.hand{
|
text-align: center;
|
font-size: 0.75rem;
|
color: #207ef5;
|
margin-bottom: 20rpx;
|
}
|
.tips{
|
text-align: center;
|
font-size: 28rpx;
|
color: #666666;
|
margin-bottom: 20rpx;
|
|
}
|
.agreement{
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
margin: auto;
|
.protocol{
|
font-size: 24rpx;color: #207ef5;
|
}
|
}
|
|
}
|
}
|
|
.popup-title {
|
font-size: 36rpx;
|
font-weight: 600;
|
color: #252938;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
margin-top: 38rpx;
|
}
|
.setting-list-item {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: solid 1rpx #dcdcdc;
|
padding-left: 23rpx;
|
padding-right: 8rpx;
|
padding-top: 30rpx;
|
padding-bottom: 30rpx;
|
}
|
.setting-text {
|
font-size: 28rpx;
|
color: #000000;
|
}
|
</style>
|
