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

Merge pull request '修改门店列表组件' (#12) from dev_jacy into dev
CI / verify (pull_request) Has been cancelled
Details

Browse Source 
Reviewed-on: https://git.yqidian.com/jacy/dukang/pulls/12
This commit was merged in pull request #12.
This commit is contained in:
jacy
2026-08-05 00:57:14 +08:00
parent 16fa07ceaf 528669f662
commit f80a0f2c27
2 changed files with 88 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mini-user/src/pages/stores/index.tsx
+23 -16
View File
@@ -343,10 +343,11 @@ export default function StoresPage() {
}
function formatHours(store: Store) {
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';
// 列表只展示第一段营业时间，避免挤占一行
if (store.openTime && store.closeTime) {
return `营业时间: ${store.openTime}-${store.closeTime}`;
}
return '营业时间: 10:00-22:00';
}
function formatStatus(store: Store) {
@@ -437,30 +438,36 @@ export default function StoresPage() {
<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>
{/* 第1行：标题 + 距离 */}
<View className="store-card-row store-card-row--head">
<Text className="store-card-name" numberOfLines={1}>
{s.name}
</Text>
<Text className="store-card-distance">
{formatDistanceMeters(s.distanceMeters)}
</Text>
</View>
<View className="store-card-status-row">
{/* 第2行：状态 + 营业时间（仅第一段） */}
<View className="store-card-row store-card-row--meta">
<Text className="store-card-status">{formatStatus(s)}</Text>
<Text className="store-card-hours">{formatHours(s)}</Text>
<Text className="store-card-hours" numberOfLines={1}>
{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
{/* 第3行：地址 + 去核销 */}
<View className="store-card-row store-card-row--foot">
<Text className="store-card-address" numberOfLines={1}>
{s.address || (s.district ? `${s.district}` : '地址待完善')}
</Text>
<View
className="store-card-cta"
onClick={(e) => {
e.stopPropagation();
Taro.navigateTo({ url: '/pages/redeem/index' });
}}
>
去核销
</Text>
<Text className="store-card-cta-text">去核销</Text>
</View>
</View>
</View>
</View>
apps/mini-user/src/styles/stores.css
+65 -46
View File
@@ -144,24 +144,25 @@
padding: 4px var(--space-page) 16px;
}
/* 左图右文，卡片等高 */
.store-card {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 12px;
padding: 12px;
box-sizing: border-box;
background: var(--color-card);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
margin-bottom: 12px;
box-sizing: border-box;
}
.store-card-cover {
flex-shrink: 0;
width: 96px;
height: 96px;
border-radius: var(--radius-md);
border-radius: 8px;
background: var(--color-surface-container);
display: block;
}
@@ -173,16 +174,24 @@
.store-card-body {
flex: 1;
min-width: 0;
height: 96px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.store-card-head {
.store-card-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
align-items: center;
min-width: 0;
overflow: hidden;
}
/* 第1行：加粗标题（单行截断）+ 右对齐距离 */
.store-card-row--head {
gap: 8px;
margin-bottom: 6px;
height: 22px;
}
.store-card-name {
@@ -191,78 +200,88 @@
font-family: var(--font-headline);
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: var(--color-on-surface);
line-height: 22px;
color: #1a1a1a;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: nowrap;
}
.store-card-distance {
flex-shrink: 0;
max-width: 40%;
font-size: 12px;
line-height: 1.35;
color: var(--color-subtle-gray);
font-weight: 400;
line-height: 22px;
color: #999;
text-align: right;
white-space: nowrap;
}
.store-card-status-row {
display: flex;
align-items: center;
flex-wrap: wrap;
/* 第2行：营业状态 + 营业时间（单行） */
.store-card-row--meta {
gap: 6px;
margin-bottom: 4px;
height: 20px;
}
.store-card-status {
flex-shrink: 0;
padding: 2px 8px;
border-radius: var(--radius-sm);
padding: 0 6px;
border-radius: 4px;
background: rgba(45, 106, 79, 0.12);
color: var(--color-success-green);
color: #2d6a4f;
font-size: 11px;
font-weight: 600;
line-height: 1.4;
line-height: 18px;
white-space: nowrap;
}
.store-card-hours {
flex: 1;
min-width: 0;
font-size: 11px;
line-height: 1.4;
color: var(--color-subtle-gray);
font-weight: 400;
line-height: 20px;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 第3行：地址（单行截断）+ 右对齐去核销 */
.store-card-row--foot {
gap: 8px;
height: 28px;
}
.store-card-address {
font-size: 12px;
line-height: 1.45;
color: var(--color-subtle-gray);
flex: 1;
min-width: 0;
font-size: 9px;
font-weight: 400;
line-height: 28px;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.store-card-footer {
display: flex;
align-items: center;
margin-top: auto;
padding-top: 8px;
}
.store-card-footer-spacer {
flex: 1;
white-space: nowrap;
}
.store-card-cta {
flex-shrink: 0;
padding: 6px 16px;
border-radius: var(--radius-full);
background: var(--color-heritage-red);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 0 14px;
height: 26px;
border-radius: 999px;
background: var(--color-heritage-red, #a61d24);
box-sizing: border-box;
}
.store-card-cta-text {
font-size: 12px;
font-weight: 600;
line-height: 1.4;
line-height: 26px;
color: #fff;
white-space: nowrap;
}