diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts index e509825..6d2c39a 100644 --- a/src/locales/langs/en-us.ts +++ b/src/locales/langs/en-us.ts @@ -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', diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts index fa903df..88f3ff6 100644 --- a/src/locales/langs/zh-cn.ts +++ b/src/locales/langs/zh-cn.ts @@ -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: '不能为空', diff --git a/src/views/user-center/bill/index.vue b/src/views/user-center/bill/index.vue index a12c2d0..74073f2 100644 --- a/src/views/user-center/bill/index.vue +++ b/src/views/user-center/bill/index.vue @@ -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(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 = { - 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 = { - 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 {status.text}; @@ -103,7 +123,7 @@ const { @search="getData" /> `共 ${total} 条` + showTotal: (total: number) => `${t('page.bill.total')} ${total} ` }" :scroll="scrollConfig" class="h-full" diff --git a/src/views/user-center/bill/modules/bill-search.vue b/src/views/user-center/bill/modules/bill-search.vue index 0d87c0c..f91a4e7 100644 --- a/src/views/user-center/bill/modules/bill-search.vue +++ b/src/views/user-center/bill/modules/bill-search.vue @@ -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 } +]);