上拉加载实现分页查询功能——uniapp+uview

<template>
  <view class="app-container">
    <up-skeleton :loading="loading" animated rows="10">
      <up-sticky>
        <up-row class="header-card" gutter="5">
          <up-col span="4">
            <view class="header-item">
              <text class="col-top">仓管员</text>
              <text class="col-bottom">{{ summary.warehouseKeeper }}</text>
            </view>
          </up-col>
          <up-col span="4">
            <view class="header-item">
              <text class="col-top">当天完成</text>
              <text class="col-bottom">{{ summary.sumOfDay }}</text>
            </view>
          </up-col>
          <up-col span="4">
            <view class="header-item">
              <text class="col-top">当月完成</text>
              <text class="col-bottom">{{ summary.sumOfMonth }}</text>
            </view>
          </up-col>
        </up-row>
        <up-tabs lineWidth="30" :list="tabsList" :current="curNow" @change="sectionChange" :scrollable="false"
          :activeStyle="{
      color: '#3c9cff',
      fontSize: '26rpx',
      fontWeight: 'bold'
    }" :inactiveStyle="{
      color: '#606266',
      fontSize: '26rpx',
    }" itemStyle="padding: 8rpx 30rpx;height: 80rpx;"></up-tabs>
        <up-search borderColor="rgb(230, 230, 230)" bgColor="#fff" placeholder="请扫描或输入装柜计划号"
          v-model="queryParams.packno" search-icon="scan" :show-action="false" :clearabled="true" @clickIcon="clickIcon"
          @search="handleQuery">
        </up-search>
      </up-sticky>
      <view class="order-box">
        <uni-section class="uni-section-box" :padding="true" v-for="item in list" :key="item.id">
          <up-icon name="arrow-right-double" color="#3c9cff" size="28" bold @click="gotoData(item)"></up-icon>
          <up-row customStyle="margin-bottom: 20rpx">
            <up-col span="12">
              <view>
                <text class="label">{{ $t('finishproduct.consignment.装柜计划号') }}：</text>
                <text>{{ item.packno }}</text>
              </view>
            </up-col>
          </up-row>
          <up-row customStyle="margin-bottom: 20rpx">
            <up-col span="12">
              <view>
                <text class="label">{{ $t('finishproduct.consignment.柜号') }}：</text>
                <text>{{ item.bstkds }}</text>
              </view>
            </up-col>
          </up-row>
          <up-row customStyle="margin-bottom: 20rpx">
            <text class="label">{{ $t('finishproduct.consignment.计划装柜日期') }}：</text>
            <text>{{ item.packdate + ' ' + item.erzet }}</text>
          </up-row>
          <up-row customStyle="margin-bottom: 20rpx">
            <text class="label">{{ $t('finishproduct.consignment.打印锁定日期') }}：</text>
            <text>{{ item.prtdate + ' ' + item.prttime }}</text>
          </up-row>
          <up-row v-if="item.psdate" customStyle="margin-bottom: 20rpx">
            <up-col span="12">
              <view>
                <text class="label">{{ $t('finishproduct.consignment.提交发货时间') }}：</text>
                <text>{{ item.psdate }}</text>
              </view>
            </up-col>
          </up-row>
          <up-row :customStyle="item.shipper || item.evType ? { 'margin-bottom': '20rpx' } : {}">
            <up-col span="6">
              <view>
                <text class="label">{{ $t('finishproduct.consignment.订单数量') }}：</text>
                <text>{{ item.sumOrderQty }}</text>
              </view>
            </up-col>
            <up-col span="6">
              <view>
                <text class="label">{{ $t('finishproduct.consignment.装柜数量') }}：</text>
                <text>{{ item.sumLoadingQty }}</text>
              </view>
            </up-col>
          </up-row>
          <up-row v-if="item.shipper || item.evType" customStyle="margin-bottom: 20rpx">
            <up-col span="6">
              <view>
                <text class="label">{{ $t('finishproduct.consignment.发货员') }}：</text>
                <text>{{ item.shipper }}</text>
              </view>
            </up-col>
            <up-col span="6">
              <view style="display: flex;align-items: center;">
                <text class="label">{{ $t('finishproduct.consignment.evType') }}：</text>
                <dict-tag :options="sap_message_type" :value="item.evType" />
              </view>
            </up-col>
          </up-row>
          <up-row v-if="item.evMessage">
            <view class="label" style="white-space: nowrap;">{{ $t('finishproduct.consignment.evMessage') }}：</view>
            <view :class="cellColorClass(item.evType)" style="line-height: 1.5">
              {{ item.evMessage }}
            </view>
          </up-row>
        </uni-section>
        <up-loadmore :status="status" v-if="list.length > 0" />
      </view>
    </up-skeleton>
  </view>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { broadcastScan } from '@/utils/scanCode.js';
