city-gather/src/subPack-videoRights/commonTab/components/order.vue

<script setup lang="ts">
import { StaticUrl } from '@/config'
import { createGlobalLoadingMiddleware } from '@/api/core/middleware'
import router from '@/router'

const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
const tab = ref<number>(0)
const tabsList = ref(['全部', '成功', '失败'])
const rechargeStatus = ref<string>('')
const { data: orderList, isLastPage, page, refresh } = usePagination((pageNum, pageSize) =>
  Apis.videoRight.orderList({ data: { pageNum, pageSize, rechargeStatus: rechargeStatus.value } }), {
  data: (resp) => {
    return resp.data?.list
  },
  initialData: [],
  initialPage: 1,
  initialPageSize: 10,
  append: true,
  immediate: true,
  middleware: createGlobalLoadingMiddleware(),
})
onShow(() => {
  refresh()
})
onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
    refresh()
  }
})

function handleClick(e: any) {
  if (e.index === 0) {
    rechargeStatus.value = ''
  }
  else if (e.index === 1) {
    rechargeStatus.value = '2'
  }
  else if (e.index === 2) {
    rechargeStatus.value = '3'
  }
  refresh()
}
</script>

<template>
  <view class="video-rights-order-page">
    <wd-navbar
      title="订单" custom-style="background-color:#FFF" :bordered="false" :z-index="99"
      safe-area-inset-top fixed
    />
    <view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
    <wd-tabs v-model="tab" :offset-top="statusBarHeight + MenuButtonHeight + 12" animated @click="handleClick">
      <block v-for="item in tabsList" :key="item">
        <wd-tab :title="item">
          <view class="box-border bg-#f6f6f6 px24rpx">
            <view class="h-4rpx" />
            <view v-for=" order in orderList" :key="order.orderNumber" class="mt-28rpx rounded-16rpx bg-#FFF p-24rpx" @click="router.push({ name: 'video-rights-order-info', params: { orderNo: order.orderNumber || '' } })">
              <view class="flex items-center justify-between">
                <view class="text-28rpx">
                  {{ order.createTime }}
                </view>
                <view class="text-28rpx font-bold">
                  {{ order.rechargeStatusDesc }}
                </view>
              </view>
              <view class="mt-24rpx h-2rpx w-full bg-#F0F0F0" />
              <view class="mt-24rpx flex items-center justify-between">
                <view class="flex items-center gap-20rpx">
                  <view class="h-160rpx w-160rpx">
                    <image class="h-160rpx w-160rpx" :src="`${StaticUrl}/list-page-img.png`" />
                  </view>
                  <view>
                    <view class="text-32rpx font-bold">
                      {{ order.productName }}
                    </view>
                    <view class="mt-16rpx text-#FF4D3A">
                      <text class="text-22rpx font-500">
                        ￥
                      </text>
                      <text class="text-36rpx font-800">
                        {{ order.sellPrice }}
                      </text>
                    </view>
                    <view class="mt-16rpx text-24rpx">
                      {{ order.orderNumber }}
                    </view>
                  </view>
                </view>
                <wd-icon name="chevron-right" size="22px" color="#222222" />
              </view>
            </view>
            <StatusTip v-if="!orderList.length" tip="暂无内容" />
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

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