myOrders.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  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, orderStatusEnum } from '@/api/order'
  16. import { formatNumber } from '@/utils'
  17. import { toPage } from '@/utils/page'
  18. defineOptions({
  19. name: 'MyOrders', // 我的订单
  20. })
  21. const userInfo = computed(() => {
  22. return getUserInfoHook()
  23. })
  24. // z-paging
  25. const paging = ref(null)
  26. // 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
  27. useZPaging(paging)
  28. const tab = ref<number>(0)
  29. const tabList = ref<any>([
  30. {
  31. label: 'All',
  32. value: 0,
  33. },
  34. {
  35. label: 'To pay',
  36. value: 1,
  37. },
  38. {
  39. label: 'Success',
  40. value: 2,
  41. },
  42. {
  43. label: 'Failed',
  44. value: 3,
  45. },
  46. {
  47. label: 'Reward',
  48. value: 4,
  49. },
  50. ])
  51. const orderStatusEnumData = ref<any>([])
  52. async function getOrderStatus() {
  53. try {
  54. const res = await orderStatusEnum({ id: 1 })
  55. if (res.code === '200') {
  56. orderStatusEnumData.value = res.data
  57. }
  58. }
  59. catch {
  60. }
  61. }
  62. // 搜索结果
  63. const dataList = ref<any[]>([])
  64. async function queryList(pageNo: number, pageSize: number) {
  65. // 此处请求仅为演示,请替换为自己项目中的请求
  66. try {
  67. const res = await orderList({
  68. page: pageNo,
  69. size: pageSize,
  70. type: tab.value, // 根据tab的值来查询不同状态的订单
  71. })
  72. paging.value.complete(res.data.list)
  73. }
  74. catch {
  75. paging.value.complete(false)
  76. }
  77. }
  78. onLoad(() => {
  79. getOrderStatus()
  80. })
  81. </script>
  82. <template>
  83. <z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
  84. <template #top>
  85. <wd-tabs v-model="tab" custom-class="bg-transparent!" @click="() => queryList(1, 20)">
  86. <wd-tab v-for="tabItem in tabList" :key="tabItem.value" :title="tabItem.label" :name="tabItem.value" />
  87. </wd-tabs>
  88. </template>
  89. <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 })">
  90. <template #title>
  91. <view class="flex items-center justify-between">
  92. <view class="text-28rpx text-#000">
  93. Order ID:{{ item.orderId }}
  94. </view>
  95. <wd-text size="26rpx" type="primary" :text="orderStatusEnumData.find((i:any) => i.code === item.status)?.name" />
  96. </view>
  97. </template>
  98. <view class="flex items-center gap-24rpx">
  99. <view class="h-140rpx w-140rpx shrink-0">
  100. <image
  101. :src="item?.orderInfoVO?.[0]?.image"
  102. class="w-full"
  103. mode="widthFix"
  104. />
  105. </view>
  106. <view class="flex-1">
  107. <view class="line-clamp-2 text-28rpx text-#000">
  108. {{ item?.orderInfoVO?.[0]?.productName }}
  109. </view>
  110. <view class="py-4rpx text-24rpx text-#3A444C">
  111. Color: {{ item?.orderInfoVO?.[0]?.sku }}
  112. </view>
  113. <view class="flex items-center justify-between text-24rpx text-#3A444C">
  114. <view>
  115. ৳ {{ formatNumber(item?.orderInfoVO?.[0]?.price) }}
  116. </view>
  117. <view>
  118. Quantity:{{ item?.orderInfoVO?.[0]?.payNum }}
  119. </view>
  120. </view>
  121. </view>
  122. </view>
  123. </wd-card>
  124. </z-paging>
  125. </template>
  126. <style lang="scss" scoped>
  127. //
  128. </style>