还原

zhaoxiaoqiang

2022-08-05 1aabe35193870f66acae5013fb10003a5bb16b96

 src/components/upload/uploadIdCard.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2019-08-30 18:04:49
 * @LastEditors: zxq
 * @LastEditTime: 2022-08-04 16:08:29
 * @LastEditTime: 2022-06-10 14:38:34
 * @Description:
 -->
<template>
@@ -20,27 +20,23 @@
    </div>
    <!-- 真正的上传按钮-->
    <div>
      <!-- <label class="upload" > -->
        <input
          style="cursor:pointer"
        style="display: none;cursor:pointer"
          type="file"
  
          ref="uploadImg"
        id='androidInputFileImage'
        ref="androidInputFileImage"
          @change="handlePhotoChange($event, 1)"
          accept="image/jpg, image/jpeg, image/png"
        />
      <!-- </label> -->
      <!-- <label class="upload"  > -->
        <input
          style="cursor:pointer"
        style="display: none;cursor:pointer;"
          type="file"

        id='androidInputFileCapture'
          ref="androidInputFileCapture"
          @change="handlePhotoChange($event, 2)"
          accept="image/*"
          capture="camera"
        />
      <!-- </label> -->
    </div>
    <!--选择上传图片还是拍照-->
    <van-action-sheet
@@ -73,16 +69,16 @@
      picZ: {},
      picF: {},
      zOrf: "",
      isFirst: true,
      isFirst: true
    };
  },
  props: {
    cardFont: {
      type: String,
      type: String
    },
    cardBack: {
      type: String,
    },
      type: String
    }
  },
  watch: {
    cardFont: function (newVal, oldVal) {
@@ -96,7 +92,7 @@
        this.picList[1].fileId = this.cardBack.slice(1);
        this.picList[1].fileUrl = this.cardBack;
      }
    },
    }
  },
  methods: {
    ...mapMutations([SET_APP_LOADING]),
@@ -152,7 +148,7 @@
          comimg.onload = function (eimg) {
            let num = 1;
            if (this.width < this.height) {
              num = 8;
                      num = 8
            }
            that.getImgData(e.target.result, num, function (data) {
              // 这里可以使用校正后的图片data了
@@ -167,13 +163,13 @@
              // 图片的路径获取成功后
              function callback() {
                // 压缩后的图片的base64字符串
                console.log(img.width, img.height);
                        console.log(img.width,img.height)
                let data = that.compress(img);
                // 调取接口上传图片
                that.submitUploadImg(that.fileType, data);
              }
            });
          };
                  }
          // }
          // })
        };
@@ -186,20 +182,20 @@
      // 防止操作的模态窗
      let submitInfo = {
        base64Data: base64.split(",")[1], // 文件base64
        suffix: base64.split(",")[0].split(";")["0"].split("/")[1],
        suffix: base64.split(",")[0].split(";")["0"].split("/")[1]
      };
      this.$api.uploadFile(submitInfo).then(
        (res) => {
        res => {
          if (that.zOrf == 1) {
            that.picZ = {
              fileUrl: res.body.fileUrl,
              fileId: res.body.fileId,
              fileId: res.body.fileId
            };
            that.picList[0] = that.picZ;
          } else {
            that.picF = {
              fileUrl: res.body.fileUrl,
              fileId: res.body.fileId,
              fileId: res.body.fileId
            };
            that.picList[1] = that.picF;
          }
@@ -208,7 +204,7 @@
          }
          that.SET_APP_LOADING(false);
        },
        (error) => {
        error => {
          this.SET_APP_LOADING(false);
        }
      );
@@ -219,9 +215,9 @@
        this.$api
          .getIdCardInfo({
            idBackId: this.picList[1].fileId,
            idFrontId: this.picList[0].fileId,
            idFrontId: this.picList[0].fileId
          })
          .then((res) => {
          .then(res => {
            let obj = res.body;
            obj.idBackUrl = this.picList[1].fileUrl;
            obj.idFrontUrl = this.picList[0].fileUrl;
@@ -300,9 +296,9 @@
      // authStatus: 0 未授权  1授权---用户授权后才能执行下一步
      this.$api
        .checkAuth({
          fileId: id,
          fileId: id
        })
        .then((res) => {
        .then(res => {
          if (res.body.authStatus === 1) {
            this.$emit("on-check-auth", "下一步");
          }
@@ -317,22 +313,10 @@
    },
    // 选择拍照或者相册选项
    handleMenuSelect(item, index) {
      console.log(this.$refs);
      console.log(this.$refs.androidInputFileCapture);
      console.log(this.$refs.uploadImg);
      console.log(document.getElementById('androidInputFileCapture'));
      if (index === 0) {
        // this.$refs.androidInputFileCapture.dispatchEvent(
        //   new MouseEvent("click")
        // );
         this.$nextTick(()=>{
          this.$refs.androidInputFileCapture.click();
         })
      } else {
        this.$refs.uploadImg.dispatchEvent(new MouseEvent("click"));
        //  this.$nextTick(()=>{
        //     this.$refs.uploadImg.click();
        //  })
        this.$refs.androidInputFileImage.click();
      }
      this.selectModel = false;
    },
@@ -352,49 +336,31 @@
      var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
      var isSamsung = sUserAgent.match(/sm-/i) == "sm-";
      if (isIphone) {
        return "iphone";
           return 'iphone';
      } else if (isHuawei || isHonor) {
        return "huawei";
           return 'huawei';
      } else if (isOppo || isOppoR15) {
        return "oppo";
           return 'oppo';
      } else if (isVivo) {
        return "vivo";
           return 'vivo';
      } else if (isXiaomi || isRedmi || isXiaomi2s) {
        return "xiaomi";
           return 'xiaomi';
      } else if (isSamsung) {
        return "samsung";
           return 'samsung';
      } else {
        return "default";
           return 'default';
       }
      }
    },
  created(){
  //  let 
  //  console.log(shebei);
  }
};
</script>

<style lang="less" scoped>
.component-photo-upload {
  .upload {
    cursor: pointer;
    display: block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    position: relative;
    text-align: center;
    overflow: hidden;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    margin: -1px;
  }
  .pic-title {
    h4 {
      padding: 10px 0;