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, orderStatusEnum } from '@/api/order'
import { formatNumber } from '@/utils'
import { toPage } from '@/utils/page'

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 orderStatusEnumData = ref<any>([])
async function getOrderStatus() {
  try {
    const res = await orderStatusEnum({ id: 1 })
    if (res.code === '200') {
      orderStatusEnumData.value = res.data
    }
  }
  catch {

  }
}

// 搜索结果
const dataList = ref<any[]>([])
async function queryList(pageNo: number, pageSize: number) {
  // 此处请求仅为演示，请替换为自己项目中的请求
  try {
    const res = await orderList({
      page: pageNo,
      size: pageSize,
      type: tab.value, // 根据tab的值来查询不同状态的订单
    })
    paging.value.complete(res.data.list)
  }
  catch {
    paging.value.complete(false)
  }
}
onLoad(() => {
  getOrderStatus()
})
</script>

<template>
  <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
    <template #top>
      <wd-tabs v-model="tab" custom-class="bg-transparent!" @click="() => queryList(1, 20)">
        <wd-tab v-for="tabItem in tabList" :key="tabItem.value" :title="tabItem.label" :name="tabItem.value" />
      </wd-tabs>
    </template>
    <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('/pages/myOrders/orderDetail', { id: item.id })">
      <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="orderStatusEnumData.find((i:any) => i.code === item.status)?.name" />
        </view>
      </template>
      <view class="flex items-center gap-24rpx">
        <view class="h-140rpx w-140rpx shrink-0">
          <image
            :src="item?.orderInfoVO?.[0]?.image"
            class="w-full"
            mode="widthFix"
          />
        </view>
        <view class="flex-1">
          <view class="line-clamp-2 text-28rpx text-#000">
            {{ item?.orderInfoVO?.[0]?.productName }}
          </view>
          <view class="py-4rpx text-24rpx text-#3A444C">
            Color： {{ item?.orderInfoVO?.[0]?.sku }}
          </view>
          <view class="flex items-center justify-between text-24rpx text-#3A444C">
            <view>
              ৳ {{ formatNumber(item?.orderInfoVO?.[0]?.price) }}
            </view>
            <view>
              Quantity：{{ item?.orderInfoVO?.[0]?.payNum }}
            </view>
          </view>
        </view>
      </view>
    </wd-card>
  </z-paging>
</template>

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