fix:usercard界面移动端报错修复
This commit is contained in:
zhongzm
@@ -1,14 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
// 1. 简化导入方式，与 billservice 保持一致
|
||||
import { useAuthStore } from '@/store/modules/auth';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed } from 'vue';
|
||||
import { UserOutlined, LockOutlined, SafetyCertificateOutlined, MobileOutlined, RightOutlined, LinkOutlined, ApiOutlined, CalendarOutlined} from '@ant-design/icons-vue';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import {useI18n} from "vue-i18n";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
MobileOutlined,
|
||||
RightOutlined,
|
||||
LinkOutlined,
|
||||
ApiOutlined,
|
||||
CalendarOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const {t} = useI18n();
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// 添加用户信息的类型定义
|
||||
// 2. 保持类型定义
|
||||
interface UserInfo {
|
||||
avatar?: string;
|
||||
nickName?: string;
|
||||
@@ -16,22 +27,19 @@ interface UserInfo {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
const { toLogin } = useRouterPush();
|
||||
// 添加类型断言
|
||||
const user = computed<UserInfo | null>(() => authStore.userInfo?.user || null);
|
||||
|
||||
// 3. 简化 menuItems 结构，与 billservice 一致
|
||||
const menuItems = [
|
||||
{
|
||||
icon: UserOutlined,
|
||||
title: t('page.usercard.changeInfo'),
|
||||
path: 'profile'
|
||||
path: '/userInfo/profile' // 使用完整路径
|
||||
},
|
||||
{
|
||||
icon: LockOutlined,
|
||||
title: t('page.usercard.resetpwd'),
|
||||
path: 'resetpwd'
|
||||
path: '/userInfo/resetpwd'
|
||||
},
|
||||
{
|
||||
icon: SafetyCertificateOutlined,
|
||||
@@ -41,35 +49,28 @@ const menuItems = [
|
||||
{
|
||||
icon: MobileOutlined,
|
||||
title: t('page.usercard.deviceconsole'),
|
||||
path: 'device'
|
||||
path: '/userInfo/device'
|
||||
},
|
||||
{
|
||||
icon: LinkOutlined,
|
||||
title: t('page.usercard.access'),
|
||||
path: 'access'
|
||||
path: '/userInfo/access'
|
||||
},
|
||||
{
|
||||
icon: ApiOutlined,
|
||||
title: t('page.usercard.records'),
|
||||
path: 'records'
|
||||
path: '/userInfo/records'
|
||||
},
|
||||
{
|
||||
icon: CalendarOutlined,
|
||||
title: t('page.usercard.cdrlrecords'),
|
||||
path: 'cdrlrecords'
|
||||
path: '/userInfo/cdrlrecords'
|
||||
},
|
||||
];
|
||||
|
||||
// 4. 简化路由跳转方法
|
||||
const handleMenuClick = (path: string) => {
|
||||
if (path === '_reset_pwd') {
|
||||
toLogin('reset-pwd');
|
||||
return;
|
||||
}
|
||||
if (path.startsWith('/')) {
|
||||
router.push(path);
|
||||
} else {
|
||||
router.push(`/userInfo/${path}`);
|
||||
}
|
||||
router.push(path);
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -95,7 +96,7 @@ const handleMenuClick = (path: string) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<!-- 采用 billservice 的菜单列表结构 -->
|
||||
<div class="menu-list">
|
||||
<div
|
||||
v-for="item in menuItems"
|
||||
@@ -117,7 +118,7 @@ const handleMenuClick = (path: string) => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 移优先的响应式设计 */
|
||||
/* 采用 billservice 的基础样式结构 */
|
||||
.user-center {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
@@ -131,11 +132,52 @@ const handleMenuClick = (path: string) => {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: transparent; /* 移除背景色 */
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 用户卡片样式 */
|
||||
.user-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
@@ -146,7 +188,7 @@ const handleMenuClick = (path: string) => {
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 16px;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -178,115 +220,26 @@ const handleMenuClick = (path: string) => {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.menu-item:not(:last-child) {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 平板设备断点 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.user-center {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 24px;
|
||||
margin-bottom: 0;
|
||||
/* 响应式布局调整 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.menu-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.user-info h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.user-info p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 桌面设备断点 */
|
||||
@media screen and (min-width: 1024px) {
|
||||
.user-center {
|
||||
padding: 24px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
padding: 28px;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.default-avatar {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 18px 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 大屏设备断点 */
|
||||
@media screen and (min-width: 1440px) {
|
||||
.user-center {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.user-center-content {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 20px 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user