381 lines
7.8 KiB
Vue
381 lines
7.8 KiB
Vue
<template>
|
|
<div class="home">
|
|
<!-- 导航栏 -->
|
|
<el-header class="header">
|
|
<div class="header-content">
|
|
<div class="logo">
|
|
<h2>前端H5系统</h2>
|
|
</div>
|
|
<div class="nav-menu">
|
|
<el-menu
|
|
mode="horizontal"
|
|
:default-active="activeIndex"
|
|
class="nav-menu-items"
|
|
@select="handleMenuSelect"
|
|
>
|
|
<el-menu-item index="home">首页</el-menu-item>
|
|
<el-menu-item index="shop">积分商城</el-menu-item>
|
|
<el-menu-item index="about">关于</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
<div class="user-actions">
|
|
<template v-if="userStore.isAuthenticated">
|
|
<el-dropdown @command="handleUserCommand">
|
|
<span class="user-info">
|
|
<div class="user-avatar">
|
|
{{ userStore.user?.username?.charAt(0)?.toUpperCase() }}
|
|
</div>
|
|
<span class="username">{{ userStore.user?.username }}</span>
|
|
<el-icon><ArrowDown /></el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="profile">个人中心</el-dropdown-item>
|
|
<el-dropdown-item command="orders">我的订单</el-dropdown-item>
|
|
<el-dropdown-item command="points-history">积分记录</el-dropdown-item>
|
|
<el-dropdown-item command="transfers">货款管理</el-dropdown-item>
|
|
<el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
<template v-else>
|
|
<!-- 移除登录注册按钮 -->
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</el-header>
|
|
|
|
<!-- 主要内容 -->
|
|
<el-main class="main-content">
|
|
|
|
|
|
<!-- 主要内容区域 -->
|
|
<div class="main-section">
|
|
<div class="container">
|
|
<div class="welcome-content">
|
|
<h2 class="welcome-title">欢迎使用前端H5系统</h2>
|
|
<p class="welcome-description">您的智能管理助手</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- 统计信息 -->
|
|
<div class="stats-section" v-if="userStore.isAuthenticated">
|
|
<div class="container">
|
|
<h2 class="section-title">系统概览</h2>
|
|
<el-row :gutter="20">
|
|
<el-col :xs="12" :sm="6" v-for="stat in stats" :key="stat.key">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<el-icon :size="32"><component :is="stat.icon" /></el-icon>
|
|
</div>
|
|
<div class="stat-content">
|
|
<div class="stat-value">{{ stat.value }}</div>
|
|
<div class="stat-label">{{ stat.label }}</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</el-main>
|
|
|
|
|
|
|
|
<!-- 页脚 -->
|
|
<el-footer class="footer">
|
|
<div class="container">
|
|
<p>© 2024 前端H5系统. All rights reserved.</p>
|
|
</div>
|
|
</el-footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useUserStore } from '@/stores/user'
|
|
|
|
import { ArrowDown, User, View, Clock, Document, Edit, Setting, DataAnalysis, Star } from '@element-plus/icons-vue'
|
|
|
|
const router = useRouter()
|
|
const userStore = useUserStore()
|
|
|
|
// 响应式数据
|
|
const activeIndex = ref('home')
|
|
const stats = ref([
|
|
{ key: 'users', label: '用户数量', value: 0, icon: 'User' },
|
|
{ key: 'orders', label: '订单总数', value: 0, icon: 'Document' },
|
|
{ key: 'products', label: '商品数量', value: 0, icon: 'Star' },
|
|
{ key: 'transfers', label: '转账记录', value: 0, icon: 'Clock' }
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
// 方法
|
|
const handleMenuSelect = (index) => {
|
|
activeIndex.value = index
|
|
switch (index) {
|
|
case 'home':
|
|
router.push('/transfers')
|
|
break
|
|
case 'shop':
|
|
router.push('/shop')
|
|
break
|
|
case 'about':
|
|
router.push('/about')
|
|
break
|
|
}
|
|
}
|
|
|
|
const handleUserCommand = (command) => {
|
|
switch (command) {
|
|
case 'profile':
|
|
router.push('/profile')
|
|
break
|
|
case 'orders':
|
|
router.push('/orders')
|
|
break
|
|
case 'points-history':
|
|
router.push('/points-history')
|
|
break
|
|
case 'transfers':
|
|
router.push('/transfers')
|
|
break
|
|
case 'logout':
|
|
userStore.logout()
|
|
break
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 获取统计数据
|
|
const fetchStats = async () => {
|
|
try {
|
|
// 这里可以调用相关API获取统计数据
|
|
// 暂时使用模拟数据
|
|
stats.value = [
|
|
{ key: 'users', label: '用户数量', value: 156, icon: 'User' },
|
|
{ key: 'orders', label: '订单总数', value: 89, icon: 'Document' },
|
|
{ key: 'products', label: '商品数量', value: 45, icon: 'Star' },
|
|
{ key: 'transfers', label: '转账记录', value: 23, icon: 'Clock' }
|
|
]
|
|
} catch (error) {
|
|
console.error('获取统计数据失败:', error)
|
|
}
|
|
}
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
if (userStore.isAuthenticated) {
|
|
fetchStats()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.logo h2 {
|
|
color: white;
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-menu-items {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.nav-menu-items .el-menu-item {
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.nav-menu-items .el-menu-item:hover,
|
|
.nav-menu-items .el-menu-item.is-active {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
}
|
|
|
|
.user-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 0 0 80px 0;
|
|
}
|
|
|
|
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.main-section,
|
|
.stats-section {
|
|
padding: 60px 0;
|
|
}
|
|
|
|
.main-section {
|
|
background-color: #f8f9fa;
|
|
min-height: 50vh;
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
font-size: 32px;
|
|
margin-bottom: 40px;
|
|
color: #303133;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.welcome-content {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.welcome-title {
|
|
font-size: 32px;
|
|
margin-bottom: 16px;
|
|
color: #303133;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.welcome-description {
|
|
font-size: 16px;
|
|
color: #606266;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
|
|
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stat-icon {
|
|
color: #409eff;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: #909399;
|
|
}
|
|
|
|
.footer {
|
|
background-color: #303133;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer .container {
|
|
padding: 20px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header-content {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
padding: 15px 20px;
|
|
}
|
|
|
|
.nav-menu {
|
|
order: 3;
|
|
width: 100%;
|
|
}
|
|
|
|
.user-actions {
|
|
order: 2;
|
|
}
|
|
|
|
|
|
.section-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.section-header {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.welcome-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.main-content {
|
|
padding-bottom: 80px;
|
|
}
|
|
|
|
|
|
}
|
|
</style> |