jacy
2ebdb08a2f
修复仅用 useDidShow 导致一直加载中；顶栏标题左右等宽居中；走马灯改用 View 双份文本动画。发版默认改生产。 Co-authored-by: Cursor <cursoragent@cursor.com>
441 lines
14 KiB
TypeScript
441 lines
14 KiB
TypeScript
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
import { View, Text, Image } from '@tarojs/components';
|
||
import Taro, {
|
||
useDidShow,
|
||
useLoad,
|
||
usePageScroll,
|
||
useRouter,
|
||
useShareAppMessage,
|
||
useShareTimeline,
|
||
} from '@tarojs/taro';
|
||
import PageShell from '../../components/PageShell';
|
||
import PageNavBar from '../../components/PageNavBar';
|
||
import ProductCarousel from '../../components/ProductCarousel';
|
||
import ShareNavButton from '../../components/ShareNavButton';
|
||
import WechatShareReady from '../../components/WechatShareReady';
|
||
import { request, toast } from '../../lib/api';
|
||
import {
|
||
DEFAULT_SHARE_DESC,
|
||
DEFAULT_SHARE_TITLE,
|
||
toWeappShareMessage,
|
||
} from '../../lib/wechat-share';
|
||
|
||
type StoreMedia = {
|
||
url?: string | null;
|
||
bizType?: string | null;
|
||
mediaType?: string | null;
|
||
};
|
||
|
||
type Store = {
|
||
id: string;
|
||
name: string;
|
||
address?: string;
|
||
province?: string;
|
||
cityName?: string;
|
||
city?: string;
|
||
district?: string;
|
||
phone?: string;
|
||
intro?: string | null;
|
||
benefitUsageRule?: string | null;
|
||
coverUrl?: string | null;
|
||
carouselUrls?: string[] | null;
|
||
media?: StoreMedia[] | null;
|
||
openTime?: string | null;
|
||
closeTime?: string | null;
|
||
openTime2?: string | null;
|
||
closeTime2?: string | null;
|
||
avgPrice?: number | null;
|
||
latitude?: number | string | null;
|
||
longitude?: number | string | null;
|
||
category?: { name: string } | null;
|
||
};
|
||
|
||
type RecentRedeem = {
|
||
userLabel: string;
|
||
amount: number | string;
|
||
createdAt: string;
|
||
};
|
||
|
||
function uniqueUrls(urls: Array<string | null | undefined>) {
|
||
const seen = new Set<string>();
|
||
const out: string[] = [];
|
||
for (const raw of urls) {
|
||
const url = String(raw || '').trim();
|
||
if (!url || seen.has(url)) continue;
|
||
seen.add(url);
|
||
out.push(url);
|
||
}
|
||
return out;
|
||
}
|
||
|
||
function envPhotoUrls(store: Store) {
|
||
return uniqueUrls(
|
||
(store.media || [])
|
||
.filter((m) => !m.bizType || m.bizType === 'ENV')
|
||
.map((m) => m.url),
|
||
);
|
||
}
|
||
|
||
function fullAddress(store: Store) {
|
||
const city = store.cityName || store.city || '';
|
||
return `${store.province || ''}${city}${store.district || ''}${store.address || ''}`.trim();
|
||
}
|
||
|
||
function pickStoreId(raw?: string | null) {
|
||
return String(raw || '')
|
||
.trim()
|
||
.replace(/[^\d]/g, '');
|
||
}
|
||
|
||
/** 与历史记录一致：2026-08-03 15:14:30（Asia/Shanghai） */
|
||
function formatRedeemTime(input?: string | null) {
|
||
const d = input ? new Date(input) : new Date();
|
||
if (Number.isNaN(d.getTime())) {
|
||
// 后端若已是 "2026-08-03 15:14:30" 直接展示
|
||
const s = String(input || '').trim();
|
||
if (/^\d{4}-\d{2}-\d{2}/.test(s)) return s.slice(0, 19).replace('T', ' ');
|
||
return '—';
|
||
}
|
||
const parts = new Intl.DateTimeFormat('en-CA', {
|
||
timeZone: 'Asia/Shanghai',
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit',
|
||
hour12: false,
|
||
}).formatToParts(d);
|
||
const get = (type: Intl.DateTimeFormatPartTypes) =>
|
||
parts.find((p) => p.type === type)?.value ?? '';
|
||
return `${get('year')}-${get('month')}-${get('day')} ${get('hour')}:${get('minute')}:${get('second')}`;
|
||
}
|
||
|
||
function formatRedeemAmountYuan(amount: number | string) {
|
||
const n = typeof amount === 'number' ? amount : Number(amount);
|
||
if (!Number.isFinite(n)) return '0';
|
||
if (Math.abs(n - Math.round(n)) < 1e-9) return String(Math.round(n));
|
||
return n.toFixed(2).replace(/\.?0+$/, '');
|
||
}
|
||
|
||
function formatRecentRedeemLine(row: RecentRedeem) {
|
||
return `${row.userLabel || '用户***'} ${formatRedeemTime(row.createdAt)} 核销${formatRedeemAmountYuan(row.amount)}元`;
|
||
}
|
||
|
||
function normalizeRecentRedeems(payload: unknown): RecentRedeem[] {
|
||
if (Array.isArray(payload)) return payload as RecentRedeem[];
|
||
if (payload && typeof payload === 'object') {
|
||
const list = (payload as { list?: unknown; items?: unknown }).list
|
||
?? (payload as { items?: unknown }).items;
|
||
if (Array.isArray(list)) return list as RecentRedeem[];
|
||
}
|
||
return [];
|
||
}
|
||
|
||
export default function StoreDetailPage() {
|
||
const router = useRouter();
|
||
const [storeId, setStoreId] = useState(() => pickStoreId(router.params.id));
|
||
const [store, setStore] = useState<Store | null>(null);
|
||
const [recentRedeems, setRecentRedeems] = useState<RecentRedeem[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [loadError, setLoadError] = useState('');
|
||
const [headerSolid, setHeaderSolid] = useState(false);
|
||
const storeRef = useRef<Store | null>(null);
|
||
storeRef.current = store;
|
||
|
||
usePageScroll(({ scrollTop }) => {
|
||
setHeaderSolid(scrollTop > 100);
|
||
});
|
||
|
||
const loadStore = useCallback(async (id: string) => {
|
||
if (!id) {
|
||
setLoading(false);
|
||
setLoadError('缺少门店参数');
|
||
return;
|
||
}
|
||
setLoadError('');
|
||
if (!storeRef.current) setLoading(true);
|
||
try {
|
||
const data = await request<Store>(`/stores/${id}`);
|
||
if (!data || !data.id) {
|
||
setStore(null);
|
||
setLoadError('门店不存在或暂不可见');
|
||
toast('门店不存在或暂不可见');
|
||
return;
|
||
}
|
||
setStore(data);
|
||
} catch (e) {
|
||
const msg = e instanceof Error ? e.message : '加载失败';
|
||
setLoadError(msg);
|
||
if (!storeRef.current) toast(msg);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
const loadRecentRedeems = useCallback(async (id: string) => {
|
||
if (!id) {
|
||
setRecentRedeems([]);
|
||
return;
|
||
}
|
||
try {
|
||
const list = await request<unknown>(`/stores/${id}/recent-redeems?limit=20`);
|
||
setRecentRedeems(normalizeRecentRedeems(list));
|
||
} catch {
|
||
setRecentRedeems([]);
|
||
}
|
||
}, []);
|
||
|
||
const bootstrap = useCallback(
|
||
(id: string) => {
|
||
const nextId = pickStoreId(id);
|
||
if (!nextId) {
|
||
setLoading(false);
|
||
setLoadError('缺少门店参数');
|
||
return;
|
||
}
|
||
setStoreId(nextId);
|
||
void loadStore(nextId);
|
||
void loadRecentRedeems(nextId);
|
||
},
|
||
[loadStore, loadRecentRedeems],
|
||
);
|
||
|
||
// 首屏：useLoad 带 options.id，比仅用 useDidShow 更稳（H5/小程序都覆盖）
|
||
useLoad((options) => {
|
||
bootstrap(options?.id || router.params.id || '');
|
||
});
|
||
|
||
useEffect(() => {
|
||
const fromRouter = pickStoreId(router.params.id);
|
||
if (fromRouter && fromRouter !== storeId) {
|
||
bootstrap(fromRouter);
|
||
}
|
||
}, [router.params.id, storeId, bootstrap]);
|
||
|
||
// 登录态变化后回到本页：重拉详情与走马灯
|
||
useDidShow(() => {
|
||
const id = pickStoreId(storeId || router.params.id);
|
||
if (!id) return;
|
||
void loadStore(id);
|
||
void loadRecentRedeems(id);
|
||
});
|
||
|
||
const sharePayload = useMemo(
|
||
() => {
|
||
const envFirst = store ? envPhotoUrls(store)[0] : undefined;
|
||
return {
|
||
title: store?.name || DEFAULT_SHARE_TITLE,
|
||
desc: store?.intro?.trim() || store?.address || DEFAULT_SHARE_DESC,
|
||
path: `/pages/store-detail/index?id=${storeId}`,
|
||
imgUrl: store?.coverUrl || envFirst || store?.carouselUrls?.[0] || undefined,
|
||
};
|
||
},
|
||
[store, storeId],
|
||
);
|
||
|
||
const marqueeText = useMemo(() => {
|
||
if (!recentRedeems.length) return '';
|
||
return recentRedeems.map(formatRecentRedeemLine).join(' ');
|
||
}, [recentRedeems]);
|
||
|
||
useShareAppMessage(() => toWeappShareMessage(sharePayload));
|
||
useShareTimeline(() => ({
|
||
title: sharePayload.title || DEFAULT_SHARE_TITLE,
|
||
query: storeId ? `id=${storeId}` : '',
|
||
imageUrl: sharePayload.imgUrl,
|
||
}));
|
||
|
||
function goBack() {
|
||
const pages = Taro.getCurrentPages();
|
||
if (pages.length > 1) Taro.navigateBack();
|
||
else Taro.switchTab({ url: '/pages/stores/index' });
|
||
}
|
||
|
||
function callStore() {
|
||
if (!store?.phone) {
|
||
toast('暂无门店电话');
|
||
return;
|
||
}
|
||
Taro.makePhoneCall({ phoneNumber: store.phone }).catch(() => toast('无法拨打电话'));
|
||
}
|
||
|
||
function openMap() {
|
||
if (!store) return;
|
||
const lat = store.latitude != null ? Number(store.latitude) : NaN;
|
||
const lng = store.longitude != null ? Number(store.longitude) : NaN;
|
||
const address = fullAddress(store) || store.address || store.name;
|
||
|
||
if (Number.isFinite(lat) && Number.isFinite(lng)) {
|
||
Taro.openLocation({
|
||
latitude: lat,
|
||
longitude: lng,
|
||
name: store.name,
|
||
address,
|
||
scale: 16,
|
||
}).catch(() => {
|
||
if (process.env.TARO_ENV === 'h5' && typeof window !== 'undefined') {
|
||
window.location.href = `https://uri.amap.com/marker?position=${lng},${lat}&name=${encodeURIComponent(store.name)}&address=${encodeURIComponent(address)}`;
|
||
return;
|
||
}
|
||
toast('无法打开地图导航');
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (process.env.TARO_ENV === 'h5' && typeof window !== 'undefined' && address) {
|
||
window.location.href = `https://uri.amap.com/search?keyword=${encodeURIComponent(address)}&src=dukang`;
|
||
return;
|
||
}
|
||
toast('门店位置待完善，暂无法导航');
|
||
}
|
||
|
||
if (!store) {
|
||
return (
|
||
<PageShell variant="scroll" className="store-detail-page">
|
||
<PageNavBar title="门店详情" solid onBack={goBack} />
|
||
<View className="page-with-nav-bar u-empty">
|
||
{loading ? '加载中…' : loadError || '门店不存在或暂不可见'}
|
||
</View>
|
||
</PageShell>
|
||
);
|
||
}
|
||
|
||
const envPhotos = envPhotoUrls(store);
|
||
const images = uniqueUrls([
|
||
store.coverUrl,
|
||
...(store.carouselUrls || []),
|
||
...envPhotos,
|
||
]);
|
||
|
||
const intro = store.intro?.trim() || '';
|
||
const benefitRuleRaw = store.benefitUsageRule?.trim() || '';
|
||
const benefitRule =
|
||
benefitRuleRaw && !/^null$/i.test(benefitRuleRaw) ? benefitRuleRaw : '';
|
||
|
||
function previewEnv(index: number) {
|
||
if (!envPhotos.length) return;
|
||
Taro.previewImage({
|
||
current: envPhotos[index],
|
||
urls: envPhotos,
|
||
}).catch(() => toast('无法预览图片'));
|
||
}
|
||
|
||
const marqueeDurationSec = Math.max(18, Math.min(60, Math.round((marqueeText.length || 24) / 2.2)));
|
||
|
||
return (
|
||
<PageShell variant="scroll" className="store-detail-page" hasFixedFooter>
|
||
<WechatShareReady payload={sharePayload} />
|
||
<PageNavBar
|
||
title={store.name}
|
||
solid={headerSolid}
|
||
titleVisible={headerSolid}
|
||
onBack={goBack}
|
||
right={<ShareNavButton payload={sharePayload} />}
|
||
/>
|
||
|
||
<View className="store-detail-hero full-bleed">
|
||
<ProductCarousel images={images} alt={store.name} variant="store" />
|
||
</View>
|
||
|
||
<View className="store-detail-info-card">
|
||
<Text className="store-detail-name">{store.name}</Text>
|
||
|
||
<View className="store-detail-row">
|
||
<Text className="store-detail-meta store-detail-meta--flex">
|
||
{store.district ? `${store.district} · ` : ''}
|
||
{store.address || '地址待完善'}
|
||
</Text>
|
||
<Text className="store-detail-action" onClick={openMap}>
|
||
导航
|
||
</Text>
|
||
</View>
|
||
|
||
<Text className="store-detail-meta">
|
||
营业时间:{' '}
|
||
{(() => {
|
||
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}`);
|
||
return parts.length ? parts.join('，') : '10:00-22:00';
|
||
})()}
|
||
</Text>
|
||
{store.avgPrice != null && Number(store.avgPrice) > 0 ? (
|
||
<Text className="store-detail-meta">人均约 ¥{Number(store.avgPrice).toFixed(0)}</Text>
|
||
) : null}
|
||
|
||
{store.phone ? (
|
||
<View className="store-detail-row">
|
||
<Text className="store-detail-meta store-detail-meta--flex">电话: {store.phone}</Text>
|
||
<Text className="store-detail-action" onClick={callStore}>
|
||
拨打
|
||
</Text>
|
||
</View>
|
||
) : null}
|
||
|
||
<View className="store-detail-tags">
|
||
{store.category?.name ? (
|
||
<Text className="store-detail-tag">{store.category.name}</Text>
|
||
) : null}
|
||
<Text className="store-detail-tag">可核销</Text>
|
||
<Text className="store-detail-tag">好客门店</Text>
|
||
</View>
|
||
</View>
|
||
|
||
{marqueeText ? (
|
||
<View className="store-detail-marquee">
|
||
<View
|
||
className="store-detail-marquee-track"
|
||
style={{
|
||
animationDuration: `${marqueeDurationSec}s`,
|
||
}}
|
||
>
|
||
<View className="store-detail-marquee-item">{marqueeText}</View>
|
||
<View className="store-detail-marquee-item">{marqueeText}</View>
|
||
</View>
|
||
</View>
|
||
) : null}
|
||
|
||
{intro ? (
|
||
<View className="store-detail-section">
|
||
<Text className="store-detail-section-title">门店详情</Text>
|
||
<Text className="store-detail-intro">{intro}</Text>
|
||
</View>
|
||
) : null}
|
||
|
||
{benefitRule ? (
|
||
<View className="store-detail-section">
|
||
<Text className="store-detail-section-title">好客权益券使用规则</Text>
|
||
<Text className="store-detail-intro">{benefitRule}</Text>
|
||
</View>
|
||
) : null}
|
||
|
||
{envPhotos.length > 0 ? (
|
||
<View className="store-detail-section">
|
||
<Text className="store-detail-section-title">店内环境</Text>
|
||
<View className="store-detail-env-grid">
|
||
{envPhotos.map((url, index) => (
|
||
<View
|
||
key={`${url}-${index}`}
|
||
className="store-detail-env-item"
|
||
onClick={() => previewEnv(index)}
|
||
>
|
||
<Image className="store-detail-env-img" src={url} mode="aspectFill" />
|
||
</View>
|
||
))}
|
||
</View>
|
||
</View>
|
||
) : null}
|
||
|
||
<View className="store-detail-bar">
|
||
<View
|
||
className="u-btn u-btn--block"
|
||
onClick={() => Taro.navigateTo({ url: '/pages/redeem/index' })}
|
||
>
|
||
<Text>到店核销</Text>
|
||
</View>
|
||
</View>
|
||
</PageShell>
|
||
);
|
||
}
|