刷卡与安卓交互

pages/adminNfc/components/bindDialog.vue

@@ -8,7 +8,7 @@
       <view class="dialog-content">
         <!-- 头部标题和标签 -->
         <view class="dialog-header">
-          <text class="title">{{currentRow.name}}</text>
+          <text class="title">{{ currentRow.name }}</text>
           <u-tag class="tag" text="室内" mode="light" />
           <!-- <u-tag
             class="tag"
@@ -48,7 +48,7 @@
         <view v-if="step === 1">1.请将标签卡贴靠设备NFC识别处！</view>
         <view v-if="step === 2">2.如果确定将该卡片写入该区域,请将标签卡贴靠设备xNFC识别处，否则请退出！</view>
         <view v-if="step === 3">3.请再次将标签卡贴靠设备NFC识别处！</view>
-        <view v-if="step === 4">{{lookData}}</view>
+        <view v-if="step === 4">{{ lookData }}</view>
       </view>
 
       <!-- 底部按钮 -->
@@ -86,12 +86,15 @@ export default {
   mounted() {
     window.nfcInitFn = this.nfcInitFn
   },
-  onLoad() {},
+  onLoad() { },
   methods: {
     nfcInitFn(data) {
       if (!data) {
         return uni.showToast({ title: '未传入参数 initFn', icon: 'none' })
       }
+      if (this.isChange === true) {
+        return uni.showToast({ title: '请点击更换绑定后刷卡', icon: 'none' })
+      }
       if (data.step === 1) {
         this.step = 1
       }
@@ -121,6 +124,29 @@ export default {
     nfcChange() {
       this.isChange = false
       this.step = 1
+      try {
+        if (isAndroid && AndroidJs) {
+          console.log("%c%s", "color:red", "安卓--调用方法");
+          const reqRow = {
+            name: "area",
+            data: {
+              state: this.currentRow.state,
+              areaId: this.currentRow.id,
+            },
+          };
+          console.log(reqRow, 'reqRow--')
+          AndroidJs.func(JSON.stringify(reqRow)); // 给安卓传参
+        } else {
+          console.log("%c%s", "color:red", "苹果--调用方法");
+          const reqRow = {
+            name: "back-iphone",
+            data: "",
+          };
+          window.webkit.messageHandlers.func.postMessage(JSON.stringify(reqRow)); // 给ios 传参
+        }
+      } catch (e) {
+        console.log(e, "e-----判断安卓苹果类型出错");
+      }
       // this.$emit('changeBinding')
       //   this.closeDialogInternal(); // 可以选择点击后是否关闭弹窗
     },
@@ -136,6 +162,18 @@ export default {
         this.$emit('close') // 兼容只使用 :visible 和 @close 的情况
       }
     }
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        console.log('打开');
+        window.nfcInitFn = this.nfcInitFn
+      } else {
+        console.log('关闭');
+        // 清除 nfcInitFn 函数引用，避免内存泄漏
+        window.nfcInitFn = null
+      }
+    }
   }
 }
 </script>
