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 = ref<Api.sysDict[]>([])
const showPointsPopup = ref(false)
const { data: info } = useRequest(() =>
  Apis.xsb.findUserPoints({}),
)

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++
  }
}
async function getNavList() {
  const res = await Apis.sys.dictPage({ data: { typeCode: 'sys_business_type' } })
  navTabTypeList.value = res.data?.list || []
}
getNavList()
</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" @click="showPointsPopup = true">
        <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]">
            {{ item.businessTypeName || '未知状态' }}
          </view>
          <view class="text-[#FF4A39]">
            {{ item?.pointsTypeName }}{{ 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>
    <!-- <Zpopup v-model="showPointsPopup" :showfooter="false" bg="#fff">
      <view class="px-32rpx pb-40rpx pt-40rpx">
        <view class="mb-32rpx text-center text-32rpx font-bold">
          积分有限期
        </view>
        <view class="mb-24rpx flex items-center justify-between">
          <view class="text-28rpx text-[#222] font-bold">
            当前可用积分
          </view>
          <view class="text-36rpx text-[#222] font-bold">
            {{ info?.data?.availablePointsTotal || 0 }}
          </view>
        </view>
        <view class="mb-16rpx flex items-center justify-between">
          <view class="text-24rpx text-[#999]">
            有效期至：2026-07-06 23:59:59
          </view>
          <view class="text-24rpx text-[#222]">
            2000
          </view>
        </view>
        <view class="mb-32rpx flex items-center justify-between">
          <view class="text-24rpx text-[#999]">
            有效期至：2026-07-06 23:59:59
          </view>
          <view class="text-24rpx text-[#222]">
            700
          </view>
        </view>
        <view class="mb-32rpx h-2rpx w-full bg-[#F0F0F0]" />
        <view class="mb-16rpx text-28rpx text-[#222] font-bold">
          说明：
        </view>
        <view class="text-24rpx text-[#999] leading-40rpx">
          <view>1.请在积分有效期内使用，逾期自动作废;</view>
          <view>2.使用时，系统会优先使用快过期的积分;</view>
          <view>3.如若交易在使用的积分有效期之外发生退款，该部分积分也为过期。</view>
        </view>
      </view>
    </Zpopup> -->
  </view>
</template>

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