merge(dev): mini-user store list card redesign

Reviewed-on: https://git.yqidian.com/jacy/dukang/pulls/11

apps/mini-user/src/pages/stores/index.tsx

@@ -343,11 +343,10 @@ export default function StoresPage() {
   }
 
   function formatHours(store: Store) {
-    // 列表只展示第一段营业时间，避免挤占一行
+    const parts: string[] = [];
-    if (store.openTime && store.closeTime) {
+    if (store.openTime && store.closeTime) parts.push(`${store.openTime}-${store.closeTime}`);
-      return `营业时间: ${store.openTime}-${store.closeTime}`;
+    if (store.openTime2 && store.closeTime2) parts.push(`${store.openTime2}-${store.closeTime2}`);
-    }
+    return parts.length ? `营业时间: ${parts.join('，')}` : '营业时间: 10:00-22:00';
-    return '营业时间: 10:00-22:00';
   }
 
   function formatStatus(store: Store) {
@@ -438,36 +437,30 @@ export default function StoresPage() {
                 <View className="store-card-cover store-card-cover--empty" />
               )}
               <View className="store-card-body">
-                {/* 第1行：标题 + 距离 */}
+                <View className="store-card-head">
-                <View className="store-card-row store-card-row--head">
+                  <Text className="store-card-name">{s.name}</Text>
-                  <Text className="store-card-name" numberOfLines={1}>
-                    {s.name}
-                  </Text>
                   <Text className="store-card-distance">
                     {formatDistanceMeters(s.distanceMeters)}
                   </Text>
                 </View>
-                {/* 第2行：状态 + 营业时间（仅第一段） */}
+                <View className="store-card-status-row">
-                <View className="store-card-row store-card-row--meta">
                   <Text className="store-card-status">{formatStatus(s)}</Text>
-                  <Text className="store-card-hours" numberOfLines={1}>
+                  <Text className="store-card-hours">{formatHours(s)}</Text>
-                    {formatHours(s)}
-                  </Text>
                 </View>
-                {/* 第3行：地址 + 去核销 */}
+                <Text className="store-card-address">
-                <View className="store-card-row store-card-row--foot">
+                  {s.address || (s.district ? `${s.district}` : '地址待完善')}
-                  <Text className="store-card-address" numberOfLines={1}>
+                </Text>
-                    {s.address || (s.district ? `${s.district}` : '地址待完善')}
+                <View className="store-card-footer">
-                  </Text>
+                  <View className="store-card-footer-spacer" />
-                  <View
+                  <Text
                     className="store-card-cta"
                     onClick={(e) => {
                       e.stopPropagation();
                       Taro.navigateTo({ url: '/pages/redeem/index' });
                     }}
                   >
-                    <Text className="store-card-cta-text">去核销</Text>
+                    去核销
-                  </View>
+                  </Text>
                 </View>
               </View>
             </View>

apps/mini-user/src/styles/stores.css

@@ -144,25 +144,24 @@
   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: 8px;
+  border-radius: var(--radius-md);
   background: var(--color-surface-container);
   display: block;
 }
@@ -174,24 +173,16 @@
 .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-row {
+.store-card-head {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
-  min-width: 0;
+  justify-content: space-between;
-  overflow: hidden;
-}
-
-/* 第1行：加粗标题（单行截断）+ 右对齐距离 */
-.store-card-row--head {
   gap: 8px;
-  height: 22px;
+  margin-bottom: 6px;
 }
 
 .store-card-name {
@@ -200,88 +191,78 @@
   font-family: var(--font-headline);
   font-size: 15px;
   font-weight: 700;
-  line-height: 22px;
+  line-height: 1.35;
-  color: #1a1a1a;
+  color: var(--color-on-surface);
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 .store-card-distance {
   flex-shrink: 0;
-  max-width: 40%;
   font-size: 12px;
-  font-weight: 400;
+  line-height: 1.35;
-  line-height: 22px;
+  color: var(--color-subtle-gray);
-  color: #999;
-  text-align: right;
-  white-space: nowrap;
 }
 
-/* 第2行：营业状态 + 营业时间（单行） */
+.store-card-status-row {
-.store-card-row--meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
   gap: 6px;
-  height: 20px;
+  margin-bottom: 4px;
 }
 
 .store-card-status {
   flex-shrink: 0;
-  padding: 0 6px;
+  padding: 2px 8px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   background: rgba(45, 106, 79, 0.12);
-  color: #2d6a4f;
+  color: var(--color-success-green);
   font-size: 11px;
   font-weight: 600;
-  line-height: 18px;
+  line-height: 1.4;
-  white-space: nowrap;
 }
 
 .store-card-hours {
   flex: 1;
   min-width: 0;
   font-size: 11px;
-  font-weight: 400;
+  line-height: 1.4;
-  line-height: 20px;
+  color: var(--color-subtle-gray);
-  color: #999;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* 第3行：地址（单行截断）+ 右对齐去核销 */
-.store-card-row--foot {
-  gap: 8px;
-  height: 28px;
 }
 
 .store-card-address {
-  flex: 1;
+  font-size: 12px;
-  min-width: 0;
+  line-height: 1.45;
-  font-size: 9px;
+  color: var(--color-subtle-gray);
-  font-weight: 400;
-  line-height: 28px;
-  color: #999;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  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;
 }
 
 .store-card-cta {
   flex-shrink: 0;
-  display: flex;
+  padding: 6px 16px;
-  align-items: center;
+  border-radius: var(--radius-full);
-  justify-content: center;
+  background: var(--color-heritage-red);
-  padding: 0 14px;
+  color: #fff;
-  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: 26px;
+  line-height: 1.4;
-  color: #fff;
-  white-space: nowrap;
 }