usky-web-mobile/src/pages/common/nfc/index.vue

<template>
  <view class="nfc-container">
    <view class="nfc-container-image">
      <image class="nfc-gif" src="@/static/images/common/nfc-flash.gif" mode="aspectFit" style="width: 230px"></image>
    </view>
    <view class="nfc-container-text">{{ proxy.$settingStore.nfcWaiting }}</view>
  </view>
</template>

<script setup>
import config from "@/config";
import { onLoad, onShow, onReady, onHide, onLaunch, onUnload, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject, watch } from "vue";

const { proxy } = getCurrentInstance();

onLoad((options) => {
  // 开启nfc监听
  proxy.$nfc.readNFC();
});

onUnload(() => {
  proxy.$nfc.closeNFC();
});

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});
</script>

<style lang="scss" scoped>
.nfc-container {
  &-image {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 55% auto 40px auto;
  }
  &-text {
    text-align: center;
    font-size: 16px;
  }
}
</style>