soc_app/src/components/nfcPopup/more.vue

<template>
  <div class="nfc-popup">
    <van-popup v-model="visible" get-container="nfc-popup" lock-scroll>
      <div class="nfc-panel">
        <div>
          <p v-if="showBottomBox" class="top-text">将手机背部靠近NFC标签扫描</p>
          <div class="image-box">
            <img class="background-image" v-if="!nfcImage" src="../../assets/img/NFCphone.png" alt="" >
            <img class="nfc-image" v-else :src="imgUrl(nfcImage)" alt="" @click="nfcTakePhotos">
          </div>
          <!--          <p v-if="file" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{'文件名:'+file}}</p>-->
          <p v-if="imageError">{{'Error:'+imageError}}</p>
          <div v-if="showBottomBox" class="bottom-box">
            <div @click="nfcCheck">
              <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 v-else>
              <p>{{selectNFC}}</p>
            <select-cell title="需要拍照的NFC" v-model="selectNFC" :prop="prop" :dataList="dataList"/>
            <van-button v-if="selectNFC" type="info"  size="small" block @click="onConfirm">确认该照片</van-button>
          </div>
        </div>
      </div>
      <input v-show="false" ref="upload"  type='file' accept="image/*"  capture="camera" @change="fileChange" @click="useCamera(1)"/>
      <!--      <input v-show="false" ref="upload"  type='file' accept="image/*" capture="camera" @change="fileChange"/>-->
    </van-popup>
  </div>
</template>

<script>
import SelectCell from "@/components/selectCell";
import {baseImg} from "@/views/menu/LZRegister/api";
import {upload, uploadBase64} from "@/api/public";
import ImageCompressor from "js-image-compressor";
import config from "@/config";
import {imgUrl} from "@/utils";
export default {
  components:{SelectCell},
  data(){
    return {
      //nfc弹窗
      visible:false,
      //上传的nfc图片
      nfcImage:null,
      //是否显示底部按钮
      showBottomBox:true,
      //nfc数据
      dataList:[],
      //选中的nfc
      selectNFC:null,
      //自定义字段
      prop:{
        label:'nfcName',
        value:'nfcCode'
      },
      //提交按钮
      showBtn:false,
      file:null,
      imageError:null
    }
  },
  mounted() {

  },
  watch:{
    visible(val){
      if(!this.visible){
        this.clear();
        this.$emit('close')
      }
    }
  },
  methods:{
    openCameraCallBack(data){
      let params = {};
      try{
        let img = JSON.parse(data);
        params = {
          extension: img.extension,
          content: img.content,
        }
      }catch (e) {
        if(data.errorCode === 1 || data.errorCode === '1'){
          throw  new Error("ios取消相机操作")
        }
        params = {
          extension: data.extension,
          content: data.content,
        }
      }
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "上传中..."
      });
      uploadBase64(params).then(res=>{
        this.$toast.clear();
        /*上传成功*/
        this.$toast.success('上传成功')
        //上传成功后，将图片显示在页面上并禁用退出
        this.nfcImage =  res.data.url;
        this.showBottomBox = false;
      }).catch((err) => {
        /*上传失败*/
        this.$toast.fail('上传失败')
      });
    },
    isAndroidOrIos(){
      const urls = navigator.userAgent;
      let isAndroid = urls.indexOf('Android') > -1 || urls.indexOf('Linux') > -1;
      let isIos = !!urls.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isAndroid){
        return 1;
      }
      if(isIos){
        return 2;
      }
    },
    useCamera(actionType){
      window.openCameraCallBack = null;
      window.openCameraCallBack = this.openCameraCallBack;
      let parms = {};
      if(actionType){
        parms.actionType = actionType;
        parms.compressKb = "500";
      }
      let system = this.isAndroidOrIos();
      if(system === 1){
        //android
        // 判断当前环境是是否存在 js桥 'sap'
        const hasSap = window.hasOwnProperty('sap');
        if (hasSap) {
          // 判断是否存在方法 ?preview
          const fun = sap.hasOwnProperty('openCamera');
          if (fun) {
            sap.openCamera(JSON.stringify(parms));
          }
        }
      }

      if(system === 2){
        //ios
        // 判断 ios是否存在方法 preview
        const preview = window.webkit.messageHandlers.hasOwnProperty('openCamera')
        if (preview) {
          window.webkit.messageHandlers.openCamera.postMessage(JSON.stringify(parms))
        }
      }
    },
    //nfc扫描
    nfcCheck(){
      this.$emit('checkNFC');
    },
    onConfirm(){
      if(!this.selectNFC) return this.$toast('请选择NFC');
      let data = {
        nfcCode:this.selectNFC,
        url: this.nfcImage,
      }
      //alert(JSON.stringify(data));
      this.$emit('change',data);
      this.visible = false;
      this.clear();
    },
    changeNFC(){
      this.showBtn = true;
    },
    //清空数据
    clear(){
      this.nfcImage = null;
      this.showBottomBox = true;
      this.selectNFC = null;
      this.dataList = [];
      this.file = null;
      this.imageError = null;
    },
    //显示弹窗
    show(list){
      this.visible = true;
      this.dataList = list;
      //alert( JSON.stringify(this.dataList ))
    },
    //上传前
    async fileChange(e){
      let file = e.target.files[0];
      this.file = e.target.files[0].name;
      // 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;
      })
    },
    //压缩图片
    imageCompress(file){
      this.file = file.name;
      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('图片压缩失败')
            this.imageError = e;
            reject(e);
          },
        });
      });
    },
    //拍照
    nfcTakePhotos(){
      this.file = null;
      this.imageError = null;
      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;
  >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;
}
.background-image{
  width:240px;
  height: 240px;
}
.nfc-image{
  width: 100%;
  height: 100%;
  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>