1
2026-05-19 0ef335dce6b9f40f094fa46e08b0888a594fd2e1
src/page/authentication/index.vue
@@ -6,34 +6,35 @@
    <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 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="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>
    <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>
    <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 }">
    <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>
    <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"
@@ -43,8 +44,8 @@
      </el-upload>
    </div>
    <div class="form-group flex-between" :class="{ 'disabled': isSubmitting || isActive }">
      <label class="required-label">{{ $t('bsi1') }}</label>
    <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"
@@ -56,8 +57,15 @@
    <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 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>
@@ -69,30 +77,57 @@
import { isNull } from "@/utils/utils";
import { Toast } from "vant";
export default {
  name: 'Authentication',
  name: "Authentication",
  data() {
    return {
      frontImage: '',
      backImage: '',
      frontImage: "",
      backImage: "",
      isSubmitting: false,
      auRadio: '1',
      form: {
        phone: "",
        name: "",
        realName: "",
        idCard: "",
        realType: "1",
        vaildNumber: "",
        img1key: "",
        img2key: "",
        img2key: ""
      },
      imgStatus: false,
      admin: apiUrl.baseURL,
    }
      admin: apiUrl.baseURL
    };
  },
  computed: {
    //注册默认0  1.提交未实名 2.已实名 3.驳回, 状态1||2的时候屏蔽所有的输入
    // 注册默认0  1.审核中 2.已实名 3.驳回;状态1||2时屏蔽所有输入
    isActive() {
      return this.$store.state.userInfo.isActive == 1 || this.$store.state.userInfo.isActive == 2;
      // return false;
      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() {
@@ -103,11 +138,10 @@
    // 如果用户已经提交过认证信息,可以显示认证状态
  },
  methods: {
    toSure() {
      if (this.isSubmitting || this.isActive) return // 防止重复提交
      if (this.isSubmitting || this.isActive) return; // 防止重复提交
      // 实名认证弹框
      if (isNull(this.form.name)) {
      if (isNull(this.form.realName)) {
        Toast(this.$t("hj207"));
      } else if (isNull(this.form.idCard)) {
        Toast(this.$t("hj208"));
@@ -121,15 +155,10 @@
      }
    },
    async toAuthentication() {
      this.isSubmitting = true
      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,
        ...this.form
      };
      let data = await api.userAuth(opts);
      if (data.status === 0) {
@@ -138,7 +167,7 @@
      } else {
        Toast(data.msg);
      }
      this.isSubmitting = false
      this.isSubmitting = false;
    },
    async getUserInfo() {
      // 获取用户信息
@@ -154,7 +183,8 @@
        ) {
          this.form.idCard = this.$store.state.userInfo.idCard;
          this.form.vaildNumber = this.$store.state.userInfo.vaildNumber;
          this.form.name = this.$store.state.userInfo.realName;
          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;
@@ -192,13 +222,13 @@
    },
    handleError2() {
      this.imgStatus2 = false;
    },
    }
  }
}
};
</script>
<style lang="less" scoped>
@green: #c4d600;
@green: #00f0ff;
/deep/ .van-nav-bar__content {
  height: 65px;
@@ -229,8 +259,8 @@
}
.form-group {
  margin-bottom: .25em;
  padding: .25em .25em 0;
  margin-bottom: 0.25em;
  padding: 0.25em 0.25em 0;
}
label {
@@ -244,11 +274,11 @@
.required-label {
  color: #333;
  font-weight: bold;
  font-size: .4em;
  font-size: 0.4em;
}
.required-label::before {
  content: '*';
  content: "*";
  color: #ff4d4f;
  margin-right: 4px;
}
@@ -259,7 +289,7 @@
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 0 15px;
  font-size: .4em;
  font-size: 0.4em;
  box-sizing: border-box;
  color: #333;
}
@@ -347,7 +377,7 @@
.submit-button {
  width: 9.5em;
  margin: .4em auto 0;
  margin: 0.4em auto 0;
  height: 1.2em;
  background-color: #e6e254;
  color: #fff;
@@ -359,11 +389,69 @@
  font-weight: normal;
  span {
    font-size: .4em;
    font-size: 0.4em;
  }
}
.disabled {
  opacity: .5;
  opacity: 0.5;
}
</style>
.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>