联调nfc

src/components/nfcPopup/gxmore.vue

@@ -11,13 +11,13 @@
 <!--          <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>
+            <div @click="nfcCheck">
               <img :src="require('../../assets/img/icon/NFC扫描-01.png')" />
-              <span @click="nfcCheck">NFC</span>
+              <span >NFC</span>
             </div>
-            <div>
+            <div @click="nfcTakePhotos">
               <img :src="require('../../assets/img/icon/camera.png')" />
-              <span @click="nfcTakePhotos">拍照</span>
+              <span>拍照</span>
             </div>
 
           </div>
@@ -259,7 +259,7 @@ export default {
 }
 .bottom-box{
   display: flex;
-  justify-content: space-around;//
+  justify-content: space-around;
   align-items: center;
   >div{
     display: flex;

src/components/nfcPopup/more.vue

@@ -8,17 +8,18 @@
             <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="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>
+            <div @click="nfcCheck">
               <img :src="require('../../assets/img/icon/NFC扫描-01.png')" />
-              <span @click="nfcCheck">NFC</span>
+              <span >NFC</span>
             </div>
-            <div>
+            <div @click="nfcTakePhotos">
               <img :src="require('../../assets/img/icon/camera.png')" />
-              <span @click="nfcTakePhotos">拍照</span>
+              <span>拍照</span>
             </div>
+
           </div>
           <div v-else>
             <select-cell title="需要拍照的NFC" @change="changeNFC" v-model="selectNFC" :prop="prop" :dataList="dataList"/>
@@ -26,7 +27,8 @@
           </div>
         </div>
       </div>
-      <input v-show="false" ref="upload"  type='file' accept="image/*" capture="camera" @change="fileChange"/>
+      <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>
@@ -34,9 +36,10 @@
 <script>
 import SelectCell from "@/components/selectCell";
 import {baseImg} from "@/views/menu/LZRegister/api";
-import {upload} from "@/api/public";
+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(){
@@ -53,8 +56,8 @@ export default {
       selectNFC:null,
       //自定义字段
       prop:{
-        label:'checkName',
-        value:'nfccdoe'
+        label:'nfcName',
+        value:'nfcCode'
       },
       //提交按钮
       showBtn:false,
@@ -62,6 +65,9 @@ export default {
       imageError:null
     }
   },
+  mounted() {
+
+  },
   watch:{
     visible(val){
       if(!this.visible){
@@ -69,24 +75,75 @@ export default {
       }
     }
   },
-  mounted(){
-    window.openNFCScanCallBack = this.openNFCScanCallBack;
-  },
   methods:{
-    openNFCScanCallBack(data){
-      alert(data)
-      if(!data) {
-        this.$toast('扫描失败');
-        return
+    openCameraCallBack(data){
+      let img =  JSON.parse(data);
+      this.content = data;
+      let params = {
+        extension:img.extension,
+        content:img.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;
+      }
+      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))
+        }
       }
-      let code = JSON.parse(data).content;
-      this.$emit('NFCCode',code);
-      this.$toast('扫描成功');
     },
     //nfc扫描
     nfcCheck(){
-      this.useNFC();
-
+      this.$emit('checkNFC');
     },
     onConfirm(){
       if(!this.selectNFC) return this.$toast('请选择NFC');
@@ -115,12 +172,13 @@ export default {
     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 fileName = e.target.files[0].name;
       let imgFile = await this.imageCompress(file);
       let formData = new FormData();
       formData.append('file',imgFile);
@@ -132,8 +190,8 @@ export default {
     },
     //压缩图片
     imageCompress(file){
-       this.file = file.name;
-       return new Promise((resolve,reject)=>{
+      this.file = file.name;
+      return new Promise((resolve,reject)=>{
         new ImageCompressor({
           file,
           quality: 0.6,
@@ -203,7 +261,7 @@ export default {
 }
 .bottom-box{
   display: flex;
-  justify-content: space-around;//
+  justify-content: space-around;
   align-items: center;
   >div{
     display: flex;

src/views/menu/securityCheckRegister/detail.vue

@@ -123,7 +123,6 @@
     <!--    </van-image-preview>-->
 
     <!--  nfc弹窗  -->
-    <nfc-popup v-if="enable" ref="NfcPopup" @NFCCode="getCode" @change="changeNfcImg"></nfc-popup>
     <nfc-popup v-if="enable" ref="NfcPopup" @checkNFC="checkNFC" @change="changeNfcImg"></nfc-popup>
   </div>
 
@@ -136,7 +135,7 @@ import NavBar from '@/components/NavBar'
 import SelectCell from '@/components/selectCell'
 import DateCell from '@/components/dateCell'
 import Uploader from '@/components/upload/gxuploader'
-import NfcPopup from '@/components/nfcPopup/gxmore'
+import NfcPopup from '@/components/nfcPopup/more'
 import AddCheck from './addCheck'
 import { registerDetail, registerSubmit } from './api'
 import { imgUrl } from '@/utils'
@@ -190,12 +189,13 @@ export default {
     this.id = this.$route.query.id
     this.getData()
   },
-  destroyed(){
-    window.openCameraCallBack = null;
-    window.openNFCScanCallBack = null;
+  beforeDestroy() {
+    window.openCameraCallBack = null
+    window.openNFCScanCallBack = null
   },
   methods: {
     checkNFC(){
+      window.openNFCScanCallBack = this.openNFCScanCallBack;
       this.useNFC();
       this.$toast.loading({
         duration: 0, // 持续展示 toast
@@ -222,12 +222,13 @@ export default {
       clearInterval(this.timer);
       let nfc = JSON.parse(nfcStr);
       let nfcCode =  nfc.content;
+      alert(nfcCode)
       this.checkNfcFilter(nfcCode);
     },
     checkNfcFilter(nfcCode){
       let areaId = null;
       let checkOk =  false;
-      this.nfcs.forEach(v => {
+      this.NFCList.forEach(v => {
         if(v.nfcCode === nfcCode){
           areaId = v.areaId;
           this.switchArea(areaId);