fix:账单管理添加时间以及中英适配
This commit is contained in:
@@ -678,6 +678,26 @@ const local: any = {
|
||||
guest:'Wireless Guest',
|
||||
alert:'Alerts',
|
||||
},
|
||||
bill:{
|
||||
username:'User Name',
|
||||
billtime:'Order Time',
|
||||
billtype:'Order Type',
|
||||
packagebill:'Package',
|
||||
rechargebill:'Recharge',
|
||||
packagename:'Package Name',
|
||||
amount:'Amount',
|
||||
status:'Status',
|
||||
wait:'Pending',
|
||||
done:'Paid',
|
||||
close:'Canceled',
|
||||
billinfo:'Billing information',
|
||||
total:'Total',
|
||||
pleusername:'Please enter username',
|
||||
plebilltype:'Please select order type',
|
||||
plestatus:'Please select order status',
|
||||
reset:'Reset',
|
||||
search:'Search',
|
||||
},
|
||||
},
|
||||
form: {
|
||||
required: 'Cannot be empty',
|
||||
|
||||
@@ -678,6 +678,26 @@ const local:any = {
|
||||
guest:'无线访客',
|
||||
alert:'告警数',
|
||||
},
|
||||
bill:{
|
||||
username:'用户名',
|
||||
billtime:'订单时间',
|
||||
billtype:'订单类型',
|
||||
packagebill:'套餐订单',
|
||||
rechargebill:'充值订单',
|
||||
packagename:'套餐名称',
|
||||
amount:'金额',
|
||||
status:'状态',
|
||||
wait:'待支付',
|
||||
done:'已支付',
|
||||
close:'已取消',
|
||||
billinfo:'账单信息',
|
||||
total:'共',
|
||||
pleusername:'请输入用户名',
|
||||
plebilltype:'请选择订单类型',
|
||||
plestatus:'请选择订单状态',
|
||||
reset:'重置',
|
||||
search:'查询',
|
||||
},
|
||||
},
|
||||
form: {
|
||||
required: '不能为空',
|
||||
|
||||
@@ -6,7 +6,8 @@ import { useElementSize } from '@vueuse/core';
|
||||
import { fetchBillList } from '@/service/api/auth';
|
||||
import { Tag as ATag } from 'ant-design-vue';
|
||||
import BillSearch from '@/views/user-center/bill/modules/bill-search.vue';
|
||||
|
||||
import { useI18n } from 'vue-i18n';
|
||||
const { t } = useI18n();
|
||||
const wrapperEl = shallowRef<HTMLElement | null>(null);
|
||||
const { height: wrapperElHeight } = useElementSize(wrapperEl);
|
||||
|
||||
@@ -40,20 +41,39 @@ const {
|
||||
{
|
||||
key: 'userName',
|
||||
dataIndex: 'userName',
|
||||
title: '用户名',
|
||||
title: t('page.bill.username'),
|
||||
align: 'center',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
key: 'updateTime',
|
||||
dataIndex: 'updateTime',
|
||||
title: t('page.bill.billtime'),
|
||||
align: 'center',
|
||||
width: 160,
|
||||
customRender: ({ text }) => {
|
||||
if (!text) return '-';
|
||||
return new Date(text).toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: false
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
dataIndex: 'type',
|
||||
title: '订单类型',
|
||||
title: t('page.bill.billtype'),
|
||||
align: 'center',
|
||||
width: 120,
|
||||
customRender: ({ text }) => {
|
||||
const typeMap: Record<number, string> = {
|
||||
0: '套餐订单',
|
||||
1: '充值订单'
|
||||
0: t('page.bill.packagebill'),
|
||||
1: t('page.bill.rechargebill')
|
||||
};
|
||||
return typeMap[text] || text;
|
||||
}
|
||||
@@ -61,7 +81,7 @@ const {
|
||||
{
|
||||
key: 'packageName',
|
||||
dataIndex: 'packageName',
|
||||
title: '套餐名称',
|
||||
title: t('page.bill.packagename'),
|
||||
align: 'center',
|
||||
width: 150,
|
||||
customRender: ({ text }) => text || '-'
|
||||
@@ -69,7 +89,7 @@ const {
|
||||
{
|
||||
key: 'orderAmount',
|
||||
dataIndex: 'orderAmount',
|
||||
title: '金额',
|
||||
title: t('page.bill.amount'),
|
||||
align: 'center',
|
||||
width: 120,
|
||||
customRender: ({ text }) => `¥${Number(text).toFixed(2)}`
|
||||
@@ -77,14 +97,14 @@ const {
|
||||
{
|
||||
key: 'status',
|
||||
dataIndex: 'status',
|
||||
title: '状态',
|
||||
title: t('page.bill.status'),
|
||||
align: 'center',
|
||||
width: 100,
|
||||
customRender: ({ text }) => {
|
||||
const statusMap: Record<number, { text: string; color: string }> = {
|
||||
0: { text: '待支付', color: 'warning' },
|
||||
1: { text: '已支付', color: 'success' },
|
||||
2: { text: '已取消', color: 'error' }
|
||||
0: { text: t('page.bill.wait'), color: 'warning' },
|
||||
1: { text: t('page.bill.done'), color: 'success' },
|
||||
2: { text: t('page.bill.close'), color: 'error' }
|
||||
};
|
||||
const status = statusMap[text] || { text, color: 'default' };
|
||||
return <ATag color={status.color}>{status.text}</ATag>;
|
||||
@@ -103,7 +123,7 @@ const {
|
||||
@search="getData"
|
||||
/>
|
||||
<ACard
|
||||
title="账单信息"
|
||||
:title="t('page.bill.billinfo')"
|
||||
:bordered="false"
|
||||
:body-style="{ flex: 1, overflow: 'hidden' }"
|
||||
class="flex-col-stretch sm:flex-1-hidden card-wrapper"
|
||||
@@ -129,7 +149,7 @@ const {
|
||||
total: mobilePagination.total,
|
||||
current: searchParams.pageNum,
|
||||
pageSize: searchParams.pageSize,
|
||||
showTotal: (total: number) => `共 ${total} 条`
|
||||
showTotal: (total: number) => `${t('page.bill.total')} ${total} `
|
||||
}"
|
||||
:scroll="scrollConfig"
|
||||
class="h-full"
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
import { ref, computed } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
|
||||
import { useI18n } from 'vue-i18n';
|
||||
const { t } = useI18n();
|
||||
interface SearchModel {
|
||||
pageNum: number;
|
||||
pageSize: number;
|
||||
@@ -46,16 +47,16 @@ function handleSearch() {
|
||||
emit('search');
|
||||
}
|
||||
|
||||
const orderTypeOptions = [
|
||||
{ label: '套餐订单', value: 0 },
|
||||
{ label: '充值订单', value: 1 }
|
||||
];
|
||||
const orderTypeOptions =computed(()=> [
|
||||
{ label: t('page.bill.packagebill'), value: 0 },
|
||||
{ label: t('page.bill.rechargebill'), value: 1 }
|
||||
]);
|
||||
|
||||
const orderStatusOptions = [
|
||||
{ label: '待支付', value: 0 },
|
||||
{ label: '已支付', value: 1 },
|
||||
{ label: '已取消', value: 2 }
|
||||
];
|
||||
const orderStatusOptions =computed(()=> [
|
||||
{ label: t('page.bill.wait'), value: 0 },
|
||||
{ label: t('page.bill.done'), value: 1 },
|
||||
{ label: t('page.bill.close'), value: 2 }
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -66,26 +67,26 @@ const orderStatusOptions = [
|
||||
layout="inline"
|
||||
class="flex flex-wrap gap-16px items-center"
|
||||
>
|
||||
<AFormItem label="用户名">
|
||||
<AFormItem :label="t('page.bill.username')">
|
||||
<AInput
|
||||
v-model:value="formModel.userName"
|
||||
placeholder="请输入用户名"
|
||||
:placeholder="t('page.bill.pleusername')"
|
||||
allow-clear
|
||||
/>
|
||||
</AFormItem>
|
||||
<AFormItem label="订单类型">
|
||||
<AFormItem :label="t('page.bill.billtype')">
|
||||
<ASelect
|
||||
v-model:value="formModel.type"
|
||||
placeholder="请选择订单类型"
|
||||
:placeholder="t('page.bill.plebilltype')"
|
||||
:options="orderTypeOptions"
|
||||
allow-clear
|
||||
style="width: 200px"
|
||||
/>
|
||||
</AFormItem>
|
||||
<AFormItem label="订单状态">
|
||||
<AFormItem :label="t('page.bill.status')">
|
||||
<ASelect
|
||||
v-model:value="formModel.status"
|
||||
placeholder="请选择订单状态"
|
||||
:placeholder="t('page.bill.plestatus')"
|
||||
:options="orderStatusOptions"
|
||||
allow-clear
|
||||
style="width: 200px"
|
||||
@@ -93,8 +94,8 @@ const orderStatusOptions = [
|
||||
</AFormItem>
|
||||
<AFormItem class="flex-1 justify-end">
|
||||
<ASpace>
|
||||
<AButton @click="handleReset">重置</AButton>
|
||||
<AButton type="primary" @click="handleSearch">查询</AButton>
|
||||
<AButton @click="handleReset">{{ t('page.bill.reset') }}</AButton>
|
||||
<AButton type="primary" @click="handleSearch">{{ t('page.bill.search') }}</AButton>
|
||||
</ASpace>
|
||||
</AFormItem>
|
||||
</AForm>
|
||||
|
||||
Reference in New Issue
Block a user