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

<template>
  <scroll-view class="scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
    <u-sticky class="example-body" style="top: 0px">
      <view class="padding-sm padding-tb-10" :class="'bg-' + proxy.$settingStore.themeColor.name">
        <u--input
          v-model="facilityName"
          placeholder="搜索"
          prefixIcon="search"
          prefixIconStyle="font-size: 22px;color: #909399"
          customStyle="height:35px;background-color:#f5f6fa;"
          @confirm="init()"
          clearable
        ></u--input>
      </view>
    </u-sticky>

    <view class="facilitiesDetailsList-container">
      <view class="menu-list margin-0">
        <view class="list-cell list-cell-arrow" v-for="(base, index) in dataList" :key="index" @click="handleToDevice(base.id)">
          <view class="menu-item-box">
            <view class="title">{{ base.facilityName }}</view>
          </view>
        </view>
      </view>

      <uni-pagination class="block app-pagination bg-white" :current="current" :total="total" :pageSize="pageSize" prev-text="上一页" next-text="下一页" @change="paginationChange" />
    </view>
  </scroll-view>
</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 { publicStores, useStores } from "@/store/modules/index";

import { baseGgpFacility } from "@/api/business/fireIot/facilitiesView/index";

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() {
  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;
    }
  });
}

/**
 * @分页chage事件
 */
function paginationChange(e) {
  current.value = e.current;
  init();
}

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

onReady(() => {});

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

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

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

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