uni-Identify-quality/pages/realName/realName.vue

834 lines
20 KiB
Vue
Raw Normal View History

2023-09-19 11:18:11 +00:00
<template>
2024-12-09 07:42:53 +00:00
<view class="main">
<view class="logo">
<image
src="@/static/image/logo2.png"
mode="scaleToFill"
class="img"
/>
</view>
<view class="container">
<view class="head">
<view style="display: flex; align-items: center">
<view class="title">注册手机号</view>
<!-- <view :style="{ fontSize: '18rpx' }">*实名认证失败</view> -->
<!-- <view>*实名认证成功</view> -->
</view>
<view
style="color: #7fa770; font-size: 24rpx; margin-left: 36rpx"
>此实名仅用于注册该小程序</view
>
</view>
<view class="radioGroup">
<view>实名认证方式</view>
<u-radio-group
v-model="radiovalue"
placement="row"
@change="groupChange"
>
<u-radio label="身份证" :name="'0'"></u-radio>
<u-radio label="护照" :name="'1'"></u-radio>
</u-radio-group>
</view>
2024-06-28 08:09:48 +00:00
2024-12-09 07:42:53 +00:00
<view class="info">
<view class="item">
<view class="name">姓名</view>
<u--input
placeholder="请输入姓名"
border="none"
v-model="name"
@change="changeName"
></u--input>
</view>
<view class="item">
<view class="name">{{
radiovalue === '0' ? '身份证号' : '护照号'
}}</view>
<u--input
placeholder="请输入身份证号"
border="none"
v-model="num"
@change="changeNum"
clearable
type="idcard"
v-if="radiovalue === '0'"
></u--input>
<u--input
placeholder="请输入护照号"
border="none"
v-model="passportId"
@change="changePassport"
clearable
v-else
></u--input>
</view>
</view>
<view class="card-box" v-if="radiovalue === '0'">
<view class="color:#626262;font-size:28rpx">身份证照片</view>
<view
style="
display: flex;
justify-content: space-between;
margin-top: 20rpx;
"
>
<view class="card">
<view>
<u-upload
:fileList="fileList"
@afterRead="afterRead"
@delete="deletePic"
name="1"
multiple
:maxCount="1"
:width="'270rpx'"
:height="'158rpx'"
previewImage
>
<image
src="@/static/image/card.png"
mode="scaleToFill"
style="width: 270rpx; height: 158rpx"
></image>
</u-upload>
</view>
<view
style="
color: #4e964d;
font-size: 20rpx;
margin-top: 20rpx;
"
>上传身份证人像面</view
>
</view>
<view class="card">
<view>
<u-upload
:fileList="fileList2"
@afterRead="afterRead2"
@delete="deletePic2"
name="1"
multiple
:maxCount="1"
:width="'270rpx'"
:height="'158rpx'"
>
<image
src="@/static/image/card2.png"
mode="scaleToFill"
style="width: 270rpx; height: 158rpx"
></image>
</u-upload>
</view>
<view
style="
color: #4e964d;
font-size: 20rpx;
margin-top: 20rpx;
"
>上传身份证国徽面</view
>
</view>
</view>
</view>
<view v-else class="card-box">
<view class="color:#626262;font-size:28rpx">护照照片</view>
<view
style="
display: flex;
justify-content: space-between;
margin-top: 20rpx;
"
>
<view class="card">
<view>
<u-upload
:fileList="passport"
@afterRead="afterReadPassport"
@delete="deletePassport"
name="1"
multiple
:maxCount="1"
:width="'270rpx'"
:height="'158rpx'"
previewImage
>
<image
src="@/static/image/passport.png"
mode="scaleToFill"
style="width: 270rpx; height: 158rpx"
></image>
</u-upload>
</view>
<view
style="
color: #4e964d;
font-size: 20rpx;
margin-top: 20rpx;
"
>上传护照资料页</view
>
</view>
<view class="card">
<view>
<u-upload
:fileList="passport2"
@afterRead="afterReadPassport2"
@delete="deletePassport2"
name="1"
multiple
:maxCount="1"
:width="'270rpx'"
:height="'158rpx'"
>
<image
src="@/static/image/passport2.png"
mode="scaleToFill"
style="width: 270rpx; height: 158rpx"
></image>
</u-upload>
</view>
<view
style="
color: #4e964d;
font-size: 20rpx;
margin-top: 20rpx;
"
>上传护照封面</view
>
</view>
</view>
</view>
<view v-if="needPersonSecret" class="face">
<view class="faceTitle">人脸识别</view>
<view class="recognition" @click="camera" v-if="!video">
<view style="color: #fff; margin-right: 10rpx"
>前往认证</view
>
<u-icon name="arrow-right-double" color="#fff"></u-icon>
</view>
<view class="recognition" @click="camera" v-else>
<view style="color: #fff; margin-right: 10rpx"
>认证成功</view
>
<u-icon name="checkmark-circle" color="#fff"></u-icon>
</view>
</view>
<view class="face">
<view class="faceTitle">法大大认证</view>
<view
class="recognition"
@click="fddRealName"
v-if="!isFddSuccess"
>
<view style="color: #fff; margin-right: 10rpx"
>前往认证</view
>
<u-icon name="arrow-right-double" color="#fff"></u-icon>
</view>
<view class="recognition" @click="fddRealName" v-else>
<view style="color: #fff; margin-right: 10rpx"
>认证成功</view
>
<u-icon name="checkmark-circle" color="#fff"></u-icon>
</view>
</view>
<view class="agreement">
<u-checkbox-group
v-model="checked"
iconPlacement="left"
placement="row"
inactiveColor="#76C458"
>
<u-checkbox
name="yes"
shape="circle"
activeColor="#76C458"
></u-checkbox>
<view class="know">
已阅读并同意
<text @click="agreementHandle('service')"
>软件许可及服务协议</text
>
<text @click="agreementHandle('privacy')"
>&隐私保护政策</text
>
</view>
</u-checkbox-group>
</view>
<view style="width: 284rpx; margin: 20rpx auto">
<u-button
text="完成注册"
shape="circle"
@click="completeRegistration"
color="#76C458"
></u-button>
</view>
</view>
<!-- <u-loading-page bg-color="rgba(0, 0, 0, 0.8)" loading-text="数据正在加载中" :loading="show"></u-loading-page> -->
</view>
2023-09-19 11:18:11 +00:00
</template>
<script>
2024-12-09 07:42:53 +00:00
import http from '@/http/api'
import { configFun } from '../../http/login'
2023-09-19 11:18:11 +00:00
export default {
2024-12-09 07:42:53 +00:00
data() {
return {
needPersonSecret: false,
name: '',
num: '',
passportId: '',
checked: [],
fileList: [],
fileList2: [],
passport: [],
passport2: [],
video: '',
isChecked: false,
isFddSuccess: false,
radiovalue: '0',
typeId: '',
isPhoneLogin: false
}
},
async onLoad(options) {
this.isPhoneLogin = uni.getStorageSync('phoneLogin') || false
const res = await configFun()
if (res.code === 200) {
this.needPersonSecret = res.data.needPersonSecret
}
const data = JSON.parse(decodeURIComponent(options.data))
this.name = data.name || ''
this.num = data.num || ''
this.fileList = data.fileList || []
this.fileList2 = data.fileList2 || []
this.radiovalue = data.radiovalue
this.passport = data.passport || []
this.passport2 = data.passport2 || []
this.passportId = data.passportId || ''
},
async onShow() {
if (!uni.getStorageSync('telNum')) {
uni.navigateTo({
url: '/pages/login/login'
})
}
this.checkFdd()
// if (uni.getStorageSync("tempVideoPath")) {
// const tempVideoPath = uni.getStorageSync("tempVideoPath");
// this.video = await this.uploadFilePromise(tempVideoPath);
// uni.removeStorageSync("tempVideoPath");
// console.log(
// "this.video",
// this.video,
// uni.getStorageSync("tempVideoPath")
// );
// const data = {
// num: uni.getStorageSync("info").num || '',
// name: uni.getStorageSync("info").name || '',
// fileList: uni.getStorageSync("info").fileList || [],
// fileList2: uni.getStorageSync("info").fileList2,
// video: this.video
// }
// uni.setStorageSync("info", data)
// }
},
watch: {
isFddSuccess(newValue) {
if (newValue) {
console.log(newValue)
this.name = uni.getStorageSync('info').name || ''
this.num = uni.getStorageSync('info').num || ''
this.fileList = uni.getStorageSync('info').fileList || []
this.fileList2 = uni.getStorageSync('info').fileList2 || []
this.video = uni.getStorageSync('info').video || ''
this.radiovalue = uni.getStorageSync('info').radiovalue ?? '0'
this.passport = uni.getStorageSync('info').passport || []
this.passport2 = uni.getStorageSync('info').passport2 || []
this.passportId = uni.getStorageSync('info').passportId || ''
uni.removeStorageSync('info')
}
}
},
methods: {
changeName(value) {
this.name = value
},
changeNum(value) {
this.num = value
},
changePassport(value) {
this.passportId = value
},
camera() {
uni.navigateTo({
url: '/pages/cameraContext/cameraContext'
})
},
async completeRegistration() {
const res1 = await this.checkFdd()
if (!res1) return this.$common.msgToast('法大大验证未通过')
if (res1 && this.typeId !== this.radiovalue)
return this.$common.msgToast('法大大验证失效请重新认证')
if (!this.checked.length)
return this.$common.msgToast('请阅读并勾选协议')
if (!this.name) return this.$common.msgToast('请输入姓名')
if (this.radiovalue === '0') {
if (!this.fileList.length)
return this.$common.msgToast('请上传身份证人面像')
if (!this.fileList2.length)
return this.$common.msgToast('请上传身份国徽面')
if (!this.num) return this.$common.msgToast('请输入身份证号')
} else {
if (!this.passport.length)
return this.$common.msgToast('请上传护照正面')
if (!this.passport2.length)
return this.$common.msgToast('请上传护照背面')
if (!this.passportId)
return this.$common.msgToast('请输入护照号')
}
2023-09-22 05:13:26 +00:00
2024-12-09 07:42:53 +00:00
// if (this.needPersonSecret && !this.video)
// return this.$common.msgToast("请上传人脸识别视频");
if (!this.isPhoneLogin) {
const res = await this.$api.login.register({
user: {
telNum: uni.getStorageSync('telNum'),
realNameIDName: this.num,
realName: this.name,
realIDImgA: this.fileList[0]?.url || '',
realIDImgB: this.fileList2[0]?.url || '',
idType: this.radiovalue,
passport: {
idNum: this.passportId,
name: this.name,
RealIDImgA: this.passport[0]?.url || '',
RealIDImgB: this.passport2[0]?.url || ''
}
}
})
if (res.status === 0) {
uni.switchTab({
url: '/pages/home/index'
})
} else {
this.$common.msgToast(res.msg)
}
} else {
const res = await this.$api.login.phoneRegister({
telNum: uni.getStorageSync('telNum'),
realNameIDName: this.num,
realName: this.name,
realIDImgA: this.fileList[0]?.url || '',
realIDImgB: this.fileList2[0]?.url || '',
idType: this.radiovalue,
passport: {
idNum: this.passportId,
name: this.name,
RealIDImgA: this.passport[0]?.url || '',
RealIDImgB: this.passport2[0]?.url || ''
}
})
if (res.status === 0) {
uni.switchTab({
url: '/pages/home/index'
})
} else {
this.$common.msgToast(res.msg)
}
}
},
// 删除图片
deletePic(event) {
this[`fileList`].splice(event.index, 1)
},
deletePassport(event) {
this[`passport`].splice(event.index, 1)
},
deletePassport2(event) {
this[`passport2`].splice(event.index, 1)
},
// 删除图片
deletePic2(event) {
this[`fileList2`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList`].length
lists.map((item) => {
this[`fileList`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(
lists[i].url,
'check'
)
let item = this[`fileList`][fileListLen]
this[`fileList`].splice(
fileListLen,
1,
Object.assign(item, {
status: 'success',
message: '',
url: result
})
)
fileListLen++
}
},
async afterReadPassport(event) {
let lists = [].concat(event.file)
let fileListLen = this[`passport`].length
lists.map((item) => {
this[`passport`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(
lists[i].url,
'check'
)
let item = this[`passport`][fileListLen]
this[`passport`].splice(
fileListLen,
1,
Object.assign(item, {
status: 'success',
message: '',
url: result
})
)
fileListLen++
}
},
async afterRead2(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList2`].length
lists.map((item) => {
this[`fileList2`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`fileList2`][fileListLen]
this[`fileList2`].splice(
fileListLen,
1,
Object.assign(item, {
status: 'success',
message: '',
url: result
})
)
fileListLen++
}
},
async afterReadPassport2(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`passport2`].length
lists.map((item) => {
this[`passport2`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this[`passport2`][fileListLen]
this[`passport2`].splice(
fileListLen,
1,
Object.assign(item, {
status: 'success',
message: '',
url: result
})
)
fileListLen++
}
},
uploadFilePromise(url, type = null) {
return new Promise((resolve) => {
uni.uploadFile({
url: http.baseUrl + '/api/wxuser/uploadpic',
filePath: url,
name: 'file',
success: (res) => {
const { path } = JSON.parse(res.data).data
resolve(path)
if (type === 'check' && this.radiovalue === '0') {
this.chenckId(path)
}
}
})
})
},
async chenckId(realIDImgA) {
const res = await this.$api.login.chenckId({ realIDImgA })
if (res.status === 0) {
this.num = res.data.iDNum
this.name = res.data.realName
} else {
this.$common.msgToast('未识别身份信息')
}
},
async fddRealName() {
console.log(this.radiovalue)
if (this.radiovalue === '0') {
if (!this.num || !this.name)
return this.$common.msgToast('姓名和身份证号不能为空')
} else {
if (!this.passportId || !this.name)
return this.$common.msgToast('姓名和护照号不能为空')
}
const data = {
num: this.num,
name: this.name,
fileList: this.fileList,
fileList2: this.fileList2,
passport: this.passport,
passport2: this.passport2,
passportId: this.passportId,
radiovalue: this.radiovalue
}
console.log(data, 'data')
uni.setStorageSync('info', data)
const mobile = uni.getStorageSync('telNum')
const res = await this.$api.login.fddRealName({
customerName: this.name,
customerIdentNo: this.num || this.passportId,
mobile,
idType: this.radiovalue
})
if (res.status === 0) {
uni.setStorageSync('fddUrl', res.data?.url)
uni.navigateTo({
url: '/pages/realName/FDDRegister'
})
} else {
this.$common.msgToast(res.msg)
}
},
checkFdd() {
if (this.isPhoneLogin) {
return this.$api.login.checkPhoneFdd().then((res) => {
if (res.status === 0) {
2024-12-11 05:25:40 +00:00
this.isFddSuccess = res.data.isVerify
2024-12-09 07:42:53 +00:00
this.typeId = res.data.idType
2024-12-11 05:25:40 +00:00
return res.data.isVerify
2024-12-09 07:42:53 +00:00
} else {
this.$common.msgToast(res.msg)
}
})
}
return this.$api.login.checkFdd().then((res) => {
if (res.status === 0) {
2024-12-11 05:25:40 +00:00
this.isFddSuccess = res.data.isVerify
2024-12-09 07:42:53 +00:00
this.typeId = res.data.idType
2024-12-11 05:25:40 +00:00
return res.data.isVerify
2024-12-09 07:42:53 +00:00
} else {
this.$common.msgToast(res.msg)
}
})
},
agreementHandle(type) {
const data = {
num: this.num,
name: this.name,
fileList: this.fileList,
fileList2: this.fileList2,
radiovalue: this.radiovalue,
passport: this.passport,
passport2: this.passport2,
passportId: this.passportId
}
uni.setStorageSync('info', data)
uni.navigateTo({
url:
'/pages/realName/agreement?type=' +
type +
'&data=' +
encodeURIComponent(JSON.stringify(data))
})
},
groupChange(value) {
console.log(value)
if (value === '1') {
this.fileList = []
this.fileList2 = []
this.name = ''
this.num = ''
} else {
this.passport = []
this.passport2 = []
this.passportId = ''
}
}
}
}
2023-09-19 11:18:11 +00:00
</script>
<style lang="scss" scoped>
2024-06-28 08:09:48 +00:00
/deep/ .u-radio {
2024-12-09 07:42:53 +00:00
margin-right: 20rpx;
2024-06-28 08:09:48 +00:00
}
2023-09-19 11:18:11 +00:00
/deep/.u-checkbox__icon-wrap--circle {
2024-12-09 07:42:53 +00:00
width: 30upx !important;
height: 30upx !important;
2023-09-19 11:18:11 +00:00
}
2023-09-22 05:13:26 +00:00
2023-09-19 11:18:11 +00:00
/deep/ .u-checkbox-label--left {
2024-12-09 07:42:53 +00:00
margin-top: 20rpx;
2023-09-19 11:18:11 +00:00
}
2023-09-22 05:13:26 +00:00
2023-09-19 11:18:11 +00:00
.main {
2024-12-09 07:42:53 +00:00
background: url('@/static/image/login-bg.png') no-repeat;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
2024-06-28 08:09:48 +00:00
2024-12-09 07:42:53 +00:00
.logo {
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
.img {
width: 142rpx;
height: 60rpx;
}
}
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
.container {
display: flex;
flex-direction: column;
flex: 1;
box-sizing: border-box;
height: calc(100vh - 200upx);
width: 100%;
background: #fff;
border-radius: 40rpx 40rpx 0rpx 0rpx;
padding: 62rpx 32rpx;
2024-06-28 08:09:48 +00:00
2024-12-09 07:42:53 +00:00
.head {
.title {
color: #626262;
font-size: 40rpx;
margin-left: 36rpx;
font-weight: 600;
}
}
.radioGroup {
display: flex;
gap: 40rpx;
margin: 10rpx 0;
}
.info {
margin-top: 24rpx;
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
.item {
box-sizing: border-box;
background: #f8f8f8;
border-radius: 20rpx;
width: 100%;
height: 92rpx;
display: flex;
align-items: center;
padding-left: 24rpx;
margin-bottom: 20rpx;
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
.name {
width: 200rpx;
height: 72rpx;
line-height: 72rpx;
border-right: 1rpx solid #d1d1d1;
}
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
/deep/ .u-input {
margin-left: 40rpx;
}
}
}
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
.card-box {
width: 100%;
height: 322rpx;
background: #f8f8f8;
padding: 32rpx 24rpx;
box-sizing: border-box;
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
.card {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
.face {
margin-top: 20rpx;
box-sizing: border-box;
background: #f8f8f8;
border-radius: 20rpx;
width: 100%;
height: 92rpx;
display: flex;
align-items: center;
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
.faceTitle {
width: 202rpx;
height: 100%;
padding: 26rpx 0 26rpx 24rpx;
box-sizing: border-box;
}
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
.recognition {
height: 92rpx;
width: calc(100% - 202rpx);
background: #76c458;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0 20rpx 20rpx 0;
}
}
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
.agreement {
font-size: 28rpx;
margin: 46rpx auto;
2023-09-22 05:13:26 +00:00
2024-12-09 07:42:53 +00:00
.know {
margin-top: 20upx;
font-size: 28upx;
color: #a6a6a6;
2023-09-19 11:18:11 +00:00
2024-12-09 07:42:53 +00:00
text {
color: #76c458;
}
}
}
}
2023-09-19 11:18:11 +00:00
}
2024-01-05 07:22:12 +00:00
</style>