limo-platform/client/src/pages/index/index.vue

<template>
  <view class="limo-mobile">
    <!-- 首页内容 -->
    <view v-if="currentPage === 'home'">
      <!-- Header with logo and energy button -->
      <view class="header">
      <view class="header-content">
        <image :src="logoSrc" class="logo" mode="aspectFit" />
        <!-- <view class="energy-button" @click="goToMSpace">
          <text class="energy-icon">⚡</text>
        </view> -->
      </view>

      <!-- Navigation Tabs -->
      <view class="nav-tabs">
        <view class="tab-item active">
          <text class="tab-text">发现</text>
          <view class="tab-underline"></view>
        </view>
        <view class="tab-item">
          <text class="tab-text">关注</text>
        </view>
      </view>
    </view>

    <!-- Sports Categories -->
    <view class="sports-section">
      <view class="sports-container">
        <view class="sport-item all-category" :class="{ active: selectedSport === 'all' }" @tap="selectSport('all')">
          <view class="category-content">
            <text class="category-text">全部</text>
            <text class="category-text">项目</text>
          </view>
        </view>
        <view class="sport-item" :class="{ active: selectedSport === 'basketball' }" @tap="selectSport('basketball')">
          <view class="sport-icon-container basketball">
            <text class="sport-emoji">🏀</text>
          </view>
          <text class="sport-label">篮球</text>
        </view>
        <view class="sport-item" :class="{ active: selectedSport === 'football' }" @tap="selectSport('football')">
          <view class="sport-icon-container football">
            <text class="sport-emoji">⚽</text>
          </view>
          <text class="sport-label">足球</text>
        </view>
        <view class="sport-item" :class="{ active: selectedSport === 'tennis' }" @tap="selectSport('tennis')">
          <view class="sport-icon-container tennis">
            <text class="sport-emoji">🎾</text>
          </view>
          <text class="sport-label">网球</text>
        </view>
      </view>
    </view>

    <!-- Location Bar -->
    <view class="location-bar">
      <view class="location-content">
        <text class="location-pin">📍</text>
        <text class="location-text" :class="{ 'location-loading': locationLoading }">{{ currentLocation.address }}</text>
        <text class="location-switch" @tap="switchLocation">{{ locationLoading ? '定位中' : (currentLocation.address.includes('请选择') ? '选择' : '切换') }}</text>
      </view>
    </view>

    <!-- 根据定位状态显示不同内容 -->
    <!-- 定位中状态 -->
    <view v-if="locationLoading" class="location-status-section">
      <view class="status-container">
        <view class="loading-spinner"></view>
        <text class="status-title">正在定位</text>
        <text class="status-subtitle">获取您的位置信息，为您推荐附近场馆</text>
      </view>
    </view>

    <!-- 选择位置状态 -->
    <view v-else-if="locationError" class="location-status-section">
      <view class="status-container">
        <text class="status-icon">📍</text>
        <text class="status-title">选择您的位置</text>
        <text class="status-subtitle">在地图上选择位置，为您推荐附近的运动场馆</text>
        <view class="retry-button" @tap="chooseLocationOnMap">
          <text class="retry-text">在地图上选择</text>
        </view>
      </view>
    </view>

    <!-- 定位成功，显示场馆列表 -->
    <view v-else-if="locationReady" class="venue-section">
      <!-- Timeline -->
      <view class="timeline-container">
        <view class="timeline-line"></view>
      </view>

      <!-- First Venue -->
      <view class="venue-card">
        <view class="timeline-dot active"></view>
        <view class="venue-meta">
          <text class="distance">120km</text>
          <text class="separator"></text>
          <view class="update-time">
            <text class="clock-icon">🕐</text>
            <text class="time-text">2分钟前更新</text>
          </view>
        </view>
        <view class="venue-content">
          <view class="venue-image">
            <view class="image-placeholder ronin-bg">
              <text class="placeholder-text">RONIN篮球馆</text>
            </view>
            <view class="play-overlay" @tap="playVideo">
              <view class="play-button">
                <text class="play-icon">▶</text>
              </view>
            </view>
            <view class="live-badge">
              <view class="live-dot"></view>
              <text class="live-text">直播中</text>
            </view>
          </view>
          <view class="venue-info">
            <view class="venue-header">
              <view class="venue-logo ronin-logo">
                <image :src="roninLogoSrc" class="venue-logo-image" mode="aspectFit" />
              </view>
              <view class="venue-details">
                <text class="venue-name">RONIN黄金篮球馆</text>
                <text class="venue-address">杭州拱墅区黑马路124号（肯德基对面）</text>
              </view>
            </view>
            <view class="venue-action">
              <view class="zone-button" @tap="enterZone('ronin')">
                <text class="button-text">进入ZONE</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Second Venue -->
      <view class="venue-card">
        <view class="timeline-dot"></view>
        <view class="venue-meta">
          <text class="distance">140km</text>
          <text class="separator"></text>
          <view class="update-time">
            <text class="clock-icon">🕐</text>
            <text class="time-text">5分钟前更新</text>
          </view>
        </view>
        <view class="venue-content">
          <view class="venue-image">
            <view class="image-placeholder panda-bg">
              <text class="placeholder-text">Panda运动俱乐部</text>
            </view>
            <view class="play-overlay" @tap="playVideo">
              <view class="play-button">
                <text class="play-icon">▶</text>
              </view>
            </view>
            <view class="live-badge">
              <view class="live-dot"></view>
              <text class="live-text">直播中</text>
            </view>
          </view>
          <view class="venue-info">
            <view class="venue-header">
              <view class="venue-logo panda-logo">
                <text class="logo-text">P</text>
              </view>
              <view class="venue-details">
                <text class="venue-name">Panda惊怒熊猫运动俱乐部</text>
                <text class="venue-address">杭州拱墅区黑马路124号（肯德基对面）</text>
              </view>
            </view>
            <view class="venue-action">
              <view class="zone-button" @tap="enterZone('panda')">
                <text class="button-text">进入ZONE</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    </view>

    <!-- 我的页面内容 -->
    <view v-if="currentPage === 'profile'" class="profile-content">
      <!-- User Profile Section -->
      <view class="profile-section">
        <view class="profile-card">
          <view class="profile-header-info">
            <view class="avatar-container">
              <view class="avatar">
                <text class="avatar-initial">U</text>
              </view>
              <view class="online-status"></view>
            </view>
            <view class="profile-info">
              <view class="profile-name-row">
                <text class="profile-name">用户昵称</text>
                <view class="edit-icon" @tap="editProfile">
                  <text class="edit-text">✎</text>
                </view>
              </view>
              <text class="profile-id">ID: 123456789</text>
              <view class="profile-stats">
                <text class="stat-text">积分 2,580</text>
                <view class="stat-divider"></view>
                <text class="stat-text">等级 LV.8</text>
              </view>
            </view>
          </view>
          <view class="member-card-button" @tap="openMemberBenefits">
            <view class="card-background">
              <view class="card-pattern"></view>
              <view class="card-shine"></view>
            </view>
            <view class="card-content">
              <view class="card-left">
                <view class="card-header">
                  <text class="card-title">LIMO</text>
                  <text class="card-subtitle">会员卡</text>
                </view>
                <view class="card-info">
                  <text class="member-level">VIP黄金会员</text>
                  <text class="member-expiry">有效期至 2025.12.31</text>
                </view>
              </view>
              <view class="card-arrow">
                <text class="arrow-icon">›</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Stats Cards -->
      <view class="stats-section">
        <view class="stats-grid">
          <view class="stat-card" @tap="goToHistory">
            <text class="stat-number">12</text>
            <text class="stat-label">观看数量</text>
          </view>
          <view class="stat-card" @tap="goToFavorites">
            <text class="stat-number">5</text>
            <text class="stat-label">收藏场馆</text>
          </view>
        </view>
      </view>

      <!-- Menu Items -->
      <view class="menu-section">
        <view class="menu-card">
          <view class="menu-item" @tap="goToFavorites">
            <view class="menu-content">
              <text class="menu-title">我的收藏</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>

          <view class="menu-item" @tap="goToHistory">
            <view class="menu-content">
              <text class="menu-title">观看历史</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>

          <view class="menu-item" @tap="goToNotifications">
            <view class="menu-content">
              <text class="menu-title">消息通知</text>
            </view>
            <view class="menu-right">
              <view class="notification-dot"></view>
              <text class="menu-arrow">›</text>
            </view>
          </view>

          <view class="menu-item" @tap="goToOrders">
            <view class="menu-content">
              <text class="menu-title">我的订单</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
        </view>
      </view>

      <!-- Recent Activity -->
      <view class="activity-section">
        <view class="activity-card">
          <view class="activity-header">
            <view class="activity-indicator"></view>
            <text class="activity-title">最近活动</text>
          </view>
          <view class="activity-list">
            <view class="activity-item">
              <view class="activity-content">
                <text class="activity-title-text">观看了 RONIN黄金篮球馆</text>
                <text class="activity-subtitle">2小时前 · 观看时长 45分钟</text>
              </view>
            </view>
            <view class="activity-item">
              <view class="activity-content">
                <text class="activity-title-text">收藏了 Panda惊怒熊猫运动俱乐部</text>
                <text class="activity-subtitle">1天前</text>
              </view>
            </view>
          </view>
          <view class="activity-more-link" @tap="goToActivityHistory">
            <text class="more-link-text">查看历史活动</text>
          </view>
        </view>
      </view>
    </view>

    <!-- Bottom Spacing -->
    <view class="bottom-spacing"></view>

    <!-- Bottom Navigation -->
    <view class="bottom-nav">
      <view class="nav-item" :class="{ active: currentPage === 'home' }" @tap="goHome">
        <view class="nav-icon-container" :class="{ 'home-active': currentPage === 'home' }">
          <image :src="homeIcon" class="nav-icon-svg" mode="aspectFit" />
        </view>
        <text class="nav-label" :class="{ active: currentPage === 'home' }">首页</text>
      </view>
      <view class="nav-item" :class="{ active: currentPage === 'profile' }" @tap="goProfile">
        <view class="nav-icon-container" :class="{ 'profile-active': currentPage === 'profile' }">
          <image :src="userIcon" class="nav-icon-svg" mode="aspectFit" />
        </view>
        <text class="nav-label" :class="{ active: currentPage === 'profile' }">我的</text>
      </view>
    </view>

    <!-- 授权弹窗 -->
    <AuthModal 
      :visible="authModalVisible" 
      :auth-type="authType"
      @close="closeAuthModal"
      @success="onAuthSuccess"
      @skip="onAuthSkip"
    />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, defineAsyncComponent } from 'vue'
