From 698a8ed05bfaffb64a6776bac174e1d8876c2c01 Mon Sep 17 00:00:00 2001
From: yangzhe <yangzhe@qq.com>
Date: Tue, 15 Apr 2025 11:50:28 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20nfc=E5=8D=A1=E5=86=99=E5=85=A5?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                   | 13 ++++---
 pages/adminNfc/nfcResult.vue | 68 ++++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 pages/adminNfc/nfcResult.vue

diff --git a/pages.json b/pages.json
index 8628369..b0cc81e 100644
--- a/pages.json
+++ b/pages.json
@@ -23,6 +23,13 @@
         "navigationBarTitleText": "nfc卡写入"
       }
     },
+    {
+      "path": "pages/adminNfc/nfcResult",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "nfc卡写入"
+      }
+    },
     {
       "path": "pages/adminMy/index",
       "style": {
@@ -279,10 +286,8 @@
     // 当我们进入了pages/index/index页面以后就会预下载pages/subPack分包
     "pages/index/index": {
       "network": "all", //在指定网络下预下载，可选值为：all（不限网络）、wifi（仅wifi下预下载）
-      "packages": [
-        "pages/subPack"
-      ] //进入页面后预下载分包
+      "packages": ["pages/subPack"] //进入页面后预下载分包
     }
   },
   "uniIdRouter": {}
-}
\ No newline at end of file
+}
diff --git a/pages/adminNfc/nfcResult.vue b/pages/adminNfc/nfcResult.vue
new file mode 100644
index 0000000..9374d1b
--- /dev/null
+++ b/pages/adminNfc/nfcResult.vue
@@ -0,0 +1,68 @@
+<template>
+  <view class="content">
+    <u-navbar
+      :is-back="false"
+      title="NFC卡写入"
+      title-color="black"
+      :background="{ backgroundColor: '#fff' }"
+      :border-bottom="false"
+    >
+    </u-navbar>
+
+    <view class="image-box">
+      <image src="/static/images/nfc-result.png" mode="widthFix" />
+    </view>
+
+    <view class="result-box">
+      <view class="result-title">NFC卡写入成功!</view>
+      <view class="result-content">NFC卡已成功绑定子区域</view>
+    </view>
+
+    <u-tabbar :list="vuex_tabbar"></u-tabbar>
+  </view>
+</template>
+<script>
+import { loginApi } from "@/api/apiList";
+export default {
+  data() {
+    return {
+      phone: "13800451500",
+      pwd: "123456",
+    };
+  },
+  mounted() {
+    uni.hideLoading(); // 关闭 Loading
+  },
+  onLoad() {},
+  methods: {},
+};
+</script>
+<style lang="scss" scoped>
+.content {
+  height: calc(100vh - 100rpx); // 确保容器有明确高度
+  overflow: hidden;
+  padding-bottom: 100rpx;
+
+  .image-box {
+    width: 100%;
+    height: 500rpx;
+    image {
+      width: 100%;
+    }
+  }
+
+  .result-box {
+    .result-title {
+      font-size: 36rpx;
+      font-weight: bold;
+      text-align: center;
+    }
+    .result-content {
+      margin-top: 32rpx;
+      font-size: 28rpx;
+      color: #999;
+      text-align: center;
+    }
+  }
+}
+</style>

From 54ee5d755c28e296d28f7858cfd8d14f05e05edb Mon Sep 17 00:00:00 2001
From: yangzhe <yangzhe@qq.com>
Date: Tue, 15 Apr 2025 13:29:51 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20nfc=E5=86=99=E5=85=A5=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/adminNfc/components/bindDialog.vue | 208 +++++++++++++++++++++++
 pages/adminNfc/nfcResult.vue             |  30 +++-
 2 files changed, 234 insertions(+), 4 deletions(-)
 create mode 100644 pages/adminNfc/components/bindDialog.vue

