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

refactor: 首页改用简洁卡片布局，emoji图标
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Agent
2026-03-28 14:08:21 +00:00
parent f47f078357
commit 7140e0049f
1 changed files with 62 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,182 +1,130 @@
<template> <template>
<view class="page"> <view class="page">
<!-- 顶部欢迎区 --> <!-- 顶部欢迎 -->
<view class="header"> <view class="header">
<view class="user-info"> <view class="user-section">
<text class="greeting">{{ greeting }}</text> <text class="welcome">{{ greeting }}</text>
<text class="username" v-if="username">{{ username }}</text> <text class="username" v-if="username">{{ username }}</text>
<text class="username" v-else>请登录</text>
</view> </view>
<view class="logout-btn" @click="logout" v-if="isLoggedIn"> <view class="logout-btn" @click="logout" v-if="username">
<text>退出</text> <text>退出</text>
</view> </view>
</view> </view>
<!-- 统计概览 --> <!-- 订单区域 -->
<view class="stats-section" v-if="isAdmin || isSales"> <view class="section">
<view class="stat-card">
<text class="stat-value">{{ stats.todayOrders }}</text>
<text class="stat-label">今日订单</text>
</view>
<view class="stat-card">
<text class="stat-value">¥{{ stats.todayAmount }}</text>
<text class="stat-label">今日销售额</text>
</view>
<view class="stat-card">
<text class="stat-value">{{ stats.totalCustomers }}</text>
<text class="stat-label">客户数</text>
</view>
</view>
<!-- 订单相关 -->
<view class="menu-section">
<text class="section-title">订单</text> <text class="section-title">订单</text>
<view class="menu-grid"> <view class="menu-grid">
<template v-if="isAdmin"> <template v-if="isAdmin">
<view class="menu-item" @click="goTo('/pages/order/create')"> <view class="menu-item" @click="goTo('/pages/order/create')">
<view class="menu-icon" style="background: #e8f4ff;"> <text class="menu-icon">✏️</text>
<text style="color: #1890ff;">📝</text>
</view>
<text class="menu-text">创建订单</text> <text class="menu-text">创建订单</text>
</view> </view>
<view class="menu-item" @click="goToTab('/pages/order/list')"> <view class="menu-item" @click="goToTab('/pages/order/list')">
<view class="menu-icon" style="background: #f6ffed;"> <text class="menu-icon">📋</text>
<text style="color: #52c41a;">📋</text>
</view>
<text class="menu-text">订单列表</text> <text class="menu-text">订单列表</text>
</view> </view>
<view class="menu-item" @click="goTo('/pages/order/search')"> <view class="menu-item" @click="goTo('/pages/order/search')">
<view class="menu-icon" style="background: #fff7e6;"> <text class="menu-icon">🔍</text>
<text style="color: #fa8c16;">🔍</text>
</view>
<text class="menu-text">订单查询</text> <text class="menu-text">订单查询</text>
</view> </view>
<view class="menu-item" @click="goTo('/pages/order/return')"> <view class="menu-item" @click="goTo('/pages/order/return')">
<view class="menu-icon" style="background: #fff1f0;"> <text class="menu-icon">↩️</text>
<text style="color: #ff4d4f;">↩</text>
</view>
<text class="menu-text">退货</text> <text class="menu-text">退货</text>
</view> </view>
</template> </template>
<template v-else-if="isSales"> <template v-else-if="isSales">
<view class="menu-item" @click="goTo('/pages/order/create')"> <view class="menu-item" @click="goTo('/pages/order/create')">
<view class="menu-icon" style="background: #e8f4ff;"> <text class="menu-icon">✏️</text>
<text style="color: #1890ff;">📝</text>
</view>
<text class="menu-text">创建订单</text> <text class="menu-text">创建订单</text>
</view> </view>
<view class="menu-item" @click="goToTab('/pages/order/list')"> <view class="menu-item" @click="goToTab('/pages/order/list')">
<view class="menu-icon" style="background: #f6ffed;"> <text class="menu-icon">📋</text>
<text style="color: #52c41a;">📋</text>
</view>
<text class="menu-text">订单列表</text> <text class="menu-text">订单列表</text>
</view> </view>
</template> </template>
<template v-else-if="isCustomer"> <template v-else-if="isCustomer">
<view class="menu-item" @click="goToTab('/pages/order/list')"> <view class="menu-item" @click="goToTab('/pages/order/list')">
<view class="menu-icon" style="background: #f6ffed;"> <text class="menu-icon">📋</text>
<text style="color: #52c41a;">📋</text>
</view>
<text class="menu-text">我的订单</text> <text class="menu-text">我的订单</text>
</view> </view>
</template> </template>
</view> </view>
</view> </view>
<!-- 管理相关 --> <!-- 管理区域 -->
<view class="menu-section" v-if="isAdmin || isSales"> <view class="section" v-if="isAdmin || isSales">
<text class="section-title">管理</text> <text class="section-title">管理</text>
<view class="menu-grid"> <view class="menu-grid">
<template v-if="isAdmin"> <template v-if="isAdmin">
<view class="menu-item" @click="goTo('/pages/product/manage')"> <view class="menu-item" @click="goTo('/pages/product/manage')">
<view class="menu-icon" style="background: #f9f0ff;"> <text class="menu-icon">📦</text>
<text style="color: #722ed1;">📦</text>
</view>
<text class="menu-text">商品管理</text> <text class="menu-text">商品管理</text>
</view> </view>
<view class="menu-item" @click="goTo('/pages/category/index')"> <view class="menu-item" @click="goTo('/pages/category/index')">
<view class="menu-icon" style="background: #fff0f6;"> <text class="menu-icon">📂</text>
<text style="color: #eb2f96;">📂</text>
</view>
<text class="menu-text">种类管理</text> <text class="menu-text">种类管理</text>
</view> </view>
<view class="menu-item" @click="goStock()"> <view class="menu-item" @click="goStock()">
<view class="menu-icon" style="background: #e6f7ff;"> <text class="menu-icon">🏭</text>
<text style="color: #13c2c2;">🏭</text>
</view>
<text class="menu-text">库存管理</text> <text class="menu-text">库存管理</text>
</view> </view>
<view class="menu-item" @click="goTo('/pages/stock/in')"> <view class="menu-item" @click="goTo('/pages/stock/in')">
<view class="menu-icon" style="background: #fff7e6;"> <text class="menu-icon">➕</text>
<text style="color: #fa8c16;">➕</text>
</view>
<text class="menu-text">入库</text> <text class="menu-text">入库</text>
</view> </view>
<view class="menu-item" @click="goTo('/pages/stock/flow')"> <view class="menu-item" @click="goTo('/pages/stock/flow')">
<view class="menu-icon" style="background: #f6ffed;"> <text class="menu-icon">📊</text>
<text style="color: #52c41a;">📊</text>
</view>
<text class="menu-text">库存流水</text> <text class="menu-text">库存流水</text>
</view> </view>
</template> </template>
<template v-else-if="isSales"> <template v-else-if="isSales">
<view class="menu-item" @click="goTo('/pages/product/list')"> <view class="menu-item" @click="goTo('/pages/product/list')">
<view class="menu-icon" style="background: #f9f0ff;"> <text class="menu-icon">📦</text>
<text style="color: #722ed1;">📦</text>
</view>
<text class="menu-text">商品浏览</text> <text class="menu-text">商品浏览</text>
</view> </view>
</template> </template>
</view> </view>
</view> </view>
<!-- 商品浏览（顾客） --> <!-- 商品区域（顾客） -->
<view class="menu-section" v-if="isCustomer"> <view class="section" v-if="isCustomer">
<text class="section-title">商品</text> <text class="section-title">商品</text>
<view class="menu-grid"> <view class="menu-grid">
<view class="menu-item" @click="goTo('/pages/product/list')"> <view class="menu-item" @click="goTo('/pages/product/list')">
<view class="menu-icon" style="background: #f9f0ff;"> <text class="menu-icon">📦</text>
<text style="color: #722ed1;">📦</text>
</view>
<text class="menu-text">商品浏览</text> <text class="menu-text">商品浏览</text>
</view> </view>
</view> </view>
</view> </view>
<!-- 游客登录 --> <!-- 游客登录 -->
<view class="guest-section" v-if="isGuest"> <view class="guest-section" v-if="!username">
<view class="guest-card" @click="goTo('/pages/login/index')"> <view class="guest-btn" @click="goTo('/pages/login/index')">
<text class="guest-icon">👤</text>
<text class="guest-text">点击登录</text> <text class="guest-text">点击登录</text>
<text class="guest-hint">登录后可使用更多功能</text>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { isAdmin, isSales, isCustomer, isGuest } from '@/utils/auth' import { isAdmin, isSales, isCustomer } from '@/utils/auth'
export default { export default {
data() { data() {
return { return {
username: '', username: '',
greeting: '', greeting: ''
stats: {
todayOrders: 0,
todayAmount: '0',
totalCustomers: 0
}
} }
}, },
computed: { computed: {
isAdmin() { return isAdmin() }, isAdmin() { return isAdmin() },
isSales() { return isSales() }, isSales() { return isSales() },
isCustomer() { return isCustomer() }, isCustomer() { return isCustomer() }
isGuest() { return isGuest() },
isLoggedIn() { return !isGuest() }
}, },
onShow() { onShow() {
this.username = uni.getStorageSync('username') || '' || '' this.username = uni.getStorageSync('username') || ''
this.setGreeting() this.setGreeting()
}, },
methods: { methods: {
@@ -200,7 +148,7 @@ export default {
logout() { logout() {
uni.showModal({ uni.showModal({
title: '退出登录', title: '退出登录',
content: '确定要退出登录吗？', content: '确定要退出吗？',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
uni.clearStorageSync() uni.clearStorageSync()
@@ -216,147 +164,98 @@ export default {
<style> <style>
.page { .page {
min-height: 100vh; min-height: 100vh;
background: #f7f8fa; background: #f5f5f5;
padding: 30rpx; padding: 20rpx;
} }
.header { .header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 30rpx; background: #fff;
padding: 30rpx;
border-radius: 16rpx;
margin-bottom: 20rpx;
} }
.user-info { .user-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.greeting { .welcome {
font-size: 26rpx; font-size: 24rpx;
color: #999; color: #999;
} }
.username { .username {
font-size: 36rpx; font-size: 34rpx;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
margin-top: 8rpx; margin-top: 6rpx;
} }
.logout-btn { .logout-btn {
font-size: 26rpx; font-size: 26rpx;
color: #666; color: #666;
padding: 10rpx 20rpx; padding: 12rpx 24rpx;
background: #f0f0f0; background: #f5f5f5;
border-radius: 20rpx; border-radius: 30rpx;
} }
.stats-section { .section {
display: flex;
justify-content: space-between;
margin-bottom: 30rpx;
}
.stat-card {
flex: 1;
background: #fff; background: #fff;
border-radius: 16rpx; border-radius: 16rpx;
padding: 24rpx; padding: 24rpx;
margin: 0 8rpx; margin-bottom: 20rpx;
text-align: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}
.stat-value {
display: block;
font-size: 36rpx;
font-weight: bold;
color: #333;
}
.stat-label {
font-size: 22rpx;
color: #999;
margin-top: 8rpx;
}
.menu-section {
margin-bottom: 30rpx;
} }
.section-title { .section-title {
display: block;
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
margin-bottom: 20rpx; margin-bottom: 24rpx;
padding-left: 10rpx; padding-left: 16rpx;
border-left: 6rpx solid #1890ff; border-left: 6rpx solid #1890ff;
} }
.menu-grid { .menu-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start;
gap: 20rpx;
} }
.menu-item { .menu-item {
width: calc(25% - 15rpx); width: 25%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 24rpx 10rpx; padding: 16rpx 0;
background: #fff;
border-radius: 16rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
} }
.menu-icon { .menu-icon {
width: 80rpx; font-size: 50rpx;
height: 80rpx;
border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
margin-bottom: 12rpx; margin-bottom: 12rpx;
} }
.menu-text { .menu-text {
font-size: 22rpx; font-size: 24rpx;
color: #333; color: #666;
} }
.guest-section { .guest-section {
margin-top: 100rpx; margin-top: 200rpx;
}
.guest-card {
background: #fff;
border-radius: 24rpx;
padding: 60rpx;
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
} }
.guest-icon { .guest-btn {
font-size: 100rpx; background: #1890ff;
margin-bottom: 30rpx; padding: 30rpx 80rpx;
border-radius: 50rpx;
} }
.guest-text { .guest-text {
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; color: #fff;
color: #333;
}
.guest-hint {
font-size: 24rpx;
color: #999;
margin-top: 16rpx;
} }
</style> </style>