127 lines
3.4 KiB
Vue
127 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import { nextTick, onMounted } from 'vue';
|
|
|
|
definePageMeta({
|
|
layout: 'header',
|
|
})
|
|
const activeTab = ref('')
|
|
|
|
// const route = useRoute();
|
|
// const { id } = route.params as { id: string };
|
|
interface PointsResult {
|
|
points: number
|
|
memberConsumeList: any[]
|
|
}
|
|
const pointsResult = ref<PointsResult>(null)
|
|
async function getPoints() {
|
|
try {
|
|
const res = await request.get('/member/getPoints')
|
|
if (res.code === 200) {
|
|
pointsResult.value = res.data as PointsResult
|
|
debugger
|
|
nextTick(() => {
|
|
activeTab.value = 'beatles'
|
|
})
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
getPoints()
|
|
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="h-[500px] overflow-y-auto">
|
|
<div class="mc-table flex w-full">
|
|
<div class="w-[250px]">
|
|
获取时间
|
|
</div>
|
|
<div class="w-[250px]">
|
|
获取来源
|
|
</div>
|
|
<div class="flex-1">
|
|
算力生效时间
|
|
</div>
|
|
<div class="flex-1">
|
|
算力到期时间
|
|
</div>
|
|
<div class="w-[200px]">
|
|
算力值
|
|
</div>
|
|
</div>
|
|
<div v-for="item in pointsResult.memberConsumeList" :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>
|
|
</div>
|
|
</n-tab-pane> -->
|
|
<n-tab-pane name="beatles" tab="已消耗">
|
|
<div class="h-[500px] overflow-y-auto">
|
|
<div class="mc-table flex w-full">
|
|
<div class="w-[250px]">
|
|
消耗时间
|
|
</div>
|
|
<div class="w-[250px]">
|
|
消耗类型
|
|
</div>
|
|
<div class="flex-1">
|
|
任务详情
|
|
</div>
|
|
<div class="w-[200px]">
|
|
算力值
|
|
</div>
|
|
</div>
|
|
<div v-for="item in pointsResult.memberConsumeList" :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>
|
|
</div>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.mc-table {
|
|
> div {
|
|
line-height: 40px;
|
|
height: 50px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
}
|
|
</style>
|