pc tag search finish

client/src/views/index/CategoryFilm.vue

@@ -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}&current=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);

client/src/views/index/FilmClassify.vue

@@ -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>

client/src/views/index/FilmClassifySearch.vue

@@ -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)+`&current=${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>

client/src/views/index/Home.vue

@@ -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>