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

添加SVG图标组件，替换emoji图标为矢量图标
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Agent
2026-03-26 13:47:50 +00:00
parent 3dfba3d804
commit 02c4b02092
4 changed files with 156 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
<text class="username">{{ userInfo.username || '用户' }}</text>
</view>
<view class="role-badge" :class="roleClass">
<text class="role-icon">👤</text>
<Icon name="user" :size="24" color="#fff" />
<text class="role-text">{{ roleText }}</text>
</view>
</view>
@@ -15,25 +15,31 @@
<!-- 快捷操作 - 管理员/销售 -->
<view class="stats-card" v-if="!isCustomer && !isGuest">
<view class="card-header">
<text class="card-title">📊 今日概览</text>
<text class="card-title">今日概览</text>
</view>
<view class="stats-grid">
<view class="stat-item">
<view class="stat-icon order-icon">📋</view>
<view class="stat-icon order-icon">
<Icon name="order" :size="40" color="#667eea" />
</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-icon money-icon">
<Icon name="money" :size="40" color="#fa8c16" />
</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-icon alert-icon">
<Icon name="alert" :size="40" color="#ff4d4f" />
</view>
<view class="stat-info">
<text class="stat-value">{{ stats.stockAlerts || 0 }}</text>
<text class="stat-label">库存预警</text>
@@ -49,22 +55,30 @@
<!-- 管理员菜单 -->
<template v-if="isAdmin">
<view class="menu-card" @click="goTo('/pages/product/manage')">
<view class="menu-card-icon blue">📦</view>
<view class="menu-card-icon blue">
<Icon name="product" :size="40" color="#fff" />
</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>
<view class="menu-card-icon green">
<Icon name="edit" :size="40" color="#fff" />
</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>
<view class="menu-card-icon orange">
<Icon name="order" :size="40" color="#fff" />
</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>
<view class="menu-card-icon red">
<Icon name="stock" :size="40" color="#fff" />
</view>
<text class="menu-card-title">库存管理</text>
<text class="menu-card-desc">库存预警监控</text>
</view>
@@ -72,17 +86,23 @@
<!-- 销售菜单 -->
<template v-else-if="isSales">
<view class="menu-card" @click="goTo('/pages/product/list')">
<view class="menu-card-icon blue">📦</view>
<view class="menu-card-icon blue">
<Icon name="product" :size="40" color="#fff" />
</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>
<view class="menu-card-icon green">
<Icon name="edit" :size="40" color="#fff" />
</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>
<view class="menu-card-icon orange">
<Icon name="order" :size="40" color="#fff" />
</view>
<text class="menu-card-title">订单列表</text>
<text class="menu-card-desc">查看所有订单</text>
</view>
@@ -90,12 +110,16 @@
<!-- 顾客菜单 -->
<template v-else-if="isCustomer">
<view class="menu-card" @click="goTo('/pages/product/list')">
<view class="menu-card-icon blue">📦</view>
<view class="menu-card-icon blue">
<Icon name="product" :size="40" color="#fff" />
</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>
<view class="menu-card-icon orange">
<Icon name="order" :size="40" color="#fff" />
</view>
<text class="menu-card-title">我的订单</text>
<text class="menu-card-desc">查看订单记录</text>
</view>
@@ -103,7 +127,9 @@
<!-- 游客菜单 -->
<template v-else-if="isGuest">
<view class="guest-card" @click="goTo('/pages/login/index')">
<text class="guest-icon">🔑</text>
<view class="guest-icon">
<Icon name="user" :size="80" color="#fff" />
</view>
<text class="guest-text">点击登录</text>
<text class="guest-desc">登录后使用完整功能</text>
</view>
@@ -114,7 +140,7 @@
<!-- 提示区域 -->
<view class="tips-section" v-if="isCustomer">
<view class="tip-card">
<text class="tip-title">💡 温馨提示</text>
<text class="tip-title">温馨提示</text>
<view class="tip-list">
<text class="tip-item">• 您可以浏览商品</text>
<text class="tip-item">• 您可以查看半年内的订单</text>
@@ -125,7 +151,7 @@
<view class="tips-section" v-if="isGuest">
<view class="tip-card">
<text class="tip-title">🎉 欢迎使用</text>
<text class="tip-title">欢迎使用</text>
<view class="tip-list">
<text class="tip-item">• 请登录后使用完整功能</text>
<text class="tip-item">• 登录后可浏览商品和查看订单</text>
@@ -135,7 +161,10 @@
<!-- 退出登录 -->
<view class="logout-section" v-if="!isGuest">
<button class="logout-btn" @click="logout">🚪 退出登录</button>
<button class="logout-btn" @click="logout">
<Icon name="logout" :size="32" color="#fff" style="margin-right: 10rpx" />
退出登录
</button>
</view>
</view>
</template>
@@ -188,7 +217,6 @@ export default {
},
methods: {
async loadUserInfo() {
// 假登录时从本地存储获取
const localRole = uni.getStorageSync('role')
if (localRole) {
this.userInfo = {
@@ -197,7 +225,6 @@ export default {
}
return
}
try {
const userInfo = await authApi.getCurrentUser()
this.userInfo = userInfo
@@ -211,7 +238,6 @@ export default {
const stats = await orderApi.getStatistics({ startDate: today })
this.stats.orderCount = stats.orderCount || 0
this.stats.actualAmount = stats.actualAmount || 0
const alerts = await productApi.getStockAlerts()
this.stats.stockAlerts = alerts ? alerts.length : 0
} catch (e) {
@@ -243,14 +269,12 @@ export default {
</script>
<style>
/* 全局样式 */
.page {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30rpx;
}
/* 顶部欢迎区域 */
.header {
display: flex;
justify-content: space-between;
@@ -293,17 +317,12 @@ export default {
background: rgba(255, 255, 255, 0.2);
}
.role-icon {
font-size: 28rpx;
margin-right: 8rpx;
}
.role-text {
font-size: 24rpx;
color: #fff;
margin-left: 8rpx;
}
/* 统计卡片 */
.stats-card {
background: #fff;
border-radius: 24rpx;
@@ -340,7 +359,6 @@ export default {
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
margin-right: 16rpx;
}
@@ -373,7 +391,6 @@ export default {
margin-top: 4rpx;
}
/* 功能菜单区域 */
.menu-section {
margin-bottom: 30rpx;
}
@@ -415,7 +432,6 @@ export default {
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
margin-bottom: 16rpx;
}
@@ -447,7 +463,6 @@ export default {
color: #999;
}
/* 游客登录卡片 */
.guest-card {
width: 100%;
background: rgba(255, 255, 255, 0.2);
@@ -461,7 +476,6 @@ export default {
}
.guest-icon {
font-size: 80rpx;
margin-bottom: 20rpx;
}
@@ -477,7 +491,6 @@ export default {
color: rgba(255, 255, 255, 0.7);
}
/* 提示区域 */
.tips-section {
margin-bottom: 30rpx;
}
@@ -508,7 +521,6 @@ export default {
line-height: 36rpx;
}
/* 退出登录 */
.logout-section {
padding: 0 20rpx;
}
@@ -523,6 +535,9 @@ export default {
color: #fff;
font-size: 28rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.logout-btn:active {