@@ -148,7 +186,8 @@ export default {
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 999; /* 确保遮罩在底层 */
+  z-index: 999;
+  /* 确保遮罩在底层 */
 }
 
 .dialog-container {
@@ -156,9 +195,11 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 90%; /* 或者根据需要设置固定宽度 */
+  width: 90%;
+  /* 或者根据需要设置固定宽度 */
   //   max-width: 600rpx;
-  z-index: 1000; /* 确保弹窗在遮罩上 */
+  z-index: 1000;
+  /* 确保弹窗在遮罩上 */
 }
 
 .dialog-content {
@@ -174,7 +215,8 @@ export default {
 .dialog-header {
   display: flex;
   align-items: center;
-  justify-content: center; /* 居中显示 */
+  justify-content: center;
+  /* 居中显示 */
   width: 100%;
   margin-bottom: 16rpx;
 
@@ -211,18 +253,23 @@ export default {
   // border: 1px solid red;
   height: auto;
   margin-bottom: 30rpx;
+
   .dialog-image {
     width: 100%;
-    width: 200rpx; /* 根据图片调整 */
+    width: 200rpx;
-    height: auto; /* 让图片自适应高度 */
+    /* 根据图片调整 */
+    height: auto;
+    /* 让图片自适应高度 */
   }
 }
 
 .change-binding {
   font-size: 28rpx;
-  color: #4a90e2; /* 蓝色链接颜色 */
+  color: #4a90e2;
+  /* 蓝色链接颜色 */
   //   margin-bottom: 50rpx;
-  cursor: pointer; /* 鼠标悬停显示手型 */
+  cursor: pointer;
+  /* 鼠标悬停显示手型 */
 }
 
 .dialog-footer {
@@ -233,12 +280,14 @@ export default {
   width: 100%;
   height: 88rpx;
   line-height: 88rpx;
-  background-color: #4879e6; /* 蓝色按钮背景 */
+  background-color: #4879e6;
+  /* 蓝色按钮背景 */
   color: #ffffff;
   font-size: 32rpx;
   border-radius: 0 0 24rpx 24rpx;
   border: none;
   text-align: center;
+
   // 移除按钮默认边框（H5）
   &::after {
     border: none;
@@ -248,5 +297,4 @@ export default {
 /* 可以添加按钮按下的效果 */
 // .confirm-button:active {
 //   background-color: #4879e6;
-// }
+// }</style>
-</style>

pages/adminNfc/index.vue

@@ -12,10 +12,12 @@
       </view>
     </view>
     <!-- tabs -->
-    <u-tabs class="tabs-box" bg-color="#F6F8FC" :list="tabsList" :is-scroll="true" :current="tabCurrent" @change="tabChangeFn"></u-tabs>
+    <u-tabs class="tabs-box" bg-color="#F6F8FC" :list="tabsList" :is-scroll="true" :current="tabCurrent"
+      @change="tabChangeFn"></u-tabs>
     <!-- 搜索 -->
     <view class="search-box">
-      <u-input class="search-input" v-model="keyword" :clearable="false" border placeholder="搜索名称" @keyup.enter="searchFn"></u-input>
+      <u-input class="search-input" v-model="keyword" :clearable="false" border placeholder="搜索名称"
+        @keyup.enter="searchFn"></u-input>
       <u-icon name="search" class="search-icon" size="40" @click="searchFn"></u-icon>
       <view class="select-box" @click="selectFn">
         <view>
@@ -26,7 +28,8 @@
     </view>
 
     <!-- tip -->
-    <view v-if="sonList.length" class="tip-box">共{{sonForm.countData}}个子区域，其中{{sonForm.countData - sonForm.bindData}}个未绑定</view>
+    <view v-if="sonList.length" class="tip-box">共{{ sonForm.countData }}个子区域，其中{{ sonForm.countData -
+      sonForm.bindData }}个未绑定</view>
     <!-- 列表 -->
     <view class="list-box">
       <scroll-view :scroll-y="true" class="scroll-Y">
@@ -42,7 +45,8 @@
     <!-- 筛选的下拉 -->
     <u-action-sheet :list="options" title="请选择" @click="changeFn" v-model:value="selectShow"></u-action-sheet>
     <!-- 弹窗 -->
-    <bind-dialog ref="dialogRef" :visible="showDialog" @close="showDialog = false" :currentRow="currentRow" @changeBinding="onChangeBinding" @confirm="onConfirm"></bind-dialog>
+    <bind-dialog ref="dialogRef" :visible="showDialog" @close="showDialog = false" :currentRow="currentRow"
+      @changeBinding="onChangeBinding" @confirm="onConfirm"></bind-dialog>
 
     <u-tabbar :list="vuex_tabbar"></u-tabbar>
   </view>
@@ -110,10 +114,43 @@ export default {
   },
   methods: {
     dialogShowFn(row) {
+      // 给安卓传参
+      let u = navigator.userAgent;
+      let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android
+      // 添加的时候给安卓传参
+      if (row.state === false) {
+        try {
+          if (isAndroid && AndroidJs) {
+            console.log("%c%s", "color:red", "安卓--调用方法");
+            const reqRow = {
+              name: "area",
+              data: {
+                state: row.state,
+                areaId: row.id,
+              },
+            };
+            console.log(reqRow, 'reqRow--')
+            AndroidJs.func(JSON.stringify(reqRow)); // 给安卓传参
+          } else {
+            console.log("%c%s", "color:red", "苹果--调用方法");
+            const reqRow = {
+              name: "back-iphone",
+              data: "",
+            };
+            window.webkit.messageHandlers.func.postMessage(JSON.stringify(reqRow)); // 给ios 传参
+          }
+        } catch (e) {
+          console.log(e, "e-----判断安卓苹果类型出错");
+        }
+      }
+
       console.log(JSON.parse(JSON.stringify(row)), 'row--')
       this.currentRow = row
       this.$refs.dialogRef.isChange = row.state // 重置弹窗状态
       this.$refs.dialogRef.step = 0 // 重置弹窗状态
+      if (row.state === false) {
+        this.$refs.dialogRef.step = 1 // 重置弹窗状态
+      }
       this.showDialog = true
     },
     async getDataFn() {
@@ -233,12 +270,14 @@ export default {
     // border: 1px solid red;
     // margin-top: 20rpx;
     padding: 20rpx;
+
     .search-icon {
       position: absolute;
       right: 210rpx;
       top: 50%;
       transform: translateY(-50%);
     }
+
     .search-input {
       background-color: white;
       border-radius: 50rpx;