123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <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>
|