mcwl-pc/app/pages/gold-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 };

// 获取充值记录
const recordFinished = ref(false)
const recordParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const pointsResult = ref([])
async function getPoints() {
  try {
    if (recordFinished.value)
      return
    const res = await request.post('/personalCenter/getRecord', { ...recordParams.value })
    if (res.code === 200) {
      if (recordParams.value.pageNum === 1) {
        pointsResult.value = res.rows
      }
      else {
        pointsResult.value = [...pointsResult.value, ...res.rows]
      }
      // 判断是否加载完所有数据
      if (pointsResult.value.length >= res.total) {
        recordFinished.value = true
      }
      recordParams.value.pageNum++
    }
  }
  catch (err) {
    console.log(err)
  }
}
getPoints()

// 已获消费的积分
const walletRecordFinished = ref(false)
const walletRecordParams = ref({
  pageNum: 1,
  pageSize: 15,
})
const walletRecordList = ref([])
async function getWalletRecord() {
  try {
    if (walletRecordFinished.value)
      return
    const res = await request.post('/personalCenter/getWalletRecord', { ...walletRecordParams.value })
    if (res.code === 200) {
      if (walletRecordParams.value.pageNum === 1) {
        walletRecordList.value = res.rows
      }
      else {
        walletRecordList.value = [...walletRecordList.value, ...res.rows]
      }
      // 判断是否加载完所有数据
      if (walletRecordList.value.length >= res.total) {
        walletRecordFinished.value = true
      }
      walletRecordParams.value.pageNum++
    }
  }
  catch (err) {
    console.log(err)
  }
}
getWalletRecord()

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-[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.orderTime }}
                </div>
                <div class="w-[250px]">
                  {{ item.productName }}
                </div>
                <div class="flex-1">
                  -
                </div>
                <div class="w-[200px]">
                  {{ item.paymentAmount }}
                </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="getWalletRecord"
            >
              <div v-for="item in walletRecordList" :key="item" class="mc-table flex w-full">
                <div class="w-[250px]">
                  {{ item.consumeDate }}
                </div>
                <div class="w-[250px]">
                  {{ item.productName }}
                </div>
                <div class="flex-1">
                  -
                </div>
                <div class="w-[200px]">
                  {{ item.amount }}
                </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>