diff --git a/src/app.config.ts b/src/app.config.ts index 380d474..cbea1bb 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -18,6 +18,7 @@ export default defineAppConfig({ backgroundColor: '#F8FAFC' }, tabBar: { + custom: true, color: '#64748b', selectedColor: '#16a34a', backgroundColor: '#ffffff', @@ -25,19 +26,27 @@ export default defineAppConfig({ list: [ { pagePath: 'pages/home/index', - text: '首页' + text: '首页', + iconPath: 'assets/tabbar/home.png', + selectedIconPath: 'assets/tabbar/home-active.png' }, { pagePath: 'pages/menu/index', - text: '点餐' + text: '点餐', + iconPath: 'assets/tabbar/menu.png', + selectedIconPath: 'assets/tabbar/menu-active.png' }, { pagePath: 'pages/orders/index', - text: '订单' + text: '订单', + iconPath: 'assets/tabbar/orders.png', + selectedIconPath: 'assets/tabbar/orders-active.png' }, { pagePath: 'pages/profile/index', - text: '我的' + text: '我的', + iconPath: 'assets/tabbar/profile.png', + selectedIconPath: 'assets/tabbar/profile-active.png' } ] } diff --git a/src/assets/tabbar/home-active.png b/src/assets/tabbar/home-active.png new file mode 100644 index 0000000..596e8c2 Binary files /dev/null and b/src/assets/tabbar/home-active.png differ diff --git a/src/assets/tabbar/home.png b/src/assets/tabbar/home.png new file mode 100644 index 0000000..04bd7d9 Binary files /dev/null and b/src/assets/tabbar/home.png differ diff --git a/src/assets/tabbar/menu-active.png b/src/assets/tabbar/menu-active.png new file mode 100644 index 0000000..44518b1 Binary files /dev/null and b/src/assets/tabbar/menu-active.png differ diff --git a/src/assets/tabbar/menu.png b/src/assets/tabbar/menu.png new file mode 100644 index 0000000..9c70f5c Binary files /dev/null and b/src/assets/tabbar/menu.png differ diff --git a/src/assets/tabbar/orders-active.png b/src/assets/tabbar/orders-active.png new file mode 100644 index 0000000..d8ce51d Binary files /dev/null and b/src/assets/tabbar/orders-active.png differ diff --git a/src/assets/tabbar/orders.png b/src/assets/tabbar/orders.png new file mode 100644 index 0000000..1c43443 Binary files /dev/null and b/src/assets/tabbar/orders.png differ diff --git a/src/assets/tabbar/profile-active.png b/src/assets/tabbar/profile-active.png new file mode 100644 index 0000000..18aafe4 Binary files /dev/null and b/src/assets/tabbar/profile-active.png differ diff --git a/src/assets/tabbar/profile.png b/src/assets/tabbar/profile.png new file mode 100644 index 0000000..9542bdd Binary files /dev/null and b/src/assets/tabbar/profile.png differ diff --git a/src/components/tab-bar/index.vue b/src/components/tab-bar/index.vue new file mode 100644 index 0000000..74d2212 --- /dev/null +++ b/src/components/tab-bar/index.vue @@ -0,0 +1,101 @@ + + + + + diff --git a/src/pages/home/composables/useHomePage.ts b/src/pages/home/composables/useHomePage.ts index e759918..7568bd3 100644 --- a/src/pages/home/composables/useHomePage.ts +++ b/src/pages/home/composables/useHomePage.ts @@ -4,34 +4,55 @@ import { pinia, useAppStore, useCartStore } from '@/stores' import { FulfillmentScenes, demoHotProducts, + type FulfillmentScene, type MiniProductCard } from '@/shared' import { openRoute } from '@/utils/router' -const categoryCards = [ - { key: 'recommend', icon: '⭐', label: '推荐', toneClass: 'home-page__cat-icon--orange' }, - { key: 'meal', icon: '🍚', label: '主食', toneClass: 'home-page__cat-icon--green-soft' }, - { key: 'snack', icon: '🍜', label: '小吃', toneClass: 'home-page__cat-icon--yellow', badge: 'HOT' }, - { key: 'drink', icon: '🧋', label: '饮品', toneClass: 'home-page__cat-icon--green-light' }, - { key: 'set', icon: '📦', label: '套餐', toneClass: 'home-page__cat-icon--mint' }, - { key: 'dessert', icon: '🍰', label: '甜品', toneClass: 'home-page__cat-icon--amber' } -] as const +export interface HomeCategoryItem { + key: string + char: string + label: string + tone: string + badge?: string +} -const trustItems = [ - { key: 'fresh', icon: '⚡', label: '现炒现做' }, - { key: 'fast', icon: '🕐', label: '30分钟送达' }, - { key: 'pickup', icon: '🛍', label: '自提更快' }, - { key: 'quality', icon: '🛡', label: '品质保证' } -] as const +export interface HomeTrustItem { + key: string + label: string +} + +const categoryCards: HomeCategoryItem[] = [ + { key: 'recommend', char: '荐', label: '推荐', tone: 'warm' }, + { key: 'staple', char: '饭', label: '主食', tone: 'green' }, + { key: 'snack', char: '食', label: '小吃', tone: 'amber', badge: '热卖' }, + { key: 'drink', char: '饮', label: '饮品', tone: 'teal' }, + { key: 'combo', char: '套', label: '套餐', tone: 'blue' }, + { key: 'dessert', char: '甜', label: '甜品', tone: 'rose' } +] + +const trustItems: HomeTrustItem[] = [ + { key: 'fresh', label: '现炒现做' }, + { key: 'fast', label: '30分钟送达' }, + { key: 'pickup', label: '自提免等' }, + { key: 'quality', label: '品质保障' } +] export function useHomePage () { const appStore = useAppStore(pinia) const cartStore = useCartStore(pinia) + const currentStore = computed(() => appStore.currentStore) const cartCount = computed(() => cartStore.itemCount) + const currentScene = computed(() => appStore.scene) + const sceneOptions = computed(() => appStore.sceneOptions) const isDineIn = computed(() => appStore.scene === FulfillmentScenes.DineIn) const recommendedProducts = ref(demoHotProducts) + function switchScene (scene: string) { + appStore.setScene(scene as FulfillmentScene) + } + async function refreshPage () { await appStore.initBootstrap() await appStore.initStores() @@ -52,11 +73,14 @@ export function useHomePage () { return { cartCount, categoryCards, + currentScene, currentStore, goMenu, goStoreSelect, isDineIn, recommendedProducts, + sceneOptions, + switchScene, trustItems } } diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index a05f1d5..e00d5ae 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -1,112 +1,151 @@