App增加NFC扫描查询功能

src/router/router.config.js

@@ -147,6 +147,12 @@ export let routers = [
         meta: { title: 'NFC管理', keepAlive: false }
       },
       {
+        path: '/nfcScan',
+        name: 'nfcScan',
+        component: () => import('@/views/menu/NFCScan/index'),
+        meta: { title: 'NFC查询', keepAlive: false }
+      },
+      {
         path: '/iot/subsystem',
         name: 'iot_subsystem',
         component: () => import('@/views/menu/iot/subsystem/index'),

src/views/menu/NFCScan/api.js

@@ -0,0 +1,44 @@
+import request from "@/utils/request";
+
+//绑定
+export function binding(data) {
+  return request({
+    url: "/system/bind",
+    method: "post",
+    data
+  });
+}
+
+//解绑
+export function unbinding(id) {
+  return request({
+    url: "/system/bind/unbinding/"+id,
+    method: "delete",
+  });
+}
+
+//获取详情
+export function nfcDetails(code){
+  return request({
+    url: "/system/bind/appGetInfo/"+code,
+    method: "get",
+  });
+}
+
+//获取区域
+export function areaList(id){
+  return request({
+    url: "/system/area/getAreaByOrg/"+id,
+    method: "get",
+  });
+}
+
+
+//获取采集点位
+export function checkList(id){
+  return request({
+    url: "/system/check/getAreaCheckInfoByOrg/"+id,
+    method: "get",
+  });
+}
+

src/views/menu/NFCScan/index.vue

@@ -0,0 +1,347 @@
+<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>