nfc页面展示信息调整

pages/memorial/nfcPairing.vue

@@ -71,11 +71,32 @@
           />
         </view>
 
-        <view v-if="unitId" class="field readonly">
+        <!-- 牌位信息显示 -->
-          <text class="label">绑定单元 ID</text>
+        <view
-          <text class="unit-value">{{ unitId }}</text>
+          v-if="
+            memorialInfo.regionName || memorialInfo.code || memorialInfo.mac
+          "
+          class="memorial-info-section"
+        >
+          <view class="field readonly">
+            <text class="label">区域名称</text>
+            <text class="unit-value">{{ memorialInfo.regionName || "-" }}</text>
+          </view>
+          <view class="field readonly">
+            <text class="label">编码</text>
+            <text class="unit-value">{{ memorialInfo.code || "-" }}</text>
+          </view>
+          <view class="field readonly">
+            <text class="label">MAC 地址</text>
+            <text class="unit-value">{{ memorialInfo.mac || "-" }}</text>
+          </view>
         </view>
 
+        <!--        <view v-if="unitId" class="field readonly">-->
+        <!--          <text class="label">绑定单元 ID</text>-->
+        <!--          <text class="unit-value">{{ unitId }}</text>-->
+        <!--        </view>-->
+
         <view
           :class="['primary-btn', { disabled: !canSubmit || binding }]"
           @click="handleBind"
@@ -91,7 +112,11 @@
 import BaseBackground from "@/components/base-background/base-background.vue";
 import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";
 import { getRequestConfig, getToken } from "@/utils/request.js";
-import { bindNfcCard, swipeNfcCard } from "@/api/memorial/index.js";
+import {
+  bindNfcCard,
+  getMemorialDetail,
+  swipeNfcCard,
+} from "@/api/memorial/index.js";
 
 const WS_PATH = "/ws/ws/device";
 const FIXED_MAC = "111111111111";
@@ -104,6 +129,7 @@ export default {
   data() {
     return {
       unitId: "",
+      memorialId: "", // 牌位ID
       socketTask: null,
       socketConnected: false,
       deviceMac: "",
@@ -120,6 +146,12 @@ export default {
       nfcEnabled: false,
       nfcError: "",
       reportingSwipe: false,
+      // 牌位信息
+      memorialInfo: {
+        regionName: "",
+        code: "",
+        mac: "",
+      },
     };
   },
   computed: {
@@ -143,9 +175,15 @@ export default {
       return this.nfcEnabled ? "NFC 已开启，请将卡片贴近手机" : "NFC 未开启";
     },
   },
-  onLoad(options = {}) {
+  async onLoad(options = {}) {
-    if (options.unitId) {
+    // 优先从 id 参数获取牌位ID
+    if (options.id) {
+      this.memorialId = options.id;
+      await this.loadMemorialInfo(options.id);
+    } else if (options.unitId) {
       this.unitId = options.unitId;
+      this.memorialId = options.unitId;
+      await this.loadMemorialInfo(options.unitId);
     }
     if (options.mac) {
       this.deviceMac = options.mac;
@@ -551,6 +589,54 @@ export default {
         });
       }
     },
+    /**
+     * 加载牌位信息
+     * @param {string} id - 牌位ID
+     */
+    async loadMemorialInfo(id) {
+      if (!id) {
+        console.warn("loadMemorialInfo: id 为空");
+        return;
+      }
+      try {
+        console.log("开始加载牌位信息, id:", id);
+        const res = await getMemorialDetail(id);
+        console.log("牌位信息API响应:", res);
+
+        if (res && res.code === 200 && res.data) {
+          const data = res.data;
+          this.memorialInfo = {
+            regionName: data.regionName || "",
+            code: data.code || "",
+            mac: data.mac || "",
+          };
+          // 如果接口返回了 unitId，也更新
+          if (data.id) {
+            this.unitId = data.id;
+            this.memorialId = data.id;
+          }
+          // 如果接口返回了 mac，也更新 deviceMac
+          if (data.mac) {
+            this.deviceMac = data.mac;
+          }
+          console.log("牌位信息加载成功:", this.memorialInfo);
+        } else {
+          console.error("牌位信息API响应无效:", res);
+          uni.showToast({
+            title: "获取牌位信息失败",
+            icon: "none",
+            duration: 2000,
+          });
+        }
+      } catch (error) {
+        console.error("加载牌位信息失败:", error);
+        uni.showToast({
+          title: "获取牌位信息失败",
+          icon: "none",
+          duration: 2000,
+        });
+      }
+    },
     async handleBind() {
       if (!this.canSubmit || this.binding) return;
       this.binding = true;
@@ -560,8 +646,10 @@ export default {
           // memorialMac: this.deviceMac,
           nfcMac: this.cardNo,
         };
-        if (this.unitId) {
+        // 优先使用 memorialId，如果没有则使用 unitId
-          payload.memorialId = this.unitId;
+        const memorialId = this.memorialId || this.unitId;
+        if (memorialId) {
+          payload.memorialId = memorialId;
         }
         const res = await bindNfcCard(payload);
         const success = res && (res.code === 200 || res.status === 200);
@@ -1011,6 +1099,23 @@ export default {
   border-radius: 16rpx;
 }
 
+.memorial-info-section {
+  margin-bottom: 24rpx;
+  padding: 24rpx;
+  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  border-radius: 16rpx;
+  border-left: 4rpx solid #4a90e2;
+}
+
+.memorial-info-section .field.readonly {
+  background: rgba(255, 255, 255, 0.8);
+  margin-bottom: 16rpx;
+}
+
+.memorial-info-section .field.readonly:last-child {
+  margin-bottom: 0;
+}
+
 .label {
   font-size: 26rpx;
   color: #666;