mirror of
https://github.com/ProudMuBai/GoFilm.git
synced 2026-02-04 06:54:41 +08:00
pc tag search finish
This commit is contained in:
mubai
@@ -10,7 +10,7 @@
|
||||
<meta name="referrer" content="never">
|
||||
<meta charset="UTF-8"/>
|
||||
<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>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main" >
|
||||
<router-view></router-view>
|
||||
<Util/>
|
||||
</div>
|
||||
@@ -26,7 +26,7 @@ html, body, #app {
|
||||
min-height: 100vh;
|
||||
/*background: #222;*/
|
||||
color: rgb(221, 221, 221);
|
||||
background: rgb(34, 34, 34);
|
||||
//background: rgb(34, 34, 34);
|
||||
}
|
||||
|
||||
|
||||
@@ -37,7 +37,6 @@ html, body, #app {
|
||||
|
||||
/*全局a标签默认样式去除*/
|
||||
a {
|
||||
color: #2d2e2f;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
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%;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.c_content .item {
|
||||
flex-basis: calc(33% - 6px);
|
||||
max-width: 33%;
|
||||
margin: 0 3px 20px 3px;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -107,11 +107,11 @@ const handleImg =(e:Event)=>{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
justify-content: start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.c_content .item {
|
||||
margin: 0 8px 20px 8px;
|
||||
margin-bottom: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@@ -12,10 +12,10 @@
|
||||
<!--右侧顶级分类导航 -->
|
||||
<div class="nav_right">
|
||||
<el-link :underline="false" href="/">首页</el-link>
|
||||
<el-link :underline="false" :href="`/categoryFilm?Pid=${nav.film.id}`">电影</el-link>
|
||||
<el-link :underline="false" :href="`/categoryFilm?Pid=${nav.tv.id}`">剧集</el-link>
|
||||
<el-link :underline="false" :href="`/categoryFilm?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.film.id}`">电影</el-link>
|
||||
<el-link :underline="false" :href="`/filmClassify?Pid=${nav.tv.id}`">剧集</el-link>
|
||||
<el-link :underline="false" :href="`/filmClassify?Pid=${nav.cartoon.id}`">动漫</el-link>
|
||||
<el-link :underline="false" :href="`/filmClassify?Pid=${nav.variety.id}`">综艺</el-link>
|
||||
<!-- <span style="color:#777; font-weight: bold">|</span>-->
|
||||
<el-link href="/search" class="hidden-md-and-up" :underline="false">
|
||||
<el-icon style="font-size: 18px">
|
||||
|
||||
@@ -36,7 +36,6 @@ const control = reactive({
|
||||
darkTheme: true,
|
||||
})
|
||||
|
||||
//
|
||||
onMounted(()=>{
|
||||
|
||||
changeStyle(localStorage.getItem("theme")+'')
|
||||
@@ -65,7 +64,7 @@ const changeStyle = (type:string)=>{
|
||||
case 'dark':
|
||||
control.darkTheme = true
|
||||
localStorage.setItem("theme", 'dark')
|
||||
document.getElementsByClassName('main')[0].style.background = `rgb(34,34,34)`
|
||||
document.getElementsByClassName('main')[0].style.background = `#16161a`
|
||||
break
|
||||
case 'more':
|
||||
control.show = !control.show
|
||||
|
||||
@@ -13,6 +13,8 @@ import Play from "../views/index/Play.vue";
|
||||
import SearchFilm from "../views/index/SearchFilm.vue";
|
||||
import CategoryFilm from "../views/index/CategoryFilm.vue";
|
||||
import NotFound from '../views/error/Error404.vue'
|
||||
import FilmClassifySearch from "../views/index/FilmClassifySearch.vue";
|
||||
import FilmClassify from "../views/index/FilmClassify.vue";
|
||||
|
||||
|
||||
// 2. 定义一个路由
|
||||
@@ -27,6 +29,8 @@ const routes = [
|
||||
{path: 'play', component: Play},
|
||||
{path: 'search', component: SearchFilm},
|
||||
{path: 'CategoryFilm', component: CategoryFilm},
|
||||
{path: 'filmClassify', component: FilmClassify},
|
||||
{path: 'filmClassifySearch', component: FilmClassifySearch},
|
||||
]
|
||||
},
|
||||
{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">
|
||||
<span class="header_t">{{ d.title.name }}</span>
|
||||
</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_item" v-for="k in d.search.sortList ">
|
||||
<span class="t_title">{{d.search.titles[k]}}</span>
|
||||
<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 class="t_title">{{d.search.titles[k]}}</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>
|
||||
|
||||
</div>
|
||||
|
||||
<!--影片列表展示-->
|
||||
@@ -104,8 +97,9 @@ const changeCurrent = (currentVal: number) => {
|
||||
|
||||
|
||||
const getFilmData = () => {
|
||||
let url = `filmClassifyHome`
|
||||
let query = router.currentRoute.value.query
|
||||
ApiGet('/filmClassified', {...query}).then((resp: any) => {
|
||||
ApiGet(url, {...query}).then((resp: any) => {
|
||||
if (resp.status === 'ok') {
|
||||
d.title = resp.data.title
|
||||
d.list = resp.data.list
|
||||
@@ -158,7 +152,6 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
margin: 14px 0;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
|
||||
.t_title {
|
||||
@@ -172,6 +165,13 @@ onMounted(() => {
|
||||
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);
|
||||
|
||||
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">
|
||||
<ul class="nav_ul">
|
||||
<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>
|
||||
<li class="nav_category hidden-md-and-down"><a :href="`/categoryFilm?pid=${item.nav.id}`">更多 ></a></li>
|
||||
:href="`/filmClassifySearch?Pid=${c.pid}&Category=${c.id}`">{{ c.name }}</a></li>
|
||||
<li class="nav_category hidden-md-and-down"><a :href="`/filmClassify?Pid=${item.nav.id}`">更多 ></a></li>
|
||||
</ul>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@@ -188,6 +188,7 @@ func FilmTagSearch(c *gin.Context) {
|
||||
current, _ := strconv.Atoi(currentStr)
|
||||
page := model.Page{PageSize: 49, Current: current}
|
||||
logic.IL.GetFilmsByTags(params, &page)
|
||||
// 获取当前分类Title
|
||||
// 返回对应信息
|
||||
c.JSON(http.StatusOK, gin.H{
|
||||
"status": StatusOk,
|
||||
@@ -208,3 +209,29 @@ func FilmTagSearch(c *gin.Context) {
|
||||
"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 列表
|
||||
sl := model.GetSearchInfosByTags(st, page)
|
||||
// 通过key 获取对应影片的基本信息
|
||||
var list []model.MovieBasicInfo
|
||||
for _, s := range sl {
|
||||
list = append(list, model.GetBasicInfoByKey(fmt.Sprintf(config.MovieBasicInfoKey, s.Cid, s.Mid)))
|
||||
}
|
||||
return list
|
||||
return model.GetBasicInfoBySearchInfos(sl...)
|
||||
}
|
||||
|
||||
// GetFilmClassify 通过Pid返回当前所属分类下的首页展示数据
|
||||
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
|
||||
}
|
||||
|
||||
// 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进行处理,保证唯一性
|
||||
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 数据接口信息处理 =================================
|
||||
|
||||
// GetMovieListByPid 通过Pid 分类ID 获取对应影片的数据信息
|
||||
@@ -563,11 +571,28 @@ func GetSearchInfosByTags(st SearchTagsVO, page *Page) []SearchInfo {
|
||||
|
||||
}
|
||||
|
||||
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)
|
||||
// GetMovieListBySort 通过排序类型返回对应的影片基本信息
|
||||
func GetMovieListBySort(t int, pid int64, page *Page) []MovieBasicInfo {
|
||||
var sl []SearchInfo
|
||||
qw := db.Mdb.Model(&SearchInfo{}).Where("pid", pid).Limit(page.PageSize).Offset((page.Current) - 10*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(`/searchFilm`, controller.SearchFilm)
|
||||
r.GET(`/filmCategory`, controller.FilmCategory)
|
||||
r.GET(`/filmClassified`, controller.FilmTagSearch)
|
||||
r.GET(`/filmClassify`, controller.FilmClassify)
|
||||
r.GET(`/filmClassifySearch`, controller.FilmTagSearch)
|
||||
|
||||
// 触发spider
|
||||
spiderRoute := r.Group(`/spider`)
|
||||
|
||||
Reference in New Issue
Block a user