Skip to content

T
traceSourceMb
Commit 6fb10dd2 authored by chenqikuai's avatar chenqikuai
Browse files
Options

fix: 修复若用户实名认证失败时，点击重新验证可以到达验证之处

parent 3878599c
Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 141 deletions
src/views/auth/Personal.vue
View file @ 6fb10dd2
<template> <template>
<div class="personal-auth" v-if="!loading"> <div class="personal-auth" v-if="!loading">
<div v-if="![1,2,3].includes(authInfo.status)"> <!-- 验证中 -->
<div v-if="authMethod === EAuthMethod.FOURFACTOURS"> <Auditing v-if="authInfo.status === 1"></Auditing>
<four-factours/> <!-- 成功 -->
</div> <div class="auth-success" v-if="authInfo.status === 2">
<div v-if="authMethod === EAuthMethod.FACE"> <div class="item van-hairline--bottom">
<van-form ref="loginForm" @submit="onSubmit" v-if="!uploadSuccess"> <span class="key">姓名:</span
<van-field ><span class="value">{{ authInfo.name }}</span>
v-model="name" </div>
:rules="[{ required: true, message: '请填写真实姓名' }]" <div class="item van-hairline--bottom">
placeholder="请输入您的真实姓名"></van-field> <span class="key">身份证号:</span
<van-field ><span class="value">{{ authInfo.id_card }}</span>
class="margintop10" </div>
v-model="idCard" </div>
:rules="[{ pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/, message: '请输入正确的身份证号' }]" <!-- 失败和未验证 -->
placeholder="请输入您的身份证号"></van-field> <div v-if="authInfo.status !== 1 && authInfo.status !== 2">
<van-field <audit-failure
v-model="videoBase64" v-if="mark === 'showFailed'"
:rules="[{ required: true, message: '请填上传视频' }]" class="videoInput margintop10"> @re-audit="reAuditHandler"
<template #input> :message="authInfo.message"
<input type="file" accept="video/*" id="video" capture="camcorder" @change="handleFileChange" style="display:none;"> ></audit-failure>
<label for="video" v-if="!videoBase64" style="width:100%;padding: 30px;text-align:center" class="add-video"> <div v-if="mark === 'showValidate'">
<common-svg name="shipin1" width="34px" height="34px"></common-svg> <div v-if="![1, 2, 3].includes(authInfo.status)">
<div style="color:#3F79FE;font-size:16px;line-height:1.5em;">添加视频</div> <div v-if="authMethod === EAuthMethod.FOURFACTOURS">
<div style="color:#353535;font-size:14px;">请提前录制好视频进行上传</div> <four-factours />
</label> </div>
<div v-else> <div v-if="authMethod === EAuthMethod.FACE">
<video controls :src="videoBase64" style="width:100%;" ></video> <van-form ref="loginForm" @submit="onSubmit" v-if="!uploadSuccess">
<div class="video-desc">验证视频仅用于验证身份，不会在溯源详情环节向用户展示。</div> <van-field
<label for="video" class="re-add">重新上传 ></label> v-model="name"
:rules="[{ required: true, message: '请填写真实姓名' }]"
placeholder="请输入您的真实姓名"
></van-field>
<van-field
class="margintop10"
v-model="idCard"
:rules="[
{
pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/,
message: '请输入正确的身份证号',
},
]"
placeholder="请输入您的身份证号"
></van-field>
<van-field
v-model="videoBase64"
:rules="[{ required: true, message: '请填上传视频' }]"
class="videoInput margintop10"
>
<template #input>
<input
type="file"
accept="video/*"
id="video"
capture="camcorder"
@change="handleFileChange"
style="display:none;"
/>
<label
for="video"
v-if="!videoBase64"
style="width:100%;padding: 30px;text-align:center"
class="add-video"
>
<common-svg
name="shipin1"
width="34px"
height="34px"
></common-svg>
<div
style="color:#3F79FE;font-size:16px;line-height:1.5em;"
>
添加视频
</div>
<div style="color:#353535;font-size:14px;">
请提前录制好视频进行上传
</div>
</label>
<div v-else>
<video
controls
:src="videoBase64"
style="width:100%;"
></video>
<div class="video-desc">
验证视频仅用于验证身份，不会在溯源详情环节向用户展示。
</div>
<label for="video" class="re-add">重新上传 ></label>
</div>
</template>
</van-field>
<div v-if="!videoBase64" style="margin-top:20px;">
<div class="require-title">视频要求</div>
<div
style="display:flex;flex-direction:row;justify-content:space-between;"
>
<div
v-for="({ icon, label }, index) in requires"
:key="index"
>
<common-svg
:name="icon"
width="50px"
height="50px"
></common-svg>
<div style="color:#353535;font-size: 14px;">
{{ label }}
</div>
</div>
</div> </div>
</template> </div>
</van-field> <van-button
<div v-if="!videoBase64" style="margin-top:20px;"> block
<div class="require-title">视频要求</div> color="#3F79FE"
<div style="display:flex;flex-direction:row;justify-content:space-between;"> type="primary"
<div v-for="({icon, label}, index) in requires" :key="index"> native-type="submit"
<common-svg :name="icon" width="50px" height="50px"></common-svg> style="margin-top: 60px;"
<div style="color:#353535;font-size: 14px;">{{label}}</div> >确定</van-button
</div> >
</div> </van-form>
</div> <upload-success v-if="uploadSuccess"></upload-success>
<van-button block color="#3F79FE" type="primary" native-type="submit" style="margin-top: 60px;">确定</van-button> </div>
</van-form>
<upload-success v-if="uploadSuccess"></upload-success>
</div> </div>
</div> </div>
<Auditing v-if="authInfo.status === 1"></Auditing>
<audit-failure v-if="authInfo.status === 3" @re-audit="reAuditHandler" :message="authInfo.message"></audit-failure>
<div class="auth-success" v-if="authInfo.status === 2">
<div class="item van-hairline--bottom"><span class="key">姓名:</span><span class="value">{{authInfo.name}}</span></div>
<div class="item van-hairline--bottom"><span class="key">身份证号:</span><span class="value">{{authInfo.id_card}}</span></div>
</div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio, Popup } from 'vant'; import {
Cell,
Form,
Field,
CellGroup,
Button,
Image,
RadioGroup,
Radio,
Popup,
} from 'vant';
import { State, Getter, Action, Mutation } from 'vuex-class'; import { State, Getter, Action, Mutation } from 'vuex-class';
import { Route } from 'vue-router'; import { Route } from 'vue-router';
import { AuthStatus } from '@/const/enum'; import { AuthStatus } from '@/const/enum';
import UploadSuccess from './components/UploadSucess.vue'; import UploadSuccess from './components/UploadSucess.vue';
import Auditing from './components/Auditing.vue'; import Auditing from './components/Auditing.vue';
import AuditFailure from './components/AuditFailure.vue'; import AuditFailure from './components/AuditFailure.vue';
import FourFactours from "./FourFactours.vue" import FourFactours from './FourFactours.vue';
import {EAuthMethod} from "./types"; import { EAuthMethod } from './types';
@Component({ @Component({
components: { components: {
...@@ -80,7 +161,7 @@ import {EAuthMethod} from "./types"; ...@@ -80,7 +161,7 @@ import {EAuthMethod} from "./types";
UploadSuccess, UploadSuccess,
Auditing, Auditing,
AuditFailure, AuditFailure,
FourFactours FourFactours,
}, },
}) })
export default class Personal extends Vue { export default class Personal extends Vue {
...@@ -89,7 +170,6 @@ export default class Personal extends Vue { ...@@ -89,7 +170,6 @@ export default class Personal extends Vue {
@Mutation('updateAuthInfo') private updateAuthInfo!: (authInfo: any) => void; @Mutation('updateAuthInfo') private updateAuthInfo!: (authInfo: any) => void;
@Action('getUserInfo') private getUserInfo!: () => Promise<any>; @Action('getUserInfo') private getUserInfo!: () => Promise<any>;
private EAuthMethod = EAuthMethod; private EAuthMethod = EAuthMethod;
private loading = true; private loading = true;
private authMethod: EAuthMethod | null = null; private authMethod: EAuthMethod | null = null;
...@@ -102,6 +182,8 @@ export default class Personal extends Vue { ...@@ -102,6 +182,8 @@ export default class Personal extends Vue {
private step: string = '1'; private step: string = '1';
/* 为了最少改动代码，使用了mark */
private mark: null | string = null;
private readonly requires: any[] = [ private readonly requires: any[] = [
{ {
...@@ -118,29 +200,33 @@ export default class Personal extends Vue { ...@@ -118,29 +200,33 @@ export default class Personal extends Vue {
}, },
]; ];
@Watch('authInfo')
private watchAuthInfo(newValue: any) {
this.mark = newValue.status === 3 ? 'showFailed': 'showValidate';
}
private async mounted() { private async mounted() {
try{ try {
this.loading = true; this.loading = true;
await this.getAuthInfo(); await this.getAuthInfo();
const authMethod = await this.getAuthMethod(); const authMethod = await this.getAuthMethod();
this.authMethod = authMethod; this.authMethod = authMethod;
this.loading = false; this.loading = false;
}catch(err){ } catch (err) {
this.loading = false; this.loading = false;
} }
} }
private getAuthMethod(): Promise<EAuthMethod> {
private getAuthMethod(): Promise<EAuthMethod>{ return this.$api.auth.method().then((ret: any) => {
return this.$api.auth.method().then((ret: any)=>{
return ret.method; return ret.method;
}) });
} }
private reAuditHandler() { private reAuditHandler() {
this.updateAuthInfo({}); // this.updateAuthInfo({});
this.$router.replace({ name: 'Auth'}); // this.$router.replace({ name: 'Auth' });
this.mark = 'showValidate';
} }
private onSubmit() { private onSubmit() {
const { name, idCard, videoBase64 } = this; const { name, idCard, videoBase64 } = this;
...@@ -159,94 +245,96 @@ export default class Personal extends Vue { ...@@ -159,94 +245,96 @@ export default class Personal extends Vue {
duration: 0, // 持续展示 toast duration: 0, // 持续展示 toast
forbidClick: true, forbidClick: true,
}); });
this.$api.auth.face(params, (process: any) => { this.$api.auth
const { loaded, total } = process; .face(params, (process: any) => {
const percent = Math.floor(loaded / total * 100); const { loaded, total } = process;
toast.message = `${ percent }%`; const percent = Math.floor((loaded / total) * 100);
if (percent === 100) { toast.message = `${percent}%`;
toast.clear(); if (percent === 100) {
} toast.clear();
}).then((res: any) => { }
this.uploadSuccess = true; })
}); .then((res: any) => {
this.uploadSuccess = true;
});
} }
private handleFileChange(e: any) { private handleFileChange(e: any) {
const [file] = e.target.files; const [file] = e.target.files;
const reader = new FileReader(); const reader = new FileReader();
reader.readAsDataURL(file); reader.readAsDataURL(file);
reader.onload = (event: any) => { reader.onload = (event: any) => {
this.videoBase64 = event.target.result; this.videoBase64 = event.target.result;
}; };
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.personal-auth{ .personal-auth {
padding: 17px; padding: 17px;
::v-deep .videoInput.van-cell{ ::v-deep .videoInput.van-cell {
padding: 0; padding: 0;
} }
.add-video{ .add-video {
background:rgba(252,252,252,1); background: rgba(252, 252, 252, 1);
border-radius:4px; border-radius: 4px;
border:1px dashed rgba(225,225,225,1); border: 1px dashed rgba(225, 225, 225, 1);
} }
.err-add{ .err-add {
color: #FF4242; color: #ff4242;
background: #FFF8F8; background: #fff8f8;
} }
.video-desc{ .video-desc {
font-size:14px; font-size: 14px;
line-height: 1.5em; line-height: 1.5em;
color:#B6B7B9; color: #b6b7b9;
background: #F9FBFF; background: #f9fbff;
}
.margintop10 {
margin-top: 10px;
}
.re-add {
display: block;
color: #353535;
font-size: 16px;
line-height: 1.5em;
background: #f9fbff;
}
.require-title {
position: relative;
font-size: 14px;
color: #353535;
text-align: center;
&::before,
&::after {
content: '';
position: absolute;
width: 120px;
height: 1px;
top: 50%;
background-color: #e1e1e1;
} }
.margintop10{ &::before {
margin-top: 10px; left: 0%;
} }
.re-add{ &::after {
display: block; right: 0%;
color:#353535;
font-size: 16px;
line-height: 1.5em;
background: #F9FBFF;
} }
.require-title{ }
position: relative; .auth-success {
font-size: 14px; .item {
color: #353535; display: flex;
text-align: center; flex-direction: row;
&::before, &::after{ justify-content: space-between;
content: ""; padding: 14px 16px;
position: absolute; .key {
width: 120px; font-size: 16px;
height: 1px; color: #353535;
top: 50%;
background-color: #E1E1E1;
}
&::before{
left: 0%;
} }
&::after{ .value {
right: 0%; color: #999999;
font-size: 14px;
} }
} }
.auth-success{
.item{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 14px 16px;
.key{
font-size: 16px;
color: #353535;
}
.value{
color: #999999;
font-size: 14px;
}
}
}
} }
</style> }
\ No newline at end of file </style>
src/views/userCenter/Recharge.vue
View file @ 6fb10dd2
...@@ -231,7 +231,7 @@ export default class Recharge extends Vue { ...@@ -231,7 +231,7 @@ export default class Recharge extends Vue {
// 支付宝和微信支付走👇流程 // 支付宝和微信支付走👇流程
const url = this.getSelectedPayMethodType === EPayMethod.alipay ? pay_url : `${pay_url}&redirect_url=${redirectUrl}`; const url = this.getSelectedPayMethodType === EPayMethod.alipay ? pay_url : `${pay_url}&redirect_url=${redirectUrl}`;
localStorage.setItem('payUrl', url); localStorage.setItem('payUrl', url);
location.href = url; // location.href = url;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment