From 16cfa24c67682909a1e810e206ee8a6655e859ed Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Mon, 11 Aug 2025 18:08:14 +0800
Subject: [PATCH] 1
---
src/page/authentication/index.vue | 672 +++++++++++++++++++++++--------------------------------
1 files changed, 287 insertions(+), 385 deletions(-)
diff --git a/src/page/authentication/index.vue b/src/page/authentication/index.vue
index c569801..30b19d7 100644
--- a/src/page/authentication/index.vue
+++ b/src/page/authentication/index.vue
@@ -1,167 +1,81 @@
<template>
- <div class="bank_card_page">
- <div class="content">
- <div class="top_back">
- <div class="left_back_icon" @click="$router.go(-1)">
- <img src="../../assets/img/zuojiantou.png" alt />
- </div>
- </div>
- <div class="titles">
- <span>{{ $t("hj146") }}</span>
- </div>
- <div class="bank_name">
- <div class="lefts">
- <span>{{ $t("hj195") + ":" }}</span>
- </div>
- <div class="rights">
- <input
- v-if="showBtn"
- type="text"
- placeholder="Please enter your Name"
- v-model="form.name"
- />
+ <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>
- <input v-if="!showBtn" type="text" v-model="form.name" readonly />
- </div>
- </div>
- <div class="bank_name">
- <div class="lefts">
- <span>{{ $t("hj196") + ":" }}</span>
- </div>
- <div class="rights">
- <input
- v-if="showBtn"
- type="text"
- placeholder="Please enter your ID card"
- v-model="form.idCard"
- />
- <input v-if="!showBtn" type="text" v-model="form.idCard" readonly />
- </div>
- </div>
- <!-- <div class="bank_name">
- <div class="lefts">
- <span>{{ "Vaild Number" + ":" }}</span>
- </div>
- <div class="rights">
- <input
- v-if="showBtn"
- type="text"
- placeholder="Please enter your ID card"
- v-model="form.vaildNumber"
- />
- <input
- v-if="!showBtn"
- type="text"
- v-model="form.vaildNumber"
- readonly
- />
- </div>
- </div> -->
- <div class="uploads">
- <div class="lefts">
- <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="!showBtn"
- >
- <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>
- <span v-if="!form.img1key && !imgStatus" class="btn-title">{{
- $t("hj197")
- }}</span>
- <span v-if="imgStatus" class="btn-title">{{ $t("hj198") }}</span>
- </el-upload>
- </div>
- <div class="rights">
- <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="!showBtn"
- >
- <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>
- <span v-if="!form.img2key && !imgStatus2" class="btn-title">{{
- $t("hj199")
- }}</span>
- <span v-if="imgStatus2" class="btn-title">{{ $t("hj198") }}</span>
- </el-upload>
- </div>
- </div>
- <div class="bank_name bind" @click="toSure" v-if="showBtn">
- <span>{{ $t("hj161") }}</span>
- </div>
- <van-notify v-model="messFlag" type="primary">
- <div>
- <div class="eft">
- <span>{{ $t("hj200") }}</span>
- </div>
- <div class="bft">
- <span
- >{{ $t("hj201") }}：{{ this.$store.state.userInfo.authMsg }}</span
- >
- </div>
- </div>
- </van-notify>
- <div class="pass">
- <div class="top_t">
- <img
- v-if="this.$store.state.userInfo.isActive == 1"
- src="../../../static/img/bd_shz.png"
- />
- <span
- v-if="this.$store.state.userInfo.isActive == 1"
- class="ise_pass"
- >{{ $t("hj202") }}</span
- >
- <img
- v-if="!showBtn && this.$store.state.userInfo.isActive != 1"
- src="../../../static/img/bd_suessce.png"
- />
- <span v-if="!showBtn && this.$store.state.userInfo.isActive != 1">{{
- $t("hj203")
- }}</span>
- <img v-if="showBtn" src="../../../static/img/bd_fail.png" />
- <span v-if="showBtn" class="ise_pass">{{ $t("hj204") }}</span>
- </div>
- </div>
+ <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.name" 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="auRadio" direction="horizontal" disabled 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('ot1') }}</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>{{ $t("uv1") }}</span>
</div>
</div>
</template>
<script>
import * as api from "@/axios/api";
-import { Toast } from "mint-ui";
-import { isNull, idCardReg, isName } from "@/utils/utils";
-import { compress } from "@/utils/imgupload";
import apiUrl from "@/axios/api.url.js";
+import { compress } from "@/utils/imgupload";
+import { isNull } from "@/utils/utils";
+import { Toast } from "vant";
export default {
- name: "bankCard",
+ name: 'Authentication',
data() {
return {
+ frontImage: '',
+ backImage: '',
+ isSubmitting: false,
+ auRadio: '1',
form: {
phone: "",
name: "",
@@ -169,65 +83,62 @@
vaildNumber: "",
img1key: "",
img2key: "",
- img3key: "",
},
- img1Key: "",
- img2Key: "",
- img3Key: "",
- showBtn: true,
- admin: apiUrl.baseURL,
imgStatus: false,
- imgStatus2: false,
- messFlag: this.$store.state.userInfo.isActive == 3 ? true : 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;
+ // return false;
+ }
},
created() {
this.getUserInfo();
},
-
- beforeDestroy() {
- if (this.$state.theme == "red") {
- document.body.classList.remove("red-bg");
- document.body.classList.add("black-bg");
- }
- },
mounted() {
- if (this.$state.theme == "red") {
- document.body.classList.remove("black-bg");
- document.body.classList.add("red-bg");
- }
+ // 可以在这里加载用户已有的认证信息
+ // 如果用户已经提交过认证信息，可以显示认证状态
},
methods: {
- 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;
+
+ toSure() {
+ if (this.isSubmitting || this.isActive) return // 防止重复提交
+ // 实名认证弹框
+ if (isNull(this.form.name)) {
+ 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.form.img2key = URL.createObjectURL(file);
- compress(file, function (val) {});
+ // 显示确认弹窗
+ this.toAuthentication();
}
},
- handleError2() {
- this.imgStatus2 = false;
- },
- handleAvatarSuccess3(res, file) {
- this.form.img3key = res.data.url; // URL.createObjectURL(file.raw);
+ async toAuthentication() {
+ this.isSubmitting = true
+
+ let opts = {
+ realName: this.form.name,
+ idCard: this.form.idCard,
+ vaildNumber: this.form.vaildNumber,
+ img1key: this.form.img1key,
+ img2key: this.form.img2key,
+ img3key: this.form.img3key,
+ };
+ 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() {
// 获取用户信息
@@ -254,214 +165,205 @@
this.$router.push({ path: "/login" });
}
},
- beforeAvatarUpload3(file) {},
- // 上传
- handleFile: function (e) {
- // var that = this
- let $target = e.target || e.srcElement;
- let file = $target.files[0];
- // if(file.size > 1024 * 1024 *20){
- console.log(file, "file");
- let i = false;
- if (i) {
- Toast(this.$t("hj206"));
+ 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.img1Key = file;
- var reader = new FileReader();
- reader.onload = (data) => {
- let res = data.target || data.srcElement;
- this.form.img1Key = res.result;
- // Indicator.close()
- };
-
- reader.readAsDataURL(file);
+ this.form.img2key = URL.createObjectURL(file);
+ compress(file, function (val) { });
}
},
- toSure() {
- // 实名认证弹框
- if (isNull(this.form.name)) {
- Toast(this.$t("hj207"));
- } else if (isNull(this.form.idCard)) {
- Toast(this.$t("hj208"));
- } else {
- // 显示确认弹窗
- this.toAuthentication();
- }
+ handleError2() {
+ this.imgStatus2 = false;
},
- async toAuthentication() {
- // console.log(this.form);
-
- // return;
- let opts = {
- realName: this.form.name,
- idCard: this.form.idCard,
- vaildNumber: this.form.vaildNumber,
- img1key: this.form.img1key,
- img2key: this.form.img2key,
- img3key: this.form.img3key,
- };
- let data = await api.userAuth(opts);
- if (data.status === 0) {
- Toast(this.$t("hj210"));
- this.goBack();
- } else {
- Toast(data.msg);
- }
- },
- goBack() {
- this.$router.back(-1);
- },
- },
-};
+ }
+}
</script>
-<style scoped lang="less">
-.bank_card_page {
- width: 100%;
- // height: 100%;
- background: #fff;
- position: relative;
+<style lang="less" scoped>
+@green: #c4d600;
- .content {
- width: 100%;
- height: 100%;
- padding: 0 0.6rem;
-
- .top_back {
- width: 100%;
- height: 2rem;
-
- > div {
- width: 10%;
- height: 100%;
- display: flex;
- align-items: center;
- }
-
- img {
- width: 0.6rem;
- height: 0.6rem;
- }
- }
-
- .titles {
- width: 100%;
- height: 1.5rem;
- font-size: 0.641rem;
- margin-top: 1rem;
-
- span {
- font-weight: 600;
- }
- }
- }
-
- .bank_name {
- width: 100%;
- height: 1.5rem;
- display: flex;
- padding: 0 0.2rem;
- background: rgb(247, 247, 247);
- border-radius: 0.2rem;
- margin-top: 0.3rem;
-
- .lefts {
- width: 36%;
- height: 100%;
- display: flex;
- align-items: center;
- font-size: 0.3846rem;
-
- span {
- font-weight: 600;
- }
- }
-
- .rights {
- width: 75%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-
- input {
- width: 100%;
- height: 100%;
- }
- }
- }
+/deep/ .van-nav-bar__content {
+ height: 65px;
}
-.bank_name.bind {
+/deep/ .van-nav-bar__title {
+ font-family: "DINPro";
+ width: 100%;
+ height: 1.17333rem;
display: flex;
- align-items: center;
justify-content: center;
- background: #5c288c;
- font-size: 0.4103rem;
- color: #fff;
-
- span {
- font-weight: 600;
- }
-}
-
-.uploads {
- width: 100%;
- display: flex;
align-items: center;
- justify-content: space-between;
- margin-top: 0.3rem;
-
- > div {
- width: 48%;
- background: rgb(247, 247, 247);
- }
-}
-
-/deep/ .el-upload--picture-card {
- background: none;
- width: 100%;
- height: 1.6rem;
- line-height: 1.6rem;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 0.48rem;
+ color: #14181f;
}
/deep/ .el-upload__input {
display: none;
}
-.pass {
+.authentication-container {
+ /* padding: 20px; */
+ background-color: #ffffff;
+ min-height: 100vh;
+ font-size: 10vw;
+}
+
+.form-group {
+ margin-bottom: .25em;
+ padding: .25em .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: .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: .4em;
+ box-sizing: border-box;
+ color: #333;
+}
+
+.id-type-options {
display: flex;
- justify-content: center;
+ justify-content: space-between;
+}
+
+.option {
+ display: flex;
align-items: center;
- height: auto;
- // position: absolute;
- // top: 1.72rem;
- // right: .2rem;
- // opacity: 0.2;
+ padding: 10px 15px;
+ border: 1px solid #e8e8e8;
+ border-radius: 4px;
+ background-color: #fff;
+ flex: 1;
+ margin-right: 10px;
+}
- .top_t {
- width: 100%;
- height: auto;
- display: flex;
- flex-direction: column;
- justify-content: center;
- font-size: 80px;
- color: #3ac23e;
- align-items: center;
- img {
- width: 64px;
- height: 64px;
- margin-top: 200px;
- margin-bottom: 20px;
- }
- span {
- font-size: 30px;
- }
- }
+.option:last-child {
+ margin-right: 0;
+}
- .ise_pass {
- font-size: 80px;
+.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: .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: .4em;
}
}
-</style>
+
+.disabled {
+ opacity: .5;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3