142 lines
4.5 KiB
TypeScript
142 lines
4.5 KiB
TypeScript
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 AppToast from '../components/AppToast';
|
|
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 | null;
|
|
carouselUrls?: string[] | null;
|
|
detailImageUrls?: string[] | null;
|
|
aromaType: string;
|
|
status: string;
|
|
};
|
|
|
|
type City = {
|
|
id: string;
|
|
code: string;
|
|
name: string;
|
|
status: string;
|
|
};
|
|
|
|
const AROMA_TABS = [
|
|
{ key: 'QINGXIANG', label: '清香型', open: true },
|
|
{ key: 'JIANGXIANG', label: '酱香型', open: false },
|
|
{ key: 'NONGXIANG', label: '浓香型', open: false },
|
|
];
|
|
|
|
const CITY_STORAGE_KEY = 'dukang_selected_city';
|
|
|
|
export default function HomePage() {
|
|
const [tab, setTab] = useState('QINGXIANG');
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [cities, setCities] = useState<City[]>([]);
|
|
const [cityCode, setCityCode] = useState(() => localStorage.getItem(CITY_STORAGE_KEY) || '410100');
|
|
const [toast, setToast] = useState('');
|
|
|
|
useEffect(() => {
|
|
request<City[]>('USER_H5', '/catalog/cities').then((list) => {
|
|
setCities(list);
|
|
if (!list.some((c) => c.code === cityCode) && list[0]) {
|
|
setCityCode(list[0].code);
|
|
}
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!cityCode) return;
|
|
localStorage.setItem(CITY_STORAGE_KEY, cityCode);
|
|
request<Product[]>('USER_H5', `/catalog/products?cityCode=${encodeURIComponent(cityCode)}`).then(setProducts);
|
|
}, [cityCode]);
|
|
|
|
function showToast(message: string) {
|
|
setToast(message);
|
|
window.setTimeout(() => setToast(''), 2200);
|
|
}
|
|
|
|
function onAromaTabClick(key: string, open: boolean) {
|
|
if (!open) {
|
|
showToast('暂未开放');
|
|
return;
|
|
}
|
|
setTab(key);
|
|
}
|
|
|
|
const selectedCity = cities.find((c) => c.code === cityCode);
|
|
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>
|
|
<select
|
|
value={cityCode}
|
|
onChange={(e) => setCityCode(e.target.value)}
|
|
style={{ border: 'none', background: 'transparent', font: 'inherit', color: 'inherit' }}
|
|
>
|
|
{cities.map((c) => (
|
|
<option key={c.code} value={c.code}>{c.name}</option>
|
|
))}
|
|
{!cities.length && <option value={cityCode}>{selectedCity?.name ?? '郑州市'}</option>}
|
|
</select>
|
|
</div>
|
|
)}
|
|
/>
|
|
|
|
<nav className="home-aroma-nav">
|
|
{AROMA_TABS.map((t) => (
|
|
<button
|
|
key={t.key}
|
|
type="button"
|
|
className={`home-aroma-tab${tab === t.key ? ' active' : ''}${!t.open ? ' muted' : ''}`}
|
|
onClick={() => onAromaTabClick(t.key, t.open)}
|
|
>
|
|
{t.label}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
<section className="home-product-list">
|
|
{!onSale && <div className="home-empty">该香型暂未上线，敬请期待</div>}
|
|
{onSale &&
|
|
filtered.map((p) => (
|
|
<article key={p.id} className="home-product-card">
|
|
<Link to={`/product/${p.id}`} className="home-product-link">
|
|
<ProductCarousel images={getProductImages(p)} 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} label="好客权益" />
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
<div className="home-product-actions">
|
|
<Link to={`/product/${p.id}`} className="home-buy-btn">
|
|
立即购买
|
|
</Link>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</section>
|
|
|
|
<AppToast message={toast} />
|
|
</div>
|
|
);
|
|
}
|