1
jhzh
2025-11-12 1bd03f5c2e7b9fa9cc80c4e673e18132da411333
src/page/authentication/index.vue
@@ -4,7 +4,11 @@
      @click-left="$router.go(-1)">
    </van-nav-bar>
    <div style="width: 100%; height: .25em; background-color: #f8f8f8"></div>
    <div style="width: 100%; height: .25em; background-color: #777"></div>
    <div class="shjj" v-if="$store.state.userInfo.isActive == 3">
      {{ $t('shjj') }}: {{ $store.state.userInfo.authMsg }}
    </div>
    <div class="form-group" :class="{ 'disabled': isSubmitting || isActive }">
      <label class="required-label">{{ $t('hj195') }}</label>
@@ -14,9 +18,7 @@
    <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 name="1">{{ $t('hj196') }}</van-radio>
      </van-radio-group>
    </div>
@@ -30,12 +32,12 @@
      <input type="text" v-model="form.vaildNumber" class="form-input" :disabled="isActive" />
    </div>
    <div style="width: 100%; height: .25em; background-color: #f8f8f8"></div>
    <div style="width: 100%; height: .25em; background-color: #777"></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'"
      <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%" />
@@ -46,7 +48,7 @@
    <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'"
      <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%" />
@@ -54,10 +56,12 @@
      </el-upload>
    </div>
    <div style="width: 100%; height: .25em; background-color: #f8f8f8"></div>
    <div style="width: 100%; height: .25em; background-color: #777"></div>
    <div class="submit-button" :class="{ 'disabled': isSubmitting || isActive }" @click="toSure">
      <span>{{ $t("uv1") }}</span>
      <span>
        {{ isSubmitting || isActive ? $store.state.userInfo.isActive == 2 ? $t('sptg') : $t("uv1") : $t('hj161') }}
      </span>
    </div>
  </div>
</template>
@@ -85,6 +89,9 @@
        img2key: "",
      },
      imgStatus: false,
      imgStatus2: false,
      previousImg1key: '',
      previousImg2key: '',
      admin: apiUrl.baseURL,
    }
  },
@@ -116,6 +123,15 @@
      } else if (!this.form.img2key) {
        Toast(this.$t("hj209"));
      } else {
        // 验证图片地址是否为有效的网络地址
        if (this.form.img1key && this.form.img1key.startsWith('blob:')) {
          Toast('请等待图片上传完成');
          return;
        }
        if (this.form.img2key && this.form.img2key.startsWith('blob:')) {
          Toast('请等待图片上传完成');
          return;
        }
        // 显示确认弹窗
        this.toAuthentication();
      }
