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

<template>
  <scroll-view class="bg-white scroll-height" :scroll-y="true" :data-theme="'theme-' + proxy.$settingStore.themeColor.type">
    <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="margin-b-15" style="width: 40px; height: 40px; margin-top: 35px" :src="base.imagePath" mode="aspectFill"></image>
        <text class="margin-b-15 grid-text">{{ base.productName }}</text>
      </u-grid-item>
    </u-grid>

    <!-- <uni-pagination class="app-pagination bg-white" :current="current" :total="total" :pageSize="pageSize" prev-text="前一页" next-text="后一页" @change="paginationChange" /> -->
  </scroll-view>
</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/deviceSelect/index";

const { proxy } = getCurrentInstance();

const dataList = ref([]);
const pageSize = ref(1000);
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 ("imagePath" in el == false) {
          el.imagePath = "/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/deviceSelect/components/deviceDetailsList?id=${id}&productName=${productName}`);
}

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

  init();
});
</script>