首次提交大宝wap

jhzh

2024-03-23 0d29d9a2bf0d893a67f1263bb9525131a50a2128

 src/page/authentication/index.vue

@@ -7,70 +7,83 @@
        </div>
      </div>
      <div class="titles">
        <span>{{ '实名认证' }}</span>
        <span>{{ $t('hj146') }}</span>
      </div>
      <div class="bank_name">
        <div class="lefts">
          <span>{{ '真实姓名:' }}</span>
          <span>{{ $t('hj195') + ':' }}</span>
        </div>
        <div class="rights">
          <input v-if="showBtn" type="text" v-model="form.name" />
          <input v-if="showBtn" type="text" placeholder="Please enter your Name" v-model="form.name" />

          <input v-if="!showBtn" type="text" v-model="form.name" readonly />
        </div>
      </div>
      <div class="bank_name">
        <div class="lefts">
          <span>{{ '身份证号:' }}</span>
          <span>{{ $t('hj196') + ':' }}</span>
        </div>
        <div class="rights">
          <input v-if="showBtn" type="text" v-model="form.idCard" />
          <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="uploads">
      <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" />
            <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">身份证正面</span>
            <span v-if="imgStatus" class="btn-title">正在上传中...</span>
            <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" />
            <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">身份证背面</span>
            <span v-if="imgStatus2" class="btn-title">正在上传中...</span>
            <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> -->
      <div class="bank_name bind" @click="toSure" v-if="showBtn">
        <span>{{ '确定' }}</span>
        <span>{{ $t('hj161') }}</span>
      </div>
      <van-notify v-model="messFlag" type="primary">
        <div>
          <div class="eft">
            <span>{{ '认证失败，请重新认证' }}</span>
            <span>{{ $t('hj200') }}</span>
          </div>
          <div class="bft">
            <span>失败原因：{{ this.$store.state.userInfo.authMsg }}</span>
            <span>{{ $t('hj201') }}：{{ this.$store.state.userInfo.authMsg }}</span>
          </div>
        </div>
      </van-notify>
    </div>
    <div class="pass">
      <div class="top_t">
        <span v-if="this.$store.state.userInfo.isActive == 1" class="ise_pass">{{ '审核中' }}</span>
        <span v-if="!showBtn && this.$store.state.userInfo.isActive != 1">{{ '通过' }}</span>
        <span v-if="showBtn" class="ise_pass">{{ '未通过' }}</span>
      <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>

  </div>
</template>

@@ -88,6 +101,7 @@
        phone: "",
        name: "",
        idCard: "",
        vaildNumber:"",
        img1key: "",
        img2key: "",
        img3key: ""
@@ -104,19 +118,8 @@
  },
  created() {
    this.getUserInfo();
    if (
        this.$store.state.userInfo.isActive === 1 ||
        this.$store.state.userInfo.isActive === 2
      ) {
        this.form.idCard = this.$store.state.userInfo.idCard;
        this.form.name = this.$store.state.userInfo.realName;
        this.form.img1key = this.$store.state.userInfo.img1Key;
        this.form.img2key = this.$store.state.userInfo.img2Key;
        //   this.form.img3key = this.$store.state.userInfo.img3Key
        this.showBtn = false;
      }
  },
 

  beforeDestroy() {
    if (this.$state.theme == "red") {
      document.body.classList.remove("red-bg");
@@ -129,8 +132,9 @@
      document.body.classList.add("red-bg");
    }
    this.admin = process.env.API_HOST;
    if (this.admin === undefined) {
      this.admin = "";
    console.log(this.admin)
    if (this.admin == undefined) {
      this.admin = "https://api.guosen.org";
    }
  },
  methods: {
@@ -153,7 +157,7 @@
      // const _that = this
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error("上传图片大小不能超过 10M!");
        this.$message.error(this.$t('hj205'));
        return false;
      } else {
        this.form.img2key = URL.createObjectURL(file);
@@ -179,6 +183,7 @@
        this.$store.state.userInfo.isActive === 2
      ) {
        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.img1key = this.$store.state.userInfo.img1Key;
        this.form.img2key = this.$store.state.userInfo.img2Key;
@@ -201,7 +206,7 @@
      console.log(file, "file");
      let i = false;
      if (i) {
        Toast("您上传的照片过大，请选择20M以下的图片");
        Toast(this.$t('hj206'));
      } else {
        // Indicator.open('Loading...')
        this.img1Key = file;
@@ -221,13 +226,16 @@
    },
    toSure() {
      // 实名认证弹框
      if (isNull(this.form.name) || !isName(this.form.name)) {
        Toast("请输入您的真实姓���");
      } else if (isNull(this.form.idCard) || !idCardReg(this.form.idCard)) {
        Toast("请输入您的正确的身份证号码");
      } else if (isNull(this.form.img1key) || isNull(this.form.img2key)) {
        Toast("请上传您的身份证照片");
      } else {
      if (isNull(this.form.name)) {
      // if (isNull(this.form.name) || !isName(this.form.name)) {
        Toast(this.$t('hj207'));
      } else if (isNull(this.form.idCard)) {
        Toast(this.$t('hj208'));
      }
      // else if (isNull(this.form.img1key) || isNull(this.form.img2key)) {
      //   Toast(this.$t('hj209'));
      // }
       else {
        // 显示确认弹窗
        this.toAuthentication();
      }
@@ -236,13 +244,13 @@
      let opts = {
        realName: this.form.name,
        idCard: this.form.idCard,
        img1key: this.form.img1key,
        vaildNumber: this.form.vaildNumber,
        img2key: this.form.img2key,
        img3key: this.form.img3key
      };
      let data = await api.userAuth(opts);
      if (data.status === 0) {
        Toast("提交成功!");
        Toast(this.$t('hj210'));
        this.goBack();
      } else {
        Toast(data.msg);
@@ -306,7 +314,7 @@
    margin-top: 0.3rem;

    .lefts {
      width: 25%;
      width: 36%;
      height: 100%;
      display: flex;
      align-items: center;
@@ -336,7 +344,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2d6ae9;
  background: #5C288C;
  font-size: 0.4103rem;
  color: #fff;

@@ -370,25 +378,38 @@
}

.pass {
  width: 70%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  position: absolute;
  top: 1.72rem;
  right: .2rem;
  opacity: 0.2;
  // position: absolute;
  // top: 1.72rem;
  // right: .2rem;
  // opacity: 0.2;

  .top_t {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    font-size: 3.2821rem;
    color: #99b8f5;
    align-items: flex-end;
    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;
    }
  }

  .ise_pass {
    font-size: 2.2rem;
    font-size: 80px;
  }
}
</style>
</style>