mcwl-pc/app/pages/Int-detail/index.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue';

definePageMeta({
  layout: 'header',
})
const activeTab = ref('oasis')

// const route = useRoute();
// const { id } = route.params as { id: string };
interface PointsResult {
  points: number
  memberConsumeList: any[]
}

// 获取已消耗积分
const consumePointsFinished = ref(false);
const consumePointsParams = ref({
  "pageNum": 1,
  "pageSize": 20
})
const pointsResult = ref([])
async function getPoints() {
  try {
    if (consumePointsFinished.value) return
    const res = await request.post('/member/getConsumePoints', {
      ...consumePointsParams.value
    })
    if (res.code === 200) {
      if(consumePointsParams.value.pageNum === 1){
        pointsResult.value = res.rows
      }else{
        pointsResult.value = [...pointsResult.value, ...res.rows]
      }
      if (pointsResult.value.length >= res.total) {
        consumePointsFinished.value = true;
      }
      consumePointsParams.value.pageNum++
    }
  }
  catch (err) {
    console.log(err)
  }
}
getPoints()

// 已获取的积分
const rechargePointsFinished = ref(false);
const rechargePointsParams = ref({
  "pageNum": 1,
  "pageSize": 20
})
const rechargePoints = ref([])
async function getRechargePoints() {
  try {
    if (rechargePointsFinished.value) return;
    const res = await request.post('/member/getRechargePoints', {
      ...rechargePointsParams.value
    })
    if (res.code === 200) {
      if (rechargePointsParams.value.pageNum === 1) {
        rechargePoints.value = res.rows;
      } else {
        rechargePoints.value = [...rechargePoints.value, ...res.rows];
      }
      // 判断是否加载完所有数据
      if (rechargePoints.value.length >= res.total) {
        rechargePointsFinished.value = true;
      }
      rechargePointsParams.value.pageNum++;
    }
  }
  catch (err) {
    console.log(err)
  }
}
getRechargePoints()


onMounted(() => {
  // nextTick(() => {
  //   activeTab.value = 'beatles'
  // })
})
</script>

<template>
  <div class="flex justify-center bg-[#f2f5f8] items-center h-[calc(100vh-48px)]">
    <div class="w-[1200px] bg-white rounded-lg shadow-lg p-10 h-[calc(100%-40px)]">
      <h1 class="text-2xl font-bold mb-4">
        积分明细
      </h1>
      <n-tabs v-model:value="activeTab" type="line" animated>
        <n-tab-pane name="oasis" tab="已获取">
          <div class="border border-solid border-gray-200 rounded-lg relative">
            <div class="mc-table flex w-full bg-gray-200 sticky top-0">
              <div class="w-[250px]">
                获取时间
              </div>
              <div class="w-[200px]">
                获取来源
              </div>
              <div class="w-[250px]">
                积分生效时间
              </div>
              <div class="w-[250px]">
                积分到期时间
              </div>
              <div class="flex-1">
                积分值
              </div>
            </div>
            <n-infinite-scroll
              style="height: calc(100vh - 300px)"
              :distance="10"
              @load="getRechargePoints"
            >
              <div v-for="item in rechargePoints" :key="item" class="mc-table flex w-full">
                <div class="w-[250px]">
                  {{ item.rechargeTime }}
                </div>
                <div class="w-[200px]">
                  {{ item.getSource }}
                </div>
                <div class="w-[250px]">
                  {{ item.effectStartTime }}
                </div>
                <div class="w-[250px]">
                  {{ item.effectEndTime }}
                </div>
                <div class="flex-1">
                  {{ item.points }}
                </div>
              </div>
            </n-infinite-scroll>
          </div>
        </n-tab-pane>
        <n-tab-pane name="beatles" tab="已消耗">
          <div class="border border-solid border-gray-200 rounded-lg relative">
            <div class="mc-table flex w-full bg-gray-200 sticky top-0">
              <div class="w-[250px]">
                消耗时间
              </div>
              <div class="w-[250px]">
                消耗类型
              </div>
              <div class="flex-1">
                任务详情
              </div>
              <div class="w-[200px]">
                积分值
              </div>
            </div>
            <n-infinite-scroll
              style="height: calc(100vh - 300px)"
              :distance="10"
              @load="getPoints"
            >
            <div v-for="item in pointsResult" :key="item" class="mc-table flex w-full">
              <div class="w-[250px]">
                {{ item.consumeTime }}
              </div>
              <div class="w-[250px]">
                生图
              </div>
              <div class="flex-1">
                -
              </div>
              <div class="w-[180px]">
                {{ item.consumePoints }}
              </div>
            </div>
          </n-infinite-scroll>

          </div>
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mc-table {
  padding: 10px;
  line-height: 40px;
  border-bottom: 1px solid #eee;
}
</style>