bandhuBuy-uniapp/src/pages/myOrders/myOrders.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: 'My Orders',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script lang="ts" setup>
// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
// eslint-disable-next-line unused-imports/no-unused-imports
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
import { orderList } from '@/api/order'
import { formatNumber } from '@/utils'

defineOptions({
  name: 'MyOrders', // 我的订单
})

const userInfo = computed(() => {
  return getUserInfoHook()
})
// z-paging
const paging = ref(null)
// 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
useZPaging(paging)
const tab = ref<number>(0)
const tabList = ref<any>([
  {
    label: 'All',
    value: 0,
  },
  {
    label: 'To pay',
    value: 1,
  },
  {
    label: 'Success',
    value: 2,
  },
  {
    label: 'Failed',
    value: 3,
  },
  {
    label: 'Reward',
    value: 4,
  },
])
// 搜索结果
const dataList = ref<any[]>([])
async function queryList(pageNo, pageSize) {
  // 此处请求仅为演示，请替换为自己项目中的请求
  try {
    const res = await orderList({
      page: pageNo,
      size: pageSize,
      type: tab.value, // 根据tab的值来查询不同状态的订单
      userId: userInfo.value.userId,
    })
    paging.value[tab.value].complete(res.data.list)
  }
  catch {
    paging.value[tab.value].complete(false)
  }
}

function toPage() {
  uni.navigateTo({
    url: '/pages/myOrders/orderDetail',
  })
}
</script>

<template>
  <wd-tabs v-model="tab" swipeable sticky custom-class="bg-transparent!">
    <wd-tab v-for="tabItem in tabList" :key="tabItem" :title="tabItem.label" :value="tabItem.value">
      <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
        <wd-card v-for="item in dataList" :key="item.orderId" type="rectangle" custom-class="px-24rpx! py-6rpx!" custom-content-class="py-18rpx!" custom-title-class="py-18rpx!" @click="toPage">
          <template #title>
            <view class="flex items-center justify-between">
              <view class="text-28rpx text-#000">
                Order ID：{{ item.orderId }}
              </view>
              <wd-text size="26rpx" type="primary" text="Completed" />
            </view>
          </template>
          <view class="flex items-center gap-24rpx">
            <image
              src="/static/images/avatar.jpg"
              class="h-140rpx w-140rpx shrink-0"
            />
            <view class="flex-1">
              <view class="line-clamp-2 text-28rpx text-#000">
                SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
              </view>
              <view class="py-4rpx text-24rpx text-#3A444C">
                Color：Black Grey
              </view>
              <view class="flex items-center justify-between text-24rpx text-#3A444C">
                <view>
                  ৳ {{ formatNumber(item.payPrice) }}
                </view>
                <view>
                  Quantity：1
                </view>
              </view>
            </view>
          </view>
        </wd-card>
      </z-paging>
    </wd-tab>
  </wd-tabs>
</template>

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