From 4019d312a6f0d101e6aa500c516cb3779c4c5378 Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Sun, 14 Jun 2026 23:00:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A6=96=E9=A1=B5=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E4=B8=BA=E6=AD=A3=E5=BC=8F=E5=86=85=E5=AE=B9=EF=BC=8C=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E6=97=A7=20switchTab=20=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.vue | 156 ++++++++++++++++++++++++++++----------
 1 file changed, 118 insertions(+), 38 deletions(-)

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 3cc8c28..6ded68d 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,53 +1,133 @@
 <template>
-  <view class="splash">
-    <image class="logo" src="/static/logo.png" mode="aspectFit" />
-    <text class="title">湖南12301文旅专区</text>
-    <text class="subtitle">加载中...</text>
+  <view class="page">
+    <view class="header">
+      <view class="search-bar" @click="goSearch">
+        <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>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useUserStore } from '../../store/user'
 
 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(() => {
-  setTimeout(() => {
-    if (userStore.isLogin) {
-      uni.switchTab({ url: '/packages/user/pages/index/index' })
-    } else {
-      uni.navigateTo({ url: '/pages/login/login' })
-    }
-  }, 800)
+  // 未登录时跳转登录页
+  if (!userStore.isLogin) {
+    uni.navigateTo({ url: '/pages/login/login' })
+  }
 })
+
+/** 跳转搜索 */
+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>
 
 <style scoped>
-.splash {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  background: #fff;
-}
-
-.logo {
-  width: 160rpx;
-  height: 160rpx;
-  margin-bottom: 30rpx;
-}
-
-.title {
-  font-size: 40rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 16rpx;
-}
-
-.subtitle {
-  font-size: 26rpx;
-  color: #999;
-}
+.page { display: flex; flex-direction: column; height: 100vh; background: #f5f5f5; }
+.header { background: linear-gradient(135deg, #4A90D9, #357ABD); padding: 20rpx 30rpx; padding-top: 80rpx; }
+.search-bar { display: flex; align-items: center; background: rgba(255,255,255,0.9); border-radius: 40rpx; padding: 16rpx 24rpx; }
+.search-icon { font-size: 28rpx; margin-right: 12rpx; }
+.search-placeholder { font-size: 26rpx; color: #999; }
+.scroll-content { flex: 1; }
+.banner-swiper { height: 340rpx; }
+.banner-img { width: 100%; height: 100%; }
+.section { padding: 20rpx; }
+.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20rpx; }
+.section-title { font-size: 32rpx; font-weight: bold; color: #333; }
+.section-more { font-size: 24rpx; color: #999; }
+.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; }
+.spot-info { padding: 16rpx; }
+.spot-name { font-size: 26rpx; font-weight: 500; color: #333; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
+.spot-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8rpx; }
+.spot-price { font-size: 30rpx; color: #E74C3C; font-weight: bold; }
+.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; }
+.activity-card { display: flex; background: #fff; border-radius: 16rpx; overflow: hidden; }
+.activity-img { width: 240rpx; height: 160rpx; flex-shrink: 0; }
+.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>