usky-web-mobile/src/pages/business/door/list/index.vue

<template>
  <u-sticky class="shadow-default" bgColor="#fff" 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="doorList-container scroll-height"
    :pageSize="state.pageSize"
    :total="state.total"
    :isSticky="true"
    :customStyle="{
      //#ifdef APP-PLUS || MP-WEIXIN
      height: `calc(100vh - (44px + 50px + ${proxy.$settingStore.StatusBarHeight}))`,
      //#endif
      //#ifdef H5
      height: `calc(100vh - (44px + 50px))`,
      //#endif
    }"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :lowerThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <u-loading-page :loading="state.loading" fontSize="16" style="z-index: 99"></u-loading-page>

      <u-grid class="p10" :border="true" :col="2" gap="10px">
        <u-grid-item class="p10 radius" bgColor="#FFF" v-for="(item, index) in dataList" :key="index">
          <view
            :style="{
              fontSize: '14px',
              fontWeight: 600,
              marginBottom: '20px',
              marginRight: 'auto',
            }"
          >
            {{ item.deviceName }}
          </view>
          <view
            class="flex"
            :style="{
              width: '100%',
            }"
          >
            <image style="width: 40px; height: 40px" :src="'/static/images/door/lock.png'" mode="aspectFill"></image>
            <view class="iconfont oaIcon-open_door ml-auto mtb-auto font30" @click="openDoor(item)"></view>
          </view>
        </u-grid-item>
      </u-grid>
    </template>
  </oa-scroll>

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

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onReady, onHide, onLaunch, onUnload, 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, controlStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
const controlStore = controlStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  loading: false,
  dataList: [],
  pageSize: 20,
  current: 1,
  total: 0,

  tabsList: [
    { name: "我收到的", value: 2 },
    { name: "我发出的", value: 3 },
    { name: "我负责的", value: 1 },
  ],
  tabsCurrent: 0,
});

const { tabsList, tabsCurrent, dataList } = toRefs(state);

/**
 * @初始化
 */
function init() {
  state.loading = true;
  doorApi()
    .MyPage({
      current: state.current, //页数
      size: state.pageSize, //条数
    })
    .then((requset) => {
      if (requset.data.records.length > 0) {
        state.dataList = requset.data.records;
        state.total = requset.data.total;
        state.loading = false;
      }
    })
    .catch((err) => {
      state.loading = false;
    });
}

/**
 * @门禁开门
 */
function openDoor(event) {
  event.userName = useStore.nickName;
  controlStore.openDoor(event);
}

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

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

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  state.tabsCurrent = e.index;
  init();
}

onReady(() => {});

onShow(() => {});

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

onUnload(() => {});
</script>

<style lang="scss" scoped>
.content-area {
}
</style>