登录页面

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

@@ -1,11 +1,13 @@
 import { useEffect, useState } from 'react';
 import { View, Text, Image } from '@tarojs/components';
-import { useDidShow } from '@tarojs/taro';
+import Taro, { useDidShow } 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 { request, toast } from '../../lib/api';
-import { FALLBACK_CITY_CODE, getProductMainImage } from '../../lib/product-images';
+import { FALLBACK_CITY_CODE, getProductImages } from '../../lib/product-images';
 
 type Product = {
   id: string;
@@ -50,15 +52,19 @@ export default function HomePage() {
     setTab(key);
   }
 
+  function openProductDetail(id: string) {
+    Taro.navigateTo({ url: `/pages/product-detail/index?id=${id}` });
+  }
+
   const filtered = products.filter((p) => p.aromaType === tab);
   const onSale = tab === 'QINGXIANG';
 
   return (
-    <View className="u-page u-page--tab home-page">
+    <PageShell variant="tab" className="home-page">
       <TabMainHeader
         title="杜康好客"
         extra={(
-          <View style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+          <View className="tab-main-header__extra-inner">
             <View className="tab-main-city-pin" />
             <Text className="tab-main-city-label">郑州市</Text>
           </View>
@@ -86,29 +92,24 @@ export default function HomePage() {
         {!loading &&
           onSale &&
           filtered.map((p) => {
-            const cover = getProductMainImage(p);
+            const images = getProductImages(p);
             return (
               <View key={p.id} className="home-product-card">
-                {cover ? (
-                  <Image className="home-product-cover" src={cover} mode="aspectFill" />
-                ) : (
-                  <View className="home-product-cover--empty" />
-                )}
-                <View className="home-product-body">
-                  <View className="home-product-row">
-                    <Text className="home-product-name">{p.name}</Text>
-                    <Text className="home-product-price">¥{Number(p.price).toFixed(2)}</Text>
-                  </View>
-                  {p.subtitle ? <Text className="home-product-sub">{p.subtitle}</Text> : null}
-                  <View className="home-product-footer">
-                    <CouponBadge amount={p.benefitDisplay ?? p.price} label="好客权益" />
+                <View onClick={() => openProductDetail(p.id)}>
+                  <ProductCarousel images={images} alt={p.name} variant="home" />
+                  <View className="home-product-body">
+                    <View className="home-product-row">
+                      <Text className="home-product-name">{p.name}</Text>
+                      <Text className="home-product-price">¥{Number(p.price).toFixed(2)}</Text>
+                    </View>
+                    {p.subtitle ? <Text className="home-product-sub">{p.subtitle}</Text> : null}
+                    <View className="home-product-footer">
+                      <CouponBadge amount={p.benefitDisplay ?? p.price} label="好客权益" />
+                    </View>
                   </View>
                 </View>
                 <View className="home-product-actions">
-                  <Text
-                    className="home-buy-btn"
-                    onClick={() => toast('详情页开发中')}
-                  >
+                  <Text className="home-buy-btn" onClick={() => openProductDetail(p.id)}>
                     立即购买
                   </Text>
                 </View>
@@ -118,6 +119,6 @@ export default function HomePage() {
       </View>
 
       {shouldRenderPageTabBar() ? <UserTabBar selected={0} /> : null}
-    </View>
+    </PageShell>
   );
 }