Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b40eb83f27 | |||
| f80a0f2c27 | |||
| 528669f662 |
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user