city-gather/src/subPack-charge/chargeBuyaTicketList/chargeBuyaTicketList.vue

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

definePage({
  name: 'charge-buy-a-ticket-list',
  islogin: false,
  style: {
    navigationBarTitleText: '购券记录',
  },
})

/**
 * 获取购券记录列表
 */
const { data: recordList, isLastPage, page } = usePagination((pageNum, pageSize) =>
  Apis.charge.getPurchaseRecordPage({ data: { pageNum, pageSize } }), {
  data: (resp) => {
    return resp.data?.list
  },
  initialData: [],
  initialPage: 1,
  initialPageSize: 10,
  append: true,
  immediate: true,
  middleware: createGlobalLoadingMiddleware(),
})

onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})

/**
 * 获取状态文本
 */
function getStatusText(recordStatus?: number) {
  switch (recordStatus) {
    case 1:
      return '已取消'
    case 2:
      return '已到账'
    case 3:
      return '退款'
    default:
      return '未知'
  }
}

/**
 * 获取状态样式
 */
function getStatusClass(recordStatus?: number) {
  switch (recordStatus) {
    case 1:
      return 'bg-#AAAAAA text-#666666'
    case 2:
      return 'bg-#9ED605 text-#FFFFFF'
    case 3:
      return 'bg-#FF9500 text-#FFFFFF'
    default:
      return 'bg-#AAAAAA text-#666666'
  }
}
</script>

<template>
  <view class="min-h-screen bg-#F5F7FB px-24rpx">
    <view class="h-10rpx" />
    <StatusTip v-if="!recordList.length" tip="暂无内容" />
    <view v-for="item in recordList" :key="item.recordNo" class="mt-20rpx bg-#FFFFFF px-24rpx py-28rpx">
      <view class="relative flex items-center justify-between">
        <view class="text-32rpx font-bold">
          {{ item.couponAmount }}元充电费抵扣券
        </view>
        <view class="absolute right-[-24rpx] rounded-[30rpx_0rpx_0rpx_4rpx] px-14rpx py-8rpx text-28rpx text-#FFF" :class="getStatusClass(item.recordStatus)">
          • {{ getStatusText(item.recordStatus) }}
        </view>
      </view>
      <view class="mt-28rpx h-2rpx w-full bg-#F0F0F0" />
      <view class="mt-28rpx">
        <view class="text-24rpx text-#AAAAAA">
          订单编号：{{ item.recordNo }}
        </view>
        <view class="mt-20rpx text-24rpx text-#AAAAAA">
          购券时间：{{ item.createTime }}
        </view>
        <view class="mt-20rpx text-24rpx text-#AAAAAA">
          实付金额：{{ item.couponAmount }}元
        </view>
      </view>
    </view>
    <view class="h-20rpx" />
  </view>
</template>

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