125 lines
4.4 KiB
TypeScript
125 lines
4.4 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { View, Text, Image } from '@tarojs/components';
|
|
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, getProductImages } from '../../lib/product-images';
|
|
|
|
type Product = {
|
|
id: string;
|
|
name: string;
|
|
subtitle?: string;
|
|
price: number;
|
|
benefitDisplay?: number;
|
|
mainImageUrl?: string | null;
|
|
carouselUrls?: string[] | null;
|
|
aromaType: string;
|
|
};
|
|
|
|
const AROMA_TABS = [
|
|
{ key: 'QINGXIANG', label: '清香型', open: true },
|
|
{ key: 'JIANGXIANG', label: '酱香型', open: false },
|
|
{ key: 'NONGXIANG', label: '浓香型', open: false },
|
|
] as const;
|
|
|
|
export default function HomePage() {
|
|
const [tab, setTab] = useState('QINGXIANG');
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const cityCode = FALLBACK_CITY_CODE;
|
|
|
|
useDidShow(() => {
|
|
syncTabBarSelected(0);
|
|
});
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
request<Product[]>(`/catalog/products?cityCode=${encodeURIComponent(cityCode)}`)
|
|
.then((list) => setProducts(Array.isArray(list) ? list : []))
|
|
.catch((e) => toast(e instanceof Error ? e.message : '加载失败'))
|
|
.finally(() => setLoading(false));
|
|
}, [cityCode]);
|
|
|
|
function onAromaTabClick(key: string, open: boolean) {
|
|
if (!open) {
|
|
toast('暂未开放');
|
|
return;
|
|
}
|
|
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 (
|
|
<PageShell variant="tab" className="home-page">
|
|
<TabMainHeader
|
|
title="杜康好客"
|
|
extra={(
|
|
<View className="tab-main-header__extra-inner">
|
|
<View className="tab-main-city-pin" />
|
|
<Text className="tab-main-city-label">郑州市</Text>
|
|
</View>
|
|
)}
|
|
/>
|
|
|
|
<View className="home-aroma-nav">
|
|
{AROMA_TABS.map((t) => (
|
|
<Text
|
|
key={t.key}
|
|
className={`home-aroma-tab${tab === t.key ? ' home-aroma-tab--active' : ''}${!t.open ? ' home-aroma-tab--muted' : ''}`}
|
|
onClick={() => onAromaTabClick(t.key, t.open)}
|
|
>
|
|
{t.label}
|
|
</Text>
|
|
))}
|
|
</View>
|
|
|
|
<View className="home-product-list">
|
|
{loading ? <View className="home-empty">加载中…</View> : null}
|
|
{!loading && !onSale ? <View className="home-empty">该香型暂未上线，敬请期待</View> : null}
|
|
{!loading && onSale && filtered.length === 0 ? (
|
|
<View className="home-empty">暂无商品</View>
|
|
) : null}
|
|
{!loading &&
|
|
onSale &&
|
|
filtered.map((p) => {
|
|
const images = getProductImages(p);
|
|
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-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={() => openProductDetail(p.id)}>
|
|
立即购买
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
|
|
{shouldRenderPageTabBar() ? <UserTabBar selected={0} /> : null}
|
|
</PageShell>
|
|
);
|
|
}
|