WFC/fe.wfc.user
2
0
Fork 0
Code Activity

fix:充值记录界面

Browse Source
This commit is contained in:
zhongzm
2025-01-10 14:48:46 +08:00
parent 10153e2c6b
commit 9390aace95
6 changed files with 261 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/locales/langs/en-us.ts
View File

@@ -10,6 +10,7 @@ const viewEn: any = {
"view.billing": "Billing",
"view.billing_histories": "Historical",
"view.billing_Rechargehistory":"Recharge history",
"view.billing_packagehistories":"Package history",
"view.billing_Internetdetails":"Internet details",
"view.billing_billservice":"Bill service",
"view.set-meal": "Package",
@@ -564,6 +565,22 @@ const local: any = {
amount:"Amount",
Payment:"Payment Method",
recharge:"Recharge History",
type:"Type",
status:"Status",
rechargeType:"Recharge",
packageType:"Package",
paid:"Paid",
unpaid:"Unpaid",
},
packagehistories: {
title: 'Package History',
orderdate: 'Order Date',
amount: 'Amount',
type: 'Type',
status: 'Status',
packageType: 'Package',
paid: 'Paid',
unpaid: 'Unpaid'
},
cdrlrecords:{
devicename:"Device name",

17
src/locales/langs/zh-cn.ts
View File

@@ -11,6 +11,7 @@ const viewZh: any = {
"view.billing_billservice":"账单服务",
"view.billing_histories": "历史查询",
"view.billing_Rechargehistory":"充值记录",
"view.billing_packagehistories":"套餐记录",
"view.billing_Internetdetails":"上网详单",
"view.set-meal": "套餐",
"view.userInfo":"个人信息",
@@ -564,6 +565,22 @@ const local:any = {
amount:"充值金额",
Payment:"充值方式",
recharge:"充值记录",
type:"类型",
status:"状态",
rechargeType:"充值",
packageType:"套餐",
paid:"已支付",
unpaid:"未支付",
},
packagehistories: {
title: '套餐历史',
orderdate: '订单时间',
amount: '金额',
type: '类型',
status: '状态',
packageType: '套餐',
paid: '已支付',
unpaid: '未支付'
},
cdrlrecords:{
devicename:"设备名称",

17
src/service/api/auth.ts
View File

@@ -144,5 +144,20 @@ export function fetchBillHistory(params: Api.Bill.BillQueryParams) {
params
});
}
/** Get recharge history records */
export function fetchRechargeHistory(params: Api.Recharge.RechargeQueryParams) {
return request<Api.Recharge.RechargeListResponse>({
url: '/u/order/rechargePage',
method: 'get',
params
});
}
/** Get package history records */
export function fetchPackageHistory(params: Api.Package.PackageHistoryQueryParams) {
return request<Api.Package.PackageHistoryListResponse>({
url: '/u/order/packagePage',
method: 'get',
params
});
}

138
src/typings/api.d.ts vendored
View File

@@ -77,6 +77,7 @@ declare namespace Api {
access_token: string;
refreshToken: string;
}
/** User info */
interface UserInfo {
user: User | null;
@@ -104,7 +105,7 @@ declare namespace Api {
delFlag: string;
loginIp: string;
loginDate: string;
birthDate:string;
birthDate: string;
dept: Department.Dept;
roles: Role[];
roleId: string;
@@ -139,10 +140,11 @@ declare namespace Api {
authType: string;
wanfiRedirectParams: any;
}
interface RegisterBody{
interface RegisterBody {
username: string;
password: string;
authType:string;
authType: string;
email: string;
fullName?: string;
age: number;
@@ -150,24 +152,27 @@ declare namespace Api {
sex?: string;
phonenumber?: string;
}
interface EmailCaptcha{
email:string;
interface EmailCaptcha {
email: string;
}
interface CheckBody{
interface CheckBody {
username?: string;
email?: string;
phonenumber?:string;
phonenumber?: string;
authType: string;
}
interface ChangeInfoBody{
userId:number;
interface ChangeInfoBody {
userId: number;
userName: string;
nickName?: string|undefined;
nickName?: string | undefined;
email: string;
phonenumber?: string|undefined;
sex?: string|undefined;
birthDate?:string|undefined;
age?:number;
phonenumber?: string | undefined;
sex?: string | undefined;
birthDate?: string | undefined;
age?: number;
}
}
@@ -259,7 +264,7 @@ declare namespace Api {
/** user search params */
type UserSearchParams = Partial<
Pick<Auth.User, 'userName' | 'nickName' | 'phonenumber' | 'status' | 'sex' | 'email' | 'deptId'> &
CommonSearchParams
CommonSearchParams
>;
/** user list */
@@ -520,6 +525,7 @@ declare namespace Api {
total: number;
rows: DeviceInfo[];
}
interface HistoricalDeviceInfo {
id: number;
clientName: string;
@@ -552,6 +558,7 @@ declare namespace Api {
/** Last seen time */
last_seen_time: string;
}
interface CDRRecord {
/** Record ID */
id: number;
@@ -599,40 +606,42 @@ declare namespace Api {
data: PackageItem[];
total?: number;
}
interface OrderSubmitParams {
packageId: string;
type: 0; // 限定为字面量类型 0
}
}
namespace Order {
/** Order type enum */
type OrderType = 0 | 1 | 2; // 根据实际需要添加其他类型
/** Base order params */
interface BaseOrderParams {
type: OrderType;
}
/** Package order params */
interface PackageOrderParams extends BaseOrderParams {
type: 0;
/** Package history record information */
interface PackageHistoryRecord {
id: string;
delFlag: boolean;
createBy: number;
createTime: string;
updateBy: number;
updateTime: string;
userId: number;
packageId: string;
paymentId: string | null;
orderNo: string | null;
type: number; // 0 表示套餐
orderAmount: string;
status: number; // 0未支付，1已支付
}
/** Recharge order params */
interface RechargeOrderParams extends BaseOrderParams {
type: 1;
orderAmount: number;
/** Package history list response */
interface PackageHistoryListResponse {
rows: PackageHistoryRecord[];
total: number;
}
/** Combined order params type */
type SubmitOrderParams = PackageOrderParams | RechargeOrderParams;
/** Package history query parameters */
interface PackageHistoryQueryParams {
pageNum: number;
pageSize: number;
}
}
/**
* Namespace Bill
*
@@ -662,4 +671,59 @@ declare namespace Api {
pageSize: number;
}
}
namespace Recharge {
/** Recharge record information */
interface RechargeRecord {
id: string;
delFlag: boolean;
createBy: number;
createTime: string;
updateBy: number;
updateTime: string;
userId: number;
packageId: string | null;
paymentId: string | null;
orderNo: string | null;
type: number;
orderAmount: string;
status: number;
}
/** Recharge list response */
interface RechargeListResponse {
rows: RechargeRecord[];
total: number;
}
/** Recharge query parameters */
interface RechargeQueryParams {
pageNum: number;
pageSize: number;
}
}
namespace Order {
/** Order type enum */
type OrderType = 0 | 1 | 2; // 根据实际需要添加其他类型
/** Base order params */
interface BaseOrderParams {
type: OrderType;
}
/** Package order params */
interface PackageOrderParams extends BaseOrderParams {
type: 0;
packageId: string;
}
/** Recharge order params */
interface RechargeOrderParams extends BaseOrderParams {
type: 1;
orderAmount: number;
}
/** Combined order params type */
type SubmitOrderParams = PackageOrderParams | RechargeOrderParams;
}
}

3
src/typings/auto-imports.d.ts vendored
View File

@@ -92,6 +92,7 @@ declare global {
const expect: typeof import('vitest')['expect']
const extendRef: typeof import('@vueuse/core')['extendRef']
const extractTabsByAllRoutes: typeof import('../store/modules/tab/shared')['extractTabsByAllRoutes']
const fetchBillHistory: typeof import('../service/api/auth')['fetchBillHistory']
const fetchCDRHistory: typeof import('../service/api/auth')['fetchCDRHistory']
const fetchCurrentDevices: typeof import('../service/api/auth')['fetchCurrentDevices']
const fetchCustomBackendError: typeof import('../service/api/auth')['fetchCustomBackendError']
@@ -102,7 +103,9 @@ declare global {
const fetchHistoricalDevices: typeof import('../service/api/auth')['fetchHistoricalDevices']
const fetchIsRouteExist: typeof import('../service/api/route')['fetchIsRouteExist']
const fetchLogin: typeof import('../service/api/auth')['fetchLogin']
const fetchPackageHistory: typeof import('../service/api/auth')['fetchPackageHistory']
const fetchPackageList: typeof import('../service/api/auth')['fetchPackageList']
const fetchRechargeHistory: typeof import('../service/api/auth')['fetchRechargeHistory']
const fetchRefreshToken: typeof import('../service/api/auth')['fetchRefreshToken']
const fetchRegister: typeof import('../service/api/auth')['fetchRegister']
const filterAuthRoutesByRoles: typeof import('../store/modules/route/shared')['filterAuthRoutesByRoles']

175
src/views/billing/Rechargehistory/index.vue
View File

@@ -1,100 +1,136 @@
<script setup lang="ts" xmlns="http://www.w3.org/1999/html">
import { ref, h } from 'vue'
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import type { TableColumnsType } from 'ant-design-vue'
import { Tag as ATag, Table as ATable } from 'ant-design-vue'
import {useI18n} from "vue-i18n";
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router';
import { fetchRechargeHistory } from '@/service/api/auth';
import { useWindowSize } from '@vueuse/core';
const router = useRouter();
const handleBack = () => {
router.push('/billing/billservice');
};
const {t} = useI18n();
const { t } = useI18n();
interface RechargeRecord {
id: number
date: string
amount: number
paymentMethod: string
}
const rechargeData = ref<Api.Recharge.RechargeRecord[]>([]);
const total = ref(0);
// 模拟充值记录数据
const rechargeData = ref<RechargeRecord[]>([
{
id: 1,
date: '2024-03-15',
amount: 500,
paymentMethod: '支付宝'
},
{
id: 2,
date: '2024-03-10',
amount: 200,
paymentMethod: '微信支付'
},
{
id: 3,
date: '2024-03-05',
amount: 1000,
paymentMethod: '银行卡'
},
{
id: 4,
date: '2024-02-28',
amount: 300,
paymentMethod: '支付宝'
},
{
id: 5,
date: '2024-02-20',
amount: 600,
paymentMethod: '微信支付'
const { width } = useWindowSize();
const isMobile = computed(() => width.value < 768);
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 getRechargeData = async () => {
try {
const response = await fetchRechargeHistory({
pageNum: 1,
pageSize: 10
});
console.log('API Response:', response);
if (response?.data?.rows) {
console.log('Setting data:', response.data.rows);
rechargeData.value = response.data.rows;
total.value = response.data.total;
}
} catch (error) {
console.error('Failed to fetch recharge history:', error);
}
])
};
const columns: TableColumnsType = [
onMounted(() => {
getRechargeData();
});
const columns = computed<TableColumnsType>(() => [
{
title: t('page.Rechargehistory.topupdate'),
dataIndex: 'date',
key: 'date'
dataIndex: 'createTime',
key: 'createTime',
responsive: ['md'],
customRender: ({ text }) => text ? formatDateTime(text) : ''
},
{
title: t('page.Rechargehistory.amount'),
dataIndex: 'amount',
key: 'amount',
customRender: ({ text }: { text: number }) => `¥${text}`
dataIndex: 'orderAmount',
key: 'orderAmount',
customRender: ({ text }: { text: string }) => {
const formattedAmount = Number(text).toFixed(2);
return `¥${formattedAmount}`;
}
},
{
title: t('page.Rechargehistory.Payment'),
dataIndex: 'paymentMethod',
key: 'paymentMethod'
title: t('page.Rechargehistory.type'),
dataIndex: 'type',
key: 'type',
customRender: ({ text }: { text: number }) => {
return h(ATag, {
color: text === 1 ? 'blue' : 'green'
}, {
default: () => text === 1 ? t('page.Rechargehistory.rechargeType') : t('page.Rechargehistory.packageType')
})
}
},
{
title: t('page.Rechargehistory.status'),
dataIndex: 'status',
key: 'status',
customRender: ({ text }: { text: number }) => {
return h(ATag, {
color: text === 1 ? 'success' : 'warning'
}, {
default: () => text === 1 ? t('page.Rechargehistory.paid') : t('page.Rechargehistory.unpaid')
})
}
}
]
]);
</script>
<template>
<div class="p-4">
<div class="text-lg font-bold mb-4 flex justify-between items-center">
<span>{{t('page.Rechargehistory.recharge')}}</span>
<span>{{ t('page.Rechargehistory.recharge') }}</span>
<a-button @click="handleBack">
{{ t('page.login.common.back') }}
</a-button>
</div>
<div>
<ATable
:columns="columns"
:data-source="rechargeData"
:row-key="(record: RechargeRecord) => record.id"
:pagination="{
pageSize: 5,
total: rechargeData.length,
showTotal: (total: number) => `共 ${total} 条`,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: ['5', '10', '20', '50']
}"
/>
</div>
<div>
<ATable
:columns="columns"
:data-source="rechargeData"
:row-key="(record: Api.Recharge.RechargeRecord) => record.id"
:pagination="{
pageSize: 5,
total: total,
showTotal: (total: number) => `共 ${total} 条`,
showSizeChanger: true,
showQuickJumper: true,
pageSizeOptions: ['5', '10', '20', '50']
}"
>
<template #expandedRowRender="{ record }">
<div class="pl-4">
<div v-if="isMobile" class="mb-2">
<strong>{{ t('page.Rechargehistory.topupdate') }}:</strong>
{{ formatDateTime(record.createTime) }}
</div>
</div>
</template>
</ATable>
</div>
</div>
</template>
@@ -111,4 +147,7 @@ const columns: TableColumnsType = [
.font-bold {
font-weight: bold;
}
.pl-4 {
padding-left: 1rem;
}
</style>