From 007d38075764b267c4204b944af73db9b3577421 Mon Sep 17 00:00:00 2001 From: MSuMshk <2039814060@qq.com> Date: Wed, 11 Mar 2026 17:02:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89=20tabbar=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9B=BF=E4=BB=A3=E5=8E=9F=E7=94=9F=20tabbar?= =?UTF-8?q?=EF=BC=8C=E6=94=AF=E6=8C=81=20CSS=20=E6=8E=A7=E5=88=B6=E5=9B=BE?= =?UTF-8?q?=E6=A0=87=E5=A4=A7=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Made-with: Cursor --- src/app.config.ts | 17 +- src/assets/tabbar/home-active.png | Bin 0 -> 1243 bytes src/assets/tabbar/home.png | Bin 0 -> 1374 bytes src/assets/tabbar/menu-active.png | Bin 0 -> 875 bytes src/assets/tabbar/menu.png | Bin 0 -> 987 bytes src/assets/tabbar/orders-active.png | Bin 0 -> 776 bytes src/assets/tabbar/orders.png | Bin 0 -> 1074 bytes src/assets/tabbar/profile-active.png | Bin 0 -> 1369 bytes src/assets/tabbar/profile.png | Bin 0 -> 1844 bytes src/components/tab-bar/index.vue | 101 +++++++++++ src/pages/home/composables/useHomePage.ts | 52 ++++-- src/pages/home/index.vue | 179 +++++++++++-------- src/pages/home/styles/banner.scss | 105 +++++------ src/pages/home/styles/base.scss | 202 +++++++++++++++------- src/pages/home/styles/category.scss | 46 ++--- src/pages/home/styles/fab.scss | 21 ++- src/pages/home/styles/index.scss | 1 + src/pages/home/styles/product.scss | 137 +++++++++++++++ src/pages/home/styles/trust.scss | 51 ++---- src/pages/menu/index.vue | 4 + src/pages/orders/index.vue | 4 + src/pages/profile/index.vue | 4 + src/shared/mock/menu.ts | 21 +-- 23 files changed, 658 insertions(+), 287 deletions(-) create mode 100644 src/assets/tabbar/home-active.png create mode 100644 src/assets/tabbar/home.png create mode 100644 src/assets/tabbar/menu-active.png create mode 100644 src/assets/tabbar/menu.png create mode 100644 src/assets/tabbar/orders-active.png create mode 100644 src/assets/tabbar/orders.png create mode 100644 src/assets/tabbar/profile-active.png create mode 100644 src/assets/tabbar/profile.png create mode 100644 src/components/tab-bar/index.vue create mode 100644 src/pages/home/styles/product.scss 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 0000000000000000000000000000000000000000..596e8c25661daef7e1ec2b0c25b2b3d3c6bcda34 GIT binary patch literal 1243 zcmV<11SI>3P)002t}1^@s6I8J)%00009a7bBm001r{ z001r{0eGc9b^rhX8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H11ZYV_ zK~#90?VL@B-BcKcpSO-<)xn_(cB~*W_=B6GbW;_PF8V{AQYxj?g3IJB22oc|@RBwF9|AWH zEItQpH?xy*vRY0jzFCqs0moP_ir(i%Nn6{`>QbW1lC+EL8+Bd5DigqalJ>TjRX$N= zNty-T0#*-MbsTs@(!TInm0)I30@x2&jW|T_T-$oi5hPs!yj)XMKjwh3%UTw274T+5 zQT=!qxVp{!TPqzTO#p8Ln>}{>39!@5mOS=ZNGq}=O_5#k?g`NSx4*bRpnn0RusUkz~_=ShTKUoStV6@C~g22f>!&1u6nzG zfADkFbB*)B-jOIBfLY)|BvJji2<+>$Eb3R~p~7pm?@N-8sytN8;i=m9ACJRe7jzs`jgj>Oxf>Dk@j|RYY~IDi0MytNk)bU9QSQ z#T+HoevznAsLDe{VYQzpYLu$-P_al(wZBr-C|2d6;*x5A*%-W}Eo4KqW$XZEhO9FR z%meQaS?8>o9qoS@8*CYDC_>UYE)Q8J&FmGI4WdsB86}b|2a+rYk}L>w#boT0_e^Ze~xfTqx;2n#np~W+!s`JxD-Vp?`)q6)gXrY!sso z{{cmF8rIe9vl5|YP3J8%v){?43)NxK%>HoMpD#kox>wSgg0=%S`+O#Ep`_~x_!ETi zvaSTS=QWtwr@#x2{XJ`D#|zqK2z(B1qjY$@r0q%IrHcK$NH!2z#AB5+s!1EN9+0#n zuffbNnAt4Z&G}aa+n)wz%%e^Q_+6mn6CEF50mkxanOFCv|f9Ext**q{W>2|WI zlxu)Lfm3GoV_C@qoU}Jjy90Ka*y0G~;Eu+GN4xvF0R zk9y6j0002t}1^@s6I8J)%00009a7bBm001r{ z001r{0eGc9b^rhX8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H11nWse zK~#90?VMkT6;&L^Ki^&P4~bHtZV4e_E+K^FLkoeaAV#f)P_VtU(St!71op7ii*J!p z6jWe6#)+xEvbW2M&qSs-TEgN2k(lq6C}RJ!W^dN{MNd!4y6XYQOk_ul3M^KfU* z`JM0iGH2#@&dgky85P;+DqBE1QJLjIWtImmWtOBKNiRw|An653%gWX?6Sc|(Uea3N zLtyEQ-KT*&&Fn}ys%Fy?XO^T5z$eT$is<)2Nt>Im>T*gqOVU={8MP>($U@))NdwJO z6;G*VNg4u1fcYs!=K^m^+8$n29n7qh4HyP2$My`-wYKS+OE9S$*p<_$>1{VKr=!in z4Y$z@W*p8?W)zs;k!Im8)Z_UQjV5LLjR?$@l?OCzkigk~USSPoLFbT5f?)zf_m z7%Idpvagj-lx)md-Hih?%|SQ=#-1L)wYTEDtKPJgCg_ zATe7l0!e+iJ8UgKo7qPV#JvN!F6PiNGy6Jk+%$rkgpVC<~Vlb zjQLc;{yzvf1R=0lW_AJhCUP9>Bt7O6PtxPK>tGyXW_Hmho-fTv9bT<-?0HF#WC-3$QXJ_TN$b;55Z7GdnKn0o(@ys#ElaXv-WLc*x9tXhdID znl{}rvr$~qXhnqto-ngL1;tCHsdGa!+X)Qd9UB%+;@hjaW9}82M(Co+0ukYlxo&Akr5+h>qw(o{PUnP%Y(`+4~o2I^-8KYX)cT2 zq5>6Z)-}Mk0^_wD)iCrRk6GsnS5Xe${m5h1(HwPJ5&wT7$?@8uaG!T%dG)YWw|B|$ z0aUL4qLI`E+>d*9H`hBrc}(ISqP%TpQ@)j3=8t>Yf$DDPL1mT)m02ECW_eJV8AlSi>i_@%07*qoM6N<$f>=LyD*ylh literal 0 HcmV?d00001 diff --git a/src/assets/tabbar/menu-active.png b/src/assets/tabbar/menu-active.png new file mode 100644 index 0000000000000000000000000000000000000000..44518b1340361e07d727c2a632ae09601636c2a8 GIT binary patch literal 875 zcmeAS@N?(olHy`uVBq!ia0vp^-XP4u1|%)~s$Kyp&H|6fVg?31We{epSZZGe6qGD+ zjVKAuPb(=;EJ|f4FE7{2%*!rLPAo{(%P&fw{mw>;fr06Vr;B4q#hkZutTRLcMcVdH z*057(<#@zwSjrTo>8Tv$u_i~Cr8D78Q<8E=N7M}ttq3kP4=KkDS5yxkQ+l*`a>+NP z8EUR3D~>A#tIVExw_5G{yS#PJn={ki-}(RH?YVa|_iol+)g|l}zn%Mr*A5+Kz0(b+ zjUH^`$$4GIIM>bPSHt21o(UWl9D9PVvcK*7o1fBof}uck2ail<)erX*GB-~PO?-Pm z^nuxieB)x)lR^^<6Sh2ASQ$E3PjbKbj(EenzM*$N_(T~yX}qf7oU^L<4_nCAw`@L) zQJZ{2d*s(htUr*@)6+1kyJ=O5lWrIuG~^ zCM7*u1GHQ*!RYFr$dgR(7_+C&I6eZ%Bc>1oBWpZo$$Q2@d~5m z$*g@AeSUtM*n-%fsA&IO8tu1f(&J4$Fi#3-y-vTRRb^f+yKvJ!^|gyk@9&ziw{NY& z>e)A6bL2j;3x6XoJn`nFzq_N(m?|rsR{h=HdvmUO!O|u25h^)LRi16*_`-f|$ILkk zuFhR>IUw{u1MlU{0`1pb%ls2EW#!aXFPh~Zdt!}B#I#j)EcevbES(t{`uEDgJ=-E? zU-De==B%aJ{)X4GCkzuOEnUTZV6Ds6HBZ}C)xC7+>$I9~-QW1~MCqERk{?ta{@H4H zI_T>DHTNEy2=AAf$1LpXc0Ta6)2<&D`#EBm!<4Rkl-|J|^C~pZAtLzJGD#c8JZ<)3XnY)N{- z^1&%|dQz(R8P*<2Hohyo9s86Pt@2j7wCcl7mPG+qjo%*YI3Z#XXMT9UrYSIWz`~Gp z=E^$Htv+8DrK`VtzbdKm(=IV5KC!R%9z4hVo#AN@X!?JKU0Yn5wms=@1ZETlPgg&e IbxsLQ06lDm$^ZZW literal 0 HcmV?d00001 diff --git a/src/assets/tabbar/menu.png b/src/assets/tabbar/menu.png new file mode 100644 index 0000000000000000000000000000000000000000..9c70f5c7e6ef3380278e3029b86099fd67ef6d77 GIT binary patch literal 987 zcmeAS@N?(olHy`uVBq!ia0vp^-XP4u1|%)~s$Kyp&H|6fVg?31We{epSZZGe6qGD+ zjVKAuPb(=;EJ|f4FE7{2%*!rLPAo{(%P&fw{mw>;fq^;0)5S5QV$R!H_8B6MBJKOt z4V9|8{&O9Cq~glOEj@Kb#?m9_4!LoAPPoA#c8f!5qX27Q$OaLg4#wO!EE8F{1(n=( z3vAfvr6}m@q9WCM{*j--^tpR$w_BHQpZ+sp_RO1q_x{c+&(AA&3FTBtc3sSULfCOy zqrz#238@Mvj4oVz!St%PV+|`GgLR`{g7OEi(EPC5<&h_ZCYn8vxWFuv_VW3^Nlz?v zb-i6!Ua;yh-@YuTKT${UCF?i0lHQfC5{~@vJy3f5q28)j&$mck6`07Ez;Pq}?)A=9 zVRsuC9hA2*9{;f@c@NW39ivrOszrWC1v~pn>VD7GP+H!geqh&{{<}fnbp$Q>?i{~7 zWku>a9l@KdJdZvaZ*9>LjAXW93p>gq&Fpsh$(9x!ui)ms8ULgYI3{TMdc1odskDjL zLfm*seCYbA$CsVTYBhdsbK%{K>M#BwVo#!`b!=f)m%V%Wz)YRbMY`NC*vzbdty}Rb zXIf(A^wJX-?YM2uSn0gqv`gl#f9TihYe3PfFEi?2D(h_D;4j zdq27VfX(Tmvuhci)v!E^47;_{ zXWX;Awc9mCWl?SEnT>6(DzC0*wHxk!r!v))?+k;q)~)T+%(;K_CZ}g8MRw{rhsH9@ zt6rztmHzb2vI9n?JKnD4GB1~!@KR-?PN*zS?{+idQbOMLt(Pl|R>8I(_E83WhtMEB?$fJRNk^-a+1APOT*m z%Y+B+!PQl1cYdF78zM2v-{j-bC`xDT&oj0 zSErHO*+g-Nfn3igV(J`W!{yye~q~RG-=X{ tU22ox=-ga$I6|)F^aV&7hiLr6>f=;e`e)kHJYdFT@O1TaS?83{1OS@Zut@*_ literal 0 HcmV?d00001 diff --git a/src/assets/tabbar/orders-active.png b/src/assets/tabbar/orders-active.png new file mode 100644 index 0000000000000000000000000000000000000000..d8ce51d09e8674538219a3c13c86319e6b09ad0d GIT binary patch literal 776 zcmeAS@N?(olHy`uVBq!ia0vp^-XP4u1|%)~s$Kyp&H|6fVg?31We{epSZZGe6qGD+ zjVKAuPb(=;EJ|f4FE7{2%*!rLPAo{(%P&fw{mw>;fq`kNr;B4q#hkZuY`cX6McU>I z-${#<=GH!Vw&_;q)ZRrpw>Y|gi08c7{)s)}$HnM~U(83`tfdbI30RB9NIOnj8?xp~ zOt<9pH7Q1)?^zpm?&F`6w9I18=R1?{a6a){GR5Go#F^aO$fQul9|r(-*s2_z}uyVEm?by z^L^OUZnN^-=F86W1UKA0dRTE+;jAnrFUe~c*~P0)35WdM`lvmK@wCte9jXy8ex+|y z+s9O0D`J#x^)*22b)eVFs>Hsf2j!g+b~IkPTc9LZ*z?N&@9A^Lr(8OEU)*?N=<~ZX z0^jXFx!~g=pX1Qb-F52My@LACJ^OQHUhH1I=5E{XbmgQ=eN}#1nT0=1>Mn*}o89*N z^?|n?H_i(Ssy9YQF4dJ||JChM4l=B*p9GYtD3YA^s{E9Tr1rEV=v#<4Z06LGntrlO9bxy zmGJ1aSxV&A4Z#NiwAXmY($4A$w oE9GzgkL?Q^QaK~0fr$h9ZV^=(^b literal 0 HcmV?d00001 diff --git a/src/assets/tabbar/orders.png b/src/assets/tabbar/orders.png new file mode 100644 index 0000000000000000000000000000000000000000..1c43443d58573f73734849092219e4a70e2df76f GIT binary patch literal 1074 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 bD?002t}1^@s6I8J)%00009a7bBm001r{ z001r{0eGc9b^rhX8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H12Ej>0 zK~#90?VM|fRaF$ne{05c9N*@f%rv!v%*>KZBOisNB^8A9L86C6h7@7hm!dDFm{Ng) zR0@LCM4D1YT49nQVLp>AEip5#Nz2jF8OL!}ANCcd;jDAd*>~T^!2QGdviDv8wf6t) zv-duGuX9CJDI*ywiXA{(LRqX7D2tT>WwBDAELIA%E2eW1sRG6T*8o=m1AtCI70>{j z0geI(fPKKXs@hPTXh90SbP$nVzyrX&z*w9xNznjo1=a#Js(K=PgfURnf?U8zpay6J zG{AKZcn`R)U~MRXNP~b6f#yIWwZ58x)xhO#RxI4)F&8)Pl;181ZfCIn_!1X{yf=7B3@FMV2LjK=@YfJJm1O@}g5;S5Pa5tV~3n0LBV0!{z zM}aF!N-Ur&us=)Sb-=7_y(opx3gB_zR2IKK09{H+toO47yd4-4>JGQ^JrvlL#s7OH zAr|mpmOwWGo%117ix|29pJ$0Lk$%}}*50d4}S@+nk{SlR=h#l%tz^eCoSug3(p zFVt9(BA#wp#?Hk>5ew)GoHc@~2SyZ9s1|XJ#JzAw#dQYg?aQ6Ze%2hIqfs|sRrlt= z?G07k11vPEt8sCA!D|ICA{D@4;IfG7BfxMi=Dw3iN8o4N{#a`q!L7ZT)AIWEtVu)* z1+b`?LIJ31J+R2A9thm#!|N;7G^4y8Sn0_b8q0CddibCC{*<{ zu->Si?8BK_ED`C1dtr{kMxP+^hz&;hND-+{OXkzFhR4`#@!-oRzB0-yfMIFLe8q}F zJ@AVMUp{dNx8{n1)eaLrVqI#KANHA!^9fbGfLr23!D@#IAF;X^(x*6rEp9CMV>WuQ9aYh+& zCWy#OBC;8GNbzP$-){jYMPze^XF>w;tg*>zhYgRn`YA-e(KiF#4V&4x*|N3G1>lB+ zes9eDK5B>K3B#tR5vu}s6k^xmJEL51+apofL3B<-1yCa*{o@>p$N=2Ye^k6xxNYkw zSn+_}4jZ0(M%HoH%f{~o*kjlzZhD_)*xd#E8e_W?|fZ`d63YPY9Y9~nV>A7e8$ zrok7l{kU;#0d9QCc4DNs!&J-XkA}^*gaH8vHIZF zRZ)SgiLvVh><%Q<4xl>5*IL8wJf67_USef}`P2yJ0&sJTT~FYf9EI9S%t;M!3wDar zdha&pAlBq8cfB&kwivCfBmU5JV!_4A1hyk4s09h^N8?Vjtw*}$ zqf-NnO2GMQ4A1sl+M83#k%&wNzA&m4n4zj4B;e_d+t(ip^v6A_f8mxWTY)cC^>_lF z8MxF*F@7>xRX1hhF_DYX8KG;i?_?t|Jy#zI$gw`|&}44{ zpU(zsW8gdeN`l}UGQxT#wc!Tu$4Hh1y(nn=LXu?~vnW9$6jgOX?g{BH^ep%__WNMpJk7kli9YRCU`t8P zh9WW=7-v+kQq|f}zFI=v4(hu`^>`5(6UtY}|8;mercOj;UO-=IFb9|!f+)xUpUFiy zgh$R(0dOAo#_(INM4=wT*_5VG0GHr)L2^dUJxfG7;1V}dC8iY^CveLa>m!0h2+^}< zP})KP^aAeBl_Z2%vAI + + + + + + + {{ item.text }} + + + + + + + + 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 @@