feat: 首页热门景点数据更新

- 6个萍乡景区:武功山金顶/杨岐山孽龙洞/仙凤三宝/君澜温泉/凯光新天地/和平农场
- 挂牌价黄色展示,持卡待遇标签蓝底白字(免门票1次/6次)
- 地区统一显示「萍乡」

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-06-25 14:31:08 +08:00
co-authored by Claude
parent 39c85593ce
commit aa9f024094
+16 -25
View File
@@ -103,14 +103,14 @@
<view class="spots-grid">
<view
v-for="(spot, idx) in scenicSpots.slice(0, 6)"
v-for="(spot, idx) in hotSpots"
:key="spot.id"
class="spot animate-fade-in-up"
:class="`stagger-${Math.min(idx + 4, 10)}`"
@click="goSpot(spot)"
>
<view class="spot-cover">
<image class="spot-img" :src="getSpotImage(spot.id)" mode="aspectFill" />
<image class="spot-img" :src="spot.image" mode="aspectFill" />
<view class="spot-region">
<view class="pin-dot" />
<text>{{ spot.region }}</text>
@@ -120,9 +120,8 @@
<text class="spot-name">{{ spot.name }}</text>
<view class="spot-meta">
<text class="spot-price">¥{{ spot.price }}</text>
<view class="spot-free">
<view class="free-dot" />
<text>免门票</text>
<view class="spot-benefit">
<text>{{ spot.benefit }}</text>
</view>
</view>
</view>
@@ -135,7 +134,6 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { scenicSpots } from '../../data/scenic-spots'
import type { ScenicSpotItem } from '../../data/scenic-spots'
/** 金刚区 */
@@ -167,19 +165,15 @@ function onNoticeTouchStart() { swiperAutoplay.value = false }
function onNoticeTouchEnd() { swiperAutoplay.value = true }
function goMoreNotice() { uni.showToast({ title: '全部公告开发中', icon: 'none' }) }
/** 景点山水风景图 */
const spotImages: Record<number, string> = {
1: 'https://images.unsplash.com/photo-1513415564515-763d91423bdd?fm=jpg&q=80&w=400&h=250&fit=crop',
2: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?fm=jpg&q=80&w=400&h=250&fit=crop',
3: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?fm=jpg&q=80&w=400&h=250&fit=crop',
4: 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?fm=jpg&q=80&w=400&h=250&fit=crop',
5: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?fm=jpg&q=80&w=400&h=250&fit=crop',
6: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?fm=jpg&q=80&w=400&h=250&fit=crop',
}
function getSpotImage(id: number): string {
return spotImages[id] || `https://images.unsplash.com/photo-1506905925346-21bda4d32df4?fm=jpg&q=80&w=400&h=250&fit=crop`
}
/** 热门景点数据 */
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' },
]
function goCardDetail() {
uni.navigateTo({ url: '/packages/user/pages/card/list' })
@@ -672,17 +666,14 @@ function goMore() {
font-weight: $font-weight-semibold;
}
.spot-free {
display: flex;
align-items: center;
gap: 4rpx;
background: rgba($color-accent, 0.08);
.spot-benefit {
background: $uv-primary;
border-radius: $radius-sm;
padding: 4rpx $spacing-1;
text {
font-size: $font-size-xs;
color: $color-accent;
color: #fff;
font-weight: $font-weight-medium;
}
}