mirror of
https://github.com/ProudMuBai/GoFilm.git
synced 2026-03-03 01:37:30 +08:00
pc tag search finish
This commit is contained in:
mubai
@@ -10,7 +10,7 @@
|
|||||||
<meta name="referrer" content="never">
|
<meta name="referrer" content="never">
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<title>(╥﹏╥)</title>
|
<title>(╥﹏╥)</title>
|
||||||
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_aj8j1lxiqyw.css">
|
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_vmyr7my0yje.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main">
|
<div class="main" >
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
<Util/>
|
<Util/>
|
||||||
</div>
|
</div>
|
||||||
@@ -26,7 +26,7 @@ html, body, #app {
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
/*background: #222;*/
|
/*background: #222;*/
|
||||||
color: rgb(221, 221, 221);
|
color: rgb(221, 221, 221);
|
||||||
background: rgb(34, 34, 34);
|
//background: rgb(34, 34, 34);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -37,7 +37,6 @@ html, body, #app {
|
|||||||
|
|
||||||
/*全局a标签默认样式去除*/
|
/*全局a标签默认样式去除*/
|
||||||
a {
|
a {
|
||||||
color: #2d2e2f;
|
|
||||||
outline: none;
|
outline: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #888888;
|
color: #888888;
|
||||||
|
|||||||
96
client/src/assets/css/classify.css
Normal file
96
client/src/assets/css/classify.css
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 35px;
|
||||||
|
border-bottom: 2px solid rgba(255,255,255, 0.15);
|
||||||
|
}
|
||||||
|
.header a {
|
||||||
|
color: rgba(255,255,255,0.15);
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
.header a:hover {
|
||||||
|
color: rgba(255,255,255,0.65)!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.h_active {
|
||||||
|
color: rgba(255,255,255,0.65)!important;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.h_active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: orangered;
|
||||||
|
bottom: -60%;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: 16px 16px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line{
|
||||||
|
width: 3px;
|
||||||
|
background: rgba(255,255,255,0.15);
|
||||||
|
display: inline-block;
|
||||||
|
margin: 5px 15px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Category Tag style*/
|
||||||
|
.c_header {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c_header a {
|
||||||
|
flex-basis: calc(14% - 16px);
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: 20px;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 800;
|
||||||
|
background: rgba(255, 255, 255, 0.94);
|
||||||
|
padding: 1.35% 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c_header a:hover {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav:before {
|
||||||
|
width: 36px;
|
||||||
|
height: 4px;
|
||||||
|
background: orange;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 35%;
|
||||||
|
bottom: 12px;
|
||||||
|
border-radius: 50px;
|
||||||
|
transform: scaleX(0);
|
||||||
|
transition: transform 0.5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav:hover:before {
|
||||||
|
width: 36px;
|
||||||
|
height: 4px;
|
||||||
|
background: orange;
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 35%;
|
||||||
|
bottom: 12px;
|
||||||
|
border-radius: 50px;
|
||||||
|
transform: scaleX(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: rgb(249 230 195) !important;
|
||||||
|
color: #e52424 !important;
|
||||||
|
}
|
||||||
@@ -40,13 +40,13 @@ const handleImg =(e:Event)=>{
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: wrap;
|
flex-flow: wrap;
|
||||||
justify-content: start;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c_content .item {
|
.c_content .item {
|
||||||
flex-basis: calc(33% - 6px);
|
flex-basis: calc(33% - 6px);
|
||||||
max-width: 33%;
|
max-width: 33%;
|
||||||
margin: 0 3px 20px 3px;
|
margin-bottom: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -107,11 +107,11 @@ const handleImg =(e:Event)=>{
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: wrap;
|
flex-flow: wrap;
|
||||||
justify-content: start;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c_content .item {
|
.c_content .item {
|
||||||
margin: 0 8px 20px 8px;
|
margin-bottom: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -12,10 +12,10 @@
|
|||||||
<!--右侧顶级分类导航 -->
|
<!--右侧顶级分类导航 -->
|
||||||
<div class="nav_right">
|
<div class="nav_right">
|
||||||
<el-link :underline="false" href="/">首页</el-link>
|
<el-link :underline="false" href="/">首页</el-link>
|
||||||
<el-link :underline="false" :href="`/categoryFilm?Pid=${nav.film.id}`">电影</el-link>
|
<el-link :underline="false" :href="`/filmClassify?Pid=${nav.film.id}`">电影</el-link>
|
||||||
<el-link :underline="false" :href="`/categoryFilm?Pid=${nav.tv.id}`">剧集</el-link>
|
<el-link :underline="false" :href="`/filmClassify?Pid=${nav.tv.id}`">剧集</el-link>
|
||||||
<el-link :underline="false" :href="`/categoryFilm?Pid=${nav.cartoon.id}`">动漫</el-link>
|
<el-link :underline="false" :href="`/filmClassify?Pid=${nav.cartoon.id}`">动漫</el-link>
|
||||||
<el-link :underline="false" :href="`/categoryFilm?Pid=${nav.variety.id}`">综艺</el-link>
|
<el-link :underline="false" :href="`/filmClassify?Pid=${nav.variety.id}`">综艺</el-link>
|
||||||
<!-- <span style="color:#777; font-weight: bold">|</span>-->
|
<!-- <span style="color:#777; font-weight: bold">|</span>-->
|
||||||
<el-link href="/search" class="hidden-md-and-up" :underline="false">
|
<el-link href="/search" class="hidden-md-and-up" :underline="false">
|
||||||
<el-icon style="font-size: 18px">
|
<el-icon style="font-size: 18px">
|
||||||
|
|||||||
@@ -36,7 +36,6 @@ const control = reactive({
|
|||||||
darkTheme: true,
|
darkTheme: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
//
|
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
|
|
||||||
changeStyle(localStorage.getItem("theme")+'')
|
changeStyle(localStorage.getItem("theme")+'')
|
||||||
@@ -65,7 +64,7 @@ const changeStyle = (type:string)=>{
|
|||||||
case 'dark':
|
case 'dark':
|
||||||
control.darkTheme = true
|
control.darkTheme = true
|
||||||
localStorage.setItem("theme", 'dark')
|
localStorage.setItem("theme", 'dark')
|
||||||
document.getElementsByClassName('main')[0].style.background = `rgb(34,34,34)`
|
document.getElementsByClassName('main')[0].style.background = `#16161a`
|
||||||
break
|
break
|
||||||
case 'more':
|
case 'more':
|
||||||
control.show = !control.show
|
control.show = !control.show
|
||||||
|
|||||||
@@ -13,6 +13,8 @@ import Play from "../views/index/Play.vue";
|
|||||||
import SearchFilm from "../views/index/SearchFilm.vue";
|
import SearchFilm from "../views/index/SearchFilm.vue";
|
||||||
import CategoryFilm from "../views/index/CategoryFilm.vue";
|
import CategoryFilm from "../views/index/CategoryFilm.vue";
|
||||||
import NotFound from '../views/error/Error404.vue'
|
import NotFound from '../views/error/Error404.vue'
|
||||||
|
import FilmClassifySearch from "../views/index/FilmClassifySearch.vue";
|
||||||
|
import FilmClassify from "../views/index/FilmClassify.vue";
|
||||||
|
|
||||||
|
|
||||||
// 2. 定义一个路由
|
// 2. 定义一个路由
|
||||||
@@ -27,6 +29,8 @@ const routes = [
|
|||||||
{path: 'play', component: Play},
|
{path: 'play', component: Play},
|
||||||
{path: 'search', component: SearchFilm},
|
{path: 'search', component: SearchFilm},
|
||||||
{path: 'CategoryFilm', component: CategoryFilm},
|
{path: 'CategoryFilm', component: CategoryFilm},
|
||||||
|
{path: 'filmClassify', component: FilmClassify},
|
||||||
|
{path: 'filmClassifySearch', component: FilmClassifySearch},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{path: `/:pathMatch(.*)*`, component: NotFound},
|
{path: `/:pathMatch(.*)*`, component: NotFound},
|
||||||
|
|||||||
@@ -79,4 +79,21 @@ button:focus-visible {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*通用样式*/
|
||||||
|
.primary{
|
||||||
|
color: #99DBF5;
|
||||||
|
}
|
||||||
|
.dark {
|
||||||
|
color: rgba(0,0,0,0.68);
|
||||||
|
}
|
||||||
|
.light {
|
||||||
|
color: rgba(255,255,255,0.68);
|
||||||
|
}
|
||||||
|
.silver{
|
||||||
|
color: rgba(255,255,255,0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -4,24 +4,17 @@
|
|||||||
<div class="h_title">
|
<div class="h_title">
|
||||||
<span class="header_t">{{ d.title.name }}</span>
|
<span class="header_t">{{ d.title.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="false" class="c_header">
|
|
||||||
<!--默认全部-->
|
|
||||||
<a :class="`nav ${d.cid == -1?'active':''}`"
|
|
||||||
:href="`/categoryFilm?pid=${d.category.id}`">全部{{ d.category.name }}</a>
|
|
||||||
<!--子分类-->
|
|
||||||
<a :class="`nav ${d.cid == c.id?'active':''}`" :href="`/categoryFilm?pid=${c.pid}&cid=${c.id}¤t=1`"
|
|
||||||
v-for="c in d.category.children">{{ c.name }}</a>
|
|
||||||
</div>
|
|
||||||
<!--影片分类检索-->
|
<!--影片分类检索-->
|
||||||
<div class="t_container">
|
<div class="t_container">
|
||||||
<div class="t_item" v-for="k in d.search.sortList ">
|
<div class="t_item" v-for="k in d.search.sortList ">
|
||||||
<span class="t_title">{{d.search.titles[k]}}</span>
|
<div class="t_title">{{d.search.titles[k]}}</div>
|
||||||
<a href="javascript:void(false)" :class="`tag ${t['Value'] === d.searchParams[k]?'t_active':''}`" v-for="t in d.search.tags[k]" @click="handleTag(k,t['Value'])" >
|
<div class="tag_group">
|
||||||
{{t['Name']}}
|
<a href="javascript:void(false)" :class="`tag ${t['Value'] === d.searchParams[k]?'t_active':''}`" v-for="t in d.search.tags[k]" @click="handleTag(k,t['Value'])" >
|
||||||
</a>
|
{{t['Name']}}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--影片列表展示-->
|
<!--影片列表展示-->
|
||||||
@@ -104,8 +97,9 @@ const changeCurrent = (currentVal: number) => {
|
|||||||
|
|
||||||
|
|
||||||
const getFilmData = () => {
|
const getFilmData = () => {
|
||||||
|
let url = `filmClassifyHome`
|
||||||
let query = router.currentRoute.value.query
|
let query = router.currentRoute.value.query
|
||||||
ApiGet('/filmClassified', {...query}).then((resp: any) => {
|
ApiGet(url, {...query}).then((resp: any) => {
|
||||||
if (resp.status === 'ok') {
|
if (resp.status === 'ok') {
|
||||||
d.title = resp.data.title
|
d.title = resp.data.title
|
||||||
d.list = resp.data.list
|
d.list = resp.data.list
|
||||||
@@ -158,7 +152,6 @@ onMounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
margin: 14px 0;
|
margin: 14px 0;
|
||||||
flex-flow: wrap;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.t_title {
|
.t_title {
|
||||||
@@ -172,6 +165,13 @@ onMounted(() => {
|
|||||||
padding: 3px 0;
|
padding: 3px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tag_group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
flex-flow: wrap;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border: 1px solid rgba(255,255,255,0.12);
|
border: 1px solid rgba(255,255,255,0.12);
|
||||||
|
|||||||
102
client/src/views/index/FilmClassify.vue
Normal file
102
client/src/views/index/FilmClassify.vue
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<a :href="`/filmClassify?Pid=${d.title.id}`" class="h_active">{{ d.title.name }}</a>
|
||||||
|
<span class="line"/>
|
||||||
|
<a :href="`/filmClassifySearch?Pid=${d.title.id}`" >{{ `${d.title.name}库` }}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--影片列表展示-->
|
||||||
|
<div class="content">
|
||||||
|
<div class="news">
|
||||||
|
<div class="c_nav">
|
||||||
|
<span class="c_nav_text silver">最新上映</span>
|
||||||
|
<span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
|
||||||
|
</div>
|
||||||
|
<FilmList :list="d.content.news"/>
|
||||||
|
</div>
|
||||||
|
<div class="news">
|
||||||
|
<div class="c_nav">
|
||||||
|
<span class="c_nav_text silver">排行榜</span>
|
||||||
|
<span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
|
||||||
|
</div>
|
||||||
|
<FilmList :list="d.content.top"/>
|
||||||
|
</div>
|
||||||
|
<div class="news">
|
||||||
|
<div class="c_nav">
|
||||||
|
<span class="c_nav_text silver">最近更新</span>
|
||||||
|
<span class="c_nav_more ">更多<b class="iconfont icon-more"/></span>
|
||||||
|
</div>
|
||||||
|
<FilmList :list="d.content.recent"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--分页展示区域-->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ApiGet} from "../../utils/request";
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
import {onMounted, reactive} from "vue";
|
||||||
|
import {useRouter} from "vue-router";
|
||||||
|
import FilmList from "../../components/FilmList.vue";
|
||||||
|
import {Bottom} from "@element-plus/icons-vue";
|
||||||
|
|
||||||
|
const d = reactive({
|
||||||
|
title: {},
|
||||||
|
content: {
|
||||||
|
news: [],
|
||||||
|
top: [],
|
||||||
|
recent: [],
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const getFilmData = () => {
|
||||||
|
let query = router.currentRoute.value.query
|
||||||
|
ApiGet(`/filmClassify`, {Pid: query.Pid}).then((resp: any) => {
|
||||||
|
if (resp.status === 'ok') {
|
||||||
|
d.title = resp.data.title
|
||||||
|
d.content = resp.data.content
|
||||||
|
} else {
|
||||||
|
ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1000})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getFilmData()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import "/src/assets/css/classify.css";
|
||||||
|
|
||||||
|
.c_nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
.c_nav_text {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
.c_nav_more{
|
||||||
|
font-size: 14px;
|
||||||
|
background: #25252b;
|
||||||
|
padding: 0 15px;
|
||||||
|
line-height: 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.content>div {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**/
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
296
client/src/views/index/FilmClassifySearch.vue
Normal file
296
client/src/views/index/FilmClassifySearch.vue
Normal file
@@ -0,0 +1,296 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<a :href="`/filmClassify?Pid=${d.title.id}`" >{{ d.title.name }}</a>
|
||||||
|
<span class="line"/>
|
||||||
|
<a :href="`/filmClassifySearch?Pid=${d.title.id}`" class="h_active">{{ `${d.title.name}库` }}</a>
|
||||||
|
</div>
|
||||||
|
<!--影片分类检索-->
|
||||||
|
<div class="t_container">
|
||||||
|
<div class="t_item" v-for="k in d.search.sortList ">
|
||||||
|
<div class="t_title">{{d.search.titles[k]}} <b class="iconfont icon-yousanjiao"/> </div>
|
||||||
|
<div class="tag_group">
|
||||||
|
<a href="javascript:void(false)" :class="`tag ${t['Value'] === d.searchParams[k]?'t_active':''}`" v-for="t in d.search.tags[k]" @click="handleTag(k,t['Value'])" >
|
||||||
|
{{t['Name']}}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--影片列表展示-->
|
||||||
|
<FilmList :list="d.list"/>
|
||||||
|
<!--分页展示区域-->
|
||||||
|
<div class="pagination_container ">
|
||||||
|
<el-pagination background layout="prev, pager, next"
|
||||||
|
v-model:current-page="d.page.current"
|
||||||
|
@current-change="changeCurrent"
|
||||||
|
:pager-count="5"
|
||||||
|
:background="true"
|
||||||
|
:page-size="d.page.pageSize"
|
||||||
|
:total="d.page.total"
|
||||||
|
:prev-icon="ArrowLeftBold"
|
||||||
|
:next-icon="ArrowRightBold"
|
||||||
|
hide-on-single-page
|
||||||
|
class="pagination"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {onMounted, reactive, toRefs} from "vue";
|
||||||
|
import {useRouter} from "vue-router";
|
||||||
|
import {ApiGet} from "../../utils/request";
|
||||||
|
import {ElMessage} from "element-plus";
|
||||||
|
import {ArrowRightBold, ArrowLeftBold} from '@element-plus/icons-vue'
|
||||||
|
import FilmList from "../../components/FilmList.vue";
|
||||||
|
|
||||||
|
// 分类tag点击事件
|
||||||
|
const handleTag = (k:string,v:string)=>{
|
||||||
|
// 设置被点击的tag属性值
|
||||||
|
d.searchParams[k as keyof typeof d.searchParams] = v
|
||||||
|
// searchTag改变, 重置 current当前页码
|
||||||
|
d.page.current = 1
|
||||||
|
handleParams()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleParams = ()=> {
|
||||||
|
let q = ''
|
||||||
|
for (let k in d.searchParams) {
|
||||||
|
let val = d.searchParams[k as keyof typeof d.searchParams]
|
||||||
|
if (val != '') {
|
||||||
|
q += `&${k}=${val}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
location.href = '/filmClassifySearch?'+q.slice(1)+`¤t=${d.page.current}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页面所需数据
|
||||||
|
const d = reactive({
|
||||||
|
title: {},
|
||||||
|
list: [],
|
||||||
|
search: {
|
||||||
|
sortList:[],
|
||||||
|
titles: [],
|
||||||
|
tags: [],
|
||||||
|
},
|
||||||
|
page: {
|
||||||
|
current: 0,
|
||||||
|
},
|
||||||
|
searchParams:{
|
||||||
|
Pid: '',
|
||||||
|
Category: '',
|
||||||
|
Plot: '',
|
||||||
|
Area: '',
|
||||||
|
Language: '',
|
||||||
|
Year: '',
|
||||||
|
Sort: '',
|
||||||
|
},
|
||||||
|
|
||||||
|
})
|
||||||
|
// 获取路由参数查询对应数据
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
// 点击分页按钮事件 current-change
|
||||||
|
const changeCurrent = (currentVal: number) => {
|
||||||
|
handleParams()
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const getFilmData = () => {
|
||||||
|
let query = router.currentRoute.value.query
|
||||||
|
ApiGet(`/filmClassifySearch`, {...query}).then((resp: any) => {
|
||||||
|
if (resp.status === 'ok') {
|
||||||
|
d.title = resp.data.title
|
||||||
|
d.list = resp.data.list
|
||||||
|
d.page = resp.page
|
||||||
|
d.search = resp.data.search
|
||||||
|
d.searchParams = resp.data.params
|
||||||
|
} else {
|
||||||
|
ElMessage.error({message: "请先输入影片名称关键字再进行搜索", duration: 1000})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getFilmData()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
@import "/src/assets/css/classify.css";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.t_container {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.t_item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
margin: 14px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t_title {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: left;
|
||||||
|
color: rgba(255,255,255,0.35);
|
||||||
|
border-radius: 6px;
|
||||||
|
margin-right: 12px;
|
||||||
|
padding: 3px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag_group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
flex-flow: wrap;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid rgba(255,255,255,0.12);
|
||||||
|
margin: 0 8px;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 6px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t_active {
|
||||||
|
background: rgba(255,255,255,0.12);
|
||||||
|
color: #ffa500cc!important;
|
||||||
|
border: none!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<!--移动端修改-->
|
||||||
|
<style scoped>
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
.container {
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
/*顶部内容区域*/
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
max-width: 100vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 650px) {
|
||||||
|
|
||||||
|
/*顶部内容区域*/
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/*分页插件区域*/
|
||||||
|
.pagination_container {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 30px;
|
||||||
|
/*background: deepskyblue;*/
|
||||||
|
text-align: center;
|
||||||
|
/*display: flex;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-pagination) {
|
||||||
|
width: 100% !important;
|
||||||
|
margin: 0 auto !important;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*分页器样式修改*/
|
||||||
|
:deep(.number) {
|
||||||
|
font-weight: bold;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
background: #2e2e2e !important;
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 50%;
|
||||||
|
/*margin: 0 3px!important;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.number:hover) {
|
||||||
|
color: #67d9e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-prev) {
|
||||||
|
font-weight: bold;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
background: #2e2e2e !important;
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-next) {
|
||||||
|
font-weight: bold;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
background: #2e2e2e !important;
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.more) {
|
||||||
|
font-weight: bold;
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
background: #2e2e2e !important;
|
||||||
|
color: #ffffff;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.is-active) {
|
||||||
|
background: #67d9e8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*移动端缩小*/
|
||||||
|
@media (max-width: 650px) {
|
||||||
|
:deep(.number) {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-prev) {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.btn-next) {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.more) {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -11,8 +11,8 @@
|
|||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<ul class="nav_ul">
|
<ul class="nav_ul">
|
||||||
<li v-for="c in item.nav.children" class="nav_category hidden-md-and-down"><a
|
<li v-for="c in item.nav.children" class="nav_category hidden-md-and-down"><a
|
||||||
:href="`/categoryFilm?pid=${c.pid}&cid=${c.id}`">{{ c.name }}</a></li>
|
:href="`/filmClassifySearch?Pid=${c.pid}&Category=${c.id}`">{{ c.name }}</a></li>
|
||||||
<li class="nav_category hidden-md-and-down"><a :href="`/categoryFilm?pid=${item.nav.id}`">更多 ></a></li>
|
<li class="nav_category hidden-md-and-down"><a :href="`/filmClassify?Pid=${item.nav.id}`">更多 ></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|||||||
@@ -188,6 +188,7 @@ func FilmTagSearch(c *gin.Context) {
|
|||||||
current, _ := strconv.Atoi(currentStr)
|
current, _ := strconv.Atoi(currentStr)
|
||||||
page := model.Page{PageSize: 49, Current: current}
|
page := model.Page{PageSize: 49, Current: current}
|
||||||
logic.IL.GetFilmsByTags(params, &page)
|
logic.IL.GetFilmsByTags(params, &page)
|
||||||
|
// 获取当前分类Title
|
||||||
// 返回对应信息
|
// 返回对应信息
|
||||||
c.JSON(http.StatusOK, gin.H{
|
c.JSON(http.StatusOK, gin.H{
|
||||||
"status": StatusOk,
|
"status": StatusOk,
|
||||||
@@ -208,3 +209,29 @@ func FilmTagSearch(c *gin.Context) {
|
|||||||
"page": page,
|
"page": page,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// FilmClassify 影片分类首页数据展示
|
||||||
|
func FilmClassify(c *gin.Context) {
|
||||||
|
pidStr := c.DefaultQuery("Pid", "")
|
||||||
|
if pidStr == "" {
|
||||||
|
c.JSON(http.StatusOK, gin.H{
|
||||||
|
"status": StatusFailed,
|
||||||
|
"message": "缺少分类信息",
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 1. 顶部Title数据
|
||||||
|
pid, _ := strconv.ParseInt(pidStr, 10, 64)
|
||||||
|
title := logic.IL.GetPidCategory(pid)
|
||||||
|
// 2. 设置分页信息
|
||||||
|
page := model.Page{PageSize: 21, Current: 1}
|
||||||
|
// 3. 获取当前分类下的 最新上映, 排行榜, 最近更新 影片信息
|
||||||
|
c.JSON(http.StatusOK, gin.H{
|
||||||
|
"status": StatusOk,
|
||||||
|
"data": gin.H{
|
||||||
|
"title": title,
|
||||||
|
"content": logic.IL.GetFilmClassify(pid, &page),
|
||||||
|
},
|
||||||
|
"page": page,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -204,9 +204,19 @@ func (i *IndexLogic) GetFilmsByTags(st model.SearchTagsVO, page *model.Page) []m
|
|||||||
// 获取满足条件的影片id 列表
|
// 获取满足条件的影片id 列表
|
||||||
sl := model.GetSearchInfosByTags(st, page)
|
sl := model.GetSearchInfosByTags(st, page)
|
||||||
// 通过key 获取对应影片的基本信息
|
// 通过key 获取对应影片的基本信息
|
||||||
var list []model.MovieBasicInfo
|
return model.GetBasicInfoBySearchInfos(sl...)
|
||||||
for _, s := range sl {
|
}
|
||||||
list = append(list, model.GetBasicInfoByKey(fmt.Sprintf(config.MovieBasicInfoKey, s.Cid, s.Mid)))
|
|
||||||
}
|
// GetFilmClassify 通过Pid返回当前所属分类下的首页展示数据
|
||||||
return list
|
func (i *IndexLogic) GetFilmClassify(pid int64, page *model.Page) map[string]interface{} {
|
||||||
|
res := make(map[string]interface{})
|
||||||
|
// 最新上映 (上映时间)
|
||||||
|
res["news"] = model.GetMovieListBySort(0, pid, page)
|
||||||
|
// 排行榜 (暂定为热度排行)
|
||||||
|
res["top"] = model.GetMovieListBySort(1, pid, page)
|
||||||
|
// 最近更新 (更新时间)
|
||||||
|
res["recent"] = model.GetMovieListBySort(2, pid, page)
|
||||||
|
|
||||||
|
return res
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -232,6 +232,18 @@ func GetDetailByKey(key string) MovieDetail {
|
|||||||
return detail
|
return detail
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// GetBasicInfoBySearchInfos 通过searchInfo 获取影片的基本信息
|
||||||
|
func GetBasicInfoBySearchInfos(infos ...SearchInfo) []MovieBasicInfo {
|
||||||
|
var list []MovieBasicInfo
|
||||||
|
for _, s := range infos {
|
||||||
|
data := []byte(db.Rdb.Get(db.Cxt, fmt.Sprintf(config.MovieBasicInfoKey, s.Cid, s.Mid)).Val())
|
||||||
|
basic := MovieBasicInfo{}
|
||||||
|
_ = json.Unmarshal(data, &basic)
|
||||||
|
list = append(list, basic)
|
||||||
|
}
|
||||||
|
return list
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
对附属播放源入库时的name|dbID进行处理,保证唯一性
|
对附属播放源入库时的name|dbID进行处理,保证唯一性
|
||||||
1. 去除name中的所有空格
|
1. 去除name中的所有空格
|
||||||
|
|||||||
@@ -310,6 +310,14 @@ func TunCateSearchTable() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// GetPage 获取分页相关数据
|
||||||
|
func GetPage(db *gorm.DB, page *Page) {
|
||||||
|
var count int64
|
||||||
|
db.Count(&count)
|
||||||
|
page.Total = int(count)
|
||||||
|
page.PageCount = int((page.Total + page.PageSize - 1) / page.PageSize)
|
||||||
|
}
|
||||||
|
|
||||||
// ================================= API 数据接口信息处理 =================================
|
// ================================= API 数据接口信息处理 =================================
|
||||||
|
|
||||||
// GetMovieListByPid 通过Pid 分类ID 获取对应影片的数据信息
|
// GetMovieListByPid 通过Pid 分类ID 获取对应影片的数据信息
|
||||||
@@ -563,11 +571,28 @@ func GetSearchInfosByTags(st SearchTagsVO, page *Page) []SearchInfo {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
func GetPage(db *gorm.DB, page *Page) {
|
// GetMovieListBySort 通过排序类型返回对应的影片基本信息
|
||||||
var count int64
|
func GetMovieListBySort(t int, pid int64, page *Page) []MovieBasicInfo {
|
||||||
db.Count(&count)
|
var sl []SearchInfo
|
||||||
page.Total = int(count)
|
qw := db.Mdb.Model(&SearchInfo{}).Where("pid", pid).Limit(page.PageSize).Offset((page.Current) - 10*page.PageSize)
|
||||||
page.PageCount = int((page.Total + page.PageSize - 1) / page.PageSize)
|
// 针对不同排序类型返回对应的分页数据
|
||||||
|
switch t {
|
||||||
|
case 0:
|
||||||
|
// 最新上映 (上映时间)
|
||||||
|
qw.Order("year DESC, release_date DESC")
|
||||||
|
case 1:
|
||||||
|
// 排行榜 (暂定为热度排行)
|
||||||
|
qw.Order("year DESC, hits DESC")
|
||||||
|
case 2:
|
||||||
|
// 最近更新 (更新时间)
|
||||||
|
qw.Order("year DESC, update_stamp DESC")
|
||||||
|
}
|
||||||
|
if err := qw.Find(&sl).Error; err != nil {
|
||||||
|
log.Println(err)
|
||||||
|
return nil
|
||||||
|
}
|
||||||
|
return GetBasicInfoBySearchInfos(sl...)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ================================= 接口数据缓存 =================================
|
// ================================= 接口数据缓存 =================================
|
||||||
|
|||||||
@@ -19,7 +19,8 @@ func SetupRouter() *gin.Engine {
|
|||||||
r.GET(`/filmPlayInfo`, controller.FilmPlayInfo)
|
r.GET(`/filmPlayInfo`, controller.FilmPlayInfo)
|
||||||
r.GET(`/searchFilm`, controller.SearchFilm)
|
r.GET(`/searchFilm`, controller.SearchFilm)
|
||||||
r.GET(`/filmCategory`, controller.FilmCategory)
|
r.GET(`/filmCategory`, controller.FilmCategory)
|
||||||
r.GET(`/filmClassified`, controller.FilmTagSearch)
|
r.GET(`/filmClassify`, controller.FilmClassify)
|
||||||
|
r.GET(`/filmClassifySearch`, controller.FilmTagSearch)
|
||||||
|
|
||||||
// 触发spider
|
// 触发spider
|
||||||
spiderRoute := r.Group(`/spider`)
|
spiderRoute := r.Group(`/spider`)
|
||||||
|
|||||||
Reference in New Issue
Block a user