修改注册界面
This commit is contained in:
parent
56a415194e
commit
765f0b6a8f
92
src/App.vue
92
src/App.vue
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<SideBar />
|
<SideBar :menu-items="menuItems" />
|
||||||
<div class="main-wrapper" :class="{ 'sidebar-collapsed': isCollapsed }">
|
<div class="main-wrapper" :class="{ 'sidebar-collapsed': isCollapsed }">
|
||||||
<TopBar />
|
<TopBar />
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
|
|
@ -31,6 +31,96 @@ provide('isCollapsed', isCollapsed)
|
||||||
const isAuthPage = computed(() => {
|
const isAuthPage = computed(() => {
|
||||||
return ['/login', '/register', '/forgot-password'].includes(route.path)
|
return ['/login', '/register', '/forgot-password'].includes(route.path)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const menuItems = ref([
|
||||||
|
{
|
||||||
|
icon: 'House',
|
||||||
|
title: '首页',
|
||||||
|
path: '/'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'DataBoard',
|
||||||
|
title: '数据看板',
|
||||||
|
path: '/dashboard'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'VideoCamera',
|
||||||
|
title: '视频服务',
|
||||||
|
path: '/video-service'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'FirstAidKit',
|
||||||
|
title: '医疗服务',
|
||||||
|
path: '/medical'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Van',
|
||||||
|
title: '出行服务',
|
||||||
|
path: '/transportation'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Bowl',
|
||||||
|
title: '饮食服务',
|
||||||
|
path: '/diet'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Microphone',
|
||||||
|
title: '语音助手',
|
||||||
|
path: '/voice-assistant'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Calendar',
|
||||||
|
title: '活动中心',
|
||||||
|
path: '/activities'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Monitor',
|
||||||
|
title: '设备管理',
|
||||||
|
path: '/devices'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Service',
|
||||||
|
title: '生活服务',
|
||||||
|
path: '/life-service'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'ChatDotRound',
|
||||||
|
title: '社区交流',
|
||||||
|
path: '/community'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Bell',
|
||||||
|
title: '新闻资讯',
|
||||||
|
path: '/news'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Headset',
|
||||||
|
title: '音乐服务',
|
||||||
|
path: '/music'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'ChatLineRound',
|
||||||
|
title: 'AI助手',
|
||||||
|
path: '/ai-assistant'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Monitor',
|
||||||
|
title: '娱乐服务',
|
||||||
|
path: '/entertainment'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Shop',
|
||||||
|
title: '智慧商城',
|
||||||
|
path: '/shop'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'Setting',
|
||||||
|
title: '系统设置',
|
||||||
|
path: '/settings'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
provide('menuItems', menuItems) // 提供给子组件使用
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -33,15 +33,21 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed, inject } from 'vue'
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
import { Platform, Expand, Fold } from '@element-plus/icons-vue'
|
import { Platform, Expand, Fold } from '@element-plus/icons-vue'
|
||||||
import { menuItems } from '@/config/menu'
|
|
||||||
|
defineProps<{
|
||||||
|
menuItems: {
|
||||||
|
icon: string
|
||||||
|
title: string
|
||||||
|
path: string
|
||||||
|
}[]
|
||||||
|
}>()
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
const isCollapsed = inject('isCollapsed')
|
||||||
const isCollapsed = ref(false)
|
|
||||||
const activeMenu = computed(() => route.path)
|
const activeMenu = computed(() => route.path)
|
||||||
|
|
||||||
const toggleCollapse = () => {
|
const toggleCollapse = () => {
|
||||||
|
|
|
||||||
|
|
@ -29,11 +29,17 @@ const router = createRouter({
|
||||||
meta: { requiresAuth: true }
|
meta: { requiresAuth: true }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/video',
|
path: '/video-service',
|
||||||
name: 'video',
|
name: 'video',
|
||||||
component: () => import('../views/VideoView.vue'),
|
component: () => import('../views/VideoView.vue'),
|
||||||
meta: { requiresAuth: true }
|
meta: { requiresAuth: true }
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/video-service/play/:id',
|
||||||
|
name: 'video-play',
|
||||||
|
component: () => import('../views/VideoPlayView.vue'),
|
||||||
|
meta: { requiresAuth: true }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/medical',
|
path: '/medical',
|
||||||
name: 'medical',
|
name: 'medical',
|
||||||
|
|
|
||||||
|
|
@ -1,231 +1,680 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="video-page">
|
<div class="video-container">
|
||||||
<el-row :gutter="20" class="video-content">
|
<!-- 页面标题 -->
|
||||||
<el-col :span="16" class="video-player-container">
|
<div class="page-header">
|
||||||
<VideoPlayer
|
<div class="title-wrapper">
|
||||||
ref="videoPlayerRef"
|
<el-icon :size="28"><VideoCamera /></el-icon>
|
||||||
:src="currentVideo?.url"
|
<h1>视频服务</h1>
|
||||||
:title="currentVideo?.title"
|
</div>
|
||||||
:poster="currentVideo?.thumbnail"
|
<p class="subtitle">为您精选优质养老视频内容</p>
|
||||||
/>
|
</div>
|
||||||
</el-col>
|
|
||||||
<el-col :span="8" class="video-list-container">
|
<!-- 顶部搜索栏 -->
|
||||||
<el-card class="video-list">
|
<div class="search-bar">
|
||||||
<template #header>
|
<el-input
|
||||||
<div class="video-list-header">
|
v-model="searchQuery"
|
||||||
<span>视频列表</span>
|
placeholder="搜索视频..."
|
||||||
<el-select v-model="currentCategory" placeholder="选择分类" @change="filterVideos">
|
class="search-input"
|
||||||
<el-option
|
clearable
|
||||||
v-for="item in categories"
|
>
|
||||||
:key="item.value"
|
<template #prefix>
|
||||||
:label="item.label"
|
<el-icon class="search-icon"><Search /></el-icon>
|
||||||
:value="item.value"
|
</template>
|
||||||
/>
|
<template #append>
|
||||||
|
<el-button type="primary" :icon="Search" @click="handleSearch">
|
||||||
|
<span class="button-text">搜索</span>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
<div class="hot-searches">
|
||||||
|
<span class="label">热门搜索：</span>
|
||||||
|
<el-tag
|
||||||
|
v-for="tag in hotSearches"
|
||||||
|
:key="tag"
|
||||||
|
size="small"
|
||||||
|
effect="plain"
|
||||||
|
class="hot-tag"
|
||||||
|
@click="searchQuery = tag"
|
||||||
|
>
|
||||||
|
{{ tag }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 视频分类标签 -->
|
||||||
|
<div class="category-tags">
|
||||||
|
<el-tabs
|
||||||
|
v-model="activeCategory"
|
||||||
|
@tab-change="handleCategoryChange"
|
||||||
|
class="custom-tabs"
|
||||||
|
>
|
||||||
|
<el-tab-pane label="推荐" name="recommended">
|
||||||
|
<template #label>
|
||||||
|
<div class="tab-label">
|
||||||
|
<el-icon><VideoPlay /></el-icon>
|
||||||
|
<span>推荐</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<video-grid :videos="recommendedVideos" />
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="最新" name="latest">
|
||||||
|
<video-grid :videos="latestVideos" />
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="热门" name="popular">
|
||||||
|
<video-grid :videos="popularVideos" />
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="收藏" name="favorites">
|
||||||
|
<video-grid :videos="favoriteVideos" />
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="历史" name="history">
|
||||||
|
<video-grid :videos="historyVideos" />
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 视频推荐区域 -->
|
||||||
|
<div v-if="activeCategory === 'recommended'" class="featured-section">
|
||||||
|
<div class="section-title">
|
||||||
|
<el-icon><Star /></el-icon>
|
||||||
|
<h2>精选推荐</h2>
|
||||||
|
<el-tag type="warning" effect="plain" class="featured-tag">
|
||||||
|
<el-icon><Trophy /></el-icon>
|
||||||
|
<span>精品内容</span>
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
<el-carousel
|
||||||
|
:interval="4000"
|
||||||
|
type="card"
|
||||||
|
height="300px"
|
||||||
|
:autoplay="true"
|
||||||
|
class="featured-carousel"
|
||||||
|
>
|
||||||
|
<el-carousel-item v-for="video in featuredVideos" :key="video.id">
|
||||||
|
<div class="featured-video" @click="playVideo(video)">
|
||||||
|
<img :src="video.thumbnail" :alt="video.title">
|
||||||
|
<div class="featured-info">
|
||||||
|
<h3>{{ video.title }}</h3>
|
||||||
|
<p>{{ video.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 视频列表区域 -->
|
||||||
|
<div class="video-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-title">
|
||||||
|
<el-icon>
|
||||||
|
<component :is="getCategoryIcon" />
|
||||||
|
</el-icon>
|
||||||
|
<h2>{{ getCategoryTitle }}</h2>
|
||||||
|
</div>
|
||||||
|
<el-select
|
||||||
|
v-model="sortBy"
|
||||||
|
placeholder="排序方式"
|
||||||
|
@change="handleSort"
|
||||||
|
class="sort-select"
|
||||||
|
>
|
||||||
|
<el-option label="最新发布" value="latest" />
|
||||||
|
<el-option label="最多播放" value="views" />
|
||||||
|
<el-option label="最多点赞" value="likes" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
<el-scrollbar height="calc(100vh - 280px)">
|
<div class="video-grid">
|
||||||
<div
|
<video-card
|
||||||
v-for="video in filteredVideos"
|
v-for="video in displayVideos"
|
||||||
:key="video.id"
|
:key="video.id"
|
||||||
class="video-item"
|
:video="video"
|
||||||
:class="{ 'active': currentVideo?.id === video.id }"
|
|
||||||
@click="playVideo(video)"
|
@click="playVideo(video)"
|
||||||
>
|
@favorite="toggleFavorite"
|
||||||
<el-image
|
/>
|
||||||
:src="video.thumbnail"
|
|
||||||
fit="cover"
|
|
||||||
:lazy="true"
|
|
||||||
>
|
|
||||||
<template #placeholder>
|
|
||||||
<div class="image-placeholder">
|
|
||||||
<el-icon><Picture /></el-icon>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</el-image>
|
<!-- 分页器 -->
|
||||||
<div class="video-info">
|
<div class="pagination">
|
||||||
<h4>{{ video.title }}</h4>
|
<el-pagination
|
||||||
<p class="video-meta">
|
v-model:current-page="currentPage"
|
||||||
<span>{{ video.duration }}</span>
|
:page-size="pageSize"
|
||||||
<span>播放次数：{{ video.views }}</span>
|
:total="totalVideos"
|
||||||
</p>
|
layout="prev, pager, next"
|
||||||
|
@current-change="handlePageChange"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-scrollbar>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted, watch } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import { Picture } from '@element-plus/icons-vue'
|
import { Search, Star, VideoPlay, Calendar, Fire, Collection, Timer, VideoCamera, Trophy } from '@element-plus/icons-vue'
|
||||||
import VideoPlayer from '@/components/video/VideoPlayer.vue'
|
import VideoCard from '@/components/video/VideoCard.vue'
|
||||||
import { videoApi, type Video } from '@/api/video'
|
import VideoGrid from '@/components/video/VideoGrid.vue'
|
||||||
import { ElLoading, ElMessage } from 'element-plus'
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
const currentCategory = ref('')
|
const router = useRouter()
|
||||||
const categories = [
|
const searchQuery = ref('')
|
||||||
{ label: '全部', value: '' },
|
const activeCategory = ref('recommended')
|
||||||
{ label: '健康讲座', value: 'health' },
|
const sortBy = ref('latest')
|
||||||
{ label: '娱乐节目', value: 'entertainment' },
|
const currentPage = ref(1)
|
||||||
{ label: '新闻资讯', value: 'news' }
|
const pageSize = ref(12)
|
||||||
]
|
|
||||||
|
|
||||||
const videoList = ref<Video[]>([])
|
// 模拟数据
|
||||||
const currentVideo = ref<Video | null>(null)
|
const featuredVideos = ref([
|
||||||
const videoPlayerRef = ref()
|
{
|
||||||
|
id: 1,
|
||||||
|
title: '健康生活指南',
|
||||||
|
description: '日常保健小技巧',
|
||||||
|
thumbnail: 'https://picsum.photos/800/450',
|
||||||
|
duration: '10:30',
|
||||||
|
views: 1500,
|
||||||
|
likes: 230,
|
||||||
|
date: '2024-01-15'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: '老年人居家运动指南',
|
||||||
|
description: '适合老年人的居家健身方法',
|
||||||
|
thumbnail: 'https://picsum.photos/800/451',
|
||||||
|
duration: '15:20',
|
||||||
|
views: 2800,
|
||||||
|
likes: 450,
|
||||||
|
date: '2024-01-16'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: '营养健康饮食课堂',
|
||||||
|
description: '专业营养师教您科学饮食',
|
||||||
|
thumbnail: 'https://picsum.photos/800/452',
|
||||||
|
duration: '12:45',
|
||||||
|
views: 3500,
|
||||||
|
likes: 520,
|
||||||
|
date: '2024-01-17'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
const filteredVideos = computed(() => {
|
const recommendedVideos = ref([
|
||||||
if (!currentCategory.value) return videoList.value
|
{
|
||||||
return videoList.value.filter(video => video.category === currentCategory.value)
|
id: 4,
|
||||||
|
title: '每日健康操',
|
||||||
|
thumbnail: 'https://picsum.photos/800/453',
|
||||||
|
duration: '08:30',
|
||||||
|
views: 1200,
|
||||||
|
likes: 180,
|
||||||
|
date: '2024-01-18'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: '中医养生知识讲座',
|
||||||
|
thumbnail: 'https://picsum.photos/800/454',
|
||||||
|
duration: '20:15',
|
||||||
|
views: 4500,
|
||||||
|
likes: 680,
|
||||||
|
date: '2024-01-19'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: '老年人心理健康指导',
|
||||||
|
thumbnail: 'https://picsum.photos/800/455',
|
||||||
|
duration: '16:40',
|
||||||
|
views: 2300,
|
||||||
|
likes: 340,
|
||||||
|
date: '2024-01-20'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const latestVideos = ref([
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
title: '智能设备使用教程',
|
||||||
|
thumbnail: 'https://picsum.photos/800/456',
|
||||||
|
duration: '11:20',
|
||||||
|
views: 1800,
|
||||||
|
likes: 260,
|
||||||
|
date: '2024-01-21'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
title: '防诈骗知识讲解',
|
||||||
|
thumbnail: 'https://picsum.photos/800/457',
|
||||||
|
duration: '14:50',
|
||||||
|
views: 5600,
|
||||||
|
likes: 890,
|
||||||
|
date: '2024-01-22'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const popularVideos = ref([
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
title: '老年人体育运动指南',
|
||||||
|
thumbnail: 'https://picsum.photos/800/458',
|
||||||
|
duration: '18:30',
|
||||||
|
views: 8900,
|
||||||
|
likes: 1200,
|
||||||
|
date: '2024-01-20',
|
||||||
|
isFavorite: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
title: '健康饮食与营养搭配',
|
||||||
|
thumbnail: 'https://picsum.photos/800/459',
|
||||||
|
duration: '25:15',
|
||||||
|
views: 7600,
|
||||||
|
likes: 980,
|
||||||
|
date: '2024-01-19',
|
||||||
|
isFavorite: true
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const favoriteVideos = ref([
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
title: '居家养老服务指南',
|
||||||
|
thumbnail: 'https://picsum.photos/800/460',
|
||||||
|
duration: '16:45',
|
||||||
|
views: 3200,
|
||||||
|
likes: 520,
|
||||||
|
date: '2024-01-18',
|
||||||
|
isFavorite: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
title: '老年人心理健康课程',
|
||||||
|
thumbnail: 'https://picsum.photos/800/461',
|
||||||
|
duration: '22:10',
|
||||||
|
views: 4100,
|
||||||
|
likes: 730,
|
||||||
|
date: '2024-01-17',
|
||||||
|
isFavorite: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
title: '智能家居使用教程',
|
||||||
|
thumbnail: 'https://picsum.photos/800/462',
|
||||||
|
duration: '19:30',
|
||||||
|
views: 2800,
|
||||||
|
likes: 450,
|
||||||
|
date: '2024-01-16',
|
||||||
|
isFavorite: true
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const historyVideos = ref([
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
title: '老年人手机使用技巧',
|
||||||
|
thumbnail: 'https://picsum.photos/800/463',
|
||||||
|
duration: '13:20',
|
||||||
|
views: 2100,
|
||||||
|
likes: 380,
|
||||||
|
date: '2024-01-23',
|
||||||
|
watchedAt: '2024-01-23T15:30:00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
title: '养生保健知识讲座',
|
||||||
|
thumbnail: 'https://picsum.photos/800/464',
|
||||||
|
duration: '28:45',
|
||||||
|
views: 5300,
|
||||||
|
likes: 860,
|
||||||
|
date: '2024-01-22',
|
||||||
|
watchedAt: '2024-01-23T14:20:00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
title: '老年人理财安全指南',
|
||||||
|
thumbnail: 'https://picsum.photos/800/465',
|
||||||
|
duration: '20:15',
|
||||||
|
views: 4200,
|
||||||
|
likes: 690,
|
||||||
|
date: '2024-01-21',
|
||||||
|
watchedAt: '2024-01-23T10:15:00'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
title: '家庭医疗保健常识',
|
||||||
|
thumbnail: 'https://picsum.photos/800/466',
|
||||||
|
duration: '17:40',
|
||||||
|
views: 3800,
|
||||||
|
likes: 570,
|
||||||
|
date: '2024-01-20',
|
||||||
|
watchedAt: '2024-01-22T16:45:00'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// 计算属性
|
||||||
|
const getCategoryTitle = computed(() => {
|
||||||
|
const titles = {
|
||||||
|
recommended: '推荐视频',
|
||||||
|
latest: '最新视频',
|
||||||
|
popular: '热门视频',
|
||||||
|
favorites: '我的收藏',
|
||||||
|
history: '观看历史'
|
||||||
|
}
|
||||||
|
return titles[activeCategory.value]
|
||||||
})
|
})
|
||||||
|
|
||||||
const loadVideos = async () => {
|
const displayVideos = computed(() => {
|
||||||
const loading = ElLoading.service({
|
// 根据当前分类和排序方式返回对应的视频列表
|
||||||
target: '.video-list-container',
|
let videos = []
|
||||||
text: '加载中...'
|
switch (activeCategory.value) {
|
||||||
|
case 'recommended':
|
||||||
|
videos = recommendedVideos.value
|
||||||
|
break
|
||||||
|
case 'latest':
|
||||||
|
videos = latestVideos.value
|
||||||
|
break
|
||||||
|
case 'popular':
|
||||||
|
videos = popularVideos.value
|
||||||
|
break
|
||||||
|
case 'favorites':
|
||||||
|
videos = favoriteVideos.value
|
||||||
|
break
|
||||||
|
case 'history':
|
||||||
|
videos = historyVideos.value
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
// 应用排序
|
||||||
|
return sortVideos(videos)
|
||||||
|
})
|
||||||
|
|
||||||
|
const totalVideos = computed(() => displayVideos.value.length)
|
||||||
|
|
||||||
|
// 方法
|
||||||
|
const handleSearch = () => {
|
||||||
|
if (!searchQuery.value.trim()) return
|
||||||
|
// TODO: 实现搜索逻辑
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCategoryChange = (category: string) => {
|
||||||
|
activeCategory.value = category
|
||||||
|
currentPage.value = 1
|
||||||
|
// TODO: 加载对应分类的视频
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSort = () => {
|
||||||
|
// TODO: 实现排序逻辑
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlePageChange = (page: number) => {
|
||||||
|
currentPage.value = page
|
||||||
|
// TODO: 加载对应页的视频
|
||||||
|
}
|
||||||
|
|
||||||
|
const playVideo = (video: any) => {
|
||||||
|
router.push(`/video-service/play/${video.id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleFavorite = (videoId: number) => {
|
||||||
|
// TODO: 实现收藏/取消收藏逻辑
|
||||||
|
}
|
||||||
|
|
||||||
|
const sortVideos = (videos: any[]) => {
|
||||||
|
return [...videos].sort((a, b) => {
|
||||||
|
switch (sortBy.value) {
|
||||||
|
case 'views':
|
||||||
|
return b.views - a.views
|
||||||
|
case 'likes':
|
||||||
|
return b.likes - a.likes
|
||||||
|
case 'latest':
|
||||||
|
default:
|
||||||
|
return new Date(b.date).getTime() - new Date(a.date).getTime()
|
||||||
|
}
|
||||||
})
|
})
|
||||||
try {
|
|
||||||
const data = await videoApi.getVideoList(currentCategory.value)
|
|
||||||
videoList.value = data
|
|
||||||
if (data.length > 0 && !currentVideo.value) {
|
|
||||||
currentVideo.value = data[0]
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('加载视频列表失败:', error)
|
|
||||||
ElMessage.error('加载视频列表失败')
|
|
||||||
} finally {
|
|
||||||
loading.close()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const playVideo = async (video: Video) => {
|
// 根据分类获取对应图标
|
||||||
currentVideo.value = video
|
const getCategoryIcon = computed(() => {
|
||||||
if (videoPlayerRef.value) {
|
const icons = {
|
||||||
videoPlayerRef.value.changeVideo(video.url, video.thumbnail)
|
recommended: VideoPlay,
|
||||||
|
latest: Calendar,
|
||||||
|
popular: Fire,
|
||||||
|
favorites: Collection,
|
||||||
|
history: Timer
|
||||||
}
|
}
|
||||||
try {
|
return icons[activeCategory.value]
|
||||||
await videoApi.updateViews(video.id)
|
|
||||||
// 更新本地数据
|
|
||||||
video.views += 1
|
|
||||||
} catch (error) {
|
|
||||||
console.error('更新观看次数失败:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const filterVideos = () => {
|
|
||||||
const filtered = filteredVideos.value
|
|
||||||
if (filtered.length > 0) {
|
|
||||||
playVideo(filtered[0])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(currentCategory, () => {
|
|
||||||
loadVideos()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
// 热门搜索标签
|
||||||
loadVideos()
|
const hotSearches = [
|
||||||
})
|
'养生保健',
|
||||||
|
'健康饮食',
|
||||||
|
'运动指南',
|
||||||
|
'心理健康',
|
||||||
|
'智能设备'
|
||||||
|
]
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.video-page {
|
.video-container {
|
||||||
height: 100%;
|
padding: 30px;
|
||||||
width: 100%;
|
max-width: 1400px;
|
||||||
min-width: 1000px;
|
margin: 20px auto;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-content {
|
.page-header {
|
||||||
height: 100%;
|
margin-bottom: 30px;
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-player-container {
|
.title-wrapper {
|
||||||
height: 100%;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-list-container {
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-list {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-list :deep(.el-card__body) {
|
|
||||||
flex: 1;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-list-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px;
|
gap: 12px;
|
||||||
}
|
margin-bottom: 8px;
|
||||||
|
|
||||||
.video-item {
|
.el-icon {
|
||||||
display: flex;
|
color: #409EFF;
|
||||||
padding: 10px;
|
}
|
||||||
cursor: pointer;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-item:hover {
|
h1 {
|
||||||
background-color: #f5f7fa;
|
font-size: 28px;
|
||||||
}
|
margin: 0;
|
||||||
|
color: #303133;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.video-item.active {
|
.subtitle {
|
||||||
background-color: #ecf5ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-item .el-image {
|
|
||||||
width: 160px;
|
|
||||||
height: 90px;
|
|
||||||
margin-right: 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-placeholder {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
color: #909399;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-info {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-info h4 {
|
|
||||||
margin: 0 0 5px 0;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1.4;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-meta {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
font-size: 12px;
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-bar {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-searches {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-tag {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #409EFF;
|
||||||
|
border-color: #409EFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
|
||||||
|
:deep(.el-input__wrapper) {
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding-left: 16px;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-input-group__append) {
|
||||||
|
padding: 0;
|
||||||
|
.el-button {
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
padding: 0 24px;
|
||||||
|
height: 44px;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
.button-text {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-tags {
|
||||||
|
.custom-tabs {
|
||||||
|
:deep(.el-tabs__item) {
|
||||||
|
.tab-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
|
||||||
|
.el-icon {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.featured-tag {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
|
||||||
|
.el-icon {
|
||||||
|
color: #e6a23c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-carousel {
|
||||||
|
:deep(.el-carousel__arrow) {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
font-size: 20px;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.featured-video {
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
transparent 50%,
|
||||||
|
rgba(0, 0, 0, 0.7) 100%
|
||||||
|
);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
&::after {
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
transparent 40%,
|
||||||
|
rgba(0, 0, 0, 0.8) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 32px;
|
||||||
|
padding: 20px 0;
|
||||||
|
|
||||||
|
:deep(.el-pagination) {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式布局 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.video-container {
|
||||||
|
padding: 20px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
h2 {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
.title-wrapper {
|
||||||
|
h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-searches {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,14 +1,12 @@
|
||||||
import { fileURLToPath, URL } from 'node:url'
|
|
||||||
|
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import path from 'path'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
'@': path.resolve(__dirname, './src')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue