fix：修改菜单布局
This commit is contained in:
zhongzm
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import {UserOutlined,HomeOutlined,MoneyCollectOutlined} from "@ant-design/icons-vue";
|
||||
import {UserOutlined,HomeOutlined,MoneyCollectOutlined,ClusterOutlined} from "@ant-design/icons-vue";
|
||||
import {useRouterPush} from "@/hooks/common";
|
||||
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
@@ -15,6 +15,11 @@ defineOptions({
|
||||
<HomeOutlined class="text-icon-large" @click="routerPushByKey('home')"/>
|
||||
</ButtonIcon>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<ButtonIcon>
|
||||
<ClusterOutlined class="text-icon-large" @click="routerPushByKey('endpoint_clientservice')"/>
|
||||
</ButtonIcon>
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<ButtonIcon>
|
||||
<MoneyCollectOutlined class="text-icon-large" @click="routerPushByKey('billing_billservice')"/>
|
||||
|
||||
@@ -3,10 +3,10 @@ const viewEn: any = {
|
||||
"view.recharge_rechargeservice":"recharge service",
|
||||
"view.recharge_balancerecharge":"balance recharge",
|
||||
"view.recharge_package":"package",
|
||||
"view.endpoint": "endpoint",
|
||||
"view.endpoint_access": "current",
|
||||
"view.endpoint": "client",
|
||||
"view.endpoint_access": "current client",
|
||||
"view.endpoint_records": "Historical",
|
||||
"view.endpoint_cdrlrecords":"CDR records",
|
||||
"view.endpoint_cdrlrecords":"Internet records",
|
||||
"view.billing": "Billing",
|
||||
"view.billing_histories": "Historical",
|
||||
"view.billing_Rechargehistory":"Recharge history",
|
||||
@@ -281,7 +281,8 @@ const local: any = {
|
||||
passwordSameAsOld: 'New password cannot be the same as current password',
|
||||
passwordLength: 'Password must be at least 6 characters',
|
||||
resetSuccess: 'Password reset successfully',
|
||||
resetFailed: 'Password reset failed, please try again'
|
||||
resetFailed: 'Password reset failed, please try again',
|
||||
byPassword:'reset by current Password'
|
||||
},
|
||||
bindWeChat: {
|
||||
title: 'Bind WeChat'
|
||||
@@ -598,6 +599,11 @@ const local: any = {
|
||||
paid: 'Paid',
|
||||
unpaid: 'Unpaid'
|
||||
},
|
||||
endpoint:{
|
||||
access:"current client",
|
||||
records:"Historical client",
|
||||
cdrlrecords:"Internet records"
|
||||
},
|
||||
cdrlrecords:{
|
||||
devicename:"Device name",
|
||||
uptraffic:"Traffic Up",
|
||||
|
||||
@@ -283,7 +283,8 @@ const local:any = {
|
||||
byPassword: '通过原密码重置',
|
||||
byEmail: '通过邮箱验证码重置',
|
||||
resetSuccess: '密码重置成功',
|
||||
resetFailed: '密码重置失败，请重试'
|
||||
resetFailed: '密码重置失败，请重试',
|
||||
|
||||
},
|
||||
bindWeChat: {
|
||||
title: '绑定微信'
|
||||
@@ -600,6 +601,11 @@ const local:any = {
|
||||
paid: '已支付',
|
||||
unpaid: '未支付'
|
||||
},
|
||||
endpoint:{
|
||||
access:"当前设备",
|
||||
records:"历史设备",
|
||||
cdrlrecords:"上网记录"
|
||||
},
|
||||
cdrlrecords:{
|
||||
devicename:"设备名称",
|
||||
uptraffic:"上传流量",
|
||||
|
||||
@@ -215,55 +215,55 @@ export const generatedRoutes: GeneratedRoute[] = [
|
||||
|
||||
/**自定义静态菜单 */
|
||||
export const customRoutes: GeneratedRoute[] = [
|
||||
{
|
||||
name:'recharge/rechargeservice',
|
||||
path:'/recharge/rechargeservice',
|
||||
component:'layout.base',
|
||||
meta:{
|
||||
title:'充值服务',
|
||||
i18nKey:'view.recharge',
|
||||
icon:'icon-park-outline:all-application',
|
||||
order:12,
|
||||
},
|
||||
children:[
|
||||
{
|
||||
name: 'recharge_rechargeservice',
|
||||
path: '/recharge/rechargeservice',
|
||||
component: 'view.recharge_rechargeservice',
|
||||
meta: {
|
||||
title: '充值服务',
|
||||
i18nKey: 'view.recharge_rechargeservice',
|
||||
icon: 'material-symbols:filter-list-off',
|
||||
order: 1,
|
||||
hideInMenu: true
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'recharge_balancerecharge',
|
||||
path: '/recharge/balancerecharge',
|
||||
component: 'view.recharge_balancerecharge',
|
||||
meta: {
|
||||
title: '余额充值',
|
||||
i18nKey: 'view.recharge_balancerecharge',
|
||||
icon: 'material-symbols:filter-list-off',
|
||||
order: 1,
|
||||
hideInMenu: true
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'recharge_package',
|
||||
path: '/recharge/package',
|
||||
component: 'view.recharge_package',
|
||||
meta: {
|
||||
title: '套餐办理',
|
||||
i18nKey: 'view.recharge_package',
|
||||
icon: 'material-symbols:filter-list-off',
|
||||
order: 1,
|
||||
hideInMenu: true
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name:'recharge_rechargeservice',
|
||||
// path:'/recharge/rechargeservice',
|
||||
// component:'layout.base',
|
||||
// meta:{
|
||||
// title:'充值服务',
|
||||
// i18nKey:'view.recharge',
|
||||
// icon:'icon-park-outline:all-application',
|
||||
// order:12,
|
||||
// },
|
||||
// children:[
|
||||
// {
|
||||
// name: 'recharge_rechargeservice',
|
||||
// path: '/recharge/rechargeservice',
|
||||
// component: 'view.recharge_rechargeservice',
|
||||
// meta: {
|
||||
// title: '充值服务',
|
||||
// i18nKey: 'view.recharge_rechargeservice',
|
||||
// icon: 'material-symbols:filter-list-off',
|
||||
// order: 1,
|
||||
// hideInMenu: true
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'recharge_balancerecharge',
|
||||
// path: '/recharge/balancerecharge',
|
||||
// component: 'view.recharge_balancerecharge',
|
||||
// meta: {
|
||||
// title: '余额充值',
|
||||
// i18nKey: 'view.recharge_balancerecharge',
|
||||
// icon: 'material-symbols:filter-list-off',
|
||||
// order: 1,
|
||||
// hideInMenu: true
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// name: 'recharge_package',
|
||||
// path: '/recharge/package',
|
||||
// component: 'view.recharge_package',
|
||||
// meta: {
|
||||
// title: '套餐办理',
|
||||
// i18nKey: 'view.recharge_package',
|
||||
// icon: 'material-symbols:filter-list-off',
|
||||
// order: 1,
|
||||
// hideInMenu: true
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
name: 'endpoint',
|
||||
path: '/endpoint',
|
||||
@@ -276,12 +276,24 @@ export const customRoutes: GeneratedRoute[] = [
|
||||
//hideInMenu: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'endpoint_clientservice',
|
||||
path: '/endpoint/clientservice',
|
||||
component: 'view.endpoint_clientservice',
|
||||
meta: {
|
||||
title: '设备服务',
|
||||
i18nKey: 'view.endpoint',
|
||||
icon: 'material-symbols:filter-list-off',
|
||||
order: 1,
|
||||
hideInMenu: true
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'endpoint_access',
|
||||
path: '/endpoint/access',
|
||||
component: 'view.endpoint_access',
|
||||
meta: {
|
||||
title: '当前',
|
||||
title: '当前设备',
|
||||
i18nKey: 'view.endpoint_access',
|
||||
icon: 'material-symbols:filter-list-off',
|
||||
order: 1
|
||||
@@ -343,7 +355,7 @@ export const customRoutes: GeneratedRoute[] = [
|
||||
i18nKey: 'view.recharge_rechargeservice',
|
||||
icon: 'material-symbols:filter-list-off',
|
||||
order: 2,
|
||||
hideInMenu: true
|
||||
// hideInMenu: true
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -358,9 +370,9 @@ export const customRoutes: GeneratedRoute[] = [
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'billing_Rechargehistory',
|
||||
path: '/billing/Rechargehistory',
|
||||
component: 'view.billing_Rechargehistory',
|
||||
name: 'billing_rechargehistory',
|
||||
path: '/billing/rechargehistory',
|
||||
component: 'view.billing_rechargehistory',
|
||||
meta: {
|
||||
title: '充值记录',
|
||||
i18nKey: 'view.billing_Rechargehistory',
|
||||
|
||||
@@ -72,7 +72,7 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
|
||||
startLoading();
|
||||
|
||||
const { data: loginToken, error } = await fetchLogin(loginForm);
|
||||
|
||||
console.log(loginToken) //lai
|
||||
if (!error) {
|
||||
const pass = await loginByToken(loginToken);
|
||||
onSuccess && onSuccess();
|
||||
|
||||
@@ -1,7 +1,174 @@
|
||||
<script setup lang="ts">
|
||||
import access from '@/views/userInfo/access/index.vue'
|
||||
import {ref} from 'vue'
|
||||
import type {TableColumnsType} from 'ant-design-vue'
|
||||
import {WifiOutlined} from '@ant-design/icons-vue'
|
||||
import {useI18n} from "vue-i18n";
|
||||
import { useRouter } from 'vue-router';
|
||||
defineOptions({
|
||||
name: 'access'
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const handleBack = () => {
|
||||
router.push('/endpoint/clientservice');
|
||||
};
|
||||
|
||||
// 设备列表数据
|
||||
const deviceList = ref<{
|
||||
deviceName: string;
|
||||
macAddress: string;
|
||||
speed: string;
|
||||
id: number;
|
||||
}[]>([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const columns: TableColumnsType = [
|
||||
{
|
||||
title: t('page.access.devicename'),
|
||||
dataIndex: 'deviceName',
|
||||
key: 'deviceName',
|
||||
width: '30%'
|
||||
},
|
||||
{
|
||||
title: t('page.access.mac'),
|
||||
dataIndex: 'macAddress',
|
||||
key: 'macAddress',
|
||||
width: '40%'
|
||||
},
|
||||
{
|
||||
title: t('page.access.speed'),
|
||||
dataIndex: 'speed',
|
||||
key: 'speed',
|
||||
width: '30%',
|
||||
align: 'right'
|
||||
}
|
||||
];
|
||||
// 格式化速度函数
|
||||
function formatSpeed(bytesPerSecond: number): string {
|
||||
// 处理 0 值、undefined 或 null 的情况
|
||||
if (!bytesPerSecond || bytesPerSecond === 0) {
|
||||
return '0 B/s';
|
||||
}
|
||||
|
||||
if (bytesPerSecond < 1024) {
|
||||
return `${Number(bytesPerSecond.toFixed(2))} B/s`;
|
||||
} else if (bytesPerSecond < 1024 * 1024) {
|
||||
return `${Number((bytesPerSecond / 1024).toFixed(2))} KB/s`;
|
||||
} else if (bytesPerSecond < 1024 * 1024 * 1024) {
|
||||
return `${Number((bytesPerSecond / (1024 * 1024)).toFixed(2))} MB/s`;
|
||||
} else {
|
||||
return `${Number((bytesPerSecond / (1024 * 1024 * 1024)).toFixed(2))} GB/s`;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取设备列表数据
|
||||
async function getDeviceList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data, error } = await fetchCurrentDevices();
|
||||
if (!error && data) {
|
||||
// 将API返回的数据映射到表格所需的格式
|
||||
deviceList.value = data.rows.map(item => ({
|
||||
id: item.id,
|
||||
deviceName: item.clientName,
|
||||
macAddress: item.clientMac,
|
||||
speed: formatSpeed(item.activity) // 如果需要显示设备类型作为速度
|
||||
}));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch device list:', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新设备列表
|
||||
async function handleRefresh() {
|
||||
await getDeviceList();
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
getDeviceList();
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<access/>
|
||||
<div class="device-list-container">
|
||||
<a-card :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title">
|
||||
<WifiOutlined/>
|
||||
<span>{{ t('page.access.currentdevice') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<a-button @click="handleBack">
|
||||
{{ t('page.login.common.back') }}
|
||||
</a-button>
|
||||
<a-button type="primary" :loading="loading" @click="handleRefresh">
|
||||
<template #icon>
|
||||
<span class="i-carbon:refresh"></span>
|
||||
</template>
|
||||
{{ t('page.access.refresh') }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<a-table
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data-source="deviceList"
|
||||
:pagination="{
|
||||
total: deviceList.length,
|
||||
pageSize: 10,
|
||||
showSizeChanger: false,
|
||||
showTotal: (total) => `共 ${total} 条`
|
||||
}"
|
||||
>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
||||
<style scoped>
|
||||
.device-list-container {
|
||||
padding: 8px;
|
||||
background-color: #f5f5f7;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-wrapper) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.device-list-container {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,270 @@
|
||||
<script setup lang="ts">
|
||||
import cdrlrecords from '@/views/userInfo/cdrlrecords/index.vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import type { TableColumnsType } from 'ant-design-vue'
|
||||
import { HistoryOutlined } from '@ant-design/icons-vue'
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { fetchCDRHistory } from '@/service/api/auth';
|
||||
import {useRouter} from "vue-router";
|
||||
defineOptions({
|
||||
name: 'cdrlrecords'
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const handleBack = () => {
|
||||
router.push('/endpoint/clientservice');
|
||||
};
|
||||
// 定义记录类型
|
||||
interface CDRRecord {
|
||||
id: number;
|
||||
deviceName: string;
|
||||
macAddress: string;
|
||||
trafficUp: string;
|
||||
trafficDown: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
}
|
||||
|
||||
// 定义API返回的原始数据类型
|
||||
interface RawCDRRecord {
|
||||
id: number;
|
||||
clientName: string;
|
||||
clientMac: string;
|
||||
trafficUp: number; // 字节数
|
||||
trafficDown: number; // 字节数
|
||||
startTime: number; // 时间戳
|
||||
endTime: number; // 时间戳
|
||||
}
|
||||
|
||||
// CDR记录数据
|
||||
const cdrData = ref<CDRRecord[]>([]);
|
||||
const loading = ref(false);
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
});
|
||||
|
||||
// 展开行控制
|
||||
const expandedRowKeys = ref<number[]>([]);
|
||||
|
||||
// 处理展开行变化
|
||||
function handleExpandChange(expanded: boolean, record: CDRRecord) {
|
||||
if (expanded) {
|
||||
expandedRowKeys.value = [record.id];
|
||||
} else {
|
||||
expandedRowKeys.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化流量数据的函数
|
||||
const formatTraffic = (bytes: number): string => {
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`
|
||||
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
|
||||
}
|
||||
|
||||
// 格式化时间戳
|
||||
function formatTimestamp(timestamp: number): string {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
const columns: TableColumnsType = [
|
||||
{
|
||||
title: t('page.cdrlrecords.devicename'),
|
||||
dataIndex: 'deviceName',
|
||||
key: 'deviceName',
|
||||
width: '40%'
|
||||
},
|
||||
{
|
||||
title: t('page.cdrlrecords.uptraffic'),
|
||||
dataIndex: 'trafficUp',
|
||||
key: 'trafficUp',
|
||||
width: '30%',
|
||||
align: 'right'
|
||||
},
|
||||
{
|
||||
title: t('page.cdrlrecords.downtraffic'),
|
||||
dataIndex: 'trafficDown',
|
||||
key: 'trafficDown',
|
||||
width: '30%',
|
||||
align: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
// 获取CDR记录数据
|
||||
async function getCDRHistory(page = pagination.value.current, pageSize = pagination.value.pageSize) {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data, error } = await fetchCDRHistory({
|
||||
pageNum: page,
|
||||
pageSize: pageSize
|
||||
});
|
||||
if (!error && data) {
|
||||
// 将原始数据映射为显示所需的格式
|
||||
cdrData.value = data.rows.map((item: RawCDRRecord) => ({
|
||||
id: item.id,
|
||||
deviceName: item.clientName,
|
||||
macAddress: item.clientMac,
|
||||
trafficUp: formatTraffic(item.trafficUp), // 格式化上传流量
|
||||
trafficDown: formatTraffic(item.trafficDown), // 格式化下载流量
|
||||
startTime: formatTimestamp(item.startTime), // 格式化开始时间
|
||||
endTime: formatTimestamp(item.endTime) // 格式化结束时间
|
||||
}));
|
||||
pagination.value.total = data.total;
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch CDR history:', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理分页变化
|
||||
function handleTableChange(pag: any) {
|
||||
pagination.value.current = pag.current;
|
||||
pagination.value.pageSize = pag.pageSize;
|
||||
getCDRHistory(pag.current, pag.pageSize);
|
||||
}
|
||||
|
||||
// 刷新设备列表
|
||||
async function handleRefresh() {
|
||||
await getCDRHistory();
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
getCDRHistory();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<cdrlrecords/>
|
||||
<div class="device-list-container">
|
||||
<a-card :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title">
|
||||
<HistoryOutlined />
|
||||
<span>{{ t('page.cdrlrecords.cdr') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<a-button @click="handleBack">
|
||||
{{ t('page.login.common.back') }}
|
||||
</a-button>
|
||||
<a-button type="primary" :loading="loading" @click="handleRefresh">
|
||||
<template #icon>
|
||||
<span class="i-carbon:refresh"></span>
|
||||
</template>
|
||||
{{ t('page.cdrlrecords.refresh') }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<a-table
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data-source="cdrData"
|
||||
:row-key="(record: CDRRecord) => record.id"
|
||||
:expanded-row-keys="expandedRowKeys"
|
||||
@expand="handleExpandChange"
|
||||
:pagination="{
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
total: pagination.total,
|
||||
showTotal: (total: number) => `共 ${total} 条`,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100']
|
||||
}"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<template #expandedRowRender="{ record }">
|
||||
<div class="pl-4">
|
||||
<div>{{ t('page.cdrlrecords.mac') }}: {{ record.macAddress }}</div>
|
||||
<div>{{ t('page.cdrlrecords.uptime') }}: {{ record.startTime }}</div>
|
||||
<div>{{ t('page.cdrlrecords.lasttime') }}: {{ record.endTime }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
||||
<style scoped>
|
||||
.device-list-container {
|
||||
padding: 8px;
|
||||
background-color: #f5f5f7;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-wrapper) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 使表格更紧凑的样式 */
|
||||
:deep(.ant-table) .ant-table-thead > tr > th,
|
||||
:deep(.ant-table) .ant-table-tbody > tr > td {
|
||||
padding: 8px 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 在小屏幕下进一步压缩内边距 */
|
||||
@media screen and (max-width: 768px) {
|
||||
:deep(.ant-table) .ant-table-thead > tr > th,
|
||||
:deep(.ant-table) .ant-table-tbody > tr > td {
|
||||
padding: 4px 2px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保表头文字也能自动换行 */
|
||||
:deep(.ant-table) .ant-table-thead > tr > th {
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* 允许单元格内容自动换行 */
|
||||
:deep(.ant-table) .ant-table-tbody > tr > td {
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.device-list-container {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.pl-4 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
132
src/views/endpoint/clientservice/index.vue
Normal file
132
src/views/endpoint/clientservice/index.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from "vue-i18n";
|
||||
import {
|
||||
RightOutlined,
|
||||
DesktopOutlined,
|
||||
HistoryOutlined,
|
||||
FileTextOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: DesktopOutlined,
|
||||
title: t('page.endpoint.access'),
|
||||
path: '/endpoint/access'
|
||||
},
|
||||
{
|
||||
icon: HistoryOutlined,
|
||||
title: t('page.endpoint.records'),
|
||||
path: '/endpoint/records'
|
||||
},
|
||||
{
|
||||
icon: FileTextOutlined,
|
||||
title: t('page.endpoint.cdrlrecords'),
|
||||
path: '/endpoint/cdrlrecords'
|
||||
}
|
||||
];
|
||||
|
||||
const handleMenuClick = (path: string) => {
|
||||
router.push(path);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="client-service">
|
||||
<div class="client-service-content">
|
||||
<!-- 菜单列表 -->
|
||||
<div class="menu-list">
|
||||
<div
|
||||
v-for="item in menuItems"
|
||||
:key="item.title"
|
||||
class="menu-item"
|
||||
@click="handleMenuClick(item.path)"
|
||||
>
|
||||
<div class="menu-content">
|
||||
<div class="icon-wrapper">
|
||||
<component :is="item.icon" />
|
||||
</div>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<RightOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.client-service {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 16px;
|
||||
background-color: #f5f5f7;
|
||||
}
|
||||
|
||||
.client-service-content {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
background-color: #f0f5ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
/* 响应式布局调整 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.menu-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.client-service {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,213 @@
|
||||
<script setup lang="ts">
|
||||
import records from '@/views/userInfo/records/index.vue'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import type { TableColumnsType } from 'ant-design-vue'
|
||||
import { HistoryOutlined } from '@ant-design/icons-vue'
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { fetchHistoricalDevices } from '@/service/api/auth';
|
||||
import {useRouter} from "vue-router";
|
||||
defineOptions({
|
||||
name: 'records'
|
||||
});
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const handleBack = () => {
|
||||
router.push('/endpoint/clientservice');
|
||||
};
|
||||
|
||||
// 格式化时间戳
|
||||
function formatTimestamp(timestamp: number): string {
|
||||
const date = new Date(timestamp);
|
||||
return date.toLocaleString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
// 格式化流量
|
||||
function formatDataUsage(bytes: number): string {
|
||||
if (bytes < 1024) {
|
||||
return `${bytes}B`;
|
||||
} else if (bytes < 1024 * 1024) {
|
||||
return `${(bytes / 1024).toFixed(2)}KB`;
|
||||
} else if (bytes < 1024 * 1024 * 1024) {
|
||||
return `${(bytes / (1024 * 1024)).toFixed(2)}MB`;
|
||||
} else {
|
||||
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)}GB`;
|
||||
}
|
||||
}
|
||||
|
||||
// 定义记录类型
|
||||
interface DeviceRecord {
|
||||
id: number;
|
||||
deviceName: string;
|
||||
macAddress: string;
|
||||
dataUsage: string;
|
||||
connectionTime: string;
|
||||
disconnectionTime: string;
|
||||
}
|
||||
|
||||
// 设备列表数据
|
||||
const deviceList = ref<DeviceRecord[]>([]);
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const columns: TableColumnsType = [
|
||||
{
|
||||
title: t('page.records.clientname'),
|
||||
dataIndex: 'deviceName',
|
||||
key: 'deviceName',
|
||||
width: '30%'
|
||||
},
|
||||
{
|
||||
title: t('page.records.clientmac'),
|
||||
dataIndex: 'macAddress',
|
||||
key: 'macAddress',
|
||||
width: '40%'
|
||||
},
|
||||
{
|
||||
title: t('page.records.dataUsage'),
|
||||
dataIndex: 'dataUsage',
|
||||
key: 'dataUsage',
|
||||
width: '30%',
|
||||
align: 'right'
|
||||
}
|
||||
];
|
||||
|
||||
// 添加展开行控制
|
||||
const expandedRowKeys = ref<number[]>([]);
|
||||
|
||||
// 处理展开行变化
|
||||
function handleExpandChange(expanded: boolean, record: DeviceRecord) {
|
||||
if (expanded) {
|
||||
expandedRowKeys.value = [record.id];
|
||||
} else {
|
||||
expandedRowKeys.value = [];
|
||||
}
|
||||
}
|
||||
|
||||
// 获取历史设备列表数据
|
||||
async function getHistoricalDeviceList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data, error } = await fetchHistoricalDevices();
|
||||
if (!error && data) {
|
||||
deviceList.value = data.rows.map(item => ({
|
||||
id: item.id,
|
||||
deviceName: item.clientName,
|
||||
macAddress: item.clientMac,
|
||||
dataUsage: formatDataUsage(item.duration),
|
||||
connectionTime: formatTimestamp(item.startTime),
|
||||
disconnectionTime: formatTimestamp(item.endTime)
|
||||
}));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch historical device list:', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新设备列表
|
||||
async function handleRefresh() {
|
||||
await getHistoricalDeviceList();
|
||||
}
|
||||
|
||||
// 组件挂载时获取数据
|
||||
onMounted(() => {
|
||||
getHistoricalDeviceList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<records/>
|
||||
<div class="device-list-container">
|
||||
<a-card :bordered="false">
|
||||
<template #title>
|
||||
<div class="card-title">
|
||||
<HistoryOutlined />
|
||||
<span>{{ t('page.records.clienthistory') }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<a-button @click="handleBack">
|
||||
{{ t('page.login.common.back') }}
|
||||
</a-button>
|
||||
<a-button type="primary" :loading="loading" @click="handleRefresh">
|
||||
<template #icon>
|
||||
<span class="i-carbon:refresh"></span>
|
||||
</template>
|
||||
{{ t('page.records.refresh') }}
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<a-table
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data-source="deviceList"
|
||||
:row-key="(record: DeviceRecord) => record.id"
|
||||
:expanded-row-keys="expandedRowKeys"
|
||||
@expand="handleExpandChange"
|
||||
:pagination="{
|
||||
total: deviceList.length,
|
||||
pageSize: 10,
|
||||
showSizeChanger: false,
|
||||
showTotal: (total) => `共 ${total} 条`
|
||||
}"
|
||||
>
|
||||
<template #expandedRowRender="{ record }">
|
||||
<div class="pl-4">
|
||||
<div>{{ t('page.records.starttime') }}: {{ record.connectionTime }}</div>
|
||||
<div>{{ t('page.records.endtime') }}: {{ record.disconnectionTime }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
|
||||
<style scoped>
|
||||
.device-list-container {
|
||||
padding: 8px;
|
||||
background-color: #f5f5f7;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pl-4 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-card-body) {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-wrapper) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.device-list-container {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import HeaderBanner from './modules/header-banner.vue';
|
||||
//import CardData from './modules/card-data.vue';
|
||||
//import LineChart from './modules/line-chart.vue';
|
||||
import CardData from './modules/card-data.vue';
|
||||
import LineChart from './modules/line-chart.vue';
|
||||
// import PieChart from './modules/pie-chart.vue';
|
||||
// import ProjectNews from './modules/project-news.vue';
|
||||
// import CreativityBanner from './modules/creativity-banner.vue';
|
||||
@@ -21,8 +21,8 @@ provide('updateDashboard', updateDashboard);
|
||||
<template>
|
||||
<ASpace direction="vertical" :size="16">
|
||||
<HeaderBanner ref="headerBannerRef"/>
|
||||
<!-- <LineChart />-->
|
||||
<!-- <CardData />-->
|
||||
<LineChart />
|
||||
<CardData />
|
||||
<!-- <ARow :gutter="[16, 16]">-->
|
||||
<!-- <ACol :span="24" :lg="14">-->
|
||||
<!-- </ACol>-->
|
||||
|
||||
@@ -1,241 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, inject } from 'vue';
|
||||
import { useBillingStore } from '@/store/modules/billing/billing';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { submitOrder } from '@/service/api/auth';
|
||||
import { message } from 'ant-design-vue';
|
||||
import type { Ref } from 'vue';
|
||||
import BalanceRecharge from '@/views/recharge/balancerecharge/index.vue'
|
||||
|
||||
const { t } = useI18n();
|
||||
// 注入更新仪表盘的方法
|
||||
const updateDashboard = inject('updateDashboard') as () => Promise<void>;
|
||||
|
||||
interface RechargeOption {
|
||||
amount: number;
|
||||
displayAmount: string;
|
||||
price: number;
|
||||
}
|
||||
|
||||
const customAmount = ref<string | number | undefined>(undefined);
|
||||
const selectedAmount = ref<number | null>(null);
|
||||
const isCustomMode = ref<boolean>(false);
|
||||
|
||||
const rechargeOptions: Ref<RechargeOption[]> = ref([
|
||||
{ amount: 10, displayAmount: '10元', price: 10.00 },
|
||||
{ amount: 20, displayAmount: '20元', price: 20.00 },
|
||||
{ amount: 30, displayAmount: '30元', price: 30.00 },
|
||||
{ amount: 50, displayAmount: '50元', price: 50.00 },
|
||||
{ amount: 100, displayAmount: '100元', price: 100.00 },
|
||||
{ amount: 200, displayAmount: '200元', price: 200.00 },
|
||||
]);
|
||||
|
||||
const billingStore = useBillingStore();
|
||||
|
||||
const paymentAmount = computed(() => {
|
||||
if (customAmount.value !== undefined && customAmount.value !== '') {
|
||||
return Number(customAmount.value);
|
||||
}
|
||||
return selectedAmount.value || 0;
|
||||
});
|
||||
|
||||
const handleOptionSelect = (amount: number) => {
|
||||
isCustomMode.value = false;
|
||||
selectedAmount.value = amount;
|
||||
customAmount.value = undefined;
|
||||
};
|
||||
|
||||
const handleCustomMode = () => {
|
||||
isCustomMode.value = true;
|
||||
selectedAmount.value = null;
|
||||
};
|
||||
|
||||
const handleCustomAmount = (value: string | number | undefined) => {
|
||||
customAmount.value = value;
|
||||
};
|
||||
|
||||
// 添加点击外部关闭自定义输入的处理
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement;
|
||||
if (isCustomMode.value &&
|
||||
!target?.closest('.special-option') &&
|
||||
customAmount.value === undefined) {
|
||||
isCustomMode.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 创建一个函数来处理 blur 事件
|
||||
const handleBlur = () => {
|
||||
if (customAmount.value === undefined || customAmount.value === '') {
|
||||
isCustomMode.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
document.addEventListener('click', handleClickOutside);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside);
|
||||
});
|
||||
|
||||
const balance = computed(() => billingStore.balance);
|
||||
|
||||
// 修改充值处理方法，移除邮箱验证
|
||||
const handleRecharge = async () => {
|
||||
// 验证金额
|
||||
if (!paymentAmount.value || paymentAmount.value <= 0) {
|
||||
message.error('请选择或输入正确的充值金额');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await submitOrder({
|
||||
type: 1,
|
||||
orderAmount: paymentAmount.value
|
||||
});
|
||||
message.success('充值订单提交成功！');
|
||||
|
||||
// 更新余额，传入充值金额
|
||||
await billingStore.updateBalance(paymentAmount.value);
|
||||
// 更新仪表盘数据
|
||||
await updateDashboard();
|
||||
} catch (error) {
|
||||
message.error('充值失败，请重试！');
|
||||
console.error('Failed to submit recharge order:', error);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="recharge-container p-4">
|
||||
<!-- 充值金额选择 -->
|
||||
<div class="amount-section mb-6">
|
||||
<div class="text-lg font-bold mb-2">{{ t('page.carddata.Rechargeamount') }}</div>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div
|
||||
v-for="option in rechargeOptions"
|
||||
:key="option.amount"
|
||||
class="recharge-option cursor-pointer"
|
||||
:class="{ 'selected': selectedAmount === option.amount }"
|
||||
@click="handleOptionSelect(option.amount)"
|
||||
>
|
||||
<div class="text-lg font-medium">{{ option.displayAmount }}</div>
|
||||
<div class="text-sm text-gray-500">{{ t('page.carddata.price') }} {{ option.price.toFixed(2) }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 自定义充选项 -->
|
||||
<div
|
||||
class="special-option"
|
||||
:class="{ 'selected': isCustomMode }"
|
||||
@click="handleCustomMode"
|
||||
>
|
||||
<template v-if="!isCustomMode">
|
||||
<AInputNumber
|
||||
v-model:value="customAmount"
|
||||
:placeholder="t('page.carddata.Customization')"
|
||||
:min="1"
|
||||
:max="999999"
|
||||
class="w-full"
|
||||
@change="handleCustomAmount"
|
||||
@click.stop
|
||||
@blur="handleBlur"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付部分 -->
|
||||
<div class="payment-section mt-8 bg-white p-4 rounded-lg border border-gray-100">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<span class="text-gray-600">{{ t('page.carddata.Remainingbalance') }}：{{ balance }}元</span>
|
||||
<span class="text-blue-500">{{ t('page.carddata.Theamountreceived') }}：{{ paymentAmount.toFixed(2) }}元</span>
|
||||
</div>
|
||||
<AButton
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
:disabled="!paymentAmount || paymentAmount <= 0"
|
||||
@click="handleRecharge"
|
||||
>
|
||||
¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }}
|
||||
</AButton>
|
||||
</div>
|
||||
</div>
|
||||
<BalanceRecharge/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.recharge-option {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
height: 76px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.recharge-option.selected,
|
||||
.special-option.selected {
|
||||
border-color: #1890ff;
|
||||
background-color: #e6f7ff;
|
||||
}
|
||||
|
||||
.special-option {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0;
|
||||
transition: all 0.3s;
|
||||
height: 76px;
|
||||
}
|
||||
|
||||
.special-option :deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.special-option :deep(.ant-input-number-input-wrap) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.special-option :deep(.ant-input-number-input) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&::placeholder {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.special-option :deep(.ant-input-number:focus),
|
||||
.special-option :deep(.ant-input-number-focused) {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.payment-section {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* 除之前的后缀样式 */
|
||||
:deep(.ant-input-suffix) {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,400 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref, onMounted, inject } from 'vue';
|
||||
import { fetchPackageList, submitOrder } from '@/service/api/auth';
|
||||
import { message } from 'ant-design-vue';
|
||||
import PackageSubscription from '@/views/recharge/package/index.vue'
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
interface PackageOption {
|
||||
id: string;
|
||||
packageName: string;
|
||||
price: number;
|
||||
clientNum: number;
|
||||
clientNumEnable: boolean;
|
||||
traffic: number;
|
||||
trafficEnable: boolean;
|
||||
trafficDisplay: string;
|
||||
durationEnable: boolean;
|
||||
isRecommended?: boolean;
|
||||
promotion?: string;
|
||||
periodNum: number;
|
||||
periodType: number;
|
||||
validityPeriod: string;
|
||||
}
|
||||
|
||||
// 添加有效期类型枚举
|
||||
const PERIOD_TYPE = {
|
||||
HOUR: 0,
|
||||
DAY: 1,
|
||||
MONTH: 2,
|
||||
YEAR: 3
|
||||
} as const;
|
||||
|
||||
// 添加有效期单位映射
|
||||
const PERIOD_UNIT = {
|
||||
[PERIOD_TYPE.HOUR]: '小时',
|
||||
[PERIOD_TYPE.DAY]: '天',
|
||||
[PERIOD_TYPE.MONTH]: '月',
|
||||
[PERIOD_TYPE.YEAR]: '年'
|
||||
} as const;
|
||||
|
||||
// 格式化有效期显示
|
||||
const formatValidityPeriod = (num: number, type: number): string => {
|
||||
const unit = PERIOD_UNIT[type as keyof typeof PERIOD_UNIT] || '未知';
|
||||
return `${num}${unit}`;
|
||||
};
|
||||
|
||||
// 流量单位转换函数
|
||||
const formatTraffic = (bytes: number): string => {
|
||||
// 处理 0 值、undefined 或 null 的情况
|
||||
if (!bytes || bytes === 0) {
|
||||
return '0B';
|
||||
}
|
||||
|
||||
const B_TO_KB = 1024;
|
||||
const B_TO_MB = 1024 * 1024;
|
||||
const B_TO_GB = 1024 * 1024 * 1024;
|
||||
const B_TO_TB = 1024 * 1024 * 1024 * 1024;
|
||||
|
||||
if (bytes >= B_TO_TB) {
|
||||
// B -> TB
|
||||
return `${(bytes / B_TO_TB).toFixed(2)}TB`;
|
||||
}
|
||||
if (bytes >= B_TO_GB) {
|
||||
// B -> GB
|
||||
return `${(bytes / B_TO_GB).toFixed(2)}GB`;
|
||||
}
|
||||
if (bytes >= B_TO_MB) {
|
||||
// B -> MB
|
||||
return `${(bytes / B_TO_MB).toFixed(2)}MB`;
|
||||
}
|
||||
if (bytes >= B_TO_KB) {
|
||||
// B -> KB
|
||||
return `${(bytes / B_TO_KB).toFixed(2)}KB`;
|
||||
}
|
||||
// 小于1KB的情况，保持B单位
|
||||
return `${bytes.toFixed(2)}B`;
|
||||
};
|
||||
|
||||
const packageOptions = ref<PackageOption[]>([]);
|
||||
const selectedPackage = ref<PackageOption>({
|
||||
id: '1',
|
||||
packageName: '',
|
||||
price: 0,
|
||||
clientNum: 0,
|
||||
clientNumEnable: false,
|
||||
traffic: 0,
|
||||
trafficEnable: false,
|
||||
trafficDisplay: '0GB',
|
||||
durationEnable: false,
|
||||
isRecommended: false,
|
||||
promotion: '',
|
||||
periodNum: 0,
|
||||
periodType: PERIOD_TYPE.MONTH,
|
||||
validityPeriod: '0月'
|
||||
});
|
||||
|
||||
const fetchPackages = async () => {
|
||||
try {
|
||||
const response = await fetchPackageList();
|
||||
if (response.data && Array.isArray(response.data)) {
|
||||
packageOptions.value = response.data.map(pkg => ({
|
||||
id: pkg.id,
|
||||
packageName: pkg.packageName,
|
||||
price: parseFloat(pkg.price),
|
||||
clientNum: Number(pkg.clientNum),
|
||||
clientNumEnable: pkg.clientNumEnable,
|
||||
traffic: Number(pkg.traffic),
|
||||
trafficEnable: pkg.trafficEnable,
|
||||
trafficDisplay: pkg.trafficEnable ? formatTraffic(Number(pkg.traffic)) : '无限制',
|
||||
durationEnable: pkg.durationEnable,
|
||||
isRecommended: pkg.isRecommended || false,
|
||||
promotion: pkg.promotion || '',
|
||||
periodNum: Number(pkg.periodNum),
|
||||
periodType: Number(pkg.periodType),
|
||||
validityPeriod: pkg.durationEnable ? formatValidityPeriod(Number(pkg.periodNum), Number(pkg.periodType)) : '无限制'
|
||||
}));
|
||||
|
||||
if (packageOptions.value.length > 0) {
|
||||
selectedPackage.value = packageOptions.value[0];
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch packages:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const selectPackage = (option: PackageOption) => {
|
||||
selectedPackage.value = option;
|
||||
};
|
||||
|
||||
// 注入更新仪表盘的方法
|
||||
const updateDashboard = inject('updateDashboard') as () => Promise<void>;
|
||||
|
||||
// 修改套餐办理方法
|
||||
const handleSubmitOrder = async () => {
|
||||
try {
|
||||
await submitOrder({
|
||||
type: 0,
|
||||
packageId: selectedPackage.value.id
|
||||
});
|
||||
message.success('套餐办理成功！');
|
||||
// 更新<E69BB4><E696B0>表盘数据
|
||||
await updateDashboard();
|
||||
} catch (error) {
|
||||
message.error('套餐办理失败，请重试！');
|
||||
console.error('Failed to submit order:', error);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchPackages();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="package-container">
|
||||
<!-- 顶部价格展示 -->
|
||||
<div class="price-header">
|
||||
<div class="price">
|
||||
<span class="currency">¥</span>
|
||||
<span class="amount">{{ selectedPackage.price }}</span>
|
||||
<span class="period">/月</span>
|
||||
</div>
|
||||
<div class="subtitle">{{ selectedPackage.packageName }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 套餐选择 -->
|
||||
<div class="package-options">
|
||||
<h3 class="section-title">{{ t('page.setmeal.changablelevel') }}</h3>
|
||||
<div class="options-grid">
|
||||
<div
|
||||
v-for="option in packageOptions"
|
||||
:key="option.id"
|
||||
:class="[
|
||||
'option-card',
|
||||
{
|
||||
recommended: option.isRecommended,
|
||||
selected: selectedPackage.id === option.id
|
||||
}
|
||||
]"
|
||||
@click="selectPackage(option)"
|
||||
>
|
||||
<div v-if="option.isRecommended" class="recommended-tag">
|
||||
{{ t('page.setmeal.highlyrecommended') }}
|
||||
</div>
|
||||
<div class="package-name">{{ option.packageName }}</div>
|
||||
<div class="price">¥{{ option.price }}</div>
|
||||
<div class="traffic">{{ option.trafficEnable ? option.trafficDisplay : '无限制' }}</div>
|
||||
<div class="device-count">
|
||||
{{ option.clientNumEnable ? `${option.clientNum}台设备` : '无限制' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 套餐详情 -->
|
||||
<div class="package-details">
|
||||
<h3 class="section-title">{{ t('page.setmeal.mealdetail') }}</h3>
|
||||
<div class="details-list">
|
||||
<div class="detail-item">
|
||||
<div class="label">套餐名称</div>
|
||||
<div class="value">{{ selectedPackage.packageName }}</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="label">{{ t('page.setmeal.GeneralPurposeTraffic') }}</div>
|
||||
<div class="value">
|
||||
{{ selectedPackage.trafficEnable ? `${selectedPackage.trafficDisplay}，当月有效` : '无限制' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="label">设备数量</div>
|
||||
<div class="value">
|
||||
{{ selectedPackage.clientNumEnable ? `最多${selectedPackage.clientNum}台设备同时在线` : '无限制' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-item">
|
||||
<div class="label">有效期限</div>
|
||||
<div class="value">
|
||||
{{ selectedPackage.durationEnable ? selectedPackage.validityPeriod : '无限制' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-bar">
|
||||
<button
|
||||
class="btn-primary"
|
||||
@click="handleSubmitOrder"
|
||||
:disabled="!selectedPackage.id"
|
||||
>
|
||||
{{ t('page.setmeal.Applynow') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PackageSubscription/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.package-container {
|
||||
min-height: 100vh;
|
||||
padding: 16px 16px 80px;
|
||||
}
|
||||
|
||||
.price-header {
|
||||
background: #fff1f0;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #ff4d4f;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.period {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #1890ff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.option-card {
|
||||
background: white;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border: 1px solid #e8e8e8;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.option-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.option-card.selected {
|
||||
border-color: #ff4d4f;
|
||||
background: #fff1f0;
|
||||
}
|
||||
|
||||
.recommended-tag {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #ff4d4f;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.package-details {
|
||||
background: white;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.detail-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 80px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.value.highlight {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #ff4d4f;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 32px;
|
||||
border-radius: 24px;
|
||||
font-size: 16px;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.package-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.traffic {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.device-count {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -169,15 +169,15 @@ const handleAliPay = async () => {
|
||||
¥{{ paymentAmount.toFixed(2) }} {{ t('page.carddata.pay') }}
|
||||
</AButton>
|
||||
<!-- 测试：支付宝支付 -->
|
||||
<AButton
|
||||
type="primary"
|
||||
size="large"
|
||||
block
|
||||
:disabled="!paymentAmount || paymentAmount <= 0"
|
||||
@click="handleAliPay"
|
||||
>
|
||||
AliPay
|
||||
</AButton>
|
||||
<!-- <AButton-->
|
||||
<!-- type="primary"-->
|
||||
<!-- size="large"-->
|
||||
<!-- block-->
|
||||
<!-- :disabled="!paymentAmount || paymentAmount <= 0"-->
|
||||
<!-- @click="handleAliPay"-->
|
||||
<!-- >-->
|
||||
<!-- AliPay-->
|
||||
<!-- </AButton>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,22 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ref, defineAsyncComponent } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import type { MenuProps } from 'ant-design-vue';
|
||||
import BalanceRecharge from '@/views/recharge/balancerecharge/index.vue';
|
||||
import PackageSubscription from '@/views/recharge/package/index.vue';
|
||||
import {useRouter} from "vue-router";
|
||||
const router = useRouter();
|
||||
const handleBack = () => {
|
||||
router.push('/billing/billservice');
|
||||
};
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
// 使用异步组件加载
|
||||
const BalanceRecharge = defineAsyncComponent(() =>
|
||||
import('@/views/recharge/balancerecharge/index.vue')
|
||||
);
|
||||
const PackageSubscription = defineAsyncComponent(() =>
|
||||
import('@/views/recharge/package/index.vue')
|
||||
);
|
||||
|
||||
defineOptions({
|
||||
name: 'recharge'
|
||||
});
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const handleBack = () => {
|
||||
try {
|
||||
router.push({
|
||||
name: 'billing_billservice',
|
||||
replace: true
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Navigation error:', error);
|
||||
// 如果导航失败，尝试使用路径
|
||||
router.push('/billing/billservice');
|
||||
}
|
||||
};
|
||||
|
||||
// 使用数组 ref 来存储选中的菜单项
|
||||
const selectedKeys = ref<(string | number)[]>(['balance']);
|
||||
const selectedKeys = ref<string[]>(['balance']);
|
||||
|
||||
// 菜单项配置
|
||||
const items: MenuProps['items'] = [
|
||||
@@ -40,24 +57,31 @@ const handleClick: MenuProps['onClick'] = e => {
|
||||
|
||||
<template>
|
||||
<div class="recharge-container">
|
||||
<!-- 顶部菜单 -->
|
||||
<AMenu
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
mode="horizontal"
|
||||
:items="items"
|
||||
@click="handleClick"
|
||||
class="recharge-menu"
|
||||
/>
|
||||
<div class="text-lg font-bold mb-4 flex justify-between items-center">
|
||||
<a-button @click="handleBack" >
|
||||
{{ t('page.login.common.back') }}
|
||||
</a-button>
|
||||
</div>
|
||||
<!-- 内容区域 -->
|
||||
<div class="recharge-content">
|
||||
<Transition name="fade" mode="out-in">
|
||||
<component :is="String(selectedKeys[0]) === 'balance' ? BalanceRecharge : PackageSubscription" />
|
||||
</Transition>
|
||||
<div class="recharge-content-wrapper">
|
||||
<!-- 返回按钮 -->
|
||||
<div class="back-button-wrapper">
|
||||
<a-button @click="handleBack">
|
||||
{{ t('page.login.common.back') }}
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 顶部菜单 -->
|
||||
<a-menu
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
mode="horizontal"
|
||||
:items="items"
|
||||
@click="handleClick"
|
||||
class="recharge-menu"
|
||||
/>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="recharge-content">
|
||||
<Transition name="fade" mode="out-in">
|
||||
<component
|
||||
:is="selectedKeys[0] === 'balance' ? BalanceRecharge : PackageSubscription"
|
||||
/>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -69,6 +93,15 @@ const handleClick: MenuProps['onClick'] = e => {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.recharge-content-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.back-button-wrapper {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.recharge-menu {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
@@ -79,6 +112,7 @@ const handleClick: MenuProps['onClick'] = e => {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
@@ -101,5 +135,23 @@ const handleClick: MenuProps['onClick'] = e => {
|
||||
.recharge-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.recharge-menu {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-menu-item) {
|
||||
padding: 0 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保在小屏幕上菜单项文字不会换行 */
|
||||
:deep(.ant-menu-item) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 优化加载状态的显示 */
|
||||
:deep(.ant-spin-container) {
|
||||
min-height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,7 @@ const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const handleBack = () => {
|
||||
router.push('/userInfo/usercard');
|
||||
router.push('/endpoint/clientservice');
|
||||
};
|
||||
|
||||
// 设备列表数据
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
// 1. 简化导入方式，与 billservice 保持一致
|
||||
import { useAuthStore } from '@/store/modules/auth';
|
||||
import type { Router } from 'vue-router';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed } from 'vue';
|
||||
import { computed, type Component } from 'vue';
|
||||
import { useI18n } from "vue-i18n";
|
||||
import {
|
||||
UserOutlined,
|
||||
@@ -16,10 +16,17 @@ import {
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const router: Router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 2. 保持类型定义
|
||||
// 定义菜单项接口
|
||||
interface MenuItem {
|
||||
icon: Component;
|
||||
title: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
// 定义用户信息接口
|
||||
interface UserInfo {
|
||||
avatar?: string;
|
||||
nickName?: string;
|
||||
@@ -29,12 +36,12 @@ interface UserInfo {
|
||||
|
||||
const user = computed<UserInfo | null>(() => authStore.userInfo?.user || null);
|
||||
|
||||
// 3. 简化 menuItems 结构，与 billservice 一致
|
||||
const menuItems = [
|
||||
// 使用类型注解定义 menuItems
|
||||
const menuItems: MenuItem[] = [
|
||||
{
|
||||
icon: UserOutlined,
|
||||
title: t('page.usercard.changeInfo'),
|
||||
path: '/userInfo/profile' // 使用完整路径
|
||||
path: '/userInfo/profile'
|
||||
},
|
||||
{
|
||||
icon: LockOutlined,
|
||||
@@ -46,30 +53,30 @@ const menuItems = [
|
||||
title: t('page.usercard.kyc'),
|
||||
path: '/userInfo/kyc'
|
||||
},
|
||||
{
|
||||
icon: MobileOutlined,
|
||||
title: t('page.usercard.deviceconsole'),
|
||||
path: '/userInfo/device'
|
||||
},
|
||||
{
|
||||
icon: LinkOutlined,
|
||||
title: t('page.usercard.access'),
|
||||
path: '/userInfo/access'
|
||||
},
|
||||
{
|
||||
icon: ApiOutlined,
|
||||
title: t('page.usercard.records'),
|
||||
path: '/userInfo/records'
|
||||
},
|
||||
{
|
||||
icon: CalendarOutlined,
|
||||
title: t('page.usercard.cdrlrecords'),
|
||||
path: '/userInfo/cdrlrecords'
|
||||
},
|
||||
// {
|
||||
// icon: MobileOutlined,
|
||||
// title: t('page.usercard.deviceconsole'),
|
||||
// path: '/userInfo/device'
|
||||
// },
|
||||
// {
|
||||
// icon: LinkOutlined,
|
||||
// title: t('page.usercard.access'),
|
||||
// path: '/userInfo/access'
|
||||
// },
|
||||
// {
|
||||
// icon: ApiOutlined,
|
||||
// title: t('page.usercard.records'),
|
||||
// path: '/userInfo/records'
|
||||
// },
|
||||
// {
|
||||
// icon: CalendarOutlined,
|
||||
// title: t('page.usercard.cdrlrecords'),
|
||||
// path: '/userInfo/cdrlrecords'
|
||||
// },
|
||||
];
|
||||
|
||||
// 4. 简化路由跳转方法
|
||||
const handleMenuClick = (path: string) => {
|
||||
// 添加类型注解
|
||||
const handleMenuClick = (path: string): void => {
|
||||
router.push(path);
|
||||
};
|
||||
</script>
|
||||
@@ -77,13 +84,12 @@ const handleMenuClick = (path: string) => {
|
||||
<template>
|
||||
<div class="user-center">
|
||||
<div class="user-center-content">
|
||||
<!-- 顶部用户信息卡片 -->
|
||||
<div class="user-card">
|
||||
<div class="avatar">
|
||||
<template v-if="user?.avatar">
|
||||
<img
|
||||
:src="user.avatar"
|
||||
:alt="user.nickName"
|
||||
:alt="user?.nickName || '用户'"
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
@@ -96,7 +102,6 @@ const handleMenuClick = (path: string) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 采用 billservice 的菜单列表结构 -->
|
||||
<div class="menu-list">
|
||||
<div
|
||||
v-for="item in menuItems"
|
||||
@@ -118,7 +123,7 @@ const handleMenuClick = (path: string) => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 采用 billservice 的基础样式结构 */
|
||||
/* 保持现有样式不变 */
|
||||
.user-center {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
|
||||
Reference in New Issue
Block a user