567 lines
19 KiB
TypeScript
567 lines
19 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from 'react';
|
||
import { View, Text, Image, Input } from '@tarojs/components';
|
||
import Taro, { useDidShow, usePullDownRefresh, useShareAppMessage, useShareTimeline } from '@tarojs/taro';
|
||
import PageShell from '../../components/PageShell';
|
||
import TabMainHeader from '../../components/TabMainHeader';
|
||
import WechatShareReady from '../../components/WechatShareReady';
|
||
import RegionPicker from '../../components/RegionPicker';
|
||
import CategoryPicker, {
|
||
EMPTY_CATEGORY,
|
||
formatCategoryLabel,
|
||
type CategorySelection,
|
||
type StoreCategoryNode,
|
||
} from '../../components/CategoryPicker';
|
||
import {
|
||
DEFAULT_REGION,
|
||
formatRegionLabel,
|
||
matchesRegionFilter,
|
||
type RegionSelection,
|
||
} from '../../lib/region-data';
|
||
import UserTabBar, { shouldRenderPageTabBar, syncTabBarSelected } from '../../components/UserTabBar';
|
||
import {
|
||
getCityCodeForCatalog,
|
||
readCachedUserCoords,
|
||
resolveUserCity,
|
||
toCityWideRegion,
|
||
type UserCoords,
|
||
} from '../../lib/user-location';
|
||
import { FALLBACK_CITY_CODE } from '../../lib/product-images';
|
||
import { formatDistanceMeters } from '../../lib/geo';
|
||
import { getToken, request, toast } from '../../lib/api';
|
||
import {
|
||
getStoresListCache,
|
||
isStoresSessionBootstrapped,
|
||
markStoresSessionBootstrapped,
|
||
patchStoresFilterCache,
|
||
setStoresListCache,
|
||
type StoreSortKey,
|
||
} from '../../lib/stores-session';
|
||
import {
|
||
buildSceneSharePayload,
|
||
toWeappShareMessage,
|
||
toWeappShareTimeline,
|
||
} from '../../lib/wechat-share';
|
||
import BenefitSloganBar from '../../components/BenefitSloganBar';
|
||
import { storeCategoryTags, storeLeafCategoryIds, storeStarCount } from '../../lib/store-display';
|
||
import openBadgeImg from '../../assets/icons/store-open-badge.png';
|
||
|
||
type Store = {
|
||
id: string;
|
||
name: string;
|
||
address?: string;
|
||
province?: string;
|
||
cityName?: string;
|
||
district?: string;
|
||
coverUrl?: string | null;
|
||
openTime?: string | null;
|
||
closeTime?: string | null;
|
||
openTime2?: string | null;
|
||
closeTime2?: string | null;
|
||
avgPrice?: number | null;
|
||
status?: string;
|
||
categoryId?: string | null;
|
||
category?: {
|
||
id?: string;
|
||
name?: string;
|
||
parentId?: string | null;
|
||
parent?: { name?: string } | null;
|
||
} | null;
|
||
categories?: {
|
||
id?: string;
|
||
name?: string;
|
||
parentId?: string | null;
|
||
parent?: { name?: string } | null;
|
||
}[] | null;
|
||
tags?: unknown;
|
||
rating?: number | string | null;
|
||
latitude?: number | string | null;
|
||
longitude?: number | string | null;
|
||
distanceMeters?: number | null;
|
||
redeemCount?: number | null;
|
||
};
|
||
|
||
const STORE_SORT_OPTIONS: { key: StoreSortKey; label: string }[] = [
|
||
{ key: 'nearby', label: '附近优先' },
|
||
{ key: 'rating', label: '好评优先' },
|
||
{ key: 'redeem', label: '核销次数' },
|
||
];
|
||
|
||
function makeCityKey(region: Pick<RegionSelection, 'province' | 'city'>): string {
|
||
return `${region.province}|${region.city}`;
|
||
}
|
||
|
||
/**
|
||
* 定位城市若未开城，接口会 fallback 到郑州 cityCode；
|
||
* 筛选器必须与真实拉取城市一致，否则列表被客户端滤空。
|
||
*/
|
||
function regionForCatalogFetch(resolved: {
|
||
openCity: boolean;
|
||
cityCode?: string;
|
||
region: RegionSelection;
|
||
}): { cityCode: string; region: RegionSelection } {
|
||
const cityCode = getCityCodeForCatalog(resolved);
|
||
if (resolved.openCity && resolved.cityCode) {
|
||
return { cityCode, region: toCityWideRegion(resolved.region) };
|
||
}
|
||
return { cityCode: FALLBACK_CITY_CODE, region: toCityWideRegion(DEFAULT_REGION) };
|
||
}
|
||
|
||
export default function StoresPage() {
|
||
const cached = getStoresListCache();
|
||
const [stores, setStores] = useState<Store[]>(() => (cached?.items as Store[] | undefined) ?? []);
|
||
const [loading, setLoading] = useState(() => !cached && !isStoresSessionBootstrapped());
|
||
const [keywordInput, setKeywordInput] = useState(() => cached?.keywordInput ?? '');
|
||
const [keyword, setKeyword] = useState(() => cached?.keyword ?? '');
|
||
const [region, setRegion] = useState<RegionSelection>(
|
||
() => cached?.filterRegion ?? cached?.listRegion ?? DEFAULT_REGION,
|
||
);
|
||
const [regionOpen, setRegionOpen] = useState(false);
|
||
const [category, setCategory] = useState<CategorySelection>(
|
||
() => cached?.category ?? EMPTY_CATEGORY,
|
||
);
|
||
const [categoryOpen, setCategoryOpen] = useState(false);
|
||
const [categoryTree, setCategoryTree] = useState<StoreCategoryNode[]>([]);
|
||
const [sort, setSort] = useState<StoreSortKey>(() => cached?.sort ?? 'nearby');
|
||
const [sortOpen, setSortOpen] = useState(false);
|
||
const fetchCityKeyRef = useRef<string | null>(cached?.cityKey ?? null);
|
||
const fetchSeqRef = useRef(0);
|
||
const regionRef = useRef(region);
|
||
regionRef.current = region;
|
||
const regionLabel = formatRegionLabel(region);
|
||
const categoryLabel = formatCategoryLabel(category);
|
||
const sortLabel = STORE_SORT_OPTIONS.find((o) => o.key === sort)?.label ?? '附近优先';
|
||
const showBootLoading = loading && stores.length === 0;
|
||
|
||
const childIdsByParent = useMemo(() => {
|
||
const map = new Map<string, string[]>();
|
||
for (const root of categoryTree) {
|
||
map.set(
|
||
root.id,
|
||
(root.children ?? []).map((c) => c.id),
|
||
);
|
||
}
|
||
return map;
|
||
}, [categoryTree]);
|
||
|
||
async function fetchStores(
|
||
nextCode: string,
|
||
coords: UserCoords | null,
|
||
cityKey: string,
|
||
listRegion: RegionSelection,
|
||
/** 写入会话的筛选器；默认保留用户当前选择 */
|
||
filterRegion: RegionSelection = regionRef.current,
|
||
) {
|
||
const seq = ++fetchSeqRef.current;
|
||
const qs = new URLSearchParams();
|
||
if (nextCode) qs.set('cityCode', nextCode);
|
||
if (coords) {
|
||
qs.set('lat', String(coords.latitude));
|
||
qs.set('lng', String(coords.longitude));
|
||
}
|
||
const path = qs.toString() ? `/stores?${qs}` : '/stores';
|
||
try {
|
||
const list = await request<Store[]>(path);
|
||
if (seq !== fetchSeqRef.current) return;
|
||
const items = Array.isArray(list) ? list : [];
|
||
setStores(items);
|
||
fetchCityKeyRef.current = cityKey;
|
||
const prev = getStoresListCache();
|
||
setStoresListCache({
|
||
cityKey,
|
||
cityCode: nextCode,
|
||
authKey: getToken() || '',
|
||
listRegion: toCityWideRegion(listRegion),
|
||
items,
|
||
filterRegion,
|
||
keyword: prev?.keyword ?? keyword,
|
||
keywordInput: prev?.keywordInput ?? keywordInput,
|
||
category: prev?.category ?? category,
|
||
sort: prev?.sort ?? sort,
|
||
});
|
||
} catch (e) {
|
||
if (seq !== fetchSeqRef.current) return;
|
||
toast(e instanceof Error ? e.message : '加载失败');
|
||
} finally {
|
||
if (seq === fetchSeqRef.current) setLoading(false);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 首次进入：弹窗 + 定位 + 拉列表。
|
||
* 同次再切回：只同步 tab 选中态（登录态未变）。
|
||
* 登录/退出后 token 变化：按缓存失效重新拉列表（白名单）。
|
||
*/
|
||
useDidShow(() => {
|
||
syncTabBarSelected(1);
|
||
|
||
const authKey = getToken() || '';
|
||
const cache = getStoresListCache();
|
||
if (isStoresSessionBootstrapped()) {
|
||
if (cache && (cache.authKey ?? '') === authKey) {
|
||
return;
|
||
}
|
||
// 登录态变了：保留筛选，重新拉列表
|
||
void (async () => {
|
||
setLoading(true);
|
||
const nextCode = cache?.cityCode || FALLBACK_CITY_CODE;
|
||
const listRegion = cache?.listRegion
|
||
? {
|
||
province: cache.listRegion.province,
|
||
city: cache.listRegion.city,
|
||
district: cache.listRegion.district || '全部',
|
||
}
|
||
: regionRef.current;
|
||
const nextCityKey = cache?.cityKey || makeCityKey(listRegion);
|
||
await fetchStores(
|
||
nextCode,
|
||
readCachedUserCoords(),
|
||
nextCityKey,
|
||
listRegion,
|
||
regionRef.current,
|
||
);
|
||
})();
|
||
return;
|
||
}
|
||
markStoresSessionBootstrapped();
|
||
|
||
void (async () => {
|
||
const { confirm } = await Taro.showModal({
|
||
title: '获取当前位置',
|
||
content: '是否允许获取当前位置来搜索附近门店？拒绝后将按默认城市展示，可下拉刷新重新定位。',
|
||
confirmText: '允许',
|
||
cancelText: '暂不',
|
||
}).catch(() => ({ confirm: false, cancel: true }));
|
||
|
||
if (confirm) {
|
||
setLoading(true);
|
||
const resolved = await resolveUserCity(true);
|
||
const { cityCode, region: nextRegion } = regionForCatalogFetch(resolved);
|
||
const nextCityKey = makeCityKey(nextRegion);
|
||
setRegion(nextRegion);
|
||
regionRef.current = nextRegion;
|
||
await fetchStores(
|
||
cityCode,
|
||
readCachedUserCoords(),
|
||
nextCityKey,
|
||
nextRegion,
|
||
nextRegion,
|
||
);
|
||
return;
|
||
}
|
||
|
||
const nextRegion = toCityWideRegion(DEFAULT_REGION);
|
||
const nextCityKey = makeCityKey(nextRegion);
|
||
setRegion(nextRegion);
|
||
regionRef.current = nextRegion;
|
||
setLoading(true);
|
||
await fetchStores(FALLBACK_CITY_CODE, null, nextCityKey, nextRegion, nextRegion);
|
||
})();
|
||
});
|
||
|
||
useEffect(() => {
|
||
void request<StoreCategoryNode[]>('/store-categories')
|
||
.then((tree) => setCategoryTree(Array.isArray(tree) ? tree : []))
|
||
.catch(() => setCategoryTree([]));
|
||
}, []);
|
||
|
||
usePullDownRefresh(() => {
|
||
void (async () => {
|
||
try {
|
||
const resolved = await resolveUserCity(true);
|
||
const { cityCode, region: nextRegion } = regionForCatalogFetch(resolved);
|
||
const nextCityKey = makeCityKey(nextRegion);
|
||
setRegion(nextRegion);
|
||
regionRef.current = nextRegion;
|
||
if (fetchCityKeyRef.current !== nextCityKey) {
|
||
setStores([]);
|
||
setLoading(true);
|
||
}
|
||
await fetchStores(
|
||
cityCode,
|
||
readCachedUserCoords(),
|
||
nextCityKey,
|
||
nextRegion,
|
||
nextRegion,
|
||
);
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : '加载失败');
|
||
setLoading(false);
|
||
} finally {
|
||
Taro.stopPullDownRefresh();
|
||
}
|
||
})();
|
||
});
|
||
|
||
function matchesCategory(store: Store): boolean {
|
||
if (!category.parentId) return true;
|
||
const leafIds = storeLeafCategoryIds(store);
|
||
const parentIds = new Set<string>();
|
||
if (Array.isArray(store.categories)) {
|
||
for (const cat of store.categories) {
|
||
if (cat.parentId) parentIds.add(String(cat.parentId));
|
||
}
|
||
}
|
||
const legacyParent = String(store.category?.parentId || '');
|
||
if (legacyParent) parentIds.add(legacyParent);
|
||
if (category.childId) {
|
||
return leafIds.includes(category.childId);
|
||
}
|
||
if ([...parentIds].some((id) => id === category.parentId)) return true;
|
||
const siblings = childIdsByParent.get(category.parentId) ?? [];
|
||
return leafIds.some((id) => siblings.includes(id));
|
||
}
|
||
|
||
const filtered = useMemo(() => {
|
||
const list = stores.filter((s) => {
|
||
if (!matchesRegionFilter(s, region)) return false;
|
||
if (!matchesCategory(s)) return false;
|
||
if (!keyword.trim()) return true;
|
||
const q = keyword.trim();
|
||
return s.name.includes(q) || (s.address ?? '').includes(q) || (s.district ?? '').includes(q);
|
||
});
|
||
const next = [...list];
|
||
next.sort((a, b) => {
|
||
if (sort === 'rating') {
|
||
const diff = storeStarCount(b.rating) - storeStarCount(a.rating);
|
||
if (diff !== 0) return diff;
|
||
} else if (sort === 'redeem') {
|
||
const diff = (b.redeemCount ?? 0) - (a.redeemCount ?? 0);
|
||
if (diff !== 0) return diff;
|
||
}
|
||
const da = a.distanceMeters ?? Number.POSITIVE_INFINITY;
|
||
const db = b.distanceMeters ?? Number.POSITIVE_INFINITY;
|
||
return da - db;
|
||
});
|
||
return next;
|
||
}, [stores, region, category, keyword, sort, childIdsByParent]);
|
||
|
||
function applySearch() {
|
||
const next = keywordInput.trim();
|
||
setKeyword(next);
|
||
patchStoresFilterCache({ keyword: next, keywordInput });
|
||
}
|
||
|
||
function resetFilters() {
|
||
setKeywordInput('');
|
||
setKeyword('');
|
||
setCategory(EMPTY_CATEGORY);
|
||
setSort('nearby');
|
||
setRegion(DEFAULT_REGION);
|
||
regionRef.current = DEFAULT_REGION;
|
||
patchStoresFilterCache({
|
||
keyword: '',
|
||
keywordInput: '',
|
||
category: EMPTY_CATEGORY,
|
||
sort: 'nearby',
|
||
filterRegion: DEFAULT_REGION,
|
||
});
|
||
}
|
||
|
||
function hoursText(store: Store): string {
|
||
const parts: string[] = [];
|
||
if (store.openTime && store.closeTime) parts.push(`${store.openTime}-${store.closeTime}`);
|
||
if (store.openTime2 && store.closeTime2) parts.push(`${store.openTime2}-${store.closeTime2}`);
|
||
if (!parts.length) parts.push('10:00-22:00');
|
||
return `营业时间: ${parts.join(' ')}`;
|
||
}
|
||
|
||
const sharePayload = useMemo(
|
||
() =>
|
||
buildSceneSharePayload('stores', {
|
||
path: '/pages/stores/index',
|
||
}),
|
||
[],
|
||
);
|
||
|
||
useShareAppMessage(() => toWeappShareMessage(sharePayload));
|
||
useShareTimeline(() => toWeappShareTimeline(sharePayload));
|
||
|
||
return (
|
||
<PageShell variant="tab" className="store-page no-tab-header">
|
||
<WechatShareReady payload={sharePayload} />
|
||
<TabMainHeader title="门店" />
|
||
|
||
<View className="store-slogan-wrap">
|
||
<BenefitSloganBar />
|
||
</View>
|
||
|
||
<View className="store-filter">
|
||
<View className="store-search-row">
|
||
<Input
|
||
className="store-search-input"
|
||
placeholder="搜索门店名称或地址"
|
||
value={keywordInput}
|
||
confirmType="search"
|
||
onInput={(e) => setKeywordInput(e.detail.value)}
|
||
onConfirm={applySearch}
|
||
/>
|
||
<View className="store-search-btn" onClick={applySearch}>
|
||
<Text className="store-search-btn-text">搜索</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View className="store-filter-row">
|
||
<View
|
||
className="store-filter-chip"
|
||
onClick={() => {
|
||
setCategoryOpen(false);
|
||
setSortOpen(false);
|
||
setRegionOpen(true);
|
||
}}
|
||
>
|
||
<Text className="store-filter-chip-text">{regionLabel}</Text>
|
||
<Text className="store-filter-chip-arrow">▾</Text>
|
||
</View>
|
||
<View
|
||
className="store-filter-chip"
|
||
onClick={() => {
|
||
setRegionOpen(false);
|
||
setSortOpen(false);
|
||
setCategoryOpen(true);
|
||
}}
|
||
>
|
||
<Text className="store-filter-chip-text">{categoryLabel}</Text>
|
||
<Text className="store-filter-chip-arrow">▾</Text>
|
||
</View>
|
||
<View
|
||
className="store-filter-chip"
|
||
onClick={() => {
|
||
setRegionOpen(false);
|
||
setCategoryOpen(false);
|
||
setSortOpen(true);
|
||
}}
|
||
>
|
||
<Text className="store-filter-chip-text">{sortLabel}</Text>
|
||
<Text className="store-filter-chip-arrow">▾</Text>
|
||
</View>
|
||
<View
|
||
className="store-filter-icon-btn"
|
||
onClick={resetFilters}
|
||
aria-label="重置筛选"
|
||
>
|
||
{/* 小程序 View 伪元素不稳定，用 Text 保证真机可见 */}
|
||
<Text className="store-filter-icon-glyph">↺</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
<View className="store-list">
|
||
{showBootLoading ? <View className="u-empty">加载中…</View> : null}
|
||
{!showBootLoading && filtered.length === 0 ? (
|
||
<View className="u-empty">暂无营业中门店</View>
|
||
) : null}
|
||
{!showBootLoading &&
|
||
filtered.map((s) => (
|
||
<View
|
||
key={s.id}
|
||
className="store-card"
|
||
onClick={() => Taro.navigateTo({ url: `/pages/store-detail/index?id=${s.id}` })}
|
||
>
|
||
<View className="store-card-cover-wrap">
|
||
{s.coverUrl ? (
|
||
<Image className="store-card-cover" src={s.coverUrl} mode="aspectFill" />
|
||
) : (
|
||
<View className="store-card-cover store-card-cover--empty" />
|
||
)}
|
||
<Image
|
||
className="store-card-open-badge"
|
||
src={openBadgeImg}
|
||
mode="aspectFit"
|
||
/>
|
||
</View>
|
||
<View className="store-card-body">
|
||
<View className="store-card-row store-card-row--head">
|
||
<Text className="store-card-name">{s.name}</Text>
|
||
</View>
|
||
{(() => {
|
||
const categoryLabels = storeCategoryTags(s, categoryTree);
|
||
return categoryLabels.length ? (
|
||
<View className="store-card-category-wrap">
|
||
<Text className="store-card-category-text">{categoryLabels.join('、')}</Text>
|
||
</View>
|
||
) : null;
|
||
})()}
|
||
<View className="store-card-row store-card-row--rating">
|
||
<View className="store-card-stars">
|
||
{[1, 2, 3, 4, 5].map((n) => (
|
||
<Text
|
||
key={n}
|
||
className={`store-card-star${n <= storeStarCount(s.rating) ? ' store-card-star--on' : ''}`}
|
||
>
|
||
★
|
||
</Text>
|
||
))}
|
||
</View>
|
||
<Text className="store-card-redeem">核销{s.redeemCount ?? 0}次</Text>
|
||
</View>
|
||
<View className="store-card-row store-card-row--mid">
|
||
<Text className="store-card-address" numberOfLines={2}>
|
||
{s.address || (s.district ? `${s.district}` : '地址待完善')}
|
||
</Text>
|
||
<Text className="store-card-distance">
|
||
{formatDistanceMeters(s.distanceMeters)}
|
||
</Text>
|
||
</View>
|
||
<View className="store-card-row store-card-row--hours">
|
||
<Text className="store-card-hours">{hoursText(s)}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
))}
|
||
</View>
|
||
|
||
{shouldRenderPageTabBar() ? <UserTabBar selected={1} /> : null}
|
||
<RegionPicker
|
||
open={regionOpen}
|
||
value={region}
|
||
levels={3}
|
||
onClose={() => setRegionOpen(false)}
|
||
onConfirm={(next) => {
|
||
setRegion(next);
|
||
regionRef.current = next;
|
||
patchStoresFilterCache({ filterRegion: next });
|
||
}}
|
||
/>
|
||
<CategoryPicker
|
||
open={categoryOpen}
|
||
tree={categoryTree}
|
||
value={category}
|
||
onClose={() => setCategoryOpen(false)}
|
||
onConfirm={(next) => {
|
||
setCategory(next);
|
||
patchStoresFilterCache({ category: next });
|
||
}}
|
||
/>
|
||
{sortOpen ? (
|
||
<View className="region-picker-overlay" onClick={() => setSortOpen(false)}>
|
||
<View className="region-picker-sheet store-sort-sheet" onClick={(e) => e.stopPropagation()}>
|
||
<View className="region-picker-toolbar">
|
||
<View className="region-picker-tabs">
|
||
<Text className="region-picker-tab active">排序规则</Text>
|
||
</View>
|
||
<Text className="region-picker-confirm ready" onClick={() => setSortOpen(false)}>
|
||
关闭
|
||
</Text>
|
||
</View>
|
||
<View className="region-picker-list">
|
||
{STORE_SORT_OPTIONS.map((opt) => (
|
||
<View
|
||
key={opt.key}
|
||
className={`region-picker-option${sort === opt.key ? ' selected' : ''}`}
|
||
onClick={() => {
|
||
setSort(opt.key);
|
||
patchStoresFilterCache({ sort: opt.key });
|
||
setSortOpen(false);
|
||
}}
|
||
>
|
||
<Text>{opt.label}</Text>
|
||
</View>
|
||
))}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
) : null}
|
||
</PageShell>
|
||
);
|
||
}
|