test

zhaoxiaoqiang

2022-08-04 afc39a9d2a36c447b3c5ce92e856039e0bf40800

test

 src/components/upload/uploadIdCard.vue

@@ -20,23 +20,29 @@
    </div>
    <!-- 真正的上传按钮-->
    <div>
      <label class="upload">
      <input
        style="display:none;cursor:pointer;"
          class="sr-only"
          style="display: none; cursor: pointer"
        type="file"
        id='androidInputFileImage'
          id="androidInputFileImage"
        ref="androidInputFileImage"
        @change="handlePhotoChange($event,1)"
        accept="image/jpg, image/jpeg, image/png"
      />
      </label>
      <label class="upload">
      <input
        style=" display:none;cursor:pointer;"
          class="sr-only"
          style="display: none; cursor: pointer"
        type="file"
        id='androidInputFileCapture'
          id="androidInputFileCapture"
        ref="androidInputFileCapture"
        @change="handlePhotoChange($event,2)"
        accept="image/*"
        capture="camera"
      />
      </label>
    </div>
    <!--选择上传图片还是拍照-->
    <van-action-sheet
@@ -69,16 +75,16 @@
      picZ: {},
      picF: {},
      zOrf: "",
      isFirst: true
      isFirst: true,
    };
  },
  props: {
    cardFont: {
      type: String
      type: String,
    },
    cardBack: {
      type: String
    }
      type: String,
    },
  },
  watch: {
    cardFont: function(newVal, oldVal) {
@@ -92,7 +98,7 @@
        this.picList[1].fileId = this.cardBack.slice(1);
        this.picList[1].fileUrl = this.cardBack;
      }
    }
    },
  },
  methods: {
    ...mapMutations([SET_APP_LOADING]),
@@ -148,7 +154,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了
@@ -163,13 +169,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);
                        }
                    });
                  }
          };
                // }
            // })
        };
@@ -182,20 +188,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;
          }
@@ -204,7 +210,7 @@
          }
          that.SET_APP_LOADING(false);
        },
        error => {
        (error) => {
          this.SET_APP_LOADING(false);
        }
      );
@@ -215,9 +221,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;
@@ -296,9 +302,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", "下一步");
          }
@@ -315,11 +321,13 @@
    handleMenuSelect(item, index) {
      console.log(this.$refs.androidInputFileCapture.click(),index);
      if (index === 0) {
        this.$refs.androidInputFileCapture.dispatchEvent(new MouseEvent('click'))
        // this.$refs.androidInputFileCapture.ontouch();
        // this.$refs.androidInputFileCapture.dispatchEvent(
        //   new MouseEvent("click")
        // );
        this.$refs.androidInputFileCapture.click();
      } else {
        this.$refs.androidInputFileImage.dispatchEvent(new MouseEvent('click'))
        // this.$refs.androidInputFileImage.touch();
        // this.$refs.androidInputFileImage.dispatchEvent(new MouseEvent("click"));
        this.$refs.androidInputFileImage.click();
      }
      this.selectModel = false;
    },
@@ -339,31 +347,53 @@
       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;
@@ -371,7 +401,6 @@
      line-height: 1;
      color: #333;
      font-weight: normal;
     
    }
  }