soc_app/src/components/nfcPopup/more.vue

<template>
  <div class="nfc-popup">
    <van-popup v-model="visible" get-container="nfc-popup" lock-scroll :close-on-click-overlay="closeOverlay">
      <div class="nfc-panel">
        <div>
          <p v-if="showBottomBox" class="top-text">将手机背部靠近NFC标签扫描</p>
          <div class="image-box">
            <img class="nfc-image" v-show="nfcImage" :src="nfcImage" alt="" @click="nfcTakePhotos">
          </div>
          <div v-if="showBottomBox" class="bottom-box">
            <div>
              <img :src="require('../../assets/img/icon/NFC扫描-01.png')" />
              <span>NFC</span>
            </div>
            <div>
              <img :src="require('../../assets/img/icon/camera.png')" />
              <span @click="nfcTakePhotos">拍照</span>
            </div>
          </div>
          <div v-else>
            <select-cell title="点击选择NFC列表" @change="changeNFC" v-model="selectNFC" :prop="prop" :dataList="dataList"/>
            <van-button v-if="showBtn" type="primary"  size="small" block plain @click="onConfirm">确定</van-button>
          </div>
        </div>
      </div>
      <input v-show="false" ref="upload" type='file' accept="image/*" @change="fileChange"/>
    </van-popup>
  </div>
</template>

<script>
import SelectCell from "@/components/selectCell";
import {baseImg} from "@/views/menu/LZRegister/api";
import {upload} from "@/api/public";
import ImageCompressor from "js-image-compressor";
export default {
  components:{SelectCell},
  data(){
    return {
      //nfc弹窗
      visible:false,
      //上传的nfc图片
      nfcImage:null,
      //是否显示底部按钮
      showBottomBox:true,
      //nfc数据
      dataList:[],
      //选中的nfc
      selectNFC:null,
      //自定义字段
      prop:{
        label:'checkName',
        value:'nfccdoe'
      },
      //是否可点击遮罩层关闭
      closeOverlay:true,
      showBtn:false,
    }
  },
  watch:{
    visible(val){
      if(!this.visible){
        this.clear();
      }
    }
  },
  methods:{
    onConfirm(){
      let data = {
        nfcCode:this.selectNFC,
        url:this.nfcImage,
      }
      this.$emit('change',data);
      this.visible = false;
      this.clear();
    },
    //切换nfc后可点击退出
    changeNFC(){
      this.showBtn = true;
    },
    //清空数据
    clear(){
      this.nfcImage = null;
      this.showBottomBox = true;
      this.selectNFC = null;
      this.dataList = [];
      this.closeOverlay = true;
    },
    //显示弹窗
    show(list){
      this.visible = true;
      this.dataList = list;
      console.log(this.dataList,'datalist')
    },
    //上传前
    async fileChange(e){
      let file = e.target.files[0];
     // let fileName = e.target.files[0].name;
      let imgFile = await this.imageCompress(file);
      let formData = new FormData();
      formData.append('file',imgFile);
      upload(formData,'image').then(res=>{
        //上传成功后，将图片显示在页面上并禁用退出
        this.nfcImage = res.data.url;
        this.showBottomBox = false;
        this.closeOverlay = false;
      })
    },
    //压缩图片
    imageCompress(file){
       return new Promise((resolve,reject)=>{
        new ImageCompressor({
          file,
          quality: 0.6,
          success: (result) => {
            //this.$toast('图片压缩成功')
            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);
          },
        });
      });
    },
    //拍照
    nfcTakePhotos(){
      this.$refs.upload.click();
    },
  }
}
</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;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nfc-image{
  width: 300px;
  height: 300px;
  background-color: #fff;
}
.bottom-box{
  display: flex;
  justify-content: space-around;
  align-items: center;
  >div{
    display: flex;
    flex-direction: column;
    &:active{
      opacity: .5;
    }
    >img{
      width: 70px;
      height: 70px;
    }
    >span{
      text-align: center;
      font-size: 25px;
    }
  }
}
</style>