feat(mini-user): redesign store list with square thumbnail cards

Switch store list to horizontal card layout with square cover image, status badge, hours, address and solid redeem CTA per design mockup.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-08-05 00:11:25 +08:00
parent 02d89e6385
commit 16fa07ceaf
2 changed files with 104 additions and 33 deletions
+20 -11
View File
@@ -1,6 +1,7 @@
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 { StoreStatus, STORE_STATUS_LABELS } from '@dukang/shared-types';
import PageShell from '../../components/PageShell';
import TabMainHeader from '../../components/TabMainHeader';
import WechatShareReady from '../../components/WechatShareReady';
@@ -348,6 +349,12 @@ export default function StoresPage() {
return parts.length ? `营业时间: ${parts.join('')}` : '营业时间: 10:00-22:00';
}
function formatStatus(store: Store) {
const status = store.status as StoreStatus | undefined;
if (status && STORE_STATUS_LABELS[status]) return STORE_STATUS_LABELS[status];
return STORE_STATUS_LABELS[StoreStatus.OPEN];
}
const sharePayload = useMemo(
() => ({
title: '杜康好客门店',
@@ -427,22 +434,24 @@ export default function StoresPage() {
{s.coverUrl ? (
<Image className="store-card-cover" src={s.coverUrl} mode="aspectFill" />
) : (
<View className="store-card-cover--empty" />
<View className="store-card-cover store-card-cover--empty" />
)}
<View className="store-card-body">
<Text className="store-card-name">{s.name}</Text>
<Text className="store-card-meta">
{s.district ? `${s.district} · ` : ''}
{s.address || '地址待完善'}
</Text>
<Text className="store-card-meta">{formatHours(s)}</Text>
{s.avgPrice != null && Number(s.avgPrice) > 0 ? (
<Text className="store-card-meta">¥{Number(s.avgPrice).toFixed(0)}</Text>
) : null}
<View className="store-card-footer">
<View className="store-card-head">
<Text className="store-card-name">{s.name}</Text>
<Text className="store-card-distance">
{formatDistanceMeters(s.distanceMeters)}
</Text>
</View>
<View className="store-card-status-row">
<Text className="store-card-status">{formatStatus(s)}</Text>
<Text className="store-card-hours">{formatHours(s)}</Text>
</View>
<Text className="store-card-address">
{s.address || (s.district ? `${s.district}` : '地址待完善')}
</Text>
<View className="store-card-footer">
<View className="store-card-footer-spacer" />
<Text
className="store-card-cta"
onClick={(e) => {