1

PC-20250623MANY\Administrator

2025-08-11 16cfa24c67682909a1e810e206ee8a6655e859ed

 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,215 +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 if (!this.form.img1key) {
        Toast(this.$t("hj209"));
      } else if (!this.form.img2key) {
        Toast(this.$t("hj209"));
      } else {
        // 显示确认弹窗
        this.toAuthentication();
      }
    handleError2() {
      this.imgStatus2 = false;
    },
    async toAuthentication() {
      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>