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] =?UTF-8?q?feat:=20nfc=E5=86=99=E5=85=A5=E5=BC=B9=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>