property-manager-side/wuye-manager-uniapp/pageSubPack/instrument/replacement_record.vue

<template>
  <view class="page_padding">
    <view class="replacement_record_box flex-1 flex flex-col">
      <view class="nav flex items-center">
        <view class="line"></view>
        <text class="title">仪表换新记录</text>
      </view>
      <TabsComponents :tabslist="tabslist" @update="handleChangeTabs"></TabsComponents>
      <view class="instrument_body flex-1 flex">
        <scroll-view scroll-y lower-threshold="160" @scrolltolower="scrolltolower">
          <view
            class="instrument_items flex items-center flex-between"
            v-for="(item, index) in infolist"
            :key="index"
          >
            <view class="flex items-center">
              <image lazy-load src="/static/imgs/home.png" class="icon" mode=""></image>
              <view class="instrument_info">
                <view class="instrument_title">
                  <text>{{ item.title }}</text>
                </view>
                <view class="instrument_time">
                  <text>换新时间时间：{{ item.time }}</text>
                </view>
              </view>
            </view>
            <view class="instrument_type">
              <text v-if="item.type === 2">电表</text>
              <text v-else>水表</text>
            </view>
          </view>
          <!-- 底部加载状态提示 -->
          <uni-load-more :status="statusmore"></uni-load-more>
        </scroll-view>
      </view>
      <view class="action_btn" @tap="handleClick">
        <text>新增</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, nextTick, ref } from 'vue'
import TabsComponents from '@/components/tabs/tabs.vue'
/** 加载状态 */
const statusmore = computed(() => {
  if (isLoading.value === true) {
    return 'loading'
  } else if (isLoading.value === false) {
    if (hasMore.value) {
      return 'more'
    } else {
      return 'noMore'
    }
  }
})
const isLoading = ref(false) // 加载锁
const hasMore = ref(true) // 是否还有更多数据

const tabslist = [
  {
    name: '全部',
    value: 0
  },
  {
    name: '水表',
    value: 1
  },
  {
    name: '电表',
    value: 2
  }
]
function handleChangeTabs(val: number) {
  queryParmas.value.pageNum = 1
  infolist.value = []
  getlist()
}
// ---------------------------------------------------------------------
const infolist = ref([])
const queryParmas = ref({
  pageNum: 1,
  pageSize: 10
})
const total = ref(21)
function scrolltolower() {
  // 必须加这两个判断！
  if (isLoading.value || !hasMore.value) {
    return
  }
  queryParmas.value.pageNum += 1
  getlist()
}
function getlist() {
  // 1. 如果正在加载或没有更多数据，直接返回
  if (isLoading.value || !hasMore.value) return
  // 2. 开启锁
  isLoading.value = true
  uni.showLoading({
    title: '加载中',
    mask: true
  })
  const { pageNum, pageSize } = queryParmas.value

  const startId = (pageNum - 1) * pageSize + 1
  const arr = Array.from({ length: pageSize }).map((_, index) => {
    const realId = startId + index // ✅ 修复 ID 错误

    // ✅ 随机生成 0、1、2
    const randomStatus = Math.floor(Math.random() * 2)
    return {
      title: 'M2栋3单元18' + realId + '室（M2-3-1801）',
      time: '2023-08-01 10:05:46',
      type: randomStatus //1水表 2电表
    }
  })

  // 追加数据（正确方式）
  infolist.value = [...infolist.value, ...arr]
  // 判断是否还有更多
  hasMore.value = infolist.value.length < total.value
  isLoading.value = false
  uni.hideLoading()
}
getlist()
function resetList() {
  infolist.value = []
  queryParmas.value.pageNum = 1
  hasMore.value = true
  getlist()
}

function handleClick() {
  uni.navigateTo({
    url: '/pageSubPack/instrument/addreplacement'
  })
}
</script>

<style scoped lang="scss">
.replacement_record_box {
  background: #f9f9f9;
  padding: 20rpx 40rpx;
  position: relative;
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  .nav {
    margin-bottom: 40rpx;
    font-weight: 550;
    font-size: 32rpx;
    color: #333333;
    line-height: 40rpx;
    .line {
      width: 6rpx;
      height: 28rpx;
      background: #4d5dfa;
      margin-right: 10rpx;
    }
  }

  .instrument_body {
    overflow: hidden;
    margin-top: 20rpx;
    box-sizing: border-box;
    .instrument_items {
      box-sizing: border-box;
      background: #ffffff;
      padding: 40rpx 20rpx;
      margin-bottom: 20rpx;

      .icon {
        width: 40rpx;
        height: 32rpx;
      }
      .instrument_info {
        margin-left: 22rpx;
        .instrument_title {
          font-weight: 550;
          font-size: 32rpx;
          color: #222222;
          line-height: 40rpx;
        }
        .instrument_time {
          margin-top: 5rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 30rpx;
        }
      }
      .instrument_type {
        font-weight: 400;
        font-size: 24rpx;
        color: #4d5dfa;
        line-height: 30rpx;
      }
    }
  }

  .action_btn {
    width: 100%;
    height: 80rpx;
    background: #4d5dfa;
    border-radius: 8rpx;
    text-align: center;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 80rpx;
    margin-top: 20rpx;
  }
}
</style>