小程序页面优化

apps/mini-user/src/components/CouponBadge.tsx

@@ -7,10 +7,11 @@ type CouponBadgeProps = {
 
 /** Taro 友好版权益角标（对齐 shared-ui CouponBadge） */
 export default function CouponBadge({ amount, label = '好客权益' }: CouponBadgeProps) {
+  const n = Number(amount);
+  const display = Number.isFinite(n) ? (Number.isInteger(n) ? String(n) : n.toFixed(0)) : String(amount);
   return (
     <Text className="coupon-badge">
-      ¥{amount}
+      享 ¥{display} {label}
-      {label}
     </Text>
   );
 }

apps/mini-user/src/components/PageShell.tsx

@@ -26,6 +26,7 @@ export default function PageShell({
     'page-shell',
     `page-shell--${variant}`,
     hasFixedFooter ? 'page-shell--fixed-footer' : '',
+    variant === 'tab' && process.env.TARO_ENV === 'weapp' ? 'page-shell--native-tabbar' : '',
     className,
   ]
     .filter(Boolean)

apps/mini-user/src/pages/home/index.tsx

@@ -4,19 +4,19 @@ import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro';
 import PageShell from '../../components/PageShell';
 import TabMainHeader from '../../components/TabMainHeader';
 import CouponBadge from '../../components/CouponBadge';
-import ProductCarousel from '../../components/ProductCarousel';
 import UserTabBar, { shouldRenderPageTabBar, syncTabBarSelected } from '../../components/UserTabBar';
 import { goLogin } from '../../lib/auth-nav';
 import { isLoggedIn, request, toast } from '../../lib/api';
 import { ensurePayReady } from '../../lib/pay-ready';
 import { capturePromoSceneAndTouchScan } from '../../lib/promo';
-import { getProductImages } from '../../lib/product-images';
+import { getProductMainImage } from '../../lib/product-images';
 import { getCityCodeForCatalog, resolveUserCity } from '../../lib/user-location';
 
 type Product = {
   id: string;
   name: string;
   subtitle?: string;
+  spec?: string;
   price: number;
   benefitDisplay?: number;
   mainImageUrl?: string | null;
@@ -32,8 +32,8 @@ type MiniHomeConfig = {
 
 const AROMA_TABS = [
   { key: 'QINGXIANG', label: '清香型' },
-  { key: 'JIANGXIANG', label: '酱香型' },
   { key: 'NONGXIANG', label: '浓香型' },
+  { key: 'JIANGXIANG', label: '酱香型' },
 ] as const;
 
 export default function HomePage() {
@@ -143,21 +143,6 @@ export default function HomePage() {
     <PageShell variant="tab" className="home-page no-tab-header">
       <TabMainHeader title="杜康好客" />
 
-      <View className="home-aroma-nav">
-        <View className="home-aroma-tabs">
-          {availableAromas.map((t) => (
-            <Text
-              key={t.key}
-              className={`home-aroma-tab${tab === t.key ? ' home-aroma-tab--active' : ''}`}
-              onClick={() => setTab(t.key)}
-            >
-              {t.label}
-            </Text>
-          ))}
-        </View>
-        <Text className="home-aroma-city">{displayCity}</Text>
-      </View>
-
       {banners.length > 0 ? (
         <View className="home-promo-banner">
           <Swiper
@@ -176,6 +161,21 @@ export default function HomePage() {
         </View>
       ) : null}
 
+      <View className="home-aroma-nav">
+        <View className="home-aroma-tabs">
+          {availableAromas.map((t) => (
+            <Text
+              key={t.key}
+              className={`home-aroma-tab${tab === t.key ? ' home-aroma-tab--active' : ''}`}
+              onClick={() => setTab(t.key)}
+            >
+              {t.label}
+            </Text>
+          ))}
+        </View>
+        <Text className="home-aroma-city">{displayCity}</Text>
+      </View>
+
       <View className="home-product-list">
         {loading ? <View className="home-empty">加载中…</View> : null}
         {!loading && products.length === 0 ? (
@@ -183,38 +183,55 @@ export default function HomePage() {
         ) : null}
         {!loading &&
           filtered.map((p) => {
-            const images = getProductImages(p);
+            const thumb = getProductMainImage(p);
+            const spec = p.subtitle || p.spec || '';
             return (
               <View key={p.id} className="home-product-card">
-                <View onClick={() => openProductDetail(p.id)}>
+                <View
-                  <ProductCarousel images={images} alt={p.name} variant="home" />
+                  className="home-product-card-inner"
-                  <View className="home-product-body">
+                  onClick={() => openProductDetail(p.id)}
+                >
+                  <View className="home-product-thumb-wrap">
+                    {thumb ? (
+                      <Image className="home-product-thumb" src={thumb} mode="aspectFill" />
+                    ) : (
+                      <View className="home-product-thumb home-product-thumb--empty" />
+                    )}
+                  </View>
+                  <View className="home-product-main">
                     <View className="home-product-row">
                       <Text className="home-product-name">{p.name}</Text>
-                      <Text className="home-product-price">¥{Number(p.price).toFixed(2)}</Text>
+                      <Text className="home-product-price">¥{Number(p.price).toFixed(0)}</Text>
                     </View>
-                    {p.subtitle ? <Text className="home-product-sub">{p.subtitle}</Text> : null}
+                    {spec ? <Text className="home-product-sub">{spec}</Text> : null}
                     <View className="home-product-footer">
                       <CouponBadge amount={p.benefitDisplay ?? p.price} label="好客权益" />
                     </View>
-                  </View>
-                </View>
                     <View className="home-product-actions">
                       {p.allowOnSitePickup ? (
                         <Text
                           className="home-pickup-btn"
-                      onClick={() => {
+                          onClick={(e) => {
+                            e.stopPropagation?.();
                             void goOnSitePickup(p.id);
                           }}
                         >
                           现场取货
                         </Text>
                       ) : null}
-                  <Text className="home-buy-btn" onClick={() => openProductDetail(p.id)}>
+                      <Text
+                        className="home-buy-btn"
+                        onClick={(e) => {
+                          e.stopPropagation?.();
+                          openProductDetail(p.id);
+                        }}
+                      >
                         立即购买
                       </Text>
                     </View>
                   </View>
+                </View>
+              </View>
             );
           })}
       </View>

apps/mini-user/src/styles/home.css

@@ -31,58 +31,8 @@
   background: var(--color-background);
 }
 
-.home-aroma-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px var(--space-page);
-  background: rgba(250, 249, 247, 0.95);
-  border-bottom: 1px solid var(--color-surface-container);
-  position: sticky;
-  top: var(--nav-bar-height, 56px);
-  z-index: 40;
-}
-
-.home-aroma-tabs {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-  min-width: 0;
-}
-
-.home-aroma-city {
-  flex-shrink: 0;
-  font-size: 11px;
-  color: var(--color-subtle-gray);
-  pointer-events: none;
-  max-width: 72px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.home-aroma-tab {
-  border: none;
-  background: transparent;
-  padding: 6px 12px;
-  font-family: var(--font-headline);
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  color: var(--color-subtle-gray);
-  border-bottom: 2px solid transparent;
-  white-space: nowrap;
-}
-
-.home-aroma-tab--active {
-  color: var(--color-heritage-red);
-  border-bottom-color: var(--color-heritage-red);
-}
-
 .home-promo-banner {
-  margin: 16px var(--space-page) 0;
+  margin: 12px var(--space-page) 0;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--color-card);
@@ -101,8 +51,184 @@
   display: block;
 }
 
+.home-aroma-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 4px;
+  padding: 6px var(--space-page) 4px;
+  background: transparent;
+  border-bottom: none;
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  background: rgba(250, 249, 247, 0.96);
+}
+
+.home-aroma-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.home-aroma-city {
+  flex-shrink: 0;
+  font-size: 11px;
+  color: var(--color-subtle-gray);
+  pointer-events: none;
+  max-width: 72px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.home-aroma-tab {
+  border: none;
+  background: transparent;
+  padding: 4px 10px;
+  font-family: var(--font-headline);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  color: var(--color-subtle-gray);
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+}
+
+.home-aroma-tab--active {
+  color: var(--color-heritage-red);
+  border-bottom-color: var(--color-heritage-red);
+}
+
+.home-product-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 8px var(--space-page) 12px;
+}
+
+.home-product-card {
+  background: var(--color-card);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: var(--shadow-card);
+}
+
+.home-product-card-inner {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  padding: 10px;
+}
+
+.home-product-thumb-wrap {
+  flex-shrink: 0;
+  width: 88px;
+  height: 88px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--color-surface-container);
+}
+
+.home-product-thumb {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.home-product-thumb--empty {
+  background: var(--color-surface-container);
+}
+
+.home-product-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.home-product-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.home-product-name {
+  font-family: var(--font-headline);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: var(--color-on-surface);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.home-product-price {
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 20px;
+  color: var(--color-heritage-red);
+  flex-shrink: 0;
+}
+
+.home-product-sub {
+  font-size: 11px;
+  color: var(--color-subtle-gray);
+  line-height: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.home-product-footer {
+  margin-top: 2px;
+}
+
+.home-product-actions {
+  margin-top: auto;
+  padding-top: 4px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.home-pickup-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 10px;
+  border-radius: var(--radius-full);
+  background: #2e7d32;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  border: none;
+}
+
+.home-buy-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 12px;
+  border-radius: var(--radius-full);
+  background: var(--color-heritage-red);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  border: none;
+}
+
 .home-promo-footer {
-  margin: 0 var(--space-page) 16px;
+  margin: 0 var(--space-page) 8px;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--color-card);
@@ -117,162 +243,24 @@
   object-fit: cover;
 }
 
-.home-product-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 16px var(--space-page);
-}
-
-.home-product-card {
-  background: var(--color-card);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  box-shadow: var(--shadow-card);
-}
-
-.home-carousel-wrap {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 1;
-  background: var(--color-surface-container);
-  overflow: hidden;
-}
-
-.home-carousel {
-  width: 100%;
-  height: 100%;
-}
-
-.home-carousel-item,
-.home-carousel-image,
-.home-carousel-placeholder {
-  width: 100%;
-  height: 100%;
-}
-
-.home-carousel-placeholder {
-  background: var(--color-surface-container);
-}
-
-.home-carousel-dots {
-  position: absolute;
-  bottom: 12px;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-}
-
-.home-carousel-dot {
-  height: 4px;
-  width: 6px;
-  margin: 0 3px;
-  border-radius: 999px;
-  background: rgba(153, 153, 153, 0.35);
-}
-
-.home-carousel-dot--active {
-  width: 20px;
-  background: var(--color-heritage-red);
-}
-
-.home-product-body {
-  padding: var(--space-gutter);
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.home-product-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.home-product-name {
-  font-family: var(--font-headline);
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 24px;
-  color: var(--color-on-surface);
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.home-product-price {
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--color-heritage-red);
-  flex-shrink: 0;
-}
-
-.home-product-sub {
-  font-size: 13px;
-  color: var(--color-subtle-gray);
-  line-height: 18px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.home-product-footer {
-  margin-top: 4px;
-}
-
-.home-product-actions {
-  padding: 0 var(--space-gutter) var(--space-gutter);
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.home-pickup-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 16px;
-  border-radius: var(--radius-full);
-  background: #2e7d32;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 600;
-  border: none;
-}
-
-.home-buy-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px 16px;
-  border-radius: var(--radius-full);
-  background: var(--color-heritage-red);
-  color: #fff;
-  font-size: 13px;
-  font-weight: 600;
-  border: none;
-}
-
 .home-empty {
   text-align: center;
-  padding: 48px 24px;
+  padding: 32px 24px;
   color: var(--color-subtle-gray);
-  font-size: 14px;
+  font-size: 13px;
 }
 
-.coupon-badge {
+.home-page .coupon-badge {
   position: relative;
   display: inline-flex;
   align-items: center;
   background: var(--color-aged-amber);
   color: var(--color-on-secondary-container);
-  padding: 4px 12px;
+  padding: 2px 8px;
   border-radius: 2px;
   font-family: var(--font-label);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.02em;
+  line-height: 16px;
 }

apps/mini-user/src/styles/nav-bar.css

@@ -10,6 +10,11 @@
   padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
 }
 
+/* 小程序原生 tabBar 页面窗口已扣除底栏，避免滑到底多余空白 */
+.page-shell--tab.page-shell--native-tabbar {
+  padding-bottom: 12px;
+}
+
 .page-shell--scroll,
 .page-shell--sub,
 .page-shell--plain {