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