Initial commit (without large files)
This commit is contained in:
30
.gitignore
vendored
Normal file
30
.gitignore
vendored
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
*.tsbuildinfo
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
29
README.md
Normal file
29
README.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# NBA
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
14
index.html
Normal file
14
index.html
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
<script type="text/javascript" src="//js.users.51.la/21957239.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
jsconfig.json
Normal file
8
jsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"exclude": ["node_modules", "dist"]
|
||||||
|
}
|
||||||
28
package.json
Normal file
28
package.json
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"name": "nba",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
|
"axios": "^1.8.4",
|
||||||
|
"dplayer": "^1.27.1",
|
||||||
|
"element-plus": "^2.9.7",
|
||||||
|
"flv.js": "^1.6.2",
|
||||||
|
"hls.js": "^1.6.2",
|
||||||
|
"router": "^2.2.0",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"vue-router": "4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.2.3",
|
||||||
|
"sass-embedded": "^1.86.3",
|
||||||
|
"vite": "^6.2.4",
|
||||||
|
"vite-plugin-vue-devtools": "^7.7.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
2554
pnpm-lock.yaml
generated
Normal file
2554
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
13
src/App.vue
Normal file
13
src/App.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
40
src/api/nba.js
Normal file
40
src/api/nba.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import request from "./request";
|
||||||
|
import axios from 'axios'
|
||||||
|
const nbaapi = axios.create({
|
||||||
|
baseURL: 'http://localhost:9005/api',
|
||||||
|
// baseURL: 'http://110.42.255.182:8080',
|
||||||
|
timeout: 2000,
|
||||||
|
})
|
||||||
|
|
||||||
|
const urls = async () => {
|
||||||
|
return await nbaapi({
|
||||||
|
url: '/urls',
|
||||||
|
method: 'get',
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
// console.log(response.data); // 可选：调试用
|
||||||
|
return response.data; // 返回数据
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('获取直播URL失败:', error);
|
||||||
|
throw error; // 可以选择抛出错误或返回默认值，比如 return []
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const games = () => {
|
||||||
|
nbaapi({
|
||||||
|
url: '/games',
|
||||||
|
method: 'get',
|
||||||
|
}).then((response) => {
|
||||||
|
console.log(response.data);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const schedule =(params) => {
|
||||||
|
return request({
|
||||||
|
url: '/game/schedule',
|
||||||
|
method: 'get',
|
||||||
|
params: params,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export {schedule,games,urls};
|
||||||
32
src/api/request.js
Normal file
32
src/api/request.js
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const request = axios.create({
|
||||||
|
baseURL: 'https://api.nba.cn/sib/v2',
|
||||||
|
// baseURL: 'http://110.42.255.182:8080',
|
||||||
|
timeout: 2000,
|
||||||
|
})
|
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
request.interceptors.request.use(
|
||||||
|
(config) => {
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
(error) => Promise.reject(error), // 请求错误处理
|
||||||
|
)
|
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
request.interceptors.response.use(
|
||||||
|
(response) => {
|
||||||
|
if (response.status === 200) {
|
||||||
|
return response.data
|
||||||
|
}
|
||||||
|
return Promise.reject(response)
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
return Promise.reject(error)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
export default request
|
||||||
196
src/components/LiveStream.vue
Normal file
196
src/components/LiveStream.vue
Normal file
@@ -0,0 +1,196 @@
|
|||||||
|
<template>
|
||||||
|
<div class="video-container">
|
||||||
|
<div
|
||||||
|
v-for="(video, index) in videoList"
|
||||||
|
:key="index"
|
||||||
|
class="video-card"
|
||||||
|
@click="handleCardClick(index)"
|
||||||
|
>
|
||||||
|
<div class="video-wrapper">
|
||||||
|
<div :id="'dplayer-' + index" class="dplayer-container"></div>
|
||||||
|
</div>
|
||||||
|
<div class="video-info">
|
||||||
|
<h3 class="video-title">{{ video.title }}</h3>
|
||||||
|
<p class="video-desc">{{ video.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||||
|
import DPlayer from 'dplayer'
|
||||||
|
import Hls from 'hls.js'
|
||||||
|
import Flv from 'flv.js'
|
||||||
|
// 将 flv.js 注册为全局变量
|
||||||
|
window.flvjs = Flv
|
||||||
|
window.Hls = Hls
|
||||||
|
// 视频列表数据
|
||||||
|
const videoList = ref([
|
||||||
|
{
|
||||||
|
title: '示例视频1',
|
||||||
|
description: '这是一个示例视频描述',
|
||||||
|
// url: './../../public/videos/7.mp4',
|
||||||
|
url: 'https://feijing-xzbonlinepull.bszb.me/live/202_3520771_1.m3u8?txSecret=92b9a5df1d71b2a1dbf4cb41e7c7b507&txTime=68011a9d',
|
||||||
|
// pic: 'https://example.com/poster1.jpg'
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: '示例视频2',
|
||||||
|
// description: '这是另一个示例视频描述',
|
||||||
|
// url: 'https://example.com/video2.mp4',
|
||||||
|
// pic: 'https://example.com/poster2.jpg'
|
||||||
|
// },
|
||||||
|
// 可以添加更多视频
|
||||||
|
])
|
||||||
|
|
||||||
|
const dpInstances = ref([])
|
||||||
|
|
||||||
|
// 初始化播放器
|
||||||
|
const initDPlayers = () => {
|
||||||
|
videoList.value.forEach((video, index) => {
|
||||||
|
const dp = new DPlayer({
|
||||||
|
container: document.getElementById(`dplayer-${index}`),
|
||||||
|
// live: true,
|
||||||
|
screenshot: true,
|
||||||
|
autoplay: true,
|
||||||
|
theme: '#b7daff',
|
||||||
|
loop: false,
|
||||||
|
lang: 'zh-cn',
|
||||||
|
hotkey: true,
|
||||||
|
preload: 'auto',
|
||||||
|
volume: 0.6,
|
||||||
|
video: {
|
||||||
|
url: video.url,
|
||||||
|
pic: video.pic,
|
||||||
|
thumbnails: video.pic,
|
||||||
|
type: 'auto',
|
||||||
|
},
|
||||||
|
pluginOptions:{
|
||||||
|
hls: {
|
||||||
|
// 这里可以添加 HLS.js 的配置选项
|
||||||
|
debug: true,
|
||||||
|
enableWorker: true,
|
||||||
|
manifestLoadingTimeOut: 10000,
|
||||||
|
levelLoadingTimeOut: 10000,
|
||||||
|
},
|
||||||
|
flv: {
|
||||||
|
// 这里可以添加 FLV.js 的配置选项
|
||||||
|
enableWorker: true,
|
||||||
|
enableStashBuffer: true,
|
||||||
|
stashInitialSize: 128,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
console.log(dp.plugins.flv); // flv 实例
|
||||||
|
// 监听播放器的事件
|
||||||
|
dpInstances.value.push(dp)
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 处理卡片点击事件
|
||||||
|
const handleCardClick = (index) => {
|
||||||
|
// 暂停所有其他播放器
|
||||||
|
dpInstances.value.forEach((dp, i) => {
|
||||||
|
if (i !== index && !dp.video.paused) {
|
||||||
|
dp.pause()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
initDPlayers()
|
||||||
|
})
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
// 销毁所有播放器实例
|
||||||
|
dpInstances.value.forEach(dp => {
|
||||||
|
dp.destroy()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.video-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 40px 0;
|
||||||
|
justify-content: center;
|
||||||
|
// align-items: center;
|
||||||
|
|
||||||
|
.video-card {
|
||||||
|
flex: 1 1 calc(33.333% - 20px);
|
||||||
|
min-width: 768px;
|
||||||
|
max-width: 70%;
|
||||||
|
background: #d6f3f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
// transform: translateY(-5px);
|
||||||
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-wrapper {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 56.25%; /* 16:9 宽高比 */
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.dplayer-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-info {
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
|
.video-title {
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #333;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-desc {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #666;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移动端适配 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.video-container {
|
||||||
|
.video-card {
|
||||||
|
flex: 1 1 calc(50% - 15px);
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.video-container {
|
||||||
|
|
||||||
|
.video-card {
|
||||||
|
flex: 1 1 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
696
src/components/NBASchedule.vue
Normal file
696
src/components/NBASchedule.vue
Normal file
@@ -0,0 +1,696 @@
|
|||||||
|
<template>
|
||||||
|
<div class="nba-schedule-container">
|
||||||
|
<!-- 赞助商信息 -->
|
||||||
|
<div v-if="scheduleData?.data?.sponsor" class="sponsor-banner">
|
||||||
|
<span>所有内容均来源互联网，如有侵权联系邮箱：xdd9@vip.qq.com</span>
|
||||||
|
<img
|
||||||
|
:src="scheduleData.data.sponsor.logo"
|
||||||
|
:alt="scheduleData.data.sponsor.name"
|
||||||
|
class="sponsor-logo"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 赛程日期导航 -->
|
||||||
|
<div class="date-navigation">
|
||||||
|
<button
|
||||||
|
@click="changeDate('pre')"
|
||||||
|
class="nav-button"
|
||||||
|
:disabled="!scheduleData?.data?.preDate"
|
||||||
|
>
|
||||||
|
<span class="arrow">←</span>
|
||||||
|
{{ scheduleData?.data?.preDate || "无更早日期" }}
|
||||||
|
</button>
|
||||||
|
<div class="current-date">
|
||||||
|
{{ currentDisplayDate }}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
@click="changeDate('next')"
|
||||||
|
class="nav-button"
|
||||||
|
:disabled="!scheduleData?.data?.nextDate"
|
||||||
|
>
|
||||||
|
{{ scheduleData?.data?.nextDate || "无更晚日期" }}
|
||||||
|
<span class="arrow">→</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 比赛列表 - 每行一场比赛 -->
|
||||||
|
<div class="games-list">
|
||||||
|
<div v-for="group in scheduleData?.data?.groups" :key="group.date">
|
||||||
|
<!-- 添加判断：当games数组为空时显示提示信息 -->
|
||||||
|
<div v-if="group.games && group.games.length > 0">
|
||||||
|
<div v-for="game in group.games" :key="game.gameId" class="game-card">
|
||||||
|
<!-- 比赛时间 -->
|
||||||
|
<div class="game-time" :class="getStatusClass(game.status)">
|
||||||
|
美国时间：{{ formatGameTime(game.dateTimeUtc) }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 比赛主要内容 -->
|
||||||
|
<div class="game-main">
|
||||||
|
<!-- 客队信息 -->
|
||||||
|
<div
|
||||||
|
class="team away-team"
|
||||||
|
:class="{ 'tbd-team': !game.teamValid }"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="game.awayTeamLogoDark"
|
||||||
|
:alt="game.awayTeamName"
|
||||||
|
class="team-logo"
|
||||||
|
/>
|
||||||
|
<div class="team-info">
|
||||||
|
<div class="team-name">
|
||||||
|
<span class="city">{{ game.awayTeamCity }}</span>
|
||||||
|
<span class="name">{{ game.awayTeamName || "待定" }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="team-record">
|
||||||
|
<span v-if="game.awayTeamWins !== undefined">
|
||||||
|
{{ game.awayTeamWins }}胜-{{ game.awayTeamLosses }}负
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="game.status !== 1" class="team-score">
|
||||||
|
{{ game.awayTeamScore }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 比赛状态 -->
|
||||||
|
<div class="game-status">
|
||||||
|
<div v-if="game.status === 1" class="game-not-started">
|
||||||
|
北京时间：{{ game.startTime }} 开始
|
||||||
|
</div>
|
||||||
|
<div v-else class="game-in-progress">
|
||||||
|
<div class="status-text">{{ game.statusText }}</div>
|
||||||
|
<div v-if="game.periodText" class="period-text">
|
||||||
|
{{ game.periodText }}
|
||||||
|
</div>
|
||||||
|
<div v-if="game.gameClock" class="game-clock">
|
||||||
|
{{ game.gameClock }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 主队信息 -->
|
||||||
|
<div
|
||||||
|
class="team home-team"
|
||||||
|
:class="{ 'tbd-team': !game.teamValid }"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="game.homeTeamLogoDark"
|
||||||
|
:alt="game.homeTeamName"
|
||||||
|
class="team-logo"
|
||||||
|
/>
|
||||||
|
<div class="team-info">
|
||||||
|
<div class="team-name">
|
||||||
|
<span class="city">{{ game.homeTeamCity }}</span>
|
||||||
|
<span class="name">{{ game.homeTeamName || "待定" }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="team-record">
|
||||||
|
<span v-if="game.homeTeamWins !== undefined">
|
||||||
|
{{ game.homeTeamWins }}胜-{{ game.homeTeamLosses }}负
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="game.status !== 1" class="team-score">
|
||||||
|
{{ game.homeTeamScore }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 直播间按钮区域（仅当天进行中的比赛显示） -->
|
||||||
|
<div class="live-buttons" v-if="shouldShowLiveArea(game)">
|
||||||
|
<template v-if="game.status === 2 && hasLiveStreams(game.gameId)">
|
||||||
|
<button
|
||||||
|
v-for="stream in getLiveStreams(game.gameId)"
|
||||||
|
:key="stream.type"
|
||||||
|
class="live-btn"
|
||||||
|
:class="{
|
||||||
|
primary: stream.type === 'qq',
|
||||||
|
secondary: stream.type !== 'qq',
|
||||||
|
}"
|
||||||
|
@click="goToLive(stream.url)"
|
||||||
|
>
|
||||||
|
<span class="btn-icon">📺</span>
|
||||||
|
<span>{{ getStreamName(stream.type) }}</span>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
<div v-else-if="game.status === 1" class="no-live">未开始</div>
|
||||||
|
<div v-else class="no-live">无直播信号</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 比赛场地和赛季信息 -->
|
||||||
|
<div class="game-footer">
|
||||||
|
<div class="game-arena">
|
||||||
|
<span v-if="game.arenaName">{{ game.arenaName }}</span>
|
||||||
|
<span v-else>场地待定</span>
|
||||||
|
</div>
|
||||||
|
<div class="game-season">
|
||||||
|
{{ game.seasonName }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 当没有比赛时显示提示信息 -->
|
||||||
|
<div v-else class="no-games-message">
|
||||||
|
{{ currentDisplayDate }} 当天没有NBA比赛
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref } from "vue";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import { urls } from "@/api/nba";
|
||||||
|
import { onMounted } from "vue";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const urlsData = ref([]);
|
||||||
|
|
||||||
|
const shouldShowLiveArea = (game) => {
|
||||||
|
// 1. 已结束的比赛不显示
|
||||||
|
if (game.status === 3) return false;
|
||||||
|
|
||||||
|
const gameDate = new Date(game.dateTimeUtc);
|
||||||
|
const today = new Date();
|
||||||
|
|
||||||
|
// 2. 只显示当天及未来的比赛
|
||||||
|
// 清除时间部分，只比较日期
|
||||||
|
today.setHours(0, 0, 0, 0);
|
||||||
|
gameDate.setHours(0, 0, 0, 0);
|
||||||
|
|
||||||
|
return gameDate >= today;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
const response = await urls();
|
||||||
|
urlsData.value = response || [];
|
||||||
|
// console.log("获取的直播URL:", urlsData.value);
|
||||||
|
} catch (err) {
|
||||||
|
console.error("获取直播URL失败:", err);
|
||||||
|
urlsData.value = [];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 判断是否为当天进行中的比赛
|
||||||
|
const isLiveGame = (game) => {
|
||||||
|
const isLive = game.status === 2; // 假设2表示进行中
|
||||||
|
const gameDate = new Date(game.dateTimeUtc);
|
||||||
|
const today = new Date();
|
||||||
|
const isToday = gameDate.toDateString() === today.toDateString();
|
||||||
|
return isLive && isToday;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 检查比赛是否有直播流
|
||||||
|
const hasLiveStreams = (gameId) => {
|
||||||
|
if (!urlsData.value || !gameId) return false;
|
||||||
|
|
||||||
|
// 查找匹配的gameId
|
||||||
|
const gameStreams = urlsData.value.find((item) => item[gameId]);
|
||||||
|
return !!gameStreams;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取比赛的直播流
|
||||||
|
const getLiveStreams = (gameId) => {
|
||||||
|
if (!urlsData.value || !gameId) return [];
|
||||||
|
|
||||||
|
const gameStreams = urlsData.value.find((item) => item[gameId]);
|
||||||
|
return gameStreams ? gameStreams[gameId] : [];
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取流名称
|
||||||
|
const getStreamName = (type) => {
|
||||||
|
const names = {
|
||||||
|
tx: "TX直播",
|
||||||
|
wl: "纬来直播",
|
||||||
|
nba: "原声直播",
|
||||||
|
zb: "高清直播",
|
||||||
|
// 可以添加更多类型
|
||||||
|
};
|
||||||
|
return names[type] || type;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 跳转到直播页面
|
||||||
|
const goToLive = (url) => {
|
||||||
|
if (!url) return;
|
||||||
|
|
||||||
|
router.push({
|
||||||
|
name: "Play",
|
||||||
|
query: {
|
||||||
|
url: url,
|
||||||
|
// 其他参数...
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
scheduleData: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
error: {
|
||||||
|
type: String,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(["dateChange"]);
|
||||||
|
|
||||||
|
// 当前显示日期
|
||||||
|
// 当前显示日期（带星期几）
|
||||||
|
const currentDisplayDate = computed(() => {
|
||||||
|
if (!props.scheduleData?.data?.start) return "加载中...";
|
||||||
|
|
||||||
|
const dateStr = props.scheduleData.data.start;
|
||||||
|
const date = new Date(dateStr);
|
||||||
|
|
||||||
|
// 星期几的中文名称
|
||||||
|
const weekdays = [
|
||||||
|
"星期日",
|
||||||
|
"星期一",
|
||||||
|
"星期二",
|
||||||
|
"星期三",
|
||||||
|
"星期四",
|
||||||
|
"星期五",
|
||||||
|
"星期六",
|
||||||
|
];
|
||||||
|
const weekday = weekdays[date.getDay()];
|
||||||
|
|
||||||
|
// 格式化日期为 YYYY年MM月DD日
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||||
|
const day = date.getDate().toString().padStart(2, "0");
|
||||||
|
|
||||||
|
return `${year}年${month}月${day}日 ${weekday}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 格式化比赛时间
|
||||||
|
const formatGameTime = (utcTime) => {
|
||||||
|
if (!utcTime) return "时间待定";
|
||||||
|
const date = new Date(utcTime);
|
||||||
|
const hours = date.getHours().toString().padStart(2, "0");
|
||||||
|
const minutes = date.getMinutes().toString().padStart(2, "0");
|
||||||
|
return `${hours}:${minutes}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取比赛状态对应的样式类
|
||||||
|
const getStatusClass = (status) => {
|
||||||
|
switch (status) {
|
||||||
|
case 1:
|
||||||
|
return "not-started"; // 未开始
|
||||||
|
case 2:
|
||||||
|
return "in-progress"; // 进行中
|
||||||
|
case 3:
|
||||||
|
return "finished"; // 已结束
|
||||||
|
default:
|
||||||
|
return "not-started";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 切换日期
|
||||||
|
const changeDate = (direction) => {
|
||||||
|
if (!props.scheduleData?.data) return;
|
||||||
|
|
||||||
|
const date =
|
||||||
|
direction === "pre"
|
||||||
|
? props.scheduleData.data.preDate
|
||||||
|
: props.scheduleData.data.nextDate;
|
||||||
|
|
||||||
|
if (date) {
|
||||||
|
emit("dateChange", date);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.nba-schedule-container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||||
|
"Helvetica Neue", Arial, sans-serif;
|
||||||
|
}
|
||||||
|
/* 添加未开播样式居中显示 */
|
||||||
|
.no-live {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background-color: #808080;
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 赞助商样式 */
|
||||||
|
.sponsor-banner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding: 12px;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sponsor-logo {
|
||||||
|
height: 36px;
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 日期导航样式 */
|
||||||
|
.date-navigation {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-date {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1d428a; /* NBA 蓝色 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:hover:not(:disabled) {
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 比赛列表 - 每行一场比赛 */
|
||||||
|
.games-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 比赛卡片样式 - 大气风格 */
|
||||||
|
.game-card {
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 比赛时间 */
|
||||||
|
.game-time {
|
||||||
|
padding: 12px 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.not-started {
|
||||||
|
background-color: #6c757d; /* 灰色 - 未开始 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.in-progress {
|
||||||
|
background-color: #dc3545; /* 红色 - 进行中 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.finished {
|
||||||
|
background-color: #28a745; /* 绿色 - 已结束 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 比赛主要内容 */
|
||||||
|
.game-main {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 球队样式 */
|
||||||
|
.team {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-logo {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin-right: 20px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-name {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-name .city {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-name .name {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 4px 0;
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-record {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #868e96;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-score {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
min-width: 60px;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 20px;
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 待定球队样式 */
|
||||||
|
.tbd-team {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 比赛状态 */
|
||||||
|
.game-status {
|
||||||
|
padding: 12px 0;
|
||||||
|
text-align: center;
|
||||||
|
margin: 10px 0;
|
||||||
|
border-top: 1px dashed #e9ecef;
|
||||||
|
border-bottom: 1px dashed #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-not-started {
|
||||||
|
color: #6c757d;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-in-progress {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-text {
|
||||||
|
font-weight: 700;
|
||||||
|
color: #dc3545;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.period-text,
|
||||||
|
.game-clock {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 主队样式 */
|
||||||
|
.home-team {
|
||||||
|
border-top: 1px solid #f1f3f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 比赛页脚 */
|
||||||
|
.game-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 20px;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border-top: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-arena {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-season {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1d428a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.game-card {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team {
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-logo {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-name .name {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-score {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.date-navigation {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-button {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-date {
|
||||||
|
order: -1;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-logo {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-name .name {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-score {
|
||||||
|
font-size: 20px;
|
||||||
|
min-width: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 新增直播间按钮样式 */
|
||||||
|
.live-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border-top: 1px solid #f1f3f5;
|
||||||
|
border-bottom: 1px solid #f1f3f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-btn {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-btn.primary {
|
||||||
|
background-color: #1d428a;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-btn.primary:hover {
|
||||||
|
background-color: #15316e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-btn.secondary {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
color: #1d428a;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-btn.secondary:hover {
|
||||||
|
background-color: #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式调整 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.live-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.live-btn {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.no-games-message {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #666;
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
9
src/main.js
Normal file
9
src/main.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import router from './router'
|
||||||
|
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
app.use(router)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
25
src/router/index.js
Normal file
25
src/router/index.js
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
// router/index.js
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import IndexVue from '@/views/Index.vue'
|
||||||
|
import PlayVue from '@/views/Play.vue'
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Index',
|
||||||
|
component: IndexVue,
|
||||||
|
props: route => ({ query: route.query })
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/play',
|
||||||
|
name: 'Play',
|
||||||
|
component: PlayVue,
|
||||||
|
props: route => ({ query: route.query })
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(),
|
||||||
|
routes
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
75
src/views/Index.vue
Normal file
75
src/views/Index.vue
Normal file
@@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<NBASchedule
|
||||||
|
:scheduleData="scheduleData"
|
||||||
|
:loading="loading"
|
||||||
|
:error="error"
|
||||||
|
@dateChange="handleDateChange"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<el-backtop :right="50" :bottom="50" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import NBASchedule from "@/components/NBASchedule.vue";
|
||||||
|
import { schedule,games } from "@/api/nba";
|
||||||
|
|
||||||
|
const scheduleData = ref(null);
|
||||||
|
const loading = ref(false);
|
||||||
|
const error = ref(null);
|
||||||
|
|
||||||
|
// 获取当前时间戳（秒）
|
||||||
|
const currentTimestamp = Math.floor(Date.now() / 1000);
|
||||||
|
|
||||||
|
// 构造请求参数
|
||||||
|
const params = {
|
||||||
|
app_key: "tiKB2tNdncnZFPOi",
|
||||||
|
app_version: "1.1.0",
|
||||||
|
channel: "NBA",
|
||||||
|
device_id: "cd4920b68041f06fcc6ea358c85710bd",
|
||||||
|
// end: "2025-04-17",
|
||||||
|
install_id: "1502934360",
|
||||||
|
network: "N/A",
|
||||||
|
os_type: "3",
|
||||||
|
os_version: "1.0.0",
|
||||||
|
sign: "sign_v2",
|
||||||
|
sign2: "67BB8937A32E512826D59467E803B28CD82E179FCE8B2A470C20AA0BD4AE08DB",
|
||||||
|
// start: "2025-04-17",
|
||||||
|
//开始结束设置为当天
|
||||||
|
start: currentTimestamp,
|
||||||
|
end: currentTimestamp,
|
||||||
|
t: currentTimestamp,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取赛程数据
|
||||||
|
const fetchScheduleData = async () => {
|
||||||
|
loading.value = true;
|
||||||
|
error.value = null;
|
||||||
|
try {
|
||||||
|
const response = await schedule(params);
|
||||||
|
scheduleData.value = response;
|
||||||
|
// console.log("赛程数据:", response);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
error.value = err.message || "获取赛程数据失败";
|
||||||
|
console.error("获取赛程数据失败:", err);
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理日期变更
|
||||||
|
const handleDateChange = (date) => {
|
||||||
|
params.start = date;
|
||||||
|
params.end = date;
|
||||||
|
fetchScheduleData();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始加载数据
|
||||||
|
fetchScheduleData();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
||||||
26
src/views/Play.vue
Normal file
26
src/views/Play.vue
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<!-- <LiveStream
|
||||||
|
:liveUrl="liveUrl"
|
||||||
|
:streamType="streamType"
|
||||||
|
:gameInfo="gameInfo"
|
||||||
|
@goBack="goBack"
|
||||||
|
/> -->
|
||||||
|
<LiveStream />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import LiveStream from '@/components/LiveStream.vue';
|
||||||
|
// import { ref } from 'vue';
|
||||||
|
// import { useRoute, useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
// const route = useRoute(); // 注意这里改成了 route 而不是 useRoute
|
||||||
|
// const liveUrl = ref('');
|
||||||
|
// liveUrl.value = route.query.url;
|
||||||
|
// console.log('play页面接收的直播地址:', liveUrl.value);
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
18
vite.config.js
Normal file
18
vite.config.js
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
vueDevTools(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user