import Taro from '@tarojs/taro'
// AuthModal 组件通过相对路径导入
const AuthModal = defineAsyncComponent(() => import('../../components/AuthModal/index.vue'))
import './index.scss'

// 静态资源
const logoSrc = 'https://wx-static.drip.im/img/limo/miniapp/logo.svg'
const homeIcon = require('@/assets/images/home.svg')
const userIcon = require('@/assets/images/user.svg')
const backIcon = require('@/assets/images/back.svg')
const roninLogoSrc = 'https://qiniu.drip.im/gh_09bd6126eab8/20250711/upload/4d0efe5313d38f0db01d0cfba4dac9d848bb43a2'

// 响应式状态
const selectedSport = ref('all')
const currentPage = ref('home') // 'home' | 'profile'

// 地理位置状态
const currentLocation = ref({
  name: '定位中...',
  address: '正在获取位置信息',
  latitude: 0,
  longitude: 0
})
const locationLoading = ref(false)
const locationReady = ref(false) // 位置信息是否已准备好
const locationError = ref(false) // 定位是否失败

// 授权弹窗状态
const authModalVisible = ref(false)
const authType = ref<'login' | 'video'>('login')
const isUserAuthorized = ref(false) // 用户是否已授权

// 方法
const selectSport = (sport: string) => {
  selectedSport.value = sport
  console.log('选择运动项目:', sport)
}

