diff --git a/apps/mini-user/src/pages/stores/index.tsx b/apps/mini-user/src/pages/stores/index.tsx index dea186a..411c9ac 100644 --- a/apps/mini-user/src/pages/stores/index.tsx +++ b/apps/mini-user/src/pages/stores/index.tsx @@ -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 ? ( ) : ( - + )} - {s.name} - - {s.district ? `${s.district} · ` : ''} - {s.address || '地址待完善'} - - {formatHours(s)} - {s.avgPrice != null && Number(s.avgPrice) > 0 ? ( - 人均¥{Number(s.avgPrice).toFixed(0)} - ) : null} - + + {s.name} {formatDistanceMeters(s.distanceMeters)} + + + {formatStatus(s)} + {formatHours(s)} + + + {s.address || (s.district ? `${s.district}` : '地址待完善')} + + + { diff --git a/apps/mini-user/src/styles/stores.css b/apps/mini-user/src/styles/stores.css index 7fa2279..3cdc0a8 100644 --- a/apps/mini-user/src/styles/stores.css +++ b/apps/mini-user/src/styles/stores.css @@ -145,62 +145,124 @@ } .store-card { + display: flex; + flex-direction: row; + align-items: stretch; + gap: 12px; + padding: 12px; background: var(--color-card); border-radius: var(--radius-lg); - overflow: hidden; box-shadow: var(--shadow-card); - margin-bottom: 16px; + margin-bottom: 12px; + box-sizing: border-box; } .store-card-cover { - width: 100%; - height: 160px; + flex-shrink: 0; + width: 96px; + height: 96px; + border-radius: var(--radius-md); background: var(--color-surface-container); display: block; } .store-card-cover--empty { - height: 160px; background: var(--color-surface-container); } .store-card-body { - padding: 14px 16px 16px; + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; } -.store-card-name { - display: block; - font-family: var(--font-headline); - font-size: 16px; - font-weight: 700; - color: var(--color-on-surface); +.store-card-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 8px; margin-bottom: 6px; } -.store-card-meta { - display: block; +.store-card-name { + flex: 1; + min-width: 0; + font-family: var(--font-headline); + font-size: 15px; + font-weight: 700; + line-height: 1.35; + color: var(--color-on-surface); + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + +.store-card-distance { + flex-shrink: 0; font-size: 12px; + line-height: 1.35; color: var(--color-subtle-gray); +} + +.store-card-status-row { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 6px; margin-bottom: 4px; } +.store-card-status { + flex-shrink: 0; + padding: 2px 8px; + border-radius: var(--radius-sm); + background: rgba(45, 106, 79, 0.12); + color: var(--color-success-green); + font-size: 11px; + font-weight: 600; + line-height: 1.4; +} + +.store-card-hours { + flex: 1; + min-width: 0; + font-size: 11px; + line-height: 1.4; + color: var(--color-subtle-gray); +} + +.store-card-address { + font-size: 12px; + line-height: 1.45; + color: var(--color-subtle-gray); + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + .store-card-footer { display: flex; align-items: center; - justify-content: space-between; - margin-top: 12px; + margin-top: auto; + padding-top: 8px; } -.store-card-distance { - font-size: 12px; - color: var(--color-on-surface-variant); +.store-card-footer-spacer { + flex: 1; } .store-card-cta { - padding: 6px 14px; + flex-shrink: 0; + padding: 6px 16px; border-radius: var(--radius-full); - background: rgba(166, 29, 36, 0.08); - color: var(--color-heritage-red); + background: var(--color-heritage-red); + color: #fff; font-size: 12px; font-weight: 600; + line-height: 1.4; }