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

<script setup lang="ts">
definePage({
  name: 'common-integral',
  islogin: true,
  style: {
    navigationBarTitleText: '积分',
    disableScroll: true,
  },
})
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.list, initialPage: 1, initialPageSize: 10, immediate: true, append: true })

function handleScrollBottom() {
  if (!isLastPage.value) {
    page.value++
  }
}
</script>

<template>
  <view class="pages pty24rpx">
    <view class="grid grid-cols-4 w-full bg-white py24rpx">
      <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?.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?.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?.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?.consumePointsTotal || 0 }}
        </view>
      </view>
    </view>
    <view class="px24rpx py20rpx">
      可用积分记录
    </view>
    <scroll-view scroll-y class="view" @scrolltolower="handleScrollBottom">
      <view v-for="item, index in pointList" :key="item.pointsId" class="bg-white p24rpx">
        <view class="flex items-center justify-between text-32rpx font-semibold">
          <view class="text-#222">
            {{ type[Number(item.pointsType)] || '未知状态' }}
          </view>
          <view class="text-#FF4A39">
            {{ item?.variablePoints || 0 }}
          </view>
        </view>
        <view class="mt20rpx 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="mt24rpx h-2rpx w-full bg-#F0F0F0" />
      </view>
    </scroll-view>
  </view>
</template>

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