From d9a7aad4998172659445ae68444aa410c786de61 Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Fri, 26 Jun 2026 10:48:59 +0800
Subject: [PATCH] refactor(index): migrate hardcoded values to design tokens
 and mock data

---
 src/pages/index/index.vue | 49 ++++++++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 513a25e..ec9f051 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -141,7 +141,8 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import type { ScenicSpotItem } from '../../data/scenic-spots'
+import { mockScenicList } from '@/mock/scenic'
+import { mockNotices } from '@/mock/notice'
 import AnnouncementModal from '../../components/AnnouncementModal.vue'
 
 /** 金刚区 */
@@ -173,11 +174,17 @@ function onQuickAction(item: { label: string }) {
 }
 
 /** 公告数据（mock，后续接 API） */
-const announcements = ref([
-  { id: 1, type: 'important', typeLabel: '重要', title: '赣湘全域旅游年卡限时优惠', date: '2026-06-20', content: '赣湘全域旅游年卡限时优惠，工会会员专享¥300/套卡！', body: '赣湘全域旅游年卡限时优惠活动现已开启，工会会员凭有效证件可享专享价¥300/套卡（原价¥580）。套卡包含武功山金顶景区、杨岐山孽龙洞景区、仙凤三宝景区等42家合作景区全年免首道门票权益，覆盖萍乡、长沙、株洲、湘潭等地区。活动期间购买还可额外获赠君澜温泉单次体验券一张。活动截止至2026年7月31日，数量有限，售完即止。' },
-  { id: 2, type: 'scenic', typeLabel: '景区', title: '武功山金顶景区开放通知', date: '2026-06-18', content: '武功山金顶景区已开放，持卡可免费入园1次。', body: '武功山金顶景区即日起正常开放，营业时间08:00-18:00。赣湘全域旅游年卡持卡用户可免费入园1次（含首道门票，价值¥70）。温馨提示：山顶温差较大，建议携带防风保暖衣物；雷雨天气请勿登顶；需提前1天通过小程序预约，每日限流5000人。' },
-  { id: 3, type: 'promo', typeLabel: '福利', title: '超级玩家卡全新上线', date: '2026-06-15', content: '超级玩家卡全新上线，40家景区免门票，仅¥198！', body: '超级玩家卡全新上线！仅需¥198即可享受40家合作景区免首道门票权益，单次最高可省¥228。覆盖景区包括武功山金顶（¥70）、君澜温泉（¥228）、杨岐山孽龙洞（¥68）、仙凤三宝（¥50）等热门景区。卡片有效期为购买之日起一年，法定节假日通用，不限购买次数。适合经常出游的家庭和户外爱好者。' },
-])
+const noticeTypeMap: Record<number, { type: string; typeLabel: string }> = {
+  1: { type: 'important', typeLabel: '重要' },
+  2: { type: 'scenic', typeLabel: '景区' },
+  3: { type: 'promo', typeLabel: '福利' },
+}
+
+const announcements = ref(mockNotices.slice(0, 3).map(n => ({
+  ...n,
+  type: noticeTypeMap[n.id]?.type || 'scenic',
+  typeLabel: noticeTypeMap[n.id]?.typeLabel || '公告',
+})))
 
 /** 公告轮播状态 */
 const swiperAutoplay = ref(true)
@@ -204,14 +211,14 @@ function goMoreNotice() {
 }
 
 /** 热门景点数据 */
-const hotSpots = [
-  { id: 1, name: '武功山金顶景区', price: 70, benefit: '免门票1次', region: '萍乡', image: 'https://images.unsplash.com/photo-1513415564515-763d91423bdd?fm=jpg&q=80&w=400&h=250&fit=crop' },
-  { id: 2, name: '杨岐山孽龙洞景区', price: 68, benefit: '免门票6次', region: '萍乡', image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?fm=jpg&q=80&w=400&h=250&fit=crop' },
-  { id: 3, name: '仙凤三宝景区', price: 50, benefit: '免门票6次', region: '萍乡', image: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?fm=jpg&q=80&w=400&h=250&fit=crop' },
-  { id: 4, name: '武功山君澜温泉', price: 228, benefit: '免门票6次', region: '萍乡', image: 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?fm=jpg&q=80&w=400&h=250&fit=crop' },
-  { id: 5, name: '凯光新天地生态旅游区', price: 90, benefit: '免门票6次', region: '萍乡', image: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?fm=jpg&q=80&w=400&h=250&fit=crop' },
-  { id: 6, name: '和平农场·哎马乐园', price: 79, benefit: '免门票6次', region: '萍乡', image: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?fm=jpg&q=80&w=400&h=250&fit=crop' },
-]
+const hotSpots = mockScenicList.slice(0, 6).map(s => ({
+  id: s.id,
+  name: s.name,
+  price: s.price,
+  benefit: `免门票${s.freeCount}次`,
+  region: s.region,
+  image: s.image,
+}))
 
 function goCardDetail() {
   uni.navigateTo({ url: '/pages/card-buy/card-buy' })
@@ -221,7 +228,7 @@ function goUnionBuy() {
   uni.navigateTo({ url: '/pages/union-buy/union-buy' })
 }
 
-function goSpot(spot: ScenicSpotItem) {
+function goSpot(spot: { id: number }) {
   uni.navigateTo({ url: `/pages/scenic-detail/scenic-detail?id=${spot.id}` })
 }
 
@@ -272,7 +279,7 @@ function goMore() {
   flex-shrink: 0;
   background: $color-accent;
 
-  &.type-important { background: #e53935; }
+  &.type-important { background: $uv-error; }
   &.type-scenic { background: #3c9cff; }
   &.type-promo { background: #f9ae3d; }
 }
@@ -490,13 +497,13 @@ function goMore() {
 .promo-currency {
   font-size: $font-size-2xl;
   font-weight: $font-weight-bold;
-  color: #FFD600;
+  color: $color-price-highlight;
 }
 
 .promo-price {
   font-size: 144rpx;
   font-weight: $font-weight-bold;
-  color: #FFD600;
+  color: $color-price-highlight;
   line-height: 0.85;
   letter-spacing: -4rpx;
 }
@@ -515,8 +522,8 @@ function goMore() {
 }
 
 .promo-save {
-  font-size: 22rpx;
-  color: #e53935;
+  font-size: $font-size-xs;
+  color: $color-price;
   font-weight: $font-weight-bold;
   letter-spacing: 2rpx;
 }
@@ -693,7 +700,7 @@ function goMore() {
 
 .spot-price {
   font-size: $font-size-base;
-  color: #e53935;
+  color: $color-price;
   font-weight: 500;
 }