soc_app/src/views/menu/NFCmanage/index.vue

<template>
  <div class="Nfc">
    <nav-bar></nav-bar>
    <div class="nfc-container">
      <div class="nfc-box">
        <div class="nfc-btn" @touchend="getNfc">
          <span>{{nfcMsg}}</span>
        </div>
      </div>
      <Card>
        <p class="card-title blue">{{disable?'标签信息':'新增标签'}}</p>
        <van-cell-group v-if="!disable" :border="false">
          <van-cell title="NFC编码" :value="formData.code" />
          <van-field required label="标签名称" v-model="formData.labelName" placeholder="请输入" />
          <van-cell required title="选择所属机构" :label="formData.orgName" is-link  @click="clickItem"/>
          <gx-select-cell required :disabled="areaList.length == 0" v-model="formData.areaId" title="选择区域" :border="true" :prop="props" :dataList="areaList"></gx-select-cell>
          <gx-select-cell required :disabled="pointList.length == 0" v-model="formData.checkId" title="选择采集点" :prop="checkProps" :dataList="pointList"></gx-select-cell>
        </van-cell-group>
        <van-cell-group v-else :border="false">
          <van-cell title="NFC编码" :value="nfcInfo.code" />
          <van-cell title="标签名称" :value="nfcInfo.labelName" />
          <van-cell title="所属机构" :value="nfcInfo.orgName" />
          <van-cell title="区域名称" :value="nfcInfo.areaName" />
          <van-cell title="采集点名称" :value="nfcInfo.collectionAreaName" />
        </van-cell-group>
      </Card>
      <div class="btn-box">
        <van-button v-if="!disable" type="info" size="large" style="margin-bottom:20px;" @click="bindNfc">绑定</van-button>
        <van-button v-if="disable && nfcInfo.code" type="danger" size="large" @click="unBindNfc">解绑</van-button>
      </div>
    </div>
<!--    <van-popup v-model="showPopup" :close-on-click-overlay="false"></van-popup>-->
    <org-picker
      ref="orgPicker"
      @cancel="cancelPicker"
      @confirm="changeOrg">
    </org-picker>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import Card from '@/components/card';
