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;
}