usky-web-mobile/src/pages/business/fireIot/facilitiesManage/facilitiesDetailsList.vue

<template>

  <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" :title="`${facilityTypeName}(${total})`" :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>

  <oa-scroll
    customClass="scroll-height"
    :pageSize="pageSize"
    :total="total"
    :isSticky="false"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="facilitiesDetailsList-container">
        <view class="flex bg-white p10" style="position: relative">
          <u--input
            style="width: 100%"
            v-model="facilityName"
            placeholder="请输入设施名称"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            customStyle="height:30px;background-color:#f5f6fa;"
            @confirm="init()"
            clearable
          ></u--input>
          <view class="ml10" style="margin-top: auto; margin-bottom: auto; white-space: nowrap" @click="init()">筛选</view>
        </view>

        <view class="menu-list m0">
          <view class="list-cell list-cell-arrow" v-for="(base, index) in dataList" :key="index" @click="handleToDevice(base.id)">
            <view class="menu-item">
              <view class="title">{{ base.facilityName }}</view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </oa-scroll>
</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 { useStores, commonStores } from "@/store/modules/index";

import { baseGgpFacility } from "@/api/business/fireIot/facilitiesManage.js";

const { proxy } = getCurrentInstance();

const dataList = ref([]);
const facilityType = ref(undefined);
const facilityName = ref("");
const facilityTypeName = ref("");
const pageSize = ref(20);
const current = ref(1);
const total = ref(0);

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

/**
 * @列表查询
 * @api接口查询
 */
function selectListApi() {
  baseGgpFacility({ facilityType: facilityType.value, facilityName: facilityName.value, current: current.value, size: pageSize.value }).then((requset) => {
    if (requset.status === "SUCCESS") {
      if (requset.data.records.length > 0) {
        // uni.setNavigationBarTitle({
        //   title: `${facilityTypeName.value}（${requset.data.total}）`,
        // });
      }

      dataList.value = requset.data.records;
      total.value = requset.data.total;
    }
  });
}

/**
 * @设备详情跳转点击事件
 */
function handleToDevice(id) {
  proxy.$tab.navigateTo(`/pages/business/fireIot/facilitiesManage/facilitiesDetails?id=${id}&typeName=${facilityTypeName.value}`);
}

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

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

onReady(() => {});

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

onLoad((options) => {
  if ("typeName" in options) {
    facilityTypeName.value = options.typeName;
  }
  if ("typeCode" in options) {
    facilityType.value = options.typeCode;
    init();
  }
});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
  } else {
  }
});
</script>

<style lang="scss" scoped>
.facilitiesDetailsList-container {
}
</style>