bonus-material-app/src/pages/materialsStation/index/expiryDateList.vue

<template>
  <div class="content">
    <div class="query">
      <uni-easyinput
        errorMessage
        v-model="queryParams.keyWord"
        placeholder="请输入关键字"
        style="margin: 0 5px"
      />
      <button size="mini" style="background-color: #f0a037; color: #fff" @click="getList">
        查询
      </button>
    </div>
    <!-- 滚动 -->
    <scroll-view scroll-y="true" class="scroll-container" @scrolltolower="onScrollTolower">
      <!-- 列表 -->
      <uni-table ref="table" border stripe emptyText="暂无更多数据">
        <uni-tr>
          <uni-th width="50" align="center">序号</uni-th>
          <uni-th width="150" align="center">设备类型</uni-th>
          <uni-th width="150" align="center">规格型号</uni-th>
          <uni-th width="120" align="center">设备编码</uni-th>
          <uni-th width="110" align="center">本次检修时间</uni-th>
          <uni-th width="110" align="center">下次检修时间</uni-th>
          <uni-th width="100" align="center">在用班组</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableList" :key="index">
          <uni-td align="center">{{ index + 1 }}</uni-td>
          <uni-td align="center">{{ item.typeName }}</uni-td>
          <uni-td align="center">{{ item.typeModelName }}</uni-td>
          <uni-td align="center">{{ item.maCode || '-' }}</uni-td>
          <uni-td align="center">{{ item.thisCheckTime || '-' }}</uni-td>
          <uni-td align="center">{{ item.nextCheckTime || '-' }}</uni-td>
          <uni-td align="center">{{ item.teamName || '-' }}</uni-td>
        </uni-tr>
      </uni-table>
      <div style="display: flex; justify-content: center; align-items: center; height: 50px">
        {{ total == tableList.length ? '没有更多数据了~' : '正在加载...' }}
      </div>
    </scroll-view>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getAgreementIdApi, getSafeDetailsListApi } from '@/services/materialsStation'
import { onLoad } from '@dcloudio/uni-app'

const queryParams = ref({
  pageNum: 1,
  pageSize: 25,
  keyWord: '',
  status: '', // 2:临近检期1个月 1:临近检期3个月
})
const tableList = ref([])
const total = ref(0)

onLoad((opt) => {
  console.log('🚀 ~ opt:', opt)
  const params = opt.params ? JSON.parse(opt.params) : null
  console.log('🚀 ~ params:', params)
  queryParams.value.status = params.status || ''
  getList()
})

const onScrollTolower = () => {
  console.log('滚动到底部')
  queryParams.value.pageSize += 10
  getList()
}

const getList = async () => {
  try {
    uni.showLoading({ title: '加载中...', mask: true })
    const { data: agreementIdList } = await getAgreementIdApi()
    const res = await getSafeDetailsListApi({ ...queryParams.value, agreementIdList })
    tableList.value = res.data.rows || []
    total.value = res.data.total || 0
  } catch (error) {
    console.error('获取列表失败:', error)
  } finally {
    uni.hideLoading()
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
}
.query {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f0a037;
  margin-bottom: 15px;
}
.scroll-container {
  height: calc(100vh - 120px);
  overflow-y: auto;
}
</style>