import OrgPicker from '@/components/OrgPicker';
import SelectCell from '@/components/selectCell';
import GxSelectCell from '@/components/GxSearchSelectCell';
import {mapGetters} from "vuex";
import {binding,unbinding,nfcDetails,areaList,checkList} from './api';
export default {
  components:{
    NavBar,
    Card,
    OrgPicker,
    SelectCell,
    GxSelectCell,
  },
  data(){
    return{
      disable:true,
      showPicker:false,
      showPopup:false,
      nfcMsg:'点击扫描',
      props:{
        label:'name',
        value:'id',
      },
      checkProps:{
        label:'checkName',
        value:'id',
      },
      areaList:[],
      pointList:[],
      nfcInfo:{
        code:null,
        labelName:'无',
        orgName: '无',
        areaName:'无',
        collectionAreaName:'无',
      },
      formData:{
        labelName:'',
        orgName:'',
        code:null,
        orgId: null,
        areaId:null,
        checkId:null,
      },
      flag:false,
    }
  },
  beforeDestroy(){
    window.openNFCScanCallBack = null;
  },
  computed:{
    ...mapGetters(['orgId']),
  },
  mounted(){
    window.openNFCScanCallBack = null;
  },
  methods:{
    //自定义nfc回调
    openNFCScanCallBack(nfcStr){
      //nfcStr = '{"content":"123456789"}';
      let nfcCode;
      try{
        let nfc = JSON.parse(nfcStr);
        nfcCode =  nfc.content;
      }catch (e) {
        nfcCode = nfcStr.content;
      }
      //alert(nfcCode)
      this.nfcMsg = '读取中...';
      if(!nfcCode) {
        this.$toast('扫描失败,请重试');
        //this.showPopup = false;
        this.nfcMsg = '将NFC贴至手机背部';
        return
      }
      this.$toast('扫描成功');
      this.nfcInfo = {};
      this.formData = {
        labelName:'',
        orgName:'',
        code:null,
        orgId: null,
        areaId:null,
        checkId:null,
      };
      this.areaList = [];
      this.pointList = [];
      nfcDetails(nfcCode).then(res=>{
        setTimeout(()=>{this.nfcMsg = '将NFC贴至手机背部'},500);
        if(res.data){
          this.nfcInfo = res.data;
          this.disable = true;
        }else {
          this.$toast('未查询到NFC相关信息');
          this.formData.code = nfcCode;
          this.disable = false;
        }
      })
    },
    bindNfc(){
      let flag = this.checkData();
      if(!flag) return
      binding(this.formData).then(res=>{
        this.$toast('绑定成功');
        this.disable = true;
        let code = this.formData.code;
        nfcDetails(code).then(info=>{
          this.nfcInfo =  info.data;
        })
      })
    },

    unBindNfc(){
      unbinding(this.nfcInfo.code).then(res=>{
        this.$toast('解绑成功');
        this.disable = false;
        let {code,orgId,orgName,areaId,checkId} = JSON.parse(JSON.stringify(this.nfcInfo));
        this.formData = {code,orgId,orgName};
        this.getAreaList();
        this.getCheckList();
        this.$nextTick(()=>{
          this.formData.areaId = areaId;
          this.formData.checkId = checkId;
        })
      })
    },

    getAreaList(){
      this.formData.areaId = null;
      this.areaList = [];
      areaList(this.formData.orgId).then(res=>{
        this.areaList = res.data;
      })
    },
    getCheckList(){
      this.formData.checkId = null;
      this.pointList = [];
      checkList(this.formData.orgId).then(res=>{
        this.pointList = res.data;
      })
    },
    getNfc(){
      window.openNFCScanCallBack = this.openNFCScanCallBack;
      if(this.nfcMsg === '将NFC贴至手机背部'){
        this.nfcMsg = '点击扫描';
        window.openNFCScanCallBack = null;
        return
      }
      this.useNFC();
    // this.openNFCScanCallBack({"content":"123456789"});
    },
    changeOrg(selected){
      this.showPicker = false;
      this.formData.orgName = selected[0].text;
      this.formData.orgId = selected[0].id;
      console.log(selected,'id')
      this.getAreaList();
      this.getCheckList();
    },
    cancelPicker(){
      if(this.nfcMsg === '将NFC贴至手机背部') return;
      this.showPicker = false;
    },
    checkData(){
      if(!this.formData.code){
        this.$toast('先扫描NFC标签');
        return false;
      }
      if(!this.formData.labelName){
        this.$toast('请输入标签名称');
        return false;
      }
      if(!this.formData.orgId){
        this.$toast('请选择所属机构');
        return false;
      }
      if(!this.formData.areaId){
        this.$toast('请选择区域');
        return false;
      }
      if(!this.formData.checkId){
        this.$toast('请选择采集点');
        return false;
      }
      return true;
    },
    clickItem(){
      this.$refs.orgPicker.showPicker = true;
    },
    useNFC(){
      let system = this.isAndroidOrIos();
      if(system === 3){
        this.$toast('当前环境不支持');
        return
      }
      const parms = {
        "iOS_SessionType":"0"
      };
      this.nfcMsg = '将NFC贴至手机背部';
      if(system === 1){
        //android
        // 判断当前环境是是否存在 js桥 'sap'
        const hasSap = window.hasOwnProperty('sap');
        console.log(hasSap,'hasSap')
        if (hasSap) {
          // 判断是否存在方法 ?preview
          const fun = sap.hasOwnProperty('openNFCScan');
          if (fun) {
            sap.openNFCScan(JSON.stringify(parms));
          }
        }else {
          this.$toast('当前环境不支持');
          this.nfcMsg = '点击扫描';
        }
      }
      if(system === 2){
        //ios
        // 判断 ios是否存在方法 preview
        if(!window.webkit) {
          this.nfcMsg = '点击扫描';
          this.$toast('当前环境不支持');
          return;
        }
        const fun = window.webkit.messageHandlers.hasOwnProperty('openNFCScan')
        if (fun) {
          window.webkit.messageHandlers.openNFCScan.postMessage(JSON.stringify(parms))
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .nfc-container{
    padding:0 20px 20px 20px;
    height: calc(100vh - 192px);
    overflow: auto;
  }
  .card-title{
    height: 60px;
    line-height: 40px;
    font-size: 32px;
    border-bottom: 1px solid #f5f5f5;
  }
  .nfc-box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0 20px;
    margin-top:24px;
    >div{
      width: 360px;
      height: 360px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      >span{
        font-size: 32px;
        color: #fff;
      }
    }
  }

  .blue{
    color:#008cd6;
  }
  .btn-box{
    margin-top: 40px;
  }
  .nfc-btn {
    /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
    animation: donghua 2.4s infinite;
  }

  .nfc-btn {
    margin: 40px;
    width: 32%;
    height: 48vh;
    background: linear-gradient(-45deg, #dae, #3c9, #09f, #66f);
    background-size: 200% 200%;
  }
  .nfc-btn:active {
    animation: none;
    background: #09f;
  }

  @keyframes donghua {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(0, 153, 255, 60%);
    }
    60% {
      transform: scale(1);
      box-shadow: 0 0 0 18px rgba(0, 153, 255, 0%);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);
    }
  }

</style>