city-gather/src/subPack-djk/commonTab/components/order.vue

<script setup lang="ts">
import djkorder from '@/subPack-smqjh/components/djk-order/index.vue?async'
import { createGlobalLoadingMiddleware } from '@/api/core/middleware'

const { statusBarHeight, MenuButtonHeight, refreshOrderList } = storeToRefs(useSysStore())
const { data: orderList, refresh, isLastPage, page, reload, error } = usePagination((pageNum, pageSize) => Apis.xsb.orderList({ data: {
  businessType: 'DJK',
  pageNum,
  pageSize,
  orderStatus: 'all',
} }), {
  pageNum: 1,
  pageSize: 10,
  initialData: [],
  data: res => res.data?.list,
  append: true,
  middleware: createGlobalLoadingMiddleware(),
  immediate: false,
})
const state = computed(() => {
  return error.value ? 'error' : !isLastPage.value ? 'loading' : 'finished'
})
function handleBottom() {
  if (!isLastPage.value) {
    page.value++
  }
}
reload()
watch(() => refreshOrderList.value, () => {
  console.log('刷新页面', refreshOrderList.value)
  if (refreshOrderList.value) {
    reload()
    refreshOrderList.value = false
  }
})
</script>

<template>
  <wd-navbar
    title="订单列表"
    :bordered="false"
    :z-index="99"
    safe-area-inset-top
    placeholder
    fixed
  />
  <scroll-view scroll-y :style="{ height: `calc(100vh - ${(statusBarHeight + MenuButtonHeight) * 4}rpx)` }" @scrolltolower="handleBottom">
    <view class="p24rpx">
      <template v-for="item in orderList" :key="item.orderNumber">
        <djkorder :order="item" @refresh="reload" />
      </template>
      <wd-loadmore v-if="orderList.length > 10" :state="state" :loading-props="{ color: '#9ED605', size: 20 }" @reload="refresh" />
      <StatusTip v-if="!orderList.length" tip="暂无内容" />
      <view class="h60rpx" />
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped></style>