diff --git a/pages/adminNfc/components/bindDialog.vue b/pages/adminNfc/components/bindDialog.vue
new file mode 100644
index 0000000..deab4c1
--- /dev/null
+++ b/pages/adminNfc/components/bindDialog.vue
@@ -0,0 +1,208 @@
+<template>
+  <view>
+    <!-- 遮罩层 -->
+    <view class="dialog-mask" v-if="visible" @click="closeDialog"></view>
+
+    <!-- 弹窗内容 -->
+    <view class="dialog-container" v-if="visible">
+      <view class="dialog-content">
+        <!-- 头部标题和标签 -->
+        <view class="dialog-header">
+          <text class="title">A31栋宿舍楼道口</text>
+          <u-tag class="tag" text="室内" mode="light" />
+          <!-- <u-tag
+            class="tag"
+            :text="areaType"
+            mode="light"
+            :type="
+              areaType === '室外'
+                ? 'success'
+                : areaType === '特殊'
+                ? 'warning'
+                : 'primary'
+            "
+          /> -->
+        </view>
+
+        <!-- 副标题 - 负责人 -->
+        <view class="dialog-subtitle"> 区域主负责人：{{ "张三" }} </view>
+
+        <!-- 中间图片 -->
+        <view class="dialog-image-container">
+          <!-- 替换为实际的图片路径 -->
+          <image
+            src="/static/images/nfc-dialog-icon.png"
+            mode="widthFix"
+            class="dialog-image"
+          ></image>
+        </view>
+
+        <!-- 更换绑定链接 -->
+        <view class="change-binding" @click="handleChangeBinding">
+          更换绑定
+        </view>
+      </view>
+
+      <!-- 底部按钮 -->
+      <view class="dialog-footer">
+        <button class="confirm-button" @click="handleConfirm">知道了</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { loginApi } from "@/api/apiList";
+export default {
+  props: {
+    // 控制弹窗显示/隐藏
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    // 可以添加更多 props 来传递动态数据，例如标题、负责人等
+    // title: String,
+    // responsiblePerson: String,
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  onLoad() {},
+  methods: {
+    // 关闭弹窗（点击遮罩）
+    closeDialog() {
+      // 推荐通过事件通知父组件关闭
+      this.$emit("close");
+    },
+    // 点击更换绑定
+    handleChangeBinding() {
+      this.$emit("changeBinding");
+      //   this.closeDialogInternal(); // 可以选择点击后是否关闭弹窗
+    },
+    // 点击知道了
+    handleConfirm() {
+      this.$emit("confirm");
+      this.closeDialogInternal();
+    },
+    // 内部关闭，避免重复emit
+    closeDialogInternal() {
+      if (this.visible) {
+        this.$emit("update:visible", false); // 如果使用 v-model
+        this.$emit("close"); // 兼容只使用 :visible 和 @close 的情况
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999; /* 确保遮罩在底层 */
+}
+
+.dialog-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%; /* 或者根据需要设置固定宽度 */
+  //   max-width: 600rpx;
+  z-index: 1000; /* 确保弹窗在遮罩上 */
+}
+
+.dialog-content {
+  background-color: #ffffff;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 40rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+}
+
+.dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: center; /* 居中显示 */
+  width: 100%;
+  margin-bottom: 16rpx;
+
+  .title {
+    font-size: 34rpx;
+    font-weight: bold;
+    color: #333333;
+    margin-right: 16rpx;
+  }
+
+  .tag {
+    font-size: 28rpx;
+    padding: 6rpx 10rpx;
+    border-radius: 10rpx;
+    margin-top: 2rpx;
+  }
+
+  //   .tag {
+  //     background-color: #e6f0ff; /* 淡蓝色背景 */
+  //     color: #4a90e2; /* 蓝色文字 */
+  //     font-size: 24rpx;
+  //     padding: 4rpx 12rpx;
+  //     border-radius: 8rpx;
+  //   }
+}
+
+.dialog-subtitle {
+  font-size: 28rpx;
+  color: #666666;
+  margin-bottom: 40rpx;
+}
+
+.dialog-image-container {
+  width: 200rpx; /* 根据图片调整 */
+  height: auto;
+  margin-bottom: 30rpx;
+}
+
+.dialog-image {
+  width: 100%;
+  height: auto; /* 让图片自适应高度 */
+}
+
+.change-binding {
+  font-size: 28rpx;
+  color: #4a90e2; /* 蓝色链接颜色 */
+  //   margin-bottom: 50rpx;
+  cursor: pointer; /* 鼠标悬停显示手型 */
+}
+
+.dialog-footer {
+  width: 100%;
+}
+
+.confirm-button {
+  width: 100%;
+  height: 88rpx;
+  line-height: 88rpx;
+  background-color: #4879e6; /* 蓝色按钮背景 */
+  color: #ffffff;
+  font-size: 32rpx;
+  border-radius: 0 0 24rpx 24rpx;
+  border: none;
+  text-align: center;
+  // 移除按钮默认边框（H5）
+  &::after {
+    border: none;
+  }
+}
+
+/* 可以添加按钮按下的效果 */
+// .confirm-button:active {
+//   background-color: #4879e6;
+// }
+</style>
diff --git a/pages/adminNfc/nfcResult.vue b/pages/adminNfc/nfcResult.vue
index 9374d1b..2455b33 100644
--- a/pages/adminNfc/nfcResult.vue
+++ b/pages/adminNfc/nfcResult.vue
@@ -18,23 +18,45 @@
       <view class="result-content">NFC卡已成功绑定子区域</view>
     </view>
 
+    <view>
+      <button @click="showDialog = true">显示弹窗</button>
+      <bind-dialog
+        :visible="showDialog"
+        @close="showDialog = false"
+        @changeBinding="onChangeBinding"
+        @confirm="onConfirm"
+      ></bind-dialog>
+    </view>
+
     <u-tabbar :list="vuex_tabbar"></u-tabbar>
   </view>
 </template>
 <script>
 import { loginApi } from "@/api/apiList";
+import BindDialog from "@/pages/adminNfc/components/bindDialog.vue"; // 确保路径正确
 export default {
+  components: {
+    BindDialog,
+  },
   data() {
     return {
-      phone: "13800451500",
-      pwd: "123456",
+      showDialog: false,
     };
   },
+  onLoad() {},
   mounted() {
     uni.hideLoading(); // 关闭 Loading
   },
-  onLoad() {},
-  methods: {},
+  methods: {
+    onChangeBinding() {
+      console.log("点击了更换绑定");
+      // 处理更换绑定的逻辑
+    },
+    onConfirm() {
+      console.log("点击了知道了");
+      // 处理确认逻辑
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>