<template>
|
<div class="authentication-container">
|
<van-nav-bar :placeholder="true" :safe-area-inset-top="true" :title="$t('rnv')" left-arrow
|
@click-left="$router.go(-1)">
|
</van-nav-bar>
|
|
<div style="width: 100%; height: .25em; background-color: #f8f8f8"></div>
|
|
<div class="form-group" :class="{ disabled: isSubmitting || isActive }">
|
<label class="required-label">{{ $t("hj195") }}</label>
|
<input type="text" v-model="form.realName" class="form-input" :disabled="isActive" />
|
</div>
|
|
<div class="form-group" :class="{ disabled: isSubmitting || isActive }">
|
<label class="required-label">{{ $t("it1") }}</label>
|
<van-radio-group v-model="form.realType" direction="horizontal" :disabled="isActive"
|
style="font-size: 3.5vw;margin-top: 1em;">
|
<van-radio :name="1">{{ $t("dl1") }}</van-radio>
|
<van-radio :name="2">{{ $t("pa1") }}</van-radio>
|
<van-radio :name="3">{{ $t("身份證件") }}</van-radio>
|
</van-radio-group>
|
</div>
|
|
<div class="form-group" :class="{ disabled: isSubmitting || isActive }">
|
<label class="required-label">{{ $t("in1") }}</label>
|
<input type="text" v-model="form.idCard" class="form-input" :disabled="isActive" />
|
</div>
|
|
<div class="form-group" :class="{ disabled: isSubmitting || isActive }">
|
<label class="required-label">{{ $t("电话号码") }}</label>
|
<input type="text" v-model="form.vaildNumber" class="form-input" :disabled="isActive" />
|
</div>
|
|
<div style="width: 100%; height: .25em; background-color: #f8f8f8"></div>
|
|
<div class="form-group flex-between" :class="{ disabled: isSubmitting || isActive }">
|
<label class="required-label">{{ $t("fsi1") }}</label>
|
|
<el-upload :with-credentials="true" class="avatar-uploader" :action="admin + 'user/upload.do'"
|
list-type="picture-card" name="upload_file" :show-file-list="false" :on-success="handleAvatarSuccess"
|
:on-error="handleError" :before-upload="beforeAvatarUpload" :disabled="isActive">
|
<img v-if="form.img1key" :src="form.img1key" class="id-img avatar" style="width: 100%; height: 100%" />
|
<i v-else class="iconfont icon-zhaopian"></i>
|
</el-upload>
|
</div>
|
|
<div class="form-group flex-between" :class="{ disabled: isSubmitting || isActive }">
|
<label class="required-label">{{ $t("bsi1") }}</label>
|
|
<el-upload :with-credentials="true" class="avatar-uploader" :action="admin + 'user/upload.do'"
|
list-type="picture-card" name="upload_file" :show-file-list="false" :on-success="handleAvatarSuccess2"
|
:on-error="handleError2" :before-upload="beforeAvatarUpload2" :disabled="isActive">
|
<img v-if="form.img2key" :src="form.img2key" class="id-img avatar" style="width: 100%; height: 100%" />
|
<i v-else class="iconfont icon-zhaopian"></i>
|
</el-upload>
|
</div>
|
|
<div style="width: 100%; height: .25em; background-color: #f8f8f8"></div>
|
|
<div class="submit-button" :class="{ disabled: isSubmitting || isActive }" @click="toSure">
|
<span>{{ submitButtonLabel }}</span>
|
</div>
|
|
<div class="auth-status-wrap" v-if="authRejectReason">
|
<div class="auth-reject-reason">
|
<div class="reason-label">{{ $t("hj201") }}</div>
|
<div class="reason-text">{{ authRejectReason }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
import apiUrl from "@/axios/api.url.js";
|
import { compress } from "@/utils/imgupload";
|
import { isNull } from "@/utils/utils";
|
import { Toast } from "vant";
|
export default {
|
name: "Authentication",
|
data() {
|
return {
|
frontImage: "",
|
backImage: "",
|
isSubmitting: false,
|
form: {
|
realName: "",
|
idCard: "",
|
realType: "1",
|
vaildNumber: "",
|
img1key: "",
|
img2key: ""
|
},
|
imgStatus: false,
|
admin: apiUrl.baseURL
|
};
|
},
|
computed: {
|
// 注册默认0 1.审核中 2.已实名 3.驳回；状态1||2时屏蔽所有输入
|
isActive() {
|
return (
|
this.$store.state.userInfo.isActive == 1 ||
|
this.$store.state.userInfo.isActive == 2
|
);
|
},
|
authStatusCode() {
|
const u = this.$store.state.userInfo;
|
if (
|
!u ||
|
u.isActive === undefined ||
|
u.isActive === null ||
|
u.isActive === ""
|
) {
|
return 0;
|
}
|
const n = Number(u.isActive);
|
return Number.isNaN(n) ? 0 : n;
|
},
|
authRejectReason() {
|
if (this.authStatusCode !== 3) return "";
|
const msg =
|
this.$store.state.userInfo && this.$store.state.userInfo.authMsg;
|
return msg ? String(msg) : "";
|
},
|
/** 状态 1/2 时替换提交按钮文案，其余仍为「确定」 */
|
submitButtonLabel() {
|
const c = this.authStatusCode;
|
if (c === 1) return this.$t("auth_submit_certifying");
|
if (c === 2) return this.$t("auth_submit_certified_done");
|
return this.$t("hj161");
|
}
|
},
|
created() {
|
this.getUserInfo();
|
},
|
mounted() {
|
// 可以在这里加载用户已有的认证信息
|
// 如果用户已经提交过认证信息，可以显示认证状态
|
},
|
methods: {
|
toSure() {
|
if (this.isSubmitting || this.isActive) return; // 防止重复提交
|
// 实名认证弹框
|
if (isNull(this.form.realName)) {
|
Toast(this.$t("hj207"));
|
} else if (isNull(this.form.idCard)) {
|
Toast(this.$t("hj208"));
|
} else if (!this.form.img1key) {
|
Toast(this.$t("hj209"));
|
} else if (!this.form.img2key) {
|
Toast(this.$t("hj209"));
|
} else {
|
// 显示确认弹窗
|
this.toAuthentication();
|
}
|
},
|
async toAuthentication() {
|
this.isSubmitting = true;
|
|
let opts = {
|
...this.form
|
};
|
let data = await api.userAuth(opts);
|
if (data.status === 0) {
|
Toast(this.$t("hj210"));
|
this.goBack();
|
} else {
|
Toast(data.msg);
|
}
|
this.isSubmitting = false;
|
},
|
async getUserInfo() {
|
// 获取用户信息
|
let data = await api.getUserInfodata();
|
if (data.status === 0) {
|
// 判断是否登录
|
this.$store.commit("dialogVisible", false);
|
this.$store.state.userInfo = data.data;
|
this.userInfo = data.data;
|
if (
|
this.$store.state.userInfo.isActive === 1 ||
|
this.$store.state.userInfo.isActive === 2
|
) {
|
this.form.idCard = this.$store.state.userInfo.idCard;
|
this.form.vaildNumber = this.$store.state.userInfo.vaildNumber;
|
this.form.realName = this.$store.state.userInfo.realName;
|
this.form.realType = this.$store.state.userInfo.realType;
|
this.form.img1key = this.$store.state.userInfo.img1Key;
|
this.form.img2key = this.$store.state.userInfo.img2Key;
|
this.showBtn = false;
|
}
|
} else {
|
//this.$store.commit('dialogVisible',true);
|
//跳转到login
|
this.$router.push({ path: "/login" });
|
}
|
},
|
handleAvatarSuccess(res, file) {
|
this.imgStatus = false;
|
this.form.img1key = res.data.url;
|
},
|
beforeAvatarUpload(file) {
|
this.imgStatus = true;
|
},
|
handleError() {
|
this.imgStatus = false;
|
},
|
handleAvatarSuccess2(res, file) {
|
this.imgStatus2 = false;
|
this.form.img2key = res.data.url; // URL.createObjectURL(file.raw);
|
},
|
beforeAvatarUpload2(file) {
|
this.imgStatus2 = true;
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
if (!isLt10M) {
|
this.$message.error(this.$t("hj205"));
|
return false;
|
} else {
|
this.form.img2key = URL.createObjectURL(file);
|
compress(file, function (val) { });
|
}
|
},
|
handleError2() {
|
this.imgStatus2 = false;
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@green: #00f0ff;
|
|
/deep/ .van-nav-bar__content {
|
height: 65px;
|
}
|
|
/deep/ .van-nav-bar__title {
|
font-family: "DINPro";
|
width: 100%;
|
height: 1.17333rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-style: normal;
|
font-weight: 700;
|
font-size: 0.48rem;
|
color: #14181f;
|
}
|
|
/deep/ .el-upload__input {
|
display: none;
|
}
|
|
.authentication-container {
|
/* padding: 20px; */
|
background-color: #ffffff;
|
min-height: 100vh;
|
font-size: 10vw;
|
}
|
|
.form-group {
|
margin-bottom: 0.25em;
|
padding: 0.25em 0.25em 0;
|
}
|
|
label {
|
display: block;
|
margin-bottom: 8px;
|
color: #999;
|
font-size: 16px;
|
font-weight: normal;
|
}
|
|
.required-label {
|
color: #333;
|
font-weight: bold;
|
font-size: 0.4em;
|
}
|
|
.required-label::before {
|
content: "*";
|
color: #ff4d4f;
|
margin-right: 4px;
|
}
|
|
.form-input {
|
width: 100%;
|
height: 3em;
|
border: 1px solid #e8e8e8;
|
border-radius: 4px;
|
padding: 0 15px;
|
font-size: 0.4em;
|
box-sizing: border-box;
|
color: #333;
|
}
|
|
.id-type-options {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.option {
|
display: flex;
|
align-items: center;
|
padding: 10px 15px;
|
border: 1px solid #e8e8e8;
|
border-radius: 4px;
|
background-color: #fff;
|
flex: 1;
|
margin-right: 10px;
|
}
|
|
.option:last-child {
|
margin-right: 0;
|
}
|
|
.option.selected {
|
border-color: #4a90e2;
|
}
|
|
.radio-circle {
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
border: 1px solid #ccc;
|
margin-right: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #f5f5f5;
|
}
|
|
.option.selected .radio-circle {
|
border-color: #4a90e2;
|
background-color: #fff;
|
}
|
|
.radio-inner {
|
width: 14px;
|
height: 14px;
|
border-radius: 50%;
|
background-color: #4a90e2;
|
}
|
|
.upload-box {
|
width: 100%;
|
height: 120px;
|
border: 1px solid #e8e8e8;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #fafafa;
|
cursor: pointer;
|
overflow: hidden;
|
}
|
|
.upload-placeholder {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.upload-icon {
|
width: 40px;
|
height: 40px;
|
margin-bottom: 8px;
|
opacity: 0.5;
|
}
|
|
.preview-image {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.submit-button {
|
width: 9.5em;
|
margin: 0.4em auto 0;
|
height: 1.2em;
|
background-color: #e6e254;
|
color: #fff;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
font-weight: normal;
|
|
span {
|
font-size: 0.4em;
|
}
|
}
|
|
.disabled {
|
opacity: 0.5;
|
}
|
|
.auth-status-wrap {
|
margin: 1em 0.25em 1.2em;
|
padding: 0.35em 0.3em 0.45em;
|
background: #f7f8fa;
|
border-radius: 8px;
|
border: 1px solid #e8e8e8;
|
font-size: 16px;
|
}
|
|
.auth-status-title {
|
color: #666;
|
font-size: 14px;
|
margin-bottom: 0.35em;
|
font-weight: 600;
|
}
|
|
.auth-status-value {
|
font-size: 16px;
|
font-weight: 600;
|
line-height: 1.45;
|
word-break: break-word;
|
}
|
|
.auth-status-none {
|
color: #999;
|
}
|
|
.auth-status-pending {
|
color: #d48806;
|
}
|
|
.auth-status-approved {
|
color: #389e0d;
|
}
|
|
.auth-status-rejected {
|
color: #cf1322;
|
}
|
|
.auth-reject-reason {
|
margin-top: 0.45em;
|
padding-top: 0.35em;
|
border-top: 1px dashed #e0e0e0;
|
}
|
|
.auth-reject-reason .reason-label {
|
color: #666;
|
font-size: 13px;
|
margin-bottom: 0.2em;
|
}
|
|
.auth-reject-reason .reason-text {
|
color: #333;
|
font-size: 14px;
|
line-height: 1.5;
|
word-break: break-word;
|
}
|
</style>
|
