3 Commits

Author SHA1 Message Date
jacy b40eb83f27 Merge pull request 'Dev' (#13) from dev into main
CI / verify (push) Has been cancelled
Reviewed-on: https://git.yqidian.com/jacy/dukang/pulls/13
2026-08-05 00:57:33 +08:00
jacy f80a0f2c27 Merge pull request '修改门店列表组件' (#12) from dev_jacy into dev
CI / verify (pull_request) Has been cancelled
Reviewed-on: https://git.yqidian.com/jacy/dukang/pulls/12
2026-08-05 00:57:14 +08:00
jacy 528669f662 修改门店列表组件
CI / verify (pull_request) Has been cancelled
2026-08-05 00:55:58 +08:00
2 changed files with 88 additions and 62 deletions
+23 -16
View File
@@ -343,10 +343,11 @@ export default function StoresPage() {
} }
function formatHours(store: Store) { function formatHours(store: Store) {
const parts: string[] = []; // 列表只展示第一段营业时间,避免挤占一行
if (store.openTime && store.closeTime) parts.push(`${store.openTime}-${store.closeTime}`); if (store.openTime && store.closeTime) {
if (store.openTime2 && store.closeTime2) parts.push(`${store.openTime2}-${store.closeTime2}`); return `营业时间: ${store.openTime}-${store.closeTime}`;
return parts.length ? `营业时间: ${parts.join('')}` : '营业时间: 10:00-22:00'; }
return '营业时间: 10:00-22:00';
} }
function formatStatus(store: Store) { 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-cover store-card-cover--empty" />
)} )}
<View className="store-card-body"> <View className="store-card-body">
<View className="store-card-head"> {/* 第1行:标题 + 距离 */}
<Text className="store-card-name">{s.name}</Text> <View className="store-card-row store-card-row--head">
<Text className="store-card-name" numberOfLines={1}>
{s.name}
</Text>
<Text className="store-card-distance"> <Text className="store-card-distance">
{formatDistanceMeters(s.distanceMeters)} {formatDistanceMeters(s.distanceMeters)}
</Text> </Text>
</View> </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-status">{formatStatus(s)}</Text>
<Text className="store-card-hours">{formatHours(s)}</Text> <Text className="store-card-hours" numberOfLines={1}>
{formatHours(s)}
</Text>
</View> </View>
<Text className="store-card-address"> {/* 第3行:地址 + 去核销 */}
{s.address || (s.district ? `${s.district}` : '地址待完善')} <View className="store-card-row store-card-row--foot">
</Text> <Text className="store-card-address" numberOfLines={1}>
<View className="store-card-footer"> {s.address || (s.district ? `${s.district}` : '地址待完善')}
<View className="store-card-footer-spacer" /> </Text>
<Text <View
className="store-card-cta" className="store-card-cta"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
Taro.navigateTo({ url: '/pages/redeem/index' }); Taro.navigateTo({ url: '/pages/redeem/index' });
}} }}
> >
<Text className="store-card-cta-text"></Text>
</Text> </View>
</View> </View>
</View> </View>
</View> </View>
+65 -46
View File
@@ -144,24 +144,25 @@
padding: 4px var(--space-page) 16px; padding: 4px var(--space-page) 16px;
} }
/* 左图右文,卡片等高 */
.store-card { .store-card {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
gap: 12px; gap: 12px;
padding: 12px; padding: 12px;
box-sizing: border-box;
background: var(--color-card); background: var(--color-card);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-card); box-shadow: var(--shadow-card);
margin-bottom: 12px; margin-bottom: 12px;
box-sizing: border-box;
} }
.store-card-cover { .store-card-cover {
flex-shrink: 0; flex-shrink: 0;
width: 96px; width: 96px;
height: 96px; height: 96px;
border-radius: var(--radius-md); border-radius: 8px;
background: var(--color-surface-container); background: var(--color-surface-container);
display: block; display: block;
} }
@@ -173,16 +174,24 @@
.store-card-body { .store-card-body {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
height: 96px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
} }
.store-card-head { .store-card-row {
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; min-width: 0;
overflow: hidden;
}
/* 第1行:加粗标题(单行截断)+ 右对齐距离 */
.store-card-row--head {
gap: 8px; gap: 8px;
margin-bottom: 6px; height: 22px;
} }
.store-card-name { .store-card-name {
@@ -191,78 +200,88 @@
font-family: var(--font-headline); font-family: var(--font-headline);
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 700;
line-height: 1.35; line-height: 22px;
color: var(--color-on-surface); color: #1a1a1a;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; white-space: nowrap;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
} }
.store-card-distance { .store-card-distance {
flex-shrink: 0; flex-shrink: 0;
max-width: 40%;
font-size: 12px; font-size: 12px;
line-height: 1.35; font-weight: 400;
color: var(--color-subtle-gray); line-height: 22px;
color: #999;
text-align: right;
white-space: nowrap;
} }
.store-card-status-row { /* 第2行:营业状态 + 营业时间(单行) */
display: flex; .store-card-row--meta {
align-items: center;
flex-wrap: wrap;
gap: 6px; gap: 6px;
margin-bottom: 4px; height: 20px;
} }
.store-card-status { .store-card-status {
flex-shrink: 0; flex-shrink: 0;
padding: 2px 8px; padding: 0 6px;
border-radius: var(--radius-sm); border-radius: 4px;
background: rgba(45, 106, 79, 0.12); background: rgba(45, 106, 79, 0.12);
color: var(--color-success-green); color: #2d6a4f;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 18px;
white-space: nowrap;
} }
.store-card-hours { .store-card-hours {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
font-size: 11px; font-size: 11px;
line-height: 1.4; font-weight: 400;
color: var(--color-subtle-gray); 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 { .store-card-address {
font-size: 12px; flex: 1;
line-height: 1.45; min-width: 0;
color: var(--color-subtle-gray); font-size: 9px;
font-weight: 400;
line-height: 28px;
color: #999;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; white-space: nowrap;
-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;
} }
.store-card-cta { .store-card-cta {
flex-shrink: 0; flex-shrink: 0;
padding: 6px 16px; display: flex;
border-radius: var(--radius-full); align-items: center;
background: var(--color-heritage-red); justify-content: center;
color: #fff; 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-size: 12px;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 26px;
color: #fff;
white-space: nowrap;
} }