From acc994d16ce0cbf38771cf91b710d8ce8d7e3f3d Mon Sep 17 00:00:00 2001
From: hajimi <phperbylyh@163.com>
Date: Mon, 3 Aug 2026 16:11:06 +0800
Subject: [PATCH] style: unify lottery history page

---
 docs/业务进度管理.md                          |  14 +
 .../src/packages_lottery/pages/draw_list.vue  | 317 ++++++++++++++++--
 2 files changed, 295 insertions(+), 36 deletions(-)

diff --git a/docs/业务进度管理.md b/docs/业务进度管理.md
index c9a28435..3801dfd0 100644
--- a/docs/业务进度管理.md
+++ b/docs/业务进度管理.md
@@ -13,6 +13,20 @@
 
 ## 一、已完成事项
 
+### 127. 历史开奖记录页主页风格统一
+
+- 状态：代码已完成，待 H5 验收 - 时间：2026-08-03
+
+完成内容：
+
+- 历史开奖页统一彩票主页的 SB 品牌导航、蓝色主色和浅灰背景层级。
+- 开奖记录改为带彩种标识、状态标签、号码球和操作按钮的卡片布局。
+- 增加记录总数、数据说明及详情/智能分析入口，保持原分页和 AI 功能不变。
+
+涉及模块：
+
+- `uniapp/src/packages_lottery/pages/draw_list.vue`
+
 ### 126. 历史开奖记录页面数据兼容优化
 
 - 状态：代码已完成，待 H5 验收 - 时间：2026-08-03
diff --git a/uniapp/src/packages_lottery/pages/draw_list.vue b/uniapp/src/packages_lottery/pages/draw_list.vue
index 32ccf8c2..5504981b 100644
--- a/uniapp/src/packages_lottery/pages/draw_list.vue
+++ b/uniapp/src/packages_lottery/pages/draw_list.vue
@@ -1,17 +1,34 @@
 <template>
     <page-meta :page-style="showAiPopup ? 'overflow: hidden;' : ''" />
     <view class="draw-list-page" :class="{ 'page-no-scroll': showAiPopup }">
-        <!-- 导航栏 -->
+        <!-- 与彩票主页统一的品牌导航 -->
         <view class="dl-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
             <view class="dl-nav__content">
                 <view class="dl-nav__back" @tap="goBack">
-                    <u-icon name="arrow-left" size="36" color="#fff" />
+                    <u-icon name="arrow-left" size="34" color="#1f2937" />
+                </view>
+                <view class="dl-nav__brand">
+                    <image v-if="websiteLogo" class="dl-nav__logo" :src="websiteLogo" mode="aspectFit" />
+                    <view v-else class="dl-nav__logo dl-nav__logo--fallback"><text>SB</text></view>
+                    <view class="dl-nav__titles">
+                        <text class="dl-nav__title">历史开奖</text>
+                        <text class="dl-nav__subtitle">{{ categoryName }}</text>
+                    </view>
+                </view>
+                <view class="dl-nav__action" @tap="goBack">
+                    <text>彩票中心</text>
                 </view>
-                <text class="dl-nav__title">{{ categoryName }}</text>
-                <view class="dl-nav__placeholder" />
             </view>
         </view>
 
+        <view class="draw-list__intro">
+            <view>
+                <text class="draw-list__intro-title">{{ categoryName }}开奖记录</text>
+                <text class="draw-list__intro-desc">按开奖时间倒序排列，数据仅供参考</text>
+            </view>
+            <text v-if="totalCount" class="draw-list__intro-count">共 {{ totalCount }} 期</text>
+        </view>
+
         <!-- 开奖列表 -->
         <z-paging ref="paging" v-model="drawList" @query="queryList" :fixed="false" height="calc(100vh - 44px)">
             <view v-if="!drawList.length && !listLoading" class="draw-list__empty">
@@ -24,10 +41,21 @@
             </view>
             <view v-for="item in drawList" :key="item.code + item.issue" class="draw-card">
                 <view class="draw-card__header">
-                    <text class="draw-card__period">第 {{ item.issue }} 期</text>
-                    <text class="draw-card__date">{{ item.draw_time }}</text>
-                    <view class="draw-card__badge" :class="{ 'draw-card__badge--pending': Number(item.status) !== 1 }">
-                        <text>{{ Number(item.status) === 1 ? '已开奖' : '待开奖' }}</text>
+                    <view class="draw-card__game">
+                        <view class="draw-card__logo"><text>{{ categoryName.slice(0, 1) }}</text></view>
+                        <view class="draw-card__meta">
+                            <text class="draw-card__name">{{ categoryName }}</text>
+                            <view class="draw-card__period-row">
+                                <text class="draw-card__period">第 {{ item.issue }} 期</text>
+                                <view class="draw-card__badge" :class="{ 'draw-card__badge--pending': Number(item.status) !== 1 }">
+                                    <text>{{ Number(item.status) === 1 ? '已开奖' : '待开奖' }}</text>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                    <view class="draw-card__date-wrap">
+                        <text class="draw-card__date">{{ item.draw_time }}</text>
+                        <text class="draw-card__arrow">›</text>
                     </view>
                 </view>
                 <view v-if="Number(item.status) === 1 && item.numbers?.length" class="draw-card__balls">