// 位置存储相关方法
const saveLocationToStorage = (locationData: any) => {
  try {
    Taro.setStorageSync('userLocation', {
      ...locationData,
      timestamp: Date.now() // 记录保存时间
    })
    console.log('位置信息已保存到本地存储:', locationData)
  } catch (error) {
    console.error('保存位置信息失败:', error)
  }
}

const loadLocationFromStorage = () => {
  try {
    const savedLocation = Taro.getStorageSync('userLocation')
    if (savedLocation && savedLocation.address) {
      // 检查位置信息是否过期（7天有效期）
      const sevenDaysInMs = 7 * 24 * 60 * 60 * 1000
      const now = Date.now()
      
      if (savedLocation.timestamp && (now - savedLocation.timestamp) < sevenDaysInMs) {
        console.log('从本地存储加载位置信息:', savedLocation)
        return savedLocation
      } else {
        console.log('位置信息已过期，清除本地存储')
        clearLocationFromStorage()
      }
    }
  } catch (error) {
    console.error('读取位置信息失败:', error)
  }
  return null
}

const clearLocationFromStorage = () => {
  try {
    Taro.removeStorageSync('userLocation')
    console.log('已清除本地存储的位置信息')
  } catch (error) {
    console.error('清除位置信息失败:', error)
  }
}

const switchLocation = () => {
  console.log('🔥 switchLocation 方法被调用！')
  
  // 直接在地图上选择位置
  chooseLocationOnMap()
}

