feat:历史账单界面接通
This commit is contained in:
zhongzm
@@ -136,4 +136,13 @@ export function submitOrder(data: Api.Order.SubmitOrderParams) {
|
||||
data
|
||||
});
|
||||
}
|
||||
/** Get bill history records */
|
||||
export function fetchBillHistory(params: Api.Bill.BillQueryParams) {
|
||||
return request<Api.Bill.BillListResponse>({
|
||||
url: '/u/bill/page',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
33
src/typings/api.d.ts
vendored
33
src/typings/api.d.ts
vendored
@@ -629,4 +629,37 @@ declare namespace Api {
|
||||
/** Combined order params type */
|
||||
type SubmitOrderParams = PackageOrderParams | RechargeOrderParams;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Namespace Bill
|
||||
*
|
||||
* Backend api module: "bill"
|
||||
*/
|
||||
namespace Bill {
|
||||
/** Bill record information */
|
||||
interface BillRecord {
|
||||
id: string;
|
||||
startTime: string | null;
|
||||
endTime: string | null;
|
||||
traffic: string | null;
|
||||
amount: string;
|
||||
status: number;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/** Bill list response */
|
||||
interface BillListResponse {
|
||||
rows: BillRecord[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
/** Bill query parameters */
|
||||
interface BillQueryParams {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,160 +1,93 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, h } from 'vue'
|
||||
import { ref, h, onMounted, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import type { TableColumnsType } from 'ant-design-vue'
|
||||
import { Tag as ATag, Table as ATable } from 'ant-design-vue'
|
||||
import { useRouter } from 'vue-router';
|
||||
import { fetchBillHistory } from '@/service/api/auth';
|
||||
import { useWindowSize } from '@vueuse/core';
|
||||
|
||||
const router = useRouter();
|
||||
const handleBack = () => {
|
||||
router.push('/billing/billservice');
|
||||
};
|
||||
|
||||
const { t } = useI18n();
|
||||
interface BillDetail {
|
||||
deviceName: string
|
||||
usage: number
|
||||
unit: string
|
||||
}
|
||||
|
||||
interface BillRecord {
|
||||
id: number
|
||||
date: string
|
||||
amount: number
|
||||
status: 'paid' | 'unpaid'
|
||||
details: BillDetail[]
|
||||
}
|
||||
const billData = ref<Api.Bill.BillRecord[]>([]);
|
||||
const total = ref(0);
|
||||
|
||||
// 模拟数据
|
||||
const billData = ref<BillRecord[]>([
|
||||
{
|
||||
id: 1,
|
||||
date: '2024-03-01',
|
||||
amount: 299,
|
||||
status: 'paid',
|
||||
details: [
|
||||
{ deviceName: 'Device A', usage: 50, unit: 'GB' },
|
||||
{ deviceName: 'Device B', usage: 30, unit: 'GB' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
date: '2024-02-01',
|
||||
amount: 199,
|
||||
status: 'paid',
|
||||
details: [
|
||||
{ deviceName: 'Device A', usage: 30, unit: 'GB' },
|
||||
{ deviceName: 'Device C', usage: 20, unit: 'GB' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
date: '2024-01-01',
|
||||
amount: 399,
|
||||
status: 'paid',
|
||||
details: [
|
||||
{ deviceName: 'Device B', usage: 80, unit: 'GB' },
|
||||
{ deviceName: 'Device D', usage: 40, unit: 'GB' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
date: '2023-12-01',
|
||||
amount: 159,
|
||||
status: 'paid',
|
||||
details: [
|
||||
{ deviceName: 'Device A', usage: 25, unit: 'GB' },
|
||||
{ deviceName: 'Device E', usage: 15, unit: 'GB' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
date: '2023-11-01',
|
||||
amount: 499,
|
||||
status: 'unpaid',
|
||||
details: [
|
||||
{ deviceName: 'Device C', usage: 100, unit: 'GB' },
|
||||
{ deviceName: 'Device D', usage: 60, unit: 'GB' },
|
||||
{ deviceName: 'Device E', usage: 40, unit: 'GB' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
date: '2023-10-01',
|
||||
amount: 259,
|
||||
status: 'paid',
|
||||
details: [
|
||||
{ deviceName: 'Device B', usage: 45, unit: 'GB' },
|
||||
{ deviceName: 'Device D', usage: 35, unit: 'GB' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
date: '2023-09-01',
|
||||
amount: 359,
|
||||
status: 'paid',
|
||||
details: [
|
||||
{ deviceName: 'Device A', usage: 60, unit: 'GB' },
|
||||
{ deviceName: 'Device C', usage: 40, unit: 'GB' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
date: '2023-08-01',
|
||||
amount: 189,
|
||||
status: 'unpaid',
|
||||
details: [
|
||||
{ deviceName: 'Device B', usage: 25, unit: 'GB' },
|
||||
{ deviceName: 'Device E', usage: 20, unit: 'GB' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
date: '2023-07-01',
|
||||
amount: 299,
|
||||
status: 'paid',
|
||||
details: [
|
||||
{ deviceName: 'Device A', usage: 45, unit: 'GB' },
|
||||
{ deviceName: 'Device D', usage: 35, unit: 'GB' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
date: '2023-06-01',
|
||||
amount: 459,
|
||||
status: 'paid',
|
||||
details: [
|
||||
{ deviceName: 'Device C', usage: 70, unit: 'GB' },
|
||||
{ deviceName: 'Device E', usage: 50, unit: 'GB' },
|
||||
{ deviceName: 'Device B', usage: 30, unit: 'GB' }
|
||||
]
|
||||
const { width } = useWindowSize();
|
||||
const isMobile = computed(() => width.value < 768);
|
||||
|
||||
const getBillData = async () => {
|
||||
try {
|
||||
const response = await fetchBillHistory({
|
||||
pageNum: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
console.log('API Response:', response);
|
||||
if (response?.data?.rows) {
|
||||
console.log('Rows data:', response.data.rows);
|
||||
billData.value = response.data.rows;
|
||||
total.value = response.data.total;
|
||||
console.log('billData value:', billData.value);
|
||||
} else {
|
||||
console.log('No data found. Response structure:', JSON.stringify(response, null, 2));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch bill history:', error);
|
||||
}
|
||||
])
|
||||
};
|
||||
|
||||
const columns: TableColumnsType = [
|
||||
onMounted(() => {
|
||||
getBillData();
|
||||
});
|
||||
|
||||
const formatDateTime = (dateTimeString: string) => {
|
||||
if (!dateTimeString) return '';
|
||||
const date = new Date(dateTimeString);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false
|
||||
});
|
||||
};
|
||||
|
||||
const columns = computed<TableColumnsType>(() => [
|
||||
{
|
||||
title: t('page.histories.billdate'),
|
||||
dataIndex: 'date',
|
||||
key: 'date'
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
responsive: ['md'],
|
||||
customRender: ({ text }) => text ? formatDateTime(text) : ''
|
||||
},
|
||||
{
|
||||
title: t('page.histories.amount'),
|
||||
dataIndex: 'amount',
|
||||
key: 'amount',
|
||||
customRender: ({ text }: { text: number }) => `¥${text}`
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
const formattedAmount = Number(text).toFixed(2);
|
||||
return `¥${formattedAmount}`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('page.histories.status'),
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
customRender: ({ text }: { text: 'paid' | 'unpaid' }) => {
|
||||
customRender: ({ text }: { text: number }) => {
|
||||
return h(ATag, {
|
||||
color: text === 'paid' ? 'success' : 'warning'
|
||||
color: text === 1 ? 'success' : 'warning'
|
||||
}, {
|
||||
default: () => text === 'paid' ? t('page.histories.Paid') : t('page.histories.Unpaid')
|
||||
default: () => text === 1 ? t('page.histories.Paid') : t('page.histories.Unpaid')
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -168,11 +101,10 @@ const columns: TableColumnsType = [
|
||||
<ATable
|
||||
:columns="columns"
|
||||
:data-source="billData"
|
||||
:row-key="(record: BillRecord) => record.id"
|
||||
:expand-column-width="60"
|
||||
:row-key="(record: Api.Bill.BillRecord) => record.id"
|
||||
:pagination="{
|
||||
pageSize: 5,
|
||||
total: billData.length,
|
||||
total: total,
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
@@ -181,8 +113,21 @@ const columns: TableColumnsType = [
|
||||
>
|
||||
<template #expandedRowRender="{ record }">
|
||||
<div class="pl-4">
|
||||
<div v-for="(detail, index) in record.details" :key="index">
|
||||
{{ t('page.histories.device') }}: {{ detail.deviceName }} - {{ t('page.histories.Usetraffic') }}: {{ detail.usage }}{{ detail.unit }}
|
||||
<div v-if="isMobile" class="mb-2">
|
||||
<strong>{{ t('page.histories.billdate') }}:</strong>
|
||||
{{ formatDateTime(record.createTime) }}
|
||||
</div>
|
||||
<div v-if="record.traffic">
|
||||
<strong>{{ t('page.histories.traffic') }}:</strong>
|
||||
{{ record.traffic }}
|
||||
</div>
|
||||
<div v-if="record.startTime">
|
||||
<strong>{{ t('page.histories.startTime') }}:</strong>
|
||||
{{ formatDateTime(record.startTime) }}
|
||||
</div>
|
||||
<div v-if="record.endTime">
|
||||
<strong>{{ t('page.histories.endTime') }}:</strong>
|
||||
{{ formatDateTime(record.endTime) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user