sales/todo-frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化首页UI，美化界面设计
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Agent
2026-03-26 12:53:23 +00:00
parent e32758ecc5
commit fe35a48123
1 changed files with 345 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

476
src/pages/index/index.vue
View File

@@ -1,111 +1,142 @@
<template>
<view class="page">
<!-- 用户信息 -->
<view class="user-info">
<view class="avatar">
<!-- 顶部欢迎区域 -->
<view class="header">
<view class="welcome-section">
<text class="welcome-text">欢迎回来</text>
<text class="username">{{ userInfo.username || '用户' }}</text>
</view>
<view class="role-tag" :class="isCustomer ? 'customer' : 'admin'">
{{ roleText }}
</view>
</view>
<!-- 功能菜单 - 管理员 -->
<view class="menu-grid" v-if="isAdmin">
<view class="menu-item" @click="goTo('/pages/product/manage')">
<text class="menu-icon">📦</text>
<text class="menu-text">商品管理</text>
</view>
<view class="menu-item" @click="goTo('/pages/order/create')">
<text class="menu-icon">📝</text>
<text class="menu-text">创建订单</text>
</view>
<view class="menu-item" @click="goToTab('/pages/order/list')">
<text class="menu-icon">📋</text>
<text class="menu-text">订单列表</text>
</view>
<view class="menu-item" @click="goStock()">
<text class="menu-icon">🏭</text>
<text class="menu-text">库存管理</text>
</view>
</view>
<!-- 功能菜单 - 销售人员 -->
<view class="menu-grid" v-else-if="isSales">
<view class="menu-item" @click="goTo('/pages/product/list')">
<text class="menu-icon">📦</text>
<text class="menu-text">商品浏览</text>
</view>
<view class="menu-item" @click="goTo('/pages/order/create')">
<text class="menu-icon">📝</text>
<text class="menu-text">创建订单</text>
</view>
<view class="menu-item" @click="goToTab('/pages/order/list')">
<text class="menu-icon">📋</text>
<text class="menu-text">订单列表</text>
</view>
</view>
<!-- 功能菜单 - 顾客 -->
<view class="menu-grid" v-else-if="isCustomer">
<view class="menu-item" @click="goTo('/pages/product/list')">
<text class="menu-icon">📦</text>
<text class="menu-text">商品浏览</text>
</view>
<view class="menu-item" @click="goToTab('/pages/order/list')">
<text class="menu-icon">📋</text>
<text class="menu-text">我的订单</text>
</view>
</view>
<!-- 功能菜单 - 游客 -->
<view class="menu-grid" v-else-if="isGuest">
<view class="menu-item" @click="goTo('/pages/login/index')">
<text class="menu-icon">🔑</text>
<text class="menu-text">请先登录</text>
<view class="role-badge" :class="roleClass">
<text class="role-icon">👤</text>
<text class="role-text">{{ roleText }}</text>
</view>
</view>
<!-- 快捷操作 - 管理员/销售 -->
<view class="section" v-if="!isCustomer">
<view class="section-title">今日概览</view>
<view class="stats-card" v-if="!isCustomer && !isGuest">
<view class="card-header">
<text class="card-title">📊 今日概览</text>
</view>
<view class="stats-grid">
<view class="stat-item">
<view class="stat-icon order-icon">📋</view>
<view class="stat-info">
<text class="stat-value">{{ stats.orderCount || 0 }}</text>
<text class="stat-label">今日订单</text>
</view>
</view>
<view class="stat-item">
<view class="stat-icon money-icon">💰</view>
<view class="stat-info">
<text class="stat-value">¥{{ stats.actualAmount || 0 }}</text>
<text class="stat-label">今日销售额</text>
</view>
</view>
<view class="stat-item">
<view class="stat-icon alert-icon">⚠️</view>
<view class="stat-info">
<text class="stat-value">{{ stats.stockAlerts || 0 }}</text>
<text class="stat-label">库存预警</text>
</view>
</view>
</view>
</view>
<!-- 顾客提示 -->
<view class="section" v-if="isCustomer">
<view class="section-title">温馨提示</view>
<view class="tips">
<text class="tip-text">• 您可以浏览商品</text>
<text class="tip-text">• 您可以查看半年内的订单</text>
<text class="tip-text">• 如需下单，请联系销售人员</text>
<!-- 功能菜单 -->
<view class="menu-section">
<text class="section-title">功能菜单</text>
<view class="menu-grid">
<!-- 管理员菜单 -->
<template v-if="isAdmin">
<view class="menu-card" @click="goTo('/pages/product/manage')">
<view class="menu-card-icon blue">📦</view>
<text class="menu-card-title">商品管理</text>
<text class="menu-card-desc">管理商品库存</text>
</view>
<view class="menu-card" @click="goTo('/pages/order/create')">
<view class="menu-card-icon green">📝</view>
<text class="menu-card-title">创建订单</text>
<text class="menu-card-desc">新增销售订单</text>
</view>
<view class="menu-card" @click="goToTab('/pages/order/list')">
<view class="menu-card-icon orange">📋</view>
<text class="menu-card-title">订单列表</text>
<text class="menu-card-desc">查看所有订单</text>
</view>
<view class="menu-card" @click="goStock()">
<view class="menu-card-icon red">🏭</view>
<text class="menu-card-title">库存管理</text>
<text class="menu-card-desc">库存预警监控</text>
</view>
</template>
<!-- 销售菜单 -->
<template v-else-if="isSales">
<view class="menu-card" @click="goTo('/pages/product/list')">
<view class="menu-card-icon blue">📦</view>
<text class="menu-card-title">商品浏览</text>
<text class="menu-card-desc">查看商品列表</text>
</view>
<view class="menu-card" @click="goTo('/pages/order/create')">
<view class="menu-card-icon green">📝</view>
<text class="menu-card-title">创建订单</text>
<text class="menu-card-desc">新增销售订单</text>
</view>
<view class="menu-card" @click="goToTab('/pages/order/list')">
<view class="menu-card-icon orange">📋</view>
<text class="menu-card-title">订单列表</text>
<text class="menu-card-desc">查看所有订单</text>
</view>
</template>
<!-- 顾客菜单 -->
<template v-else-if="isCustomer">
<view class="menu-card" @click="goTo('/pages/product/list')">
<view class="menu-card-icon blue">📦</view>
<text class="menu-card-title">商品浏览</text>
<text class="menu-card-desc">查看商品列表</text>
</view>
<view class="menu-card" @click="goToTab('/pages/order/list')">
<view class="menu-card-icon orange">📋</view>
<text class="menu-card-title">我的订单</text>
<text class="menu-card-desc">查看订单记录</text>
</view>
</template>
<!-- 游客菜单 -->
<template v-else-if="isGuest">
<view class="guest-card" @click="goTo('/pages/login/index')">
<text class="guest-icon">🔑</text>
<text class="guest-text">点击登录</text>
<text class="guest-desc">登录后使用完整功能</text>
</view>
</template>
</view>
</view>
<!-- 游客提示 -->
<view class="section" v-if="isGuest">
<view class="section-title">欢迎使用</view>
<view class="tips">
<text class="tip-text">• 请登录后使用完整功能</text>
<text class="tip-text">• 登录后可浏览商品和查看订单</text>
<!-- 提示区域 -->
<view class="tips-section" v-if="isCustomer">
<view class="tip-card">
<text class="tip-title">💡 温馨提示</text>
<view class="tip-list">
<text class="tip-item">• 您可以浏览商品</text>
<text class="tip-item">• 您可以查看半年内的订单</text>
<text class="tip-item">• 如需下单，请联系销售人员</text>
</view>
</view>
</view>
<view class="tips-section" v-if="isGuest">
<view class="tip-card">
<text class="tip-title">🎉 欢迎使用</text>
<view class="tip-list">
<text class="tip-item">• 请登录后使用完整功能</text>
<text class="tip-item">• 登录后可浏览商品和查看订单</text>
</view>
</view>
</view>
<!-- 退出登录 -->
<button class="logout-btn" @click="logout" v-if="!isGuest">退出登录</button>
<view class="logout-section" v-if="!isGuest">
<button class="logout-btn" @click="logout">🚪 退出登录</button>
</view>
</view>
</template>
@@ -137,6 +168,11 @@ export default {
if (this.isSales) return '销售员'
if (this.isCustomer) return '顾客'
return '游客'
},
roleClass() {
if (this.isAdmin) return 'admin'
if (this.isCustomer) return 'customer'
return ''
}
},
onLoad() {
@@ -207,94 +243,122 @@ export default {
</script>
<style>
/* 全局样式 */
.page {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30rpx;
}
.user-info {
/* 顶部欢迎区域 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40rpx;
padding: 40rpx 20rpx;
margin-bottom: 30rpx;
}
.avatar {
width: 120rpx;
height: 120rpx;
background: #3cc51f;
border-radius: 60rpx;
.welcome-section {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.welcome-text {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 8rpx;
}
.username {
font-size: 48rpx;
font-weight: bold;
color: #fff;
font-size: 32rpx;
}
.role-tag {
margin-left: 20rpx;
padding: 8rpx 16rpx;
border-radius: 8rpx;
font-size: 24rpx;
}
.role-tag.admin {
background: #e6f7ff;
color: #1890ff;
}
.role-tag.customer {
background: #fff7e6;
color: #fa8c16;
}
.menu-grid {
.role-badge {
display: flex;
flex-wrap: wrap;
margin-bottom: 40rpx;
}
.menu-item {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30rpx;
padding: 12rpx 24rpx;
border-radius: 30rpx;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.menu-icon {
font-size: 60rpx;
.role-badge.admin {
background: rgba(255, 215, 0, 0.3);
}
.menu-text {
margin-top: 10rpx;
.role-badge.customer {
background: rgba(255, 255, 255, 0.2);
}
.role-icon {
font-size: 28rpx;
margin-right: 8rpx;
}
.role-text {
font-size: 24rpx;
color: #666;
color: #fff;
}
.section {
/* 统计卡片 */
.stats-card {
background: #fff;
border-radius: 16rpx;
border-radius: 24rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
}
.section-title {
font-size: 28rpx;
font-weight: bold;
.card-header {
margin-bottom: 20rpx;
}
.card-title {
font-size: 30rpx;
font-weight: bold;
color: #333;
}
.stats-grid {
display: flex;
justify-content: space-around;
justify-content: space-between;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.stat-icon {
width: 80rpx;
height: 80rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
margin-right: 16rpx;
}
.order-icon {
background: #e6f7ff;
}
.money-icon {
background: #fff7e6;
}
.alert-icon {
background: #fff1f0;
}
.stat-info {
display: flex;
flex-direction: column;
}
.stat-value {
@@ -304,26 +368,164 @@ export default {
}
.stat-label {
font-size: 24rpx;
font-size: 22rpx;
color: #999;
margin-top: 10rpx;
margin-top: 4rpx;
}
.tips {
/* 功能菜单区域 */
.menu-section {
margin-bottom: 30rpx;
}
.section-title {
font-size: 32rpx;
font-weight: bold;
color: #fff;
margin-bottom: 20rpx;
display: block;
}
.menu-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu-card {
width: 48%;
background: #fff;
border-radius: 24rpx;
padding: 30rpx;
margin-bottom: 20rpx;
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.tip-text {
font-size: 26rpx;
color: #666;
line-height: 40rpx;
.menu-card:active {
transform: scale(0.98);
opacity: 0.9;
}
.menu-card-icon {
width: 80rpx;
height: 80rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
margin-bottom: 16rpx;
}
.menu-card-icon.blue {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.menu-card-icon.green {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.menu-card-icon.orange {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.menu-card-icon.red {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.menu-card-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 8rpx;
}
.menu-card-desc {
font-size: 22rpx;
color: #999;
}
/* 游客登录卡片 */
.guest-card {
width: 100%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 24rpx;
padding: 60rpx;
display: flex;
flex-direction: column;
align-items: center;
border: 2rpx dashed rgba(255, 255, 255, 0.5);
}
.guest-icon {
font-size: 80rpx;
margin-bottom: 20rpx;
}
.guest-text {
font-size: 32rpx;
font-weight: bold;
color: #fff;
margin-bottom: 10rpx;
}
.guest-desc {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.7);
}
/* 提示区域 */
.tips-section {
margin-bottom: 30rpx;
}
.tip-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 24rpx;
padding: 30rpx;
}
.tip-title {
font-size: 28rpx;
font-weight: bold;
color: #fff;
display: block;
margin-bottom: 16rpx;
}
.tip-list {
display: flex;
flex-direction: column;
}
.tip-item {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
line-height: 36rpx;
}
/* 退出登录 */
.logout-section {
padding: 0 20rpx;
}
.logout-btn {
background: #fff;
color: #ff4d4f;
border: none;
margin-top: 40rpx;
width: 100%;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 2rpx solid rgba(255, 255, 255, 0.3);
border-radius: 50rpx;
padding: 24rpx;
color: #fff;
font-size: 28rpx;
font-weight: bold;
}
.logout-btn:active {
background: rgba(255, 255, 255, 0.3);
}
</style>