// 在地图上选择位置
const chooseLocationOnMap = () => {
  Taro.chooseLocation({
    success: (res) => {
      console.log('选择位置成功:', res)
      // 更新当前位置信息
      const locationData = {
        name: res.name || res.address,
        address: res.address,
        latitude: res.latitude,
        longitude: res.longitude
      }
      
      currentLocation.value = locationData
      
      // 保存位置信息到本地存储
      saveLocationToStorage(locationData)
      
      locationReady.value = true
      locationError.value = false
      
      Taro.showToast({
        title: '位置已更新',
        icon: 'success'
      })
    },
    fail: (err) => {
      console.error('选择位置失败:', err)
      
      // 回到选择位置状态
      locationReady.value = false
      locationError.value = true
      currentLocation.value = {
        name: '未选择位置',
        address: '请选择您的位置以查看附近场馆',
        latitude: 0,
        longitude: 0
      }
      
      if (err.errMsg.includes('auth')) {
        Taro.showModal({
          title: '授权提示',
          content: '需要授权位置信息才能选择地点，是否前往设置？',
          success: (modalRes) => {
            if (modalRes.confirm) {
              Taro.openSetting()
            }
          }
        })
      } else if (!err.errMsg.includes('cancel')) {
        // 只有在非取消的情况下才显示错误提示
        Taro.showToast({
          title: '选择位置失败',
          icon: 'none'
        })
      }
    }
  })
}

