InspectionCleaning/pages/adminNfc/nfcResult.vue

<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>

    <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 {
      showDialog: false,
    };
  },
  onLoad() {},
  mounted() {
    uni.hideLoading(); // 关闭 Loading
  },
  methods: {
    onChangeBinding() {
      console.log("点击了更换绑定");
      // 处理更换绑定的逻辑
    },
    onConfirm() {
      console.log("点击了知道了");
      // 处理确认逻辑
    },
  },
};
</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>