jacy/dukang
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

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

Browse Source 
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:
jacy
2026-08-05 00:11:25 +08:00
parent 02d89e6385
commit 16fa07ceaf
2 changed files with 104 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mini-user/src/pages/stores/index.tsx
+19 -10
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">
<View className="store-card-head">
<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">
<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) => {
apps/mini-user/src/styles/stores.css
+84 -22
View File
@@ -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;
}