@@ -51,6 +79,16 @@
                         <text class="ai-predict-btn__arrow">›</text>
                     </view>
                 </view>
+                <view v-if="Number(item.status) === 1" class="draw-card__actions">
+                    <view class="draw-card__action" @tap.stop="goDetail(item)">
+                        <u-icon name="file-text" size="28" color="#185dff" />
+                        <text>查看详情</text>
+                    </view>
+                    <view class="draw-card__action" @tap.stop="openAiPopup(item)">
+                        <text class="draw-card__action-ai">AI</text>
+                        <text>智能分析</text>
+                    </view>
+                </view>
             </view>
         </z-paging>
 
@@ -153,6 +191,7 @@ import { ref, shallowRef, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { getDrawResultList, getLatestDrawResult, getLotteryAiPredict } from '@/api/lottery'
 import { useUserStore } from '@/stores/user'
+import { useAppStore } from '@/stores/app'
 import { AI_DAILY_FREE_TEXT, getAiFreeRemain } from '@/config/ai'
 
 const statusBarHeight = ref(0)
@@ -161,9 +200,12 @@ const gameTemplate = ref('')
 const categoryName = ref('')
 const drawList = ref<any[]>([])
 const latestDraw = ref<any>(null)
+const totalCount = ref(0)
 const listLoading = ref(false)
 const listError = ref(false)
 const paging = shallowRef()
+const appStore = useAppStore()
+const websiteLogo = computed(() => appStore.getWebsiteConfig.shop_logo || '')
 
 uni.getSystemInfo({
     success: (res) => {
@@ -231,6 +273,7 @@ const queryList = async (pageNo: number, pageSize: number) => {
                 ? item.numbers
                 : String(item.draw_code || '').split(',').filter(Boolean)
         }))
+        totalCount.value = Number(res?.count ?? res?.data?.count ?? totalCount.value) || 0
         lists.forEach((item: any) => { item.game_name = categoryName.value })
         paging.value?.complete(lists)
     } catch (e) {
@@ -370,87 +413,267 @@ onLoad((options: any) => {
 }
 
 .dl-nav {
-    background: linear-gradient(135deg, #185dff, #ff6b6b);
+    background: #fff;
+    border-bottom: 1rpx solid #edf0f5;
 
     &__content {
-        height: 44px;
+        min-height: 66px;
         display: flex;
         align-items: center;
         padding: 0 24rpx;
     }
 
     &__back {
-        width: 60rpx;
-        height: 44px;
+        width: 64rpx;
+        height: 64rpx;
         display: flex;
         align-items: center;
     }
 
-    &__title {
+    &__brand {
+        display: flex;
+        align-items: center;
+        gap: 16rpx;
         flex: 1;
-        text-align: center;
-        font-size: 34rpx;
-        font-weight: bold;
-        color: #fff;
+        min-width: 0;
     }
 
-    &__placeholder {
-        width: 60rpx;
+    &__logo {
+        width: 68rpx;
+        height: 68rpx;
+        border-radius: 50%;
+        flex-shrink: 0;
+    }
+
+    &__logo--fallback {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #185dff;
+        border: 4rpx solid #dce8ff;
+
+        text {
+            color: #fff;
+            font-size: 23rpx;
+            font-style: italic;
+            font-weight: 900;
+        }
+    }
+
+    &__titles {
+        display: flex;
+        flex-direction: column;
+        gap: 2rpx;
+        min-width: 0;
+    }
+
+    &__title {
+        font-size: 36rpx;
+        font-weight: bold;
+        color: #111827;
+        line-height: 1.1;
+    }
+
+    &__subtitle {
+        max-width: 400rpx;
+        overflow: hidden;
+        color: #8b95a7;
+        font-size: 22rpx;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__action {
+        padding: 12rpx 18rpx;
+        border-radius: 24rpx;
+        background: #eef4ff;
+        color: #185dff;
+        font-size: 22rpx;
+        white-space: nowrap;
     }
 }
 
+.draw-list__intro {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 26rpx 30rpx 20rpx;
+    background: #f5f7fb;
+}
+
+.draw-list__intro-title {
+    display: block;
+    color: #111827;
+    font-size: 32rpx;
+    font-weight: 700;
+}
+
+.draw-list__intro-desc {
+    display: block;
+    margin-top: 6rpx;
+    color: #9aa3b2;
+    font-size: 22rpx;
+}
+
+.draw-list__intro-count {
+    color: #185dff;
+    font-size: 22rpx;
+    white-space: nowrap;
+}
+
 .draw-card {
-    margin: 20rpx 24rpx 0;
+    margin: 16rpx 24rpx 0;
     background: #fff;
-    border-radius: 16rpx;
-    padding: 24rpx;
+    border: 1rpx solid #dfe5ee;
+    border-radius: 18rpx;
+    padding: 22rpx 22rpx 18rpx;
+    box-shadow: 0 4rpx 14rpx rgba(28, 53, 89, 0.03);
 
     &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 18rpx;
+    }
+
+    &__game {
+        display: flex;
+        align-items: center;
+        gap: 14rpx;
+        min-width: 0;
+    }
+
+    &__logo {
+        width: 64rpx;
+        height: 64rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        border: 2rpx solid #ff6a55;
+        border-radius: 50%;
+        background: linear-gradient(145deg, #ff8b6e, #ee3835);
+
+        text {
+            color: #fff;
+            font-size: 25rpx;
+            font-weight: 700;
+        }
+    }
+
+    &__meta {
+        display: flex;
+        flex-direction: column;
+        gap: 6rpx;
+        min-width: 0;
+    }
+
+    &__name {
+        overflow: hidden;
+        color: #111827;
+        font-size: 29rpx;
+        font-weight: 700;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &__period-row {
         display: flex;
         align-items: center;
         gap: 12rpx;
-        margin-bottom: 20rpx;
+    }
+
+    &__date-wrap {
+        display: flex;
+        align-items: center;
+        gap: 6rpx;
+        flex-shrink: 0;
+        margin-left: 12rpx;
     }
 
     &__period {
-        font-size: 28rpx;
+        font-size: 30rpx;
         font-weight: bold;
         color: #222;
     }
 
     &__date {
-        font-size: 24rpx;
-        color: #999;
-        margin-left: auto;
+        font-size: 22rpx;
+        color: #8b95a7;
+    }
+
+    &__arrow {
+        color: #8b95a7;
+        font-size: 36rpx;
+        line-height: 1;
     }
 
     &__badge {
-        font-size: 22rpx;
-        color: #22c55e;
-        background: #f0fdf4;
-        padding: 4rpx 16rpx;
-        border-radius: 8rpx;
+        font-size: 20rpx;
+        color: #185dff;
+        background: #eef4ff;
+        padding: 5rpx 14rpx;
+        border-radius: 18rpx;
 
         &--pending {
             color: #f59e0b;
-            background: #fffbeb;
+            background: #fff8e8;
         }
     }
 
     &__balls {
         display: flex;
         align-items: center;
-        gap: 10rpx;
+        gap: 14rpx;
         flex-wrap: wrap;
-        margin-bottom: 16rpx;
+        margin: 6rpx 0 18rpx;
     }
 
     &__pending {
         text-align: center;
-        padding: 20rpx;
+        padding: 22rpx;
         color: #999;
         font-size: 26rpx;
     }
+
+    &__actions {
+        display: flex;
+        gap: 12rpx;
+        padding-top: 16rpx;
+        border-top: 1rpx solid #edf0f5;
+    }
+
+    &__action {
+        flex: 1;
+        height: 66rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        border: 2rpx solid #185dff;
+        border-radius: 14rpx;
+        color: #185dff;
+        font-size: 26rpx;
+
+        &:active {
+            background: #f0f5ff;
+        }
+    }
+
+    &__action-ai {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 34rpx;
+        height: 28rpx;
+        padding: 0 5rpx;
+        border-radius: 6rpx;
+        background: #185dff;
+        color: #fff;
+        font-size: 17rpx;
+        font-weight: 800;
+        letter-spacing: 1rpx;
+    }
 }
 
 /* 号码球 */
@@ -500,6 +723,28 @@ onLoad((options: any) => {
     font-size: 22rpx;
 }
 
+.draw-card .ball--sm {
+    background: #fff;
+    border: 2rpx solid #185dff;
+    box-shadow: none;
+}
+
+.draw-card .ball--red {
+    border-color: #ff3b30;
+}
+
+.draw-card .ball--green {
+    border-color: #19a957;
+}
+
+.draw-card .ball--blue {
+    border-color: #185dff;
+}
+
+.draw-card .ball__num {
+    color: #111827;
+}
+
 /* 球+生肖容器 */
 .ball-wrap {
     display: flex;