读取卡片与安卓对接

api/apiAdmin.js

@@ -7,6 +7,10 @@ export const GetHomeDataApi = (data) =>
 export const GetRegionDataListApi = (data) =>
   request.get("/api/AdminApp/GetRegionDataList", data);
 
+// 子区域列表
+export const GetAreaListApi = (data) =>
+  request.get("/api/AdminApp/GetAreaList", data);
+
 // 用户数据
 export const GetUserDataApi = (data) =>
   request.get("/api/AdminApp/GetUserData", data);

pages/adminNfc/components/bindDialog.vue

@@ -8,7 +8,7 @@
       <view class="dialog-content">
         <!-- 头部标题和标签 -->
         <view class="dialog-header">
-          <text class="title">A31栋宿舍楼道口</text>
+          <text class="title">{{currentRow.name}}</text>
           <u-tag class="tag" text="室内" mode="light" />
           <!-- <u-tag
             class="tag"
@@ -27,20 +27,28 @@
         <!-- 副标题 - 负责人 -->
         <view class="dialog-subtitle"> 区域主负责人：{{ "张三" }} </view>
 
-        <!-- 中间图片 -->
-        <view class="dialog-image-container">
+        <!-- 已存在卡片时显示图片 -->
+        <view class="dialog-image-container" v-if="isChange === true">
           <!-- 替换为实际的图片路径 -->
-          <image
-            src="/static/adminImg/nfc-result.png"
-            mode="widthFix"
-            class="dialog-image"
-          ></image>
+          <image src="/static/adminImg/nfc-result.png" mode="widthFix" class="dialog-image"></image>
+        </view>
+
+        <!-- 未存在nfc时显示图片 -->
+        <view class="dialog-image-container" v-if="isChange === false">
+          <!-- 替换为实际的图片路径 -->
+          <image src="/static/adminImg/step.png" mode="widthFix" style="width: 500rpx;"></image>
         </view>
 
         <!-- 更换绑定链接 -->
-        <view class="change-binding" @click="handleChangeBinding">
+        <view v-if="isChange === true" class="change-binding" @click="nfcChange">
           更换绑定
         </view>
+
+        <!--  -->
+        <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>
 
       <!-- 底部按钮 -->
@@ -52,48 +60,84 @@
 </template>
 
 <script>
