soc_app/src/components/nfcPopup/alone.vue

<template>
  <div class="nfc-popup">
    <van-popup v-model="visible" get-container="nfc-popup" lock-scroll>
      <div class="nfc-panel">
        <div>
          <p class="top-text">将手机背部靠近NFC标签扫描</p>
          <div class="image-box">
            <img class="nfc-image" v-show="nfcImage" :src="nfcImage" alt="" />
          </div>
          <div class="bottom-box">
            <div @click="submitNFC">
              <img :src="require('../../assets/img/icon/NFC扫描-01.png')" />
              <span>NFC</span>
            </div>
            <div @click="nfcTakePhotos">
              <img :src="require('../../assets/img/icon/camera.png')" />
              <span>拍照</span>
            </div>
          </div>
        </div>
      </div>
      <input v-show="false" ref="upload" type="file" accept="image/*" @change="fileChange" />
      <!--    <uploader v-show="false" ref="imageUpload" v-model="nfcImage" multiple :maxCount="1" :deletable="false"/>-->
    </van-popup>
  </div>
</template>

<script>
import { baseImg } from '@/views/menu/LZRegister/api'
import { upload } from '@/api/public'
import ImageCompressor from 'js-image-compressor'
import { Toast } from 'vant'
export default {
  name: 'index',
  data() {
    return {
      //nfc弹窗
      visible: false,
      //nfc图片(base64)
      nfcImage: null,
      //是否显示底部按钮
      showBottomBox: true,
      objNfc: null
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.nfcImage = null
      }
    }
  },
  mounted() {
    window.openNFCScanCallBack = this.openNFCScanCallBack
  },
  methods: {
    //上传前
    async fileChange(e) {
      let file = e.target.files[0]
      let fileName = e.target.files[0].name
      let imgFile = await this.imageCompress(file)
      console.log(imgFile, 'imgFile')
      let formData = new FormData()
      formData.append('file', imgFile)
      upload(formData, 'image').then(res => {
        console.log(res, 'resssss')
        // this.nfcImage = baseImg.base;
        this.$emit('change', baseImg)
        this.visible = false

        // this.showBottomBox = false;
      })
    },
    //压缩图片
    imageCompress(file) {
      let imageCom = new Promise((resolve, reject) => {
        new ImageCompressor({
          file,
          quality: 0.6,
          success: result => {
            console.log(result, '图片压缩后')
            let img = new File([result], result.name, {
              width: result.width,
              height: result.height,
              type: result.type
            })
            resolve(img)
          },
          error: e => {
            console.log('imageError:' + e)
            this.$toast('图片压缩失败')
            reject(e)
          }
        })
      })
      return imageCom
    },
    nfcTakePhotos() {
      this.$refs.upload.click()
    },
    submitNFC() {
      this.useNFC()
      // Toast.success(this.openNFCScanCallBack())

      // alert(this.objNfc)
    },
    openNFCScanCallBack(data) {
      this.objNfc = JSON.parse(data)
      if (this.objNfc.errorCode == 0) {
        this.$emit('changeNFC', this.objNfc.content)
        Toast.success('扫描成功')
        
        this.visible = false
      } else {
        Toast.error(this.objNfc.errorString)
      }
    }
  }
}
</script>
<style lang="scss">
#app {
  .nfc-popup {
    .van-popup--center {
      border-radius: 20px;
    }
  }
}
</style>
<style scoped lang="scss">
.nfc-panel {
  width: 400px;
  background: url('../../assets/img/NFCphone.png') center no-repeat;
  background-size: 50%;
  > div {
    padding: 30px;
  }
}
.top-text {
  text-align: center;
  font-size: 26px;
}
.image-box {
  width: 100%;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nfc-image {
  width: 300px;
  height: 300px;
}
.bottom-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  > div {
    display: flex;
    flex-direction: column;
    &:active {
      opacity: 0.5;
    }
    > img {
      width: 70px;
      height: 70px;
    }
    > span {
      text-align: center;
      font-size: 25px;
    }
  }
}
</style>