init

2026-06-30 10:33:56 +08:00
commit 6e047dc0a5
607 changed files with 65966 additions and 0 deletions
@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { request } from '../lib/api';
+import ProductCarousel from '../components/ProductCarousel';
+import TabMainHeader from '../components/TabMainHeader';
+import { getProductImages } from '../lib/product-images';
+import CouponBadge from '@dukang/shared-ui/CouponBadge';
+
+type Product = {
+  id: string;
+  name: string;
+  subtitle: string;
+  price: number;
+  benefitDisplay: number;
+  mainImageUrl: string;
+  carouselUrls?: string[] | null;
+  aromaType: string;
+  status: string;
+};
+
+const AROMA_TABS = [
+  { key: 'QINGXIANG', label: '清香型', disabled: false },
+  { key: 'JIANGXIANG', label: '酱香型', disabled: true },
+  { key: 'NONGXIANG', label: '浓香型', disabled: true },
+];
+
+export default function HomePage() {
+  const [tab, setTab] = useState('QINGXIANG');
+  const [products, setProducts] = useState<Product[]>([]);
+
+  useEffect(() => {
+    request<Product[]>('USER_H5', '/catalog/products').then(setProducts);
+  }, []);
+
+  const filtered = products.filter((p) => p.aromaType === tab);
+  const onSale = tab === 'QINGXIANG';
+
+  return (
+    <div className="page home-page">
+      <TabMainHeader
+        title="杜康好客"
+        extra={(
+          <div className="tab-main-city">
+            <span className="material-symbols-outlined">location_on</span>
+            <span>郑州市</span>
+          </div>
+        )}
+      />
+
+      <nav className="home-aroma-nav">
+        {AROMA_TABS.map((t) => (
+          <button
+            key={t.key}
+            type="button"
+            disabled={t.disabled}
+            className={`home-aroma-tab${tab === t.key ? ' active' : ''}${t.disabled ? ' disabled' : ''}`}
+            onClick={() => !t.disabled && setTab(t.key)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </nav>
+
+      <section className="home-product-list">
+        {!onSale && <div className="home-empty">该香型暂未上线，敬请期待</div>}
+        {onSale &&
+          filtered.map((p, index) => (
+            <article key={p.id} className="home-product-card">
+              <ProductCarousel images={getProductImages(index)} alt={p.name} />
+              <div className="home-product-body">
+                <div className="home-product-row">
+                  <h3 className="home-product-name">{p.name}</h3>
+                  <span className="home-product-price">¥{p.price}</span>
+                </div>
+                <p className="home-product-sub">{p.subtitle}</p>
+                <div className="home-product-footer">
+                  <CouponBadge amount={p.benefitDisplay} />
+                  <Link to={`/product/${p.id}`} className="home-buy-btn">
+                    立即购买
+                  </Link>
+                </div>
+              </div>
+            </article>
+          ))}
+      </section>
+    </div>
+  );
+}