// 获取当前位置
const getCurrentLocation = (showToast = true, showLoading = false) => {
  if (!locationLoading.value) {
    locationLoading.value = true
  }
  locationReady.value = false
  locationError.value = false
  
  if (showLoading) {
    Taro.showLoading({
      title: '定位中...'
    })
  }
  
  Taro.getLocation({
    type: 'gcj02', // 返回可以用于微信小程序的坐标
    success: (res) => {
      console.log('获取位置成功:', res)
      
      // 简化处理：直接显示坐标信息，实际项目中可以调用逆地理编码API
      const formattedAddress = `当前位置 (${res.latitude.toFixed(4)}, ${res.longitude.toFixed(4)})`
      
      const locationData = {
        name: '当前位置',
        address: formattedAddress,
        latitude: res.latitude,
        longitude: res.longitude
      }
      
      currentLocation.value = locationData
      
      // 保存位置信息到本地存储
      saveLocationToStorage(locationData)
      
      locationLoading.value = false
      locationReady.value = true
      locationError.value = false
      
      if (showLoading) {
        Taro.hideLoading()
      }
      
      if (showToast) {
        Taro.showToast({
          title: '定位成功',
          icon: 'success'
        })
      }
    },
    fail: (err) => {
      locationLoading.value = false
      locationReady.value = false
      locationError.value = true
      
      if (showLoading) {
        Taro.hideLoading()
      }
      
      console.error('获取位置失败:', err)
      
      // 设置默认位置
      currentLocation.value = {
        name: '定位失败',
        address: '无法获取位置信息，点击重试',
        latitude: 0,
        longitude: 0
      }
      
      if (err.errMsg.includes('auth')) {
        Taro.showModal({
          title: '授权提示',
          content: '需要授权位置信息才能获取当前位置，是否前往设置？',
          success: (modalRes) => {
            if (modalRes.confirm) {
              Taro.openSetting()
            }
          }
        })
      } else {
        if (showToast) {
          Taro.showToast({
            title: '定位失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 选择收货地址
const chooseDeliveryAddress = () => {
  Taro.chooseAddress({
    success: (res) => {
      console.log('选择地址成功:', res)
      const fullAddress = `${res.provinceName}${res.cityName}${res.countyName}${res.detailInfo}`
      const locationData = {
        name: res.userName,
        address: fullAddress,
        latitude: 0, // 收货地址API不返回坐标
        longitude: 0
      }
      
      currentLocation.value = locationData
      
      // 保存位置信息到本地存储
      saveLocationToStorage(locationData)
      
      locationReady.value = true
      locationError.value = false
      
      Taro.showToast({
        title: '地址已更新',
        icon: 'success'
      })
    },
    fail: (err) => {
      console.error('选择地址失败:', err)
      if (err.errMsg.includes('auth')) {
        Taro.showModal({
          title: '授权提示',
          content: '需要授权地址信息才能选择收货地址，是否前往设置？',
          success: (modalRes) => {
            if (modalRes.confirm) {
              Taro.openSetting()
            }
          }
        })
      } else {
        Taro.showToast({
          title: '选择地址失败',
          icon: 'none'
        })
      }
    }
  })
}

const playVideo = () => {
  if (checkAuthRequired('video')) {
    Taro.showToast({
      title: '播放视频',
      icon: 'none'
    })
  }
}

const enterZone = (venueType: string) => {
  Taro.navigateTo({
    url: '/pages/zone/index?venue=' + venueType
  }).then(() => {
    console.log('✅ 成功跳转到zone页面')
  }).catch((err) => {
    console.error('❌ 跳转失败:', err)
    Taro.showToast({
      title: '跳转失败',
      icon: 'none'
    })
  })
}

// 页面切换方法
const switchToHome = () => {
  currentPage.value = 'home'
}

const switchToProfile = () => {
  currentPage.value = 'profile'
}

// 导航方法
const goHome = () => {
  currentPage.value = 'home'
}

const goProfile = () => {
  if (checkAuthRequired('login')) {
    currentPage.value = 'profile'
  }
}

// 我的页面功能方法
const editProfile = () => {
  Taro.showToast({
    title: '编辑用户信息功能开发中',
    icon: 'none'
  })
}

const openMemberBenefits = () => {
  Taro.navigateTo({
    url: '/pages/vip/index'
  })
}

const goToVip = () => {
  Taro.navigateTo({
    url: '/pages/vip/index'
  })
}

const goToFavorites = () => {
  Taro.navigateTo({
    url: '/pages/favorites/index'
  })
}

const goToHistory = () => {
  Taro.navigateTo({
    url: '/pages/history/index'
  })
}

const goToAddress = () => {
  Taro.showToast({
    title: '常用地址',
    icon: 'none'
  })
}

const goToNotifications = () => {
  Taro.navigateTo({
    url: '/pages/notifications/index'
  })
}

const goToOrders = () => {
  Taro.navigateTo({
    url: '/pages/orders/index'
  })
}

const goToActivityHistory = () => {
  Taro.navigateTo({
    url: '/pages/activity/index'
  })
}

const goToPrivacy = () => {
  Taro.showToast({
    title: '隐私设置',
    icon: 'none'
  })
}

// 授权相关方法
const showAuthModal = (type: 'login' | 'video') => {
  authType.value = type
  authModalVisible.value = true
}

const closeAuthModal = () => {
  authModalVisible.value = false
}

const onAuthSuccess = (data: { phone?: string, userInfo?: any }) => {
  console.log('授权成功:', data)
  isUserAuthorized.value = true
  
  // 更新用户信息到本地存储
  if (data.phone) {
    Taro.setStorageSync('userPhone', data.phone)
  }
  if (data.userInfo) {
    Taro.setStorageSync('userInfo', data.userInfo)
  }
  
  Taro.showToast({
    title: '授权成功',
    icon: 'success'
  })
}

const onAuthSkip = () => {
  console.log('用户跳过授权')
  // 可以记录用户跳过授权的行为
}

// 检查是否需要授权
const checkAuthRequired = (action: 'login' | 'video') => {
  // 检查本地是否有授权信息
  const hasPhone = Taro.getStorageSync('userPhone')
  const hasUserInfo = Taro.getStorageSync('userInfo')
  
  if (!hasPhone || !hasUserInfo) {
    showAuthModal(action)
    return false
  }
  
  isUserAuthorized.value = true
  return true
}

// 注意: playVideo 和 goProfile 方法在下面已有定义，这里只是添加了授权检查逻辑

onMounted(() => {
  console.log('LIMO来刻首页已加载')
  console.log('Vue组件已挂载，方法可用')
  
  // 检查用户授权状态
  const hasPhone = Taro.getStorageSync('userPhone')
  const hasUserInfo = Taro.getStorageSync('userInfo')
  if (hasPhone && hasUserInfo) {
    isUserAuthorized.value = true
  }
  
  // 尝试从本地存储加载位置信息
  const savedLocation = loadLocationFromStorage()
  
  if (savedLocation) {
    // 如果有保存的位置信息，直接使用
    currentLocation.value = {
      name: savedLocation.name,
      address: savedLocation.address,
      latitude: savedLocation.latitude,
      longitude: savedLocation.longitude
    }
    
    locationLoading.value = false
    locationReady.value = true
    locationError.value = false
    
    console.log('使用已保存的位置信息')
  } else {
    // 如果没有保存的位置信息，显示选择位置引导
    locationLoading.value = false
    locationReady.value = false
    locationError.value = true
    
    currentLocation.value = {
      name: '未选择位置',
      address: '请选择您的位置以查看附近场馆',
      latitude: 0,
      longitude: 0
    }
    
    console.log('未找到保存的位置信息，显示选择引导')
  }
})
</script>