小程序页面优化

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,37 +183,54 @@ 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)}>
-                  <ProductCarousel images={images} alt={p.name} variant="home" />
-                  <View className="home-product-body">
+                <View
+                  className="home-product-card-inner"
+                  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 className="home-product-actions">
+                      {p.allowOnSitePickup ? (
+                        <Text
+                          className="home-pickup-btn"
+                          onClick={(e) => {
+                            e.stopPropagation?.();
+                            void goOnSitePickup(p.id);
+                          }}
+                        >
+                          现场取货
+                        </Text>
+                      ) : null}
+                      <Text
+                        className="home-buy-btn"
+                        onClick={(e) => {
+                          e.stopPropagation?.();
+                          openProductDetail(p.id);
+                        }}
+                      >
+                        立即购买
+                      </Text>
+                    </View>
                   </View>
                 </View>
-                <View className="home-product-actions">
-                  {p.allowOnSitePickup ? (
-                    <Text
-                      className="home-pickup-btn"
-                      onClick={() => {
-                        void goOnSitePickup(p.id);
-                      }}
-                    >
-                      现场取货
-                    </Text>
-                  ) : null}
-                  <Text className="home-buy-btn" onClick={() => openProductDetail(p.id)}>
-                    立即购买
-                  </Text>
-                </View>
               </View>
             );
           })}