443 lines
14 KiB
Vue
443 lines
14 KiB
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">杭州市文一西路未来科技城万利大厦0701</text>
|
|||
|
|
<text class="location-switch" @tap="switchLocation">切换</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- Venue Cards -->
|
|||
|
|
<view 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">
|
|||
|
|
<text class="stat-number">12</text>
|
|||
|
|
<text class="stat-label">观看场次</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-card">
|
|||
|
|
<text class="stat-number">5</text>
|
|||
|
|
<text class="stat-label">收藏场馆</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="stat-card">
|
|||
|
|
<text class="stat-number">28</text>
|
|||
|
|
<text class="stat-label">观看时长(h)</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>
|
|||
|
|
</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>
|
|||
|
|
<text class="activity-points">+10</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="activity-item">
|
|||
|
|
<view class="activity-content">
|
|||
|
|
<text class="activity-title-text">收藏了 Panda惊怒熊猫运动俱乐部</text>
|
|||
|
|
<text class="activity-subtitle">1天前</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="activity-points">+5</text>
|
|||
|
|
</view>
|
|||
|
|
</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>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, onMounted } from 'vue'
|
|||
|
|
import Taro from '@tarojs/taro'
|
|||
|
|
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 selectSport = (sport: string) => {
|
|||
|
|
selectedSport.value = sport
|
|||
|
|
console.log('选择运动项目:', sport)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const switchLocation = () => {
|
|||
|
|
console.log('🔥 switchLocation 方法被调用！')
|
|||
|
|
Taro.showActionSheet({
|
|||
|
|
itemList: ['杭州市文一西路未来科技城万利大厦0701', '杭州市西湖区文三路123号', '杭州市滨江区江南大道456号'],
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log('选择位置:', res.tapIndex)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const playVideo = () => {
|
|||
|
|
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 = () => {
|
|||
|
|
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.showToast({
|
|||
|
|
title: '我的收藏',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const goToHistory = () => {
|
|||
|
|
Taro.showToast({
|
|||
|
|
title: '观看历史',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const goToAddress = () => {
|
|||
|
|
Taro.showToast({
|
|||
|
|
title: '常用地址',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const goToNotifications = () => {
|
|||
|
|
Taro.showToast({
|
|||
|
|
title: '消息通知',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const goToPrivacy = () => {
|
|||
|
|
Taro.showToast({
|
|||
|
|
title: '隐私设置',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
console.log('LIMO来刻首页已加载')
|
|||
|
|
console.log('Vue组件已挂载，方法可用')
|
|||
|
|
})
|
|||
|
|
</script>
|