aiot-app/src/pages/workbenchsub/device/list.vue

<template>
  <view class="device-list">
    <up-search v-model="searchValue"></up-search>
    <view class="stat-ctl">
      <view class="u-page__tag-item" v-for="(item, index) in DeviceState" :key="index">
        <up-tag
            :text="item.label"
            :plain="selectTag === item.value"
            :plainFill="true"
            bgColor="#007aff"
            :name="item.value"
            @click="()=>radioClick(item)"
        >
        </up-tag>
      </view>
    </view>
    <view class="u-page-list" style="padding-bottom: 100rpx">
      <up-list @scrolltolower="scrolltolower">
        <up-list-item
            v-for="(item, index) in indexList"
            :key="item.id"
        >
          <view class="item-content">
            <up-image
                :showLoading="true"
                :src="getDevImg(item.devImg)"
                width="160rpx"
                height="150rpx"
                :lazy-load="true"
            >
              <template #error>
                <view style="font-size: 24rpx;">加载失败</view>
              </template>
            </up-image>
            <view class="content-info">
              <view>
                <up-text :lines="1" :text="`设备名称： ${formatTxt(item.deviceNickname)}`" size="24rpx"/>
                <up-tag :text="item.statusName" plain size="mini" :bgColor="valueToConst(DeviceState,item.status).color"
                        class="tag-stat"></up-tag>
                <up-text text="详情>" color="#007aff" style="flex:none;width: auto"
                         @click="()=>onDetailClick(item)"></up-text>
              </view>
              <view>
                <up-text :lines="1" :text="`设备编码：${formatTxt(item.name)}`" size="24rpx"/>

              </view>
              <view>
                <up-text :lines="1" :text="`上线时间：${formatTxt(item.lastOnlineTime)}`" size="24rpx"/>
              </view>
            </view>
          </view>
        </up-list-item>
        <up-loading-icon v-if="loading" text="加载中" textSize="12"></up-loading-icon>
        <up-text
            v-if="!loadmoreFlag" text="已经到底了" style="justify-content: center;"
            size="24rpx"
            color="gray"
        >

        </up-text>
      </up-list>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue"
import {DeviceState} from '@/common/consts/DeviceConst.js'
import {valueToConst} from '@/common/consts/CommonConst.js'
import {onLoad} from '@dcloudio/uni-app';
import {formatTxt, getDevImg, navigateTo,} from '@/util/index.js'
import {getDeviceList} from "@/api/device.js";

const page = ref(1)
onLoad(() => {
  page.value = 1
  loading.value = true;
  loadmore();
});
let searchValue = ref("")
let indexList = ref([])
let selectTag = ref(DeviceState.ALL.value)
let loadmoreFlag = ref(true)
let loading = ref(false)

function radioClick(item) {
  selectTag.value = item.value
}


const loadmore = async () => {
  const {records} = await getDeviceList({
    page: page.value,
    deviceNickName: searchValue.value,
    deviceState: selectTag.value,
  })
  if (records && records.length > 0) {
    indexList.value = indexList.value.concat(records)
    page.value += 1
    if (records.length < 10) {
      loadmoreFlag.value = false;
    }
  } else {
    loadmoreFlag.value = false;
  }
  loading.value = false;
};

const scrolltolower = () => {
  if (!loadmoreFlag.value) return;
  loading.value = true;
  loadmore();
};
const onDetailClick = (item) => {
  navigateTo({
    url: "/pages/workbenchsub/device/detail",
    param: item
  })
}
</script>

<style lang="scss">
.device-list {
  width: 680rpx;
  margin: 14rpx auto 0;

  .u-search__content {
    background: $uni-bg-color !important;

    .u-search__content__input {
      background-color: $uni-bg-color !important;
    }
  }

  .u-page-list {
    margin-top: 14rpx;
  }

  .item-content {
    width: 100%;
    border-radius: $comm-border-radius;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    background: $uni-bg-color;
    margin-bottom: 14rpx;

    padding: 14rpx;

    .content-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      margin-left: 14rpx;

      > view {
        font-size: inherit;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .tag-stat {
          margin-left: auto;
          margin-right: 14rpx;

          .u-tag--mini {
            height: 35rpx;
          }

          .u-tag--primary--plain {
            border-color: transparent !important;

            .u-tag__text--primary--plain {
              color: $uni-bg-color !important;
              font-size: 18rpx !important;
            }
          }
        }


        .u-link {
          flex: none;
        }

        &:not(:first-child) {
          margin-top: 14rpx;
        }
      }
    }
  }
}
</style>