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>