usky-web-mobile/src/pages/business/fireIot/deviceManage/index.vue

<template>
  <oa-scroll
    customClass="bg-white scroll-height"
    :pageSize="pageSize"
    :total="total"
    :refresherLoad="true"
    :refresherLoadTitle="false"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.type"
  >
    <template #default>
      <view class="deviceManage">
        <u-grid :border="true">
          <u-grid-item v-for="(base, index) in dataList" :key="index" @click="handleToDevice(base.id, base.productName)">
            <u-badge type="primary" max="9999" :value="base.deviceCount" :showZero="true" :absolute="true" :offset="[10, 10, 0, 0]"></u-badge>
            <image class="mb15" style="width: 40px; height: 40px; margin-top: 35px" :src="base.typeImg" mode="aspectFill"></image>
            <view class="mb15 text-ellipsis" style="width: 100%; text-align: center">{{ base.productName }}</view>
          </u-grid-item>
        </u-grid>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance } from "vue";
import { useStores, publicStores } from "@/store/modules/index";

import { dmpProductInfo } from "@/api/business/fireIot/deviceManage.js";

const { proxy } = getCurrentInstance();

const dataList = ref([]);
const pageSize = ref(20);
const current = ref(1);
const total = ref(0);

/**
 * @页面初始化
 */
function init() {
  dmpProductInfo({ productName: "", current: current.value, size: pageSize.value }).then((requset) => {
    if (requset.status === "SUCCESS") {
      requset.data.records.forEach((el) => {
        if (!el.typeImg) {
          el.typeImg = "/static/images/404.png";
        }

        if (el.deviceCount == null) {
          el.deviceCount = 0;
        }
      });

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

function handleToDevice(id, productName) {
  proxy.$tab.navigateTo(`/pages/business/fireIot/deviceManage/components/deviceDetailsList?id=${id}&productName=${productName}`);
}

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

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

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

  init();
});
</script>