fix: 首页替换为正式内容，移除旧 switchTab 跳转
This commit is contained in:
jacobxu666
+116
-36
@@ -1,53 +1,133 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="splash">
|
<view class="page">
|
||||||
<image class="logo" src="/static/logo.png" mode="aspectFit" />
|
<view class="header">
|
||||||
<text class="title">湖南12301文旅专区</text>
|
<view class="search-bar" @click="goSearch">
|
||||||
<text class="subtitle">加载中...</text>
|
<text class="search-icon">🔍</text>
|
||||||
|
<text class="search-placeholder">搜索景区、活动...</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y class="scroll-content">
|
||||||
|
<swiper class="banner-swiper" autoplay circular indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
|
||||||
|
<swiper-item v-for="item in banners" :key="item.id" @click="goDetail(item)">
|
||||||
|
<image class="banner-img" :src="item.image" mode="aspectFill" />
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
|
||||||
|
<view class="section">
|
||||||
|
<view class="section-header">
|
||||||
|
<text class="section-title">热门景区</text>
|
||||||
|
<text class="section-more" @click="goMore">查看更多 ›</text>
|
||||||
|
</view>
|
||||||
|
<view class="spot-list">
|
||||||
|
<view class="spot-card" v-for="item in hotSpots" :key="item.id" @click="goSpot(item)">
|
||||||
|
<image class="spot-img" :src="item.image" mode="aspectFill" />
|
||||||
|
<view class="spot-info">
|
||||||
|
<text class="spot-name">{{ item.name }}</text>
|
||||||
|
<view class="spot-meta">
|
||||||
|
<text class="spot-price">¥{{ item.price }}<text class="spot-price-unit">/人</text></text>
|
||||||
|
<text class="spot-sales">已售{{ item.sales }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="section">
|
||||||
|
<view class="section-header">
|
||||||
|
<text class="section-title">精选活动</text>
|
||||||
|
</view>
|
||||||
|
<view class="activity-list">
|
||||||
|
<view class="activity-card" v-for="item in activities" :key="item.id" @click="goActivity(item)">
|
||||||
|
<image class="activity-img" :src="item.image" mode="aspectFill" />
|
||||||
|
<view class="activity-info">
|
||||||
|
<text class="activity-name">{{ item.name }}</text>
|
||||||
|
<text class="activity-desc">{{ item.desc }}</text>
|
||||||
|
<text class="activity-price" v-if="item.price">¥{{ item.price }}起</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted } from 'vue'
|
import { ref, onMounted } from 'vue'
|
||||||
import { useUserStore } from '../../store/user'
|
import { useUserStore } from '../../store/user'
|
||||||
|
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
|
|
||||||
|
/** 轮播图数据 */
|
||||||
|
const banners = ref([
|
||||||
|
{ id: 1, image: 'https://picsum.photos/750/340?random=1', link: '' },
|
||||||
|
{ id: 2, image: 'https://picsum.photos/750/340?random=2', link: '' }
|
||||||
|
])
|
||||||
|
|
||||||
|
/** 热门景区 */
|
||||||
|
const hotSpots = ref([
|
||||||
|
{ id: 1, name: '张家界国家森林公园', image: 'https://picsum.photos/200/200?random=3', price: 225, sales: 12580 },
|
||||||
|
{ id: 2, name: '天门山景区', image: 'https://picsum.photos/200/200?random=4', price: 278, sales: 8960 },
|
||||||
|
{ id: 3, name: '凤凰古城', image: 'https://picsum.photos/200/200?random=5', price: 0, sales: 25600 },
|
||||||
|
{ id: 4, name: '岳麓山景区', image: 'https://picsum.photos/200/200?random=6', price: 0, sales: 18200 }
|
||||||
|
])
|
||||||
|
|
||||||
|
/** 精选活动 */
|
||||||
|
const activities = ref([
|
||||||
|
{ id: 1, name: '周末亲子游', desc: '探索自然，快乐成长', image: 'https://picsum.photos/300/200?random=7', price: 199 },
|
||||||
|
{ id: 2, name: '夜游湘江', desc: '璀璨夜景，浪漫之旅', image: 'https://picsum.photos/300/200?random=8', price: 128 }
|
||||||
|
])
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setTimeout(() => {
|
// 未登录时跳转登录页
|
||||||
if (userStore.isLogin) {
|
if (!userStore.isLogin) {
|
||||||
uni.switchTab({ url: '/packages/user/pages/index/index' })
|
|
||||||
} else {
|
|
||||||
uni.navigateTo({ url: '/pages/login/login' })
|
uni.navigateTo({ url: '/pages/login/login' })
|
||||||
}
|
}
|
||||||
}, 800)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/** 跳转搜索 */
|
||||||
|
function goSearch() { uni.navigateTo({ url: '/pages/search/search' }) }
|
||||||
|
|
||||||
|
/** 跳转详情 */
|
||||||
|
function goDetail(item: any) { /* TODO */ }
|
||||||
|
|
||||||
|
/** 跳转景区详情 */
|
||||||
|
function goSpot(item: any) { uni.navigateTo({ url: `/pages/spot/detail?id=${item.id}` }) }
|
||||||
|
|
||||||
|
/** 查看更多 */
|
||||||
|
function goMore() { uni.navigateTo({ url: '/pages/spot/list' }) }
|
||||||
|
|
||||||
|
/** 跳转活动 */
|
||||||
|
function goActivity(item: any) { /* TODO */ }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.splash {
|
.page { display: flex; flex-direction: column; height: 100vh; background: #f5f5f5; }
|
||||||
display: flex;
|
.header { background: linear-gradient(135deg, #4A90D9, #357ABD); padding: 20rpx 30rpx; padding-top: 80rpx; }
|
||||||
flex-direction: column;
|
.search-bar { display: flex; align-items: center; background: rgba(255,255,255,0.9); border-radius: 40rpx; padding: 16rpx 24rpx; }
|
||||||
align-items: center;
|
.search-icon { font-size: 28rpx; margin-right: 12rpx; }
|
||||||
justify-content: center;
|
.search-placeholder { font-size: 26rpx; color: #999; }
|
||||||
min-height: 100vh;
|
.scroll-content { flex: 1; }
|
||||||
background: #fff;
|
.banner-swiper { height: 340rpx; }
|
||||||
}
|
.banner-img { width: 100%; height: 100%; }
|
||||||
|
.section { padding: 20rpx; }
|
||||||
.logo {
|
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
|
||||||
width: 160rpx;
|
.section-title { font-size: 32rpx; font-weight: bold; color: #333; }
|
||||||
height: 160rpx;
|
.section-more { font-size: 24rpx; color: #999; }
|
||||||
margin-bottom: 30rpx;
|
.spot-list { display: flex; flex-wrap: wrap; gap: 16rpx; }
|
||||||
}
|
.spot-card { width: calc(50% - 8rpx); background: #fff; border-radius: 16rpx; overflow: hidden; }
|
||||||
|
.spot-img { width: 100%; height: 200rpx; }
|
||||||
.title {
|
.spot-info { padding: 16rpx; }
|
||||||
font-size: 40rpx;
|
.spot-name { font-size: 26rpx; font-weight: 500; color: #333; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
|
||||||
font-weight: bold;
|
.spot-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8rpx; }
|
||||||
color: #333;
|
.spot-price { font-size: 30rpx; color: #E74C3C; font-weight: bold; }
|
||||||
margin-bottom: 16rpx;
|
.spot-price-unit { font-size: 20rpx; font-weight: normal; }
|
||||||
}
|
.spot-sales { font-size: 22rpx; color: #999; }
|
||||||
|
.activity-list { display: flex; flex-direction: column; gap: 16rpx; }
|
||||||
.subtitle {
|
.activity-card { display: flex; background: #fff; border-radius: 16rpx; overflow: hidden; }
|
||||||
font-size: 26rpx;
|
.activity-img { width: 240rpx; height: 160rpx; flex-shrink: 0; }
|
||||||
color: #999;
|
.activity-info { flex: 1; padding: 16rpx; display: flex; flex-direction: column; justify-content: center; }
|
||||||
}
|
.activity-name { font-size: 28rpx; font-weight: 500; color: #333; margin-bottom: 8rpx; }
|
||||||
|
.activity-desc { font-size: 24rpx; color: #999; margin-bottom: 8rpx; }
|
||||||
|
.activity-price { font-size: 28rpx; color: #E74C3C; font-weight: bold; }
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user