usky-web-mobile/src/pages/business/doorManage/record/index.vue

<template>
  <u-sticky class="shadow-default" style="top: 0">
    <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" title="智能门禁" :placeholder="true" :safeAreaInsetTop="true" bgColor="#fff">
      <template #left>
        <view class="u-navbar__content__left__item">
          <u-icon name="arrow-left" size="20" color="#000"></u-icon>
        </view>
      </template>
    </u-navbar>
  </u-sticky>

  <oa-scroll
    customClass="doorRecord-container scroll-height"
    :pageSize="state.size"
    :total="state.total"
    :isSticky="true"
    :customStyle="{
      //#ifdef APP-PLUS || MP-WEIXIN
      height: `calc(100vh - (44px + 50px + ${proxy.$settingStore.StatusBarHeight} + ${proxy.$settingStore.tabBarHeight}))`,
      //#endif
      //#ifdef H5
      height: `calc(100vh - (44px + 50px + ${proxy.$settingStore.StatusBarHeight} + ${proxy.$settingStore.tabBarHeight}))`,
      //#endif
    }"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :lowerThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
  >
    <template #default>
      <u-loading-page :loading="state.loading" fontSize="16" style="z-index: 99"></u-loading-page>
      <view class="loginLog-container" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
        <view class="container-area">
          <view class="container-area-content bg-white" v-for="data in state.dataList" :key="data">
            <view class="container-area-content-img">
              <image style="width: 40px; height: 40px" :src="'/static/images/door/lock.png'" mode="aspectFill"></image>
            </view>
            <view class="container-area-content-center">
              <view
                :style="{
                  fontSize: '14px',
                  fontWeight: 600,
                }"
                >{{ data.egDevice?.deviceName }}</view
              >
              <view>通行时间：{{ data.passTime ? data.passTime.replace("T", " ") : "" }}</view>
              <view>
                通行结果：
                <span :style="{ color: data.passResult == '成功' ? '#16bf00' : 'red' }">{{ data.passResult }}</span>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </oa-scroll>

  <oa-tabbar :tabbarValue="1" :tabbarList="proxy.$constData.doorTabbar" :isSwitchTab="false"></oa-tabbar>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { doorApi } from "@/api/business/door.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  dataList: [],
  current: 1, //页数
  size: 20, //条数
  total: 0,
});

/**
 * @初始化
 */
function init() {
  selectListApi();
}

/**
 * @scrollView加载数据
 */
function load() {
  state.size += 10;
  selectListApi();
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  state.size = 20;
  selectListApi();
}

/**
 * @通知公告列表
 * @api接口调用
 */
function selectListApi() {
  state.loading = true;
  doorApi()
    .RecordSelect({
      current: state.current, //页数
      size: state.size, //条数
      userName: useStore.nickName,
    })
    .then((requset) => {
      if (requset.status === "SUCCESS") {
        state.dataList = requset.data.records;
        state.total = requset.data.total;
        state.loading = false;
      }
    })
    .catch((err) => {
      state.loading = false;
    });
}

onLoad((options) => {
  init();
});

onReady(() => {});

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

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    proxy.$tab.navigateTo("/pages/mine/setting/index");
  }
});
</script>
<style lang="scss" scoped>
:deep(.uni-page-head__title) {
  opacity: 1 !important;
}

.loginLog-container {
  padding-bottom: 1px;

  .container-area {
    &-content {
      display: flex;
      border-bottom: 0.5px solid #d6d7d9;

      &-img {
        margin: auto 15px auto 15px;
      }

      &-center {
        width: 100%;
        font-size: 12px;
        padding: 15px 0 15px 0;
        line-height: 20px;
      }
    }
  }
}
</style>