108 lines
2.7 KiB
Vue
108 lines
2.7 KiB
Vue
<template>
|
|
<div style="margin: 20px;">
|
|
<a-card title="算力券管理">
|
|
<div style="width: 300px;border: 1px solid #e8e8e8;line-height: 45px;border-radius: 5px;">
|
|
<div
|
|
style="background: linear-gradient(90deg, rgba(240, 245, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);height: 45px;line-height: 45px;padding: 0 10px;">
|
|
可用算力券</div>
|
|
<div style="font-size:18px;font-weight: bold;padding: 0 10px;">￥{{ couponTotal }}</div>
|
|
</div>
|
|
<!-- 账单表格 -->
|
|
<div style="margin-top: 20px;">
|
|
<a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
|
|
:loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'status'">
|
|
<a-tag v-if="record.status === 'enabled'" color="green">有效</a-tag>
|
|
<a-tag v-else color="red">失效</a-tag>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, onBeforeMount, h } from 'vue';
|
|
import { getMyCouponTotal, getRecommendList } from '@/apis/home';
|
|
import { message } from 'ant-design-vue';
|
|
const loading = ref(false);
|
|
const billData = ref([])
|
|
const couponTotal = ref(0);
|
|
const columns = [
|
|
{
|
|
title: '算力券名称',
|
|
dataIndex: 'name',
|
|
key: 'name',
|
|
width: 200,
|
|
},
|
|
{
|
|
title: '算力点',
|
|
dataIndex: 'amount',
|
|
key: 'amount',
|
|
width: 200,
|
|
},
|
|
{
|
|
title: '生效时间',
|
|
dataIndex: 'StartAt',
|
|
key: 'StartAt',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: '失效时间',
|
|
dataIndex: 'EndAt',
|
|
key: 'EndAt',
|
|
width: 100,
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
width: 100,
|
|
}
|
|
|
|
];
|
|
const pagination = ref({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
showTotal: (total: number) => `共 ${total} 条记录`
|
|
})
|
|
// 表格变化处理
|
|
const handleTableChange = () => {
|
|
|
|
|
|
}
|
|
const getBillData = () => {
|
|
loading.value = true;
|
|
try {
|
|
getRecommendList().then((res: any) => {
|
|
console.log('res', res);
|
|
billData.value = res.data;
|
|
pagination.value.total = res.total;
|
|
loading.value = false;
|
|
})
|
|
} catch (error) {
|
|
loading.value = false;
|
|
message.error('获取算力券列表失败');
|
|
}
|
|
};
|
|
const getValue = () => {
|
|
// 获取其他必要的数据
|
|
try {
|
|
getMyCouponTotal().then((res: any) => {
|
|
console.log('res', res);
|
|
couponTotal.value = res;
|
|
})
|
|
} catch (error) {
|
|
message.error('获取算力券总额失败');
|
|
}
|
|
};
|
|
onBeforeMount(() => {
|
|
// 初始化获取数据
|
|
getValue()
|
|
getBillData()
|
|
})
|
|
</script> |