xuchao/pingxiangcard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(index): migrate hardcoded values to design tokens and mock data

Browse Source
This commit is contained in:
jacobxu666
2026-06-26 10:48:59 +08:00
parent cfb9a4ce26
commit d9a7aad499
1 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.vue
+28 -21
View File
@@ -141,7 +141,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' 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' import AnnouncementModal from '../../components/AnnouncementModal.vue'
/** 金刚区 */ /** 金刚区 */
@@ -173,11 +174,17 @@ function onQuickAction(item: { label: string }) {
} }
/** 公告数据（mock，后续接 API） */ /** 公告数据（mock，后续接 API） */
const announcements = ref([ const noticeTypeMap: Record<number, { type: string; typeLabel: string }> = {
{ id: 1, type: 'important', typeLabel: '重要', title: '赣湘全域旅游年卡限时优惠', date: '2026-06-20', content: '赣湘全域旅游年卡限时优惠，工会会员专享¥300/套卡！', body: '赣湘全域旅游年卡限时优惠活动现已开启，工会会员凭有效证件可享专享价¥300/套卡（原价¥580）。套卡包含武功山金顶景区、杨岐山孽龙洞景区、仙凤三宝景区等42家合作景区全年免首道门票权益，覆盖萍乡、长沙、株洲、湘潭等地区。活动期间购买还可额外获赠君澜温泉单次体验券一张。活动截止至2026年7月31日，数量有限，售完即止。' }, 1: { type: 'important', typeLabel: '重要' },
{ id: 2, type: 'scenic', typeLabel: '景区', title: '武功山金顶景区开放通知', date: '2026-06-18', content: '武功山金顶景区已开放，持卡可免费入园1次。', body: '武功山金顶景区即日起正常开放，营业时间08:00-18:00。赣湘全域旅游年卡持卡用户可免费入园1次（含首道门票，价值¥70）。温馨提示：山顶温差较大，建议携带防风保暖衣物；雷雨天气请勿登顶；需提前1天通过小程序预约，每日限流5000人。' }, 2: { type: 'scenic', typeLabel: '景区' },
{ id: 3, type: 'promo', typeLabel: '福利', title: '超级玩家卡全新上线', date: '2026-06-15', content: '超级玩家卡全新上线，40家景区免门票，仅¥198！', body: '超级玩家卡全新上线！仅需¥198即可享受40家合作景区免首道门票权益，单次最高可省¥228。覆盖景区包括武功山金顶（¥70）、君澜温泉（¥228）、杨岐山孽龙洞（¥68）、仙凤三宝（¥50）等热门景区。卡片有效期为购买之日起一年，法定节假日通用，不限购买次数。适合经常出游的家庭和户外爱好者。' }, 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) const swiperAutoplay = ref(true)
@@ -204,14 +211,14 @@ function goMoreNotice() {
} }
/** 热门景点数据 */ /** 热门景点数据 */
const hotSpots = [ const hotSpots = mockScenicList.slice(0, 6).map(s => ({
{ 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: s.id,
{ 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' }, name: s.name,
{ 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' }, price: s.price,
{ 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' }, benefit: `免门票${s.freeCount}次`,
{ 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' }, region: s.region,
{ 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' }, image: s.image,
] }))
function goCardDetail() { function goCardDetail() {
uni.navigateTo({ url: '/pages/card-buy/card-buy' }) uni.navigateTo({ url: '/pages/card-buy/card-buy' })
@@ -221,7 +228,7 @@ function goUnionBuy() {
uni.navigateTo({ url: '/pages/union-buy/union-buy' }) 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}` }) uni.navigateTo({ url: `/pages/scenic-detail/scenic-detail?id=${spot.id}` })
} }
@@ -272,7 +279,7 @@ function goMore() {
flex-shrink: 0; flex-shrink: 0;
background: $color-accent; background: $color-accent;
&.type-important { background: #e53935; } &.type-important { background: $uv-error; }
&.type-scenic { background: #3c9cff; } &.type-scenic { background: #3c9cff; }
&.type-promo { background: #f9ae3d; } &.type-promo { background: #f9ae3d; }
} }
@@ -490,13 +497,13 @@ function goMore() {
.promo-currency { .promo-currency {
font-size: $font-size-2xl; font-size: $font-size-2xl;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
color: #FFD600; color: $color-price-highlight;
} }
.promo-price { .promo-price {
font-size: 144rpx; font-size: 144rpx;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
color: #FFD600; color: $color-price-highlight;
line-height: 0.85; line-height: 0.85;
letter-spacing: -4rpx; letter-spacing: -4rpx;
} }
@@ -515,8 +522,8 @@ function goMore() {
} }
.promo-save { .promo-save {
font-size: 22rpx; font-size: $font-size-xs;
color: #e53935; color: $color-price;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
letter-spacing: 2rpx; letter-spacing: 2rpx;
} }
@@ -693,7 +700,7 @@ function goMore() {
.spot-price { .spot-price {
font-size: $font-size-base; font-size: $font-size-base;
color: #e53935; color: $color-price;
font-weight: 500; font-weight: 500;
} }