city-gather/src/subPack-common/integral/index.vue

<script setup lang="ts">
// import { navTabTypeList } from '@/subPack-smqjh/order/order-data'

definePage({
  name: 'common-integral',
  islogin: true,
  style: {
    navigationBarTitleText: '积分',
    disableScroll: true,
  },
})
const navTabTypeList = [
  { name: '全部', value: 'all' },
  { name: '星闪豹', value: 'XSB' },
  { name: '充电', value: 'CD' },
  { name: '电影演出', value: 'DYY' },
  { name: '视频权益', value: 'VIDEO' },
  { name: '大牌点餐', value: 'SHOP' },
]
const { data: info } = useRequest(() =>
  Apis.xsb.findUserPoints({}),
)
const type = ['充值', '下单', '退款', '过期积分', '退款过期积分']
const { data: pointList, isLastPage, page } = usePagination((pageNum, pageSize) => Apis.xsb.findUserPointsPage({ data: { pageNum, pageSize } }), { data: resp => resp.data?.list, initialPage: 1, initialPageSize: 10, immediate: true, append: true })

function handleScrollBottom() {
  console.log(isLastPage.value, '=====')

  if (!isLastPage.value) {
    page.value++
  }
}

function getLabel(val: string) {
  return navTabTypeList.find(i => i.value === val)?.name || '未知类型'
}
</script>

<template>
  <view class="pages pty24rpx">
    <view class="grid grid-cols-4 w-full bg-white py-24rpx">
      <view class="flex flex-col items-center justify-center">
        <view class="text-28rpx text-[#AAAAAA]">
          总充值积分
        </view>
        <view class="text-36rpx text-[#222] font-semibold">
          {{ info?.data?.pointsTotal || 0 }}
        </view>
      </view>
      <view class="flex flex-col items-center justify-center">
        <view class="text-28rpx text-[#AAAAAA]">
          当前可用积分
        </view>
        <view class="text-36rpx text-[#222] font-semibold">
          {{ info?.data?.availablePointsTotal || 0 }}
        </view>
      </view>
      <view class="flex flex-col items-center justify-center">
        <view class="text-28rpx text-[#AAAAAA]">
          已过期积分
        </view>
        <view class="text-36rpx text-[#222] font-semibold">
          {{ info?.data?.expiryPointsTotal || 0 }}
        </view>
      </view>
      <view class="flex flex-col items-center justify-center">
        <view class="text-28rpx text-[#AAAAAA]">
          已消耗积分
        </view>
        <view class="text-36rpx text-[#222] font-semibold">
          {{ info?.data?.consumePointsTotal || 0 }}
        </view>
      </view>
    </view>
    <view class="px-24rpx py-20rpx">
      可用积分记录
    </view>
    <scroll-view scroll-y class="view" @scrolltolower="handleScrollBottom">
      <view v-for="item, index in pointList" :key="item.pointsId" class="bg-white p-24rpx">
        <view class="flex items-center justify-between text-32rpx font-semibold">
          <view class="text-[#222]">
            {{ (type[Number(item.pointsType) - 1] == '下单' ? getLabel(item.businessType) : type[Number(item.pointsType) - 1]) || '未知状态' }}
          </view>
          <view class="text-[#FF4A39]">
            {{ item?.variablePoints || 0 }}
          </view>
        </view>
        <view class="mt-20rpx flex items-center justify-between text-28rpx text-[#AAAAAA]">
          <view>{{ item?.creationDate }}</view>
          <view>当前可用积分 {{ item?.currentlyAvailablePoints || 0 }}</view>
        </view>
        <view v-if="index < pointList.length - 1" class="mt-24rpx h-2rpx w-full bg-[#F0F0F0]" />
      </view>
      <StatusTip v-if="!pointList.length" tip="暂无内容" />
    </scroll-view>
  </view>
</template>

<style scoped>
.view {
  height: calc(100vh - var(--window-top) - 250rpx);
}
</style>