-import { loginApi } from "@/api/apiList";
+import { loginApi } from '@/api/apiList'
 export default {
   props: {
     // 控制弹窗显示/隐藏
     visible: {
       type: Boolean,
-      default: false,
+      default: false
     },
     // 可以添加更多 props 来传递动态数据，例如标题、负责人等
     // title: String,
     // responsiblePerson: String,
+    currentRow: {
+      type: Object,
+      default: () => ({})
+    }
   },
   data() {
-    return {};
+    return {
+      isChange: false,
+      step: 0,
+      lookData: {}
+    }
+  },
+  mounted() {
+    window.nfcInitFn = this.nfcInitFn
   },
-  mounted() {},
   onLoad() {},
   methods: {
+    nfcInitFn(data) {
+      if (!data) {
+        return uni.showToast({ title: '未传入参数 initFn', icon: 'none' })
+      }
+      if (data.step === 1) {
+        this.step = 1
+      }
+      if (data.step === 2) {
+        this.step = 2
+      }
+      if (data.step === 3) {
+        this.step = 3
+      }
+      if (data.step === 4) {
+        this.lookData = data
+        this.step = 4
+        // uni.showModal({
+        //   title: '查看',
+        //   content: JSON.stringify(data) || '未传入参数 initFn',
+        //   showCancel: true,
+        //   success: function (res) {}
+        // })
+      }
+    },
     // 关闭弹窗（点击遮罩）
     closeDialog() {
       // 推荐通过事件通知父组件关闭
-      this.$emit("close");
+      this.$emit('close')
     },
     // 点击更换绑定
-    handleChangeBinding() {
-      this.$emit("changeBinding");
+    nfcChange() {
+      this.isChange = false
+      this.step = 1
+      // this.$emit('changeBinding')
       //   this.closeDialogInternal(); // 可以选择点击后是否关闭弹窗
     },
     // 点击知道了
     handleConfirm() {
-      this.$emit("confirm");
-      this.closeDialogInternal();
+      this.$emit('confirm')
+      this.closeDialogInternal()
     },
     // 内部关闭，避免重复emit
     closeDialogInternal() {
       if (this.visible) {
-        this.$emit("update:visible", false); // 如果使用 v-model
-        this.$emit("close"); // 兼容只使用 :visible 和 @close 的情况
+        this.$emit('update:visible', false) // 如果使用 v-model
+        this.$emit('close') // 兼容只使用 :visible 和 @close 的情况
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -164,14 +208,14 @@ export default {
 }
 
 .dialog-image-container {
-  width: 200rpx; /* 根据图片调整 */
+  // border: 1px solid red;
   height: auto;
   margin-bottom: 30rpx;
-}
-
-.dialog-image {
-  width: 100%;
-  height: auto; /* 让图片自适应高度 */
+  .dialog-image {
+    width: 100%;
+    width: 200rpx; /* 根据图片调整 */
+    height: auto; /* 让图片自适应高度 */
+  }
 }
 
 .change-binding {

pages/adminNfc/index.vue

@@ -11,9 +11,12 @@
         <view class="card-totel">{{ form.noBindnfc }}</view>
       </view>
     </view>
+    <!-- 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" border placeholder="搜索名称"></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>
           {{ selectVal }}
@@ -21,129 +24,163 @@
         <image src="/static/svg/down.svg" style="width: 30rpx; height: 30rpx; margin-left: 10rpx"></image>
       </view>
     </view>
-    <!-- tabs -->
-    <u-tabs class="tabs-box" bg-color="#F6F8FC" :list="tabsList" :is-scroll="true" :current="tabCurrent"
-      @change="tabChangeFn"></u-tabs>
+
     <!-- tip -->
-    <view class="tip-box">共10个子区域，其中5个未绑定</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">
-        <view v-for="i in 80" class="item-box">
-          <view class="item-title">子区域{{ i }}</view>
-          <view v-if="i % 2 === 0" class="btn-have btn">已绑定</view>
-          <view v-if="i % 2 !== 0" class="btn-none btn" @click="showDialog = true">去绑定</view>
+        <view v-for="item in sonList" class="item-box">
+          <view class="item-title">{{ item.name }}</view>
+          <view v-if="item.state === true" class="btn-have btn" @click="dialogShowFn(item)">已绑定</view>
+          <view v-if="item.state === false" class="btn-none btn" @click="dialogShowFn(item)">去绑定</view>
         </view>
+        <view v-if="!sonList.length" style="height:100rpx;"></view>
+        <u-empty v-if="!sonList.length" text="数据为空" mode="list"></u-empty>
       </scroll-view>
     </view>
     <!-- 筛选的下拉 -->
     <u-action-sheet :list="options" title="请选择" @click="changeFn" v-model:value="selectShow"></u-action-sheet>
-    <bind-dialog :visible="showDialog" @close="showDialog = false" @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>
 </template>
 <script>
-import { GetRegionDataListApi, GetHomeDataApi } from "@/api/apiAdmin.js";
-import BindDialog from "@/pages/adminNfc/components/bindDialog.vue"; // 确保路径正确
+import { GetRegionDataListApi, GetHomeDataApi, GetAreaListApi } from '@/api/apiAdmin.js'
+import BindDialog from '@/pages/adminNfc/components/bindDialog.vue' // 确保路径正确
 export default {
   components: {
-    BindDialog,
+    BindDialog
   },
   data() {
     return {
       form: {
-        "regionCount": 0,
-        "areaCount": 0,
-        "bindnfc": 0,
-        "noBindnfc": 0
+        regionCount: 0,
+        areaCount: 0,
+        bindnfc: 0,
+        noBindnfc: 0
       },
-      keyword: "",
+      keyword: '',
       selectShow: false,
       showDialog: false,
-      selectVal: "全部",
+      selectVal: '筛选',
       options: [
         {
-          text: "全部",
+          text: '全部',
+          value: 0
         },
         {
-          text: "已绑定",
+          text: '已绑定',
+          value: 1
         },
         {
-          text: "未绑定",
-        },
+          text: '未绑定',
+          value: 2
+        }
       ],
       tabCurrent: 0,
+      tabCurrentId: '',
       tabsList: [
-        {
-          name: "区域1",
-        },
-        {
-          name: "区域2",
-        },
-        {
-          name: "区域3",
-        },
-        {
-          name: "区域4",
-        },
-        {
-          name: "区域5",
-        },
-
-        {
-          name: "区域6",
-        },
-        {
-          name: "区域7",
-        },
-        {
-          name: "区域8",
-        },
+        // {
+        //   name: '区域1'
+        // },
+        // {
+        //   name: '区域2'
+        // },
       ],
-    };
+      // 子区域列表
+      sonList: [],
+      sonForm: {
+        bindData: 0,
+        countData: 0
+      },
+      currentRow: {}
+    }
   },
   mounted() {
-    uni.hideLoading(); // 关闭 Loading
+    uni.hideLoading() // 关闭 Loading
   },
   onLoad() {
-    this.getAreaFn();
+    this.getAreaFn()
   },
   onShow() {
-    this.getDataFn();
+    this.getDataFn()
   },
   methods: {
-    async getDataFn() {
-      const res = await GetHomeDataApi();
-      console.log(res, "首页数据");
-      Object.assign(this.form, res.data);
+    dialogShowFn(row) {
+      console.log(JSON.parse(JSON.stringify(row)), 'row--')
+      this.currentRow = row
+      this.$refs.dialogRef.isChange = row.state // 重置弹窗状态
+      this.$refs.dialogRef.step = 0 // 重置弹窗状态
+      this.showDialog = true
     },
+    async getDataFn() {
+      const res = await GetHomeDataApi()
+      console.log(res, '首页数据')
+      Object.assign(this.form, res.data)
+    },
+    // 获取区域列表
     async getAreaFn() {
       const res = await GetRegionDataListApi()
-      console.log(res, "区域数据");
-      this.tabsList = res.data.areaList
+      console.log(res, '区域数据')
+      this.tabsList = res.data
+      if (this.tabsList.length > 0) {
+        this.tabCurrentId = this.tabsList[0].id
+        this.getSonAreaFn()
+      }
+    },
+    // 获取子区域列表
+    async getSonAreaFn() {
+      const req = {
+        regionId: this.tabCurrentId
+      }
+      if (this.keyword) {
+        req.keyword = this.keyword
+      }
+      const findRow = this.options.find(x => x.text === this.selectVal)
+      if (findRow) {
+        req.type = findRow.value
+      }
+      const res = await GetAreaListApi(req)
+      console.log(res, '子区域数据')
+      this.sonList = res.data.data
+      this.sonForm.bindData = res.data.bindData
+      this.sonForm.countData = res.data.countData
+    },
+    async searchFn() {
+      this.getSonAreaFn()
     },
     selectFn() {
-      this.selectShow = true;
+      this.selectShow = true
     },
     changeFn(val) {
-      console.log(val, "val--");
-      this.selectVal = this.options[val].text;
+      console.log(val, 'val--')
+      this.selectVal = this.options[val].text
+      this.getSonAreaFn()
     },
+    //
     tabChangeFn(val) {
-      console.log(val, "val--");
-      this.tabCurrent = val;
+      // 清空已选的值
+      this.keyword = ''
+      this.selectVal = '筛选'
+      console.log(val, 'val--')
+      console.log(this.tabsList[val], 'tabsList--current')
+      this.tabCurrent = val
+      this.tabCurrentId = this.tabsList[val].id
+      this.getSonAreaFn()
     },
     onChangeBinding() {
-      console.log("点击了更换绑定");
+      console.log('点击了更换绑定')
       // 处理更换绑定的逻辑
     },
     onConfirm() {
-      console.log("点击了知道了");
+      console.log('点击了知道了')
       // 处理确认逻辑
-    },
-  },
-};
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .content {
@@ -178,24 +215,30 @@ export default {
     }
 
     .card-left {
-      background: url("/static/adminImg/icon-bg1.png") no-repeat right 32rpx bottom 20rpx / 60rpx 60rpx;
+      background: url('/static/adminImg/icon-bg1.png') no-repeat right 32rpx bottom 20rpx / 60rpx 60rpx;
       background-color: #4974f3;
     }
 
     .card-right {
       margin-left: 20rpx;
-      background: url("/static/adminImg/icon-bg2.png") no-repeat right 32rpx bottom 20rpx / 60rpx 60rpx;
+      background: url('/static/adminImg/icon-bg2.png') no-repeat right 32rpx bottom 20rpx / 60rpx 60rpx;
       background-color: #53d5a9;
     }
   }
 
   .search-box {
+    position: relative;
     display: flex;
     align-items: center;
     // border: 1px solid red;
-    margin-top: 20rpx;
+    // margin-top: 20rpx;
     padding: 20rpx;
-
+    .search-icon {
+      position: absolute;
+      right: 210rpx;
+      top: 50%;
+      transform: translateY(-50%);
+    }
     .search-input {
       background-color: white;
       border-radius: 50rpx;
@@ -213,6 +256,7 @@ export default {
       text-align: center;
       padding-top: 10rpx;
       padding-bottom: 10rpx;
+      // color: #4974f3;
     }
   }