身份证

zhaoxiaoqiang

2022-08-05 db82e5990f81ba35b1668e08dcbbb71990a6a486

 src/components/upload/uploadIdCard.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2019-08-30 18:04:49
 * @LastEditors: zxq
 * @LastEditTime: 2022-08-05 14:35:52
 * @LastEditTime: 2022-08-05 15:02:07
 * @Description:
 -->
<template>
@@ -20,23 +20,8 @@
    </div>
    <!-- 真正的上传按钮-->
    <div>
      <input
        style="display: none;cursor:pointer"
        type="file"
        id='inputFileImage'
        ref="androidInputFileImage"
        @change="handlePhotoChange($event,1)"
        accept="image/jpg, image/jpeg, image/png"
      />
      <input
        style="display: none;cursor:pointer;"
        type="file"
        id='inputFileCapture'
        ref="androidInputFileCapture"
        @change="handlePhotoChange($event,2)"
        accept="image/*"
        capture="camera"
      />
    
      
    </div>
    <!--选择上传图片还是拍照-->
    <!-- <van-action-sheet
@@ -46,9 +31,31 @@
      :actions="nav"
      @select="handleMenuSelect"
    ></van-action-sheet> -->
    <van-action-sheet v-model="selectModel" cancel-text="取消" title="标题">
      <div v-for="item in nav" :key="item.code" class="content">
        <span  @click="handleMenuSelect(item.code)">{{item.name}}</span>
    <van-action-sheet v-model="selectModel" cancel-text="取消" title="上传身份证">
      <div class="content">
        <div class="upload_input">
                <div>拍照</div>
                <input
                  style="cursor:pointer;width:100%;opacity:0;"
                  type="file"
                  id='inputFileCapture'
                  ref="androidInputFileCapture"
                  @change="handlePhotoChange($event,2)"
                  accept="image/*"
                  capture="camera"
                />
          </div>
          <div class="upload_input">
              <div>本地相册上传</div>
              <input
                  style="cursor:pointer;width:100%;opacity: 0;"
                  type="file"
                  id='inputFileImage'
                  ref="androidInputFileImage"
                  @change="handlePhotoChange($event,1)"
                  accept="image/jpg, image/jpeg, image/png"
                />
          </div>
      </div>
    </van-action-sheet>
    <!-- <button @click="onclick">aa</button> -->
@@ -103,6 +110,7 @@
    ...mapMutations([SET_APP_LOADING]),
    // 处理图片上传的事件(deleteIndex---删除图片的索引)
    handlePhotoChange: function(evt,type) {
      this.selectModel = false;
      let that = this;
      let shebei = this.judgeBrand(navigator.userAgent.toLowerCase());
      that.SET_APP_LOADING(true);
@@ -318,7 +326,6 @@
    },
    // 选择拍照或者相册选项
    handleMenuSelect(index) {
      console.log( this.$children[0]  )
      if (index === 0) {
        this.$refs.androidInputFileCapture.click();
      } else {
@@ -365,8 +372,21 @@
};
</script>

<style lang="less" scoped >
<style lang="less"  >
.component-photo-upload {
  .upload_input{
    font-size: 16px;
    width: 100%;
    height: 45px;
    position: relative;
    text-align: center;
    margin-top: 10px;
    input{
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  .pic-title {
    h4 {
      padding: 10px 0;