city-gather/src/subPack-attractions/commonTab/components/orderList.vue

<script setup lang="ts">
import { tabsList } from '../order-data'
import attractionsList from '@/subPack-smqjh/components/attractions-orderList/attractions-orderList.vue?async'
import { createGlobalLoadingMiddleware } from '@/api/core/middleware'

const tab = ref<number>(0)
const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())

// 状态映射：tab索引 -> 接口status
const statusMap: Record<number, number> = {
  0: 0, // 全部
  1: 1, // 待支付
  2: 2, // 已支付
  3: 3, // 已取消
  4: 4, // 已完成
}

const { data: orderList, isLastPage, page, error, refresh, reload } = usePagination((pageNum, pageSize) => Apis.xsb.orderList({ data: {
  businessType: 'JDMP',
  pageNum,
  pageSize,
  orderStatus: statusMap[tab.value],
} }), {
  immediate: true,
  pageNum: 1,
  pageSize: 10,
  initialData: [],
  data: res => res.data?.list,
  append: true,
  middleware: createGlobalLoadingMiddleware(),
})

// tab切换
function handleClick(e: { index: number }) {
  tab.value = e.index
  orderList.value = []
  refresh()
}

onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
    refresh()
  }
})
const state = computed(() => {
  return error.value ? 'error' : !isLastPage.value ? 'loading' : 'finished'
})
</script>

<template>
  <view class="attractions-order-page" style="min-height: 100vh; background-color: #f6f6f6;">
    <wd-navbar
      title="订单列表" custom-style="background-color:#FFF" :bordered="false" :z-index="99"
      safe-area-inset-top fixed
    />
    <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
    <wd-tabs v-model="tab" :offset-top="statusBarHeight + MenuButtonHeight + 12" sticky custom-style="background-color: transparent;" @click="handleClick">
      <block v-for="(item, index) in tabsList" :key="index">
        <wd-tab :title="item">
          <view class="box-border w-full overflow-hidden px24rpx">
            <view class="h-20rpx" />
            <StatusTip v-if="!orderList.length" tip="暂无内容" />
            <view v-for="order in orderList" :key="order.orderNumber" class="w-full overflow-hidden">
              <attractionsList :order="order" />
            </view>
            <wd-loadmore :state="state" :loading-props="{ color: '#9ED605', size: 20 }" @reload="reload" />
            <view class="h-40rpx" />
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

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