import { onReachBottom, onPullDownRefresh, onLoad, onShow, onUnload, onHide } from '@dcloudio/uni-app';
import { ref, toRefs, reactive, getCurrentInstance } from "vue";
import { summaryApi, listConsign } from '@/pages_finishproduct/common/api/consignment.js';
const { proxy } = getCurrentInstance()
const { sap_message_type } = proxy.useDict('sap_message_type')

const summary = ref({})
const list = ref([])
const status = ref('loadmore')
const isloading = ref(false)
const loading = ref(true);
const total = ref(0)

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    status: 'N',
    thisMonth: '',
    packno: ''
  }
})
const { queryParams } = toRefs(data)

// tabs切换
const curNow = ref(0);
const tabsList = ref([])

const gotoData = (item) => {
  uni.navigateTo({
    url: `/pages_finishproduct/pages/transfer/send?id=${item.id}`
  })
}

function sectionChange(e) {
  curNow.value = e.index;
  tabsList.value.forEach((tab, i) => {
    if (i === e.index) {
      tab.badge.bgColor = '#3c9cff';
    } else {
      tab.badge.bgColor = '#909193';
    }
  });
  const cur = proxy.parseTime(new Date(), '{y}-{m}')
  switch (e.status) {
    case 'N':
      queryParams.value.thisMonth = ''
      break;
    case 'C':
      queryParams.value.thisMonth = ''
      break;
    case 'X':
      queryParams.value.thisMonth = cur
      break;
    default:
      break;
  }
  queryParams.value.status = e.status
  handleQuery()
}

const handleQuery = () => {
  queryParams.value.pageNum = 1
  list.value = []
  getList()
}

const clickIcon = () => {
  uni.scanCode({
    success: function (res) {
      queryParams.value.packno = res.result
      handleQuery()
    }
  });
}

const getList = (cb) => {
  isloading.value = true;
  proxy.$modal.loading('加载中...')
  listConsign(queryParams.value).then((response) => {
    isloading.value = false;
    // 过滤已解锁状态的订单。
    const arr = response.rows.filter(item => item.zlock === 'X');
    cb && cb()
    list.value = [...list.value, ...arr]
    total.value = response.total
    // 没有数据或者数据不到一页
    if (queryParams.value.pageSize >= total.value) return status.value = 'nomore';
  }).finally(() => {
    proxy.$modal.closeLoading()
  })
}

const getTotal = async () => {
  const { data } = await summaryApi()
  summary.value = data

  const { total: totalN } = await listConsign({ status: 'N', zlock: 'X' })
  const { total: totalC } = await listConsign({ status: 'C', zlock: 'X' })
  const { total: totalX } = await listConsign({ status: 'X', zlock: 'X', thisMonth: proxy.parseTime(new Date(), '{y}-{m}') })
  tabsList.value = [
    { name: '未开始', status: 'N', badge: { value: totalN } },
    { name: '进行中', status: 'C', badge: { value: totalC } },
    { name: '已完成', status: 'X', badge: { value: totalX } }
  ]
  // 初始化徽标颜色
  tabsList.value.forEach((tab, i) => {
    tab.badge.bgColor = i === curNow.value ? '#3c9cff' : '#909193';
  });
}

const getAllApi = async () => {
  await Promise.all([
    getTotal(),
    handleQuery()
  ])
  loading.value = false
}

//页面触底监听函数
onReachBottom(() => {
  if (queryParams.value.pageNum * queryParams.value.pageSize >= total.value) return status.value = 'nomore';
  // 正在加载
  status.value = 'loading';
  if (isloading.value) return

  queryParams.value.pageNum += 1
  getList()
})

// 下拉刷新
onPullDownRefresh(() => {
  // 需要重置关键的数据
  queryParams.value.pageNum = 1
  total.value = 0
  isloading.value = false
  list.value = []
  getList(() => {
    uni.stopPullDownRefresh()
  })
})

onLoad(async (options) => {
  if (options && options.title) {
    uni.setNavigationBarTitle({
      title: `${options.title}`
    });
  }
})

const getScanCode = (code) => {
  if (!code) return
  queryParams.value.packno = code.trim();
  handleQuery()
}

onUnload(() => {
  broadcastScan.stop();
})
onShow(() => {
  // 页面跳转刷新数据
  getAllApi()
  broadcastScan.init(getScanCode);
  broadcastScan.start();
})
onHide(() => {
  broadcastScan.stop();
})

const colors = {
  S: 'text-success',
  E: 'text-danger',
  W: 'text-warning',
  I: 'text-warning',
  A: 'text-warning',
  default: ''
}

const cellColorClass = (evType) => {
  return colors[evType] || colors.default
}

</script>

<style lang="scss" scoped>
::v-deep .u-search {
  background-color: #fff;
  padding: 10rpx;
}

::v-deep .uni-section .uni-section-header {
  display: none;
}

.order-box {
  padding-bottom: 10rpx;
}

.uni-section-box {
  position: relative;

  ::v-deep .u-icon {
    position: absolute;
    right: 20rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}

::v-deep .u-tabs {
  background-color: #fff;
  border-bottom: 1rpx solid #f1f1f1;
}
</style>