@@ -148,17 +164,13 @@
        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.name = this.$store.state.userInfo.realName;
          this.form.img1key = this.$store.state.userInfo.img1Key;
          this.form.img2key = this.$store.state.userInfo.img2Key;
          this.showBtn = false;
        }
        // 回填数据
        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;
        this.showBtn = false;
      } else {
        //this.$store.commit('dialogVisible',true);
        //跳转到login
@@ -167,38 +179,99 @@
    },
    handleAvatarSuccess(res, file) {
      this.imgStatus = false;
      this.form.img1key = res.data.url;
      // 确保返回的是有效的网络图片地址,而不是临时 blob URL
      if (res && res.data && res.data.url) {
        // 验证 URL 是否为网络地址(不是 blob URL)
        if (res.data.url.startsWith('http://') || res.data.url.startsWith('https://')) {
          this.form.img1key = res.data.url;
        } else {
          // 如果返回的不是完整 URL,可能是相对路径,需要拼接 baseURL
          this.form.img1key = this.admin.replace(/\/$/, '') + '/' + res.data.url.replace(/^\//, '');
        }
      } else {
        // 如果响应格式不正确,恢复之前的值
        if (this.previousImg1key) {
          this.form.img1key = this.previousImg1key;
        }
        Toast(this.$t("hj209") || '图片上传失败,请重试');
      }
    },
    beforeAvatarUpload(file) {
      this.imgStatus = true;
      // 保存之前的图片地址,如果上传失败可以恢复
      this.previousImg1key = this.form.img1key;
      return true;
    },
    handleError() {
      this.imgStatus = false;
      // 上传失败时,恢复之前的图片地址(如果有)
      if (this.previousImg1key) {
        this.form.img1key = this.previousImg1key;
      } else {
        // 如果没有之前的地址,清空并清理可能的临时 URL
        if (this.form.img1key && this.form.img1key.startsWith('blob:')) {
          URL.revokeObjectURL(this.form.img1key);
          this.form.img1key = '';
        }
      }
      Toast(this.$t("hj209") || '图片上传失败,请重试');
    },
    handleAvatarSuccess2(res, file) {
      this.imgStatus2 = false;
      this.form.img2key = res.data.url; // URL.createObjectURL(file.raw);
      // 确保返回的是有效的网络图片地址,而不是临时 blob URL
      if (res && res.data && res.data.url) {
        // 验证 URL 是否为网络地址(不是 blob URL)
        if (res.data.url.startsWith('http://') || res.data.url.startsWith('https://')) {
          this.form.img2key = res.data.url;
        } else {
          // 如果返回的不是完整 URL,可能是相对路径,需要拼接 baseURL
          this.form.img2key = this.admin.replace(/\/$/, '') + '/' + res.data.url.replace(/^\//, '');
        }
      } else {
        // 如果响应格式不正确,恢复之前的值
        if (this.previousImg2key) {
          this.form.img2key = this.previousImg2key;
        }
        Toast(this.$t("hj209") || '图片上传失败,请重试');
      }
    },
    beforeAvatarUpload2(file) {
      this.imgStatus2 = true;
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error(this.$t("hj205"));
        this.imgStatus2 = false;
        return false;
      } else {
        this.form.img2key = URL.createObjectURL(file);
        compress(file, function (val) { });
      }
      // 保存之前的图片地址,如果上传失败可以恢复
      this.previousImg2key = this.form.img2key;
      // 不再设置临时 blob URL,等待上传成功后再设置
      compress(file, function (val) { });
      return true;
    },
    handleError2() {
      this.imgStatus2 = false;
      // 上传失败时,恢复之前的图片地址(如果有)
      if (this.previousImg2key) {
        this.form.img2key = this.previousImg2key;
      } else {
        // 如果没有之前的地址,清空并清理可能的临时 URL
        if (this.form.img2key && this.form.img2key.startsWith('blob:')) {
          URL.revokeObjectURL(this.form.img2key);
          this.form.img2key = '';
        }
      }
      Toast(this.$t("hj209") || '图片上传失败,请重试');
    },
    goBack() {
      this.$router.go(-1);
    },
  }
}
</script>
<style lang="less" scoped>
@green: #c4d600;
@green: #287dff;
/deep/ .van-nav-bar__content {
  height: 65px;
@@ -221,9 +294,15 @@
  display: none;
}
.shjj {
  font-size: .4rem;
  color: red;
  padding: .2rem;
}
.authentication-container {
  /* padding: 20px; */
  background-color: #ffffff;
  // background-color: #ffffff;
  min-height: 100vh;
  font-size: 10vw;
}
@@ -242,7 +321,7 @@
}
.required-label {
  color: #333;
  // color: #333;
  font-weight: bold;
  font-size: .4em;
}
@@ -261,7 +340,7 @@
  padding: 0 15px;
  font-size: .4em;
  box-sizing: border-box;
  color: #333;
  // color: #333;
}
.id-type-options {
@@ -349,7 +428,7 @@
  width: 9.5em;
  margin: .4em auto 0;
  height: 1.2em;
  background-color: #e6e254;
  background-color: @green;
  color: #fff;
  border-radius: 4px;
  display: flex;