myOrders.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. <route lang="json5" type="page">
  2. {
  3. layout: 'default',
  4. style: {
  5. navigationBarTitleText: 'My Orders',
  6. navigationBarBackgroundColor: '#fff',
  7. },
  8. }
  9. </route>
  10. <script lang="ts" setup>
  11. // 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
  12. // eslint-disable-next-line unused-imports/no-unused-imports
  13. import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
  14. import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
  15. import { orderList } from '@/api/order'
  16. import { formatNumber } from '@/utils'
  17. defineOptions({
  18. name: 'MyOrders', // 我的订单
  19. })
  20. const userInfo = computed(() => {
  21. return getUserInfoHook()
  22. })
  23. // z-paging
  24. const paging = ref(null)
  25. // 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
  26. useZPaging(paging)
  27. const tab = ref<number>(0)
  28. const tabList = ref<any>([
  29. {
  30. label: 'All',
  31. value: 0,
  32. },
  33. {
  34. label: 'To pay',
  35. value: 1,
  36. },
  37. {
  38. label: 'Success',
  39. value: 2,
  40. },
  41. {
  42. label: 'Failed',
  43. value: 3,
  44. },
  45. {
  46. label: 'Reward',
  47. value: 4,
  48. },
  49. ])
  50. // 搜索结果
  51. const dataList = ref<any[]>([])
  52. async function queryList(pageNo, pageSize) {
  53. // 此处请求仅为演示,请替换为自己项目中的请求
  54. try {
  55. const res = await orderList({
  56. page: pageNo,
  57. size: pageSize,
  58. type: tab.value, // 根据tab的值来查询不同状态的订单
  59. userId: userInfo.value.userId,
  60. })
  61. paging.value[tab.value].complete(res.data.list)
  62. }
  63. catch {
  64. paging.value[tab.value].complete(false)
  65. }
  66. }
  67. function toPage() {
  68. uni.navigateTo({
  69. url: '/pages/myOrders/orderDetail',
  70. })
  71. }
  72. </script>
  73. <template>
  74. <wd-tabs v-model="tab" swipeable sticky custom-class="bg-transparent!">
  75. <wd-tab v-for="tabItem in tabList" :key="tabItem" :title="tabItem.label" :value="tabItem.value">
  76. <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
  77. <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">
  78. <template #title>
  79. <view class="flex items-center justify-between">
  80. <view class="text-28rpx text-#000">
  81. Order ID:{{ item.orderId }}
  82. </view>
  83. <wd-text size="26rpx" type="primary" text="Completed" />
  84. </view>
  85. </template>
  86. <view class="flex items-center gap-24rpx">
  87. <image
  88. src="/static/images/avatar.jpg"
  89. class="h-140rpx w-140rpx shrink-0"
  90. />
  91. <view class="flex-1">
  92. <view class="line-clamp-2 text-28rpx text-#000">
  93. SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
  94. </view>
  95. <view class="py-4rpx text-24rpx text-#3A444C">
  96. Color:Black Grey
  97. </view>
  98. <view class="flex items-center justify-between text-24rpx text-#3A444C">
  99. <view>
  100. ৳ {{ formatNumber(item.payPrice) }}
  101. </view>
  102. <view>
  103. Quantity:1
  104. </view>
  105. </view>
  106. </view>
  107. </view>
  108. </wd-card>
  109. </z-paging>
  110. </wd-tab>
  111. </wd-tabs>
  112. </template>
  113. <style lang="scss" scoped>
  114. //
  115. </style>