feat: 小说高级检索功能

src/api/book.js

@@ -1,5 +1,9 @@
 import request from '../utils/request'
 
+export function listCategorys(params) {
+    return request.get('/book/categoryList', { params });
+}
+
 export function searchBooks(params) {
     return request.get('/book/search', { params });
 }

src/utils/index.js

@@ -25,3 +25,51 @@ export const getLocal = (name) => {
 export const setLocal = (name, value) => {
   localStorage.setItem(name, value)
 }
+
+export const addDay = (days) => {
+  //创建date
+  let nowDate = new Date();
+  //添加天数
+  nowDate.setDate(nowDate.getDate() + days);
+  //返回
+  return nowDate
+}
+
+export const addMonth= (months) => {
+  //创建date
+  let nowDate = new Date();
+  //添加周数
+  nowDate.setMonth(nowDate.getMonth() + months);
+  //返回
+  return nowDate
+}
+
+export const addYear= (years) => {
+  //创建date
+  let nowDate = new Date();
+  //添加年数
+  nowDate.setMonth(nowDate.getYear() + years);
+  //返回
+  return nowDate
+}
+
+export const dateFormat = (fmt, date) => {
+  let ret;
+  const opt = {
+      "Y+": date.getFullYear().toString(),        // 年
+      "m+": (date.getMonth() + 1).toString(),     // 月
+      "d+": date.getDate().toString(),            // 日
+      "H+": date.getHours().toString(),           // 时
+      "M+": date.getMinutes().toString(),         // 分
+      "S+": date.getSeconds().toString()          // 秒
+      // 有其他格式化字符需求可以继续添加，必须转化成字符串
+  };
+  for (let k in opt) {
+      ret = new RegExp("(" + k + ")").exec(fmt);
+      if (ret) {
+          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
+      };
+  };
+  return fmt;
+}
+

src/views/BookClass.vue

@@ -5,125 +5,174 @@
   </div>
 
   <div class="main box_center cf">
-    <!--<div class="channelWrap classTable cf">
+    <div class="channelWrap classTable cf">
       <div class="so_tag">
         <ul class="list">
           <li class="so_pd" id="workDirection">
             <span class="tit">作品频道：</span>
             <a
               filter-value="0"
-              href="javascript:listBookCategory();search(1,20)"
-              class="on"
+              href="javascript:void(0)"
+              @click="loadCategoryList(0)"
+              :class="`${workDirectionOn == 0 ? 'on' : ''}`"
               >男频</a
             >
             <a
               filter-value="1"
-              href="javascript:listBookCategory();search(1,20)"
+              href="javascript:void(0)"
+              @click="loadCategoryList(1)"
+              :class="`${workDirectionOn == 1 ? 'on' : ''}`"
               >女频</a
             >
           </li>
           <li id="idGirl" class="so_class">
             <span class="tit">作品分类：</span>
-            <span class="so_girl" id="girlCategoryList" style="display: none">
-              <a href="javascript:search(1,20)" class="on">不限</a>
-              <a filter-value="7" href="javascript:search(1,20)"
-                >女生频道</a
-              ></span
-            >
+
             <span class="so_boy" id="boyCategoryList">
-              <a href="javascript:search(1,20)" class="on">不限</a>
-              <a filter-value="1" href="javascript:search(1,20)">玄幻奇幻</a>
-              <a filter-value="2" href="javascript:search(1,20)">武侠仙侠</a>
-              <a filter-value="3" href="javascript:search(1,20)">都市言情</a>
-              <a filter-value="4" href="javascript:search(1,20)">历史军事</a>
-              <a filter-value="5" href="javascript:search(1,20)">科幻灵异</a>
-              <a filter-value="6" href="javascript:search(1,20)"
-                >网游竞技</a
-              ></span
-            >
+              <a
+                href="javascript:void(0)"
+                :class="`${categoryOn == 0 ? 'on' : ''}`"
+                @click="changeCategory(0)"
+                >不限</a
+              >
+              <a
+                v-for="(item, index) in bookCategorys"
+                :key="index"
+                href="javascript:void(0)"
+                :class="`${categoryOn == item.id ? 'on' : ''}`"
+                @click="changeCategory(item.id)"
+                >{{ item.name }}</a
+              >
+            </span>
           </li>
-          <li class="so_free">
-                    <span class="tit">是否免费：</span>
-                    <a href="?b=0&s=0&wb=0&wd=0&up=0&fr=0&so=0&ms=2" class="on">不限</a>
-                    <a href="?b=0&s=0&wb=0&wd=0&up=0&fr=1&so=0&ms=2" class="">免费作品</a>
-                    <a href="?b=0&s=0&wb=0&wd=0&up=0&fr=2&so=0&ms=2" class="">收费作品</a>
-                </li>
           <li class="so_progress">
             <span class="tit">是否完结：</span>
-            <a href="javascript:search(1,20)" class="on">不限</a>
-            <a filter-value="0" href="javascript:search(1,20)" class=""
+            <a
+              href="javascript:void(0)"
+              :class="`${bookStatusOn == null ? 'on' : ''}`"
+              @click="changeBookStatus(null)"
+              >不限</a
+            >
+            <a
+              filter-value="0"
+              href="javascript:void(0)"
+              :class="`${bookStatusOn == 0 ? 'on' : ''}`"
+              @click="changeBookStatus(0)"
               >连载中</a
             >
-            <a filter-value="1" href="javascript:search(1,20)" class=""
+            <a
+              filter-value="1"
+              href="javascript:void(0)"
+              :class="`${bookStatusOn == 1 ? 'on' : ''}`"
+              @click="changeBookStatus(1)"
               >已完结</a
             >
           </li>
           <li class="so_words">
             <span class="tit">作品字数：</span>
-            <a href="javascript:search(1,20)" class="on">不限</a>
-            <a filter-value-max="300000" href="javascript:search(1,20)" class=""
+            <a
+              href="javascript:void(0)"
+              :class="`${wordCountOn == null ? 'on' : ''}`"
+              @click="changeWordCount(null, null)"
+              >不限</a
+            >
+            <a
+              filter-value-max="300000"
+              href="javascript:void(0)"
+              :class="`${wordCountOn == 0 ? 'on' : ''}`"
+              @click="changeWordCount(0, 300000)"
               >30万字以下</a
             >
             <a
               filter-value-min="300000"
               filter-value-max="500000"
-              href="javascript:search(1,20)"
-              class=""
+              href="javascript:void(0)"
+              :class="`${wordCountOn == 300000 ? 'on' : ''}`"
+              @click="changeWordCount(300000, 500000)"
               >30-50万字</a
             >
             <a
               filter-value-min="500000"
               filter-value-max="1000000"
-              href="javascript:search(1,20)"
-              class=""
+              href="javascript:void(0)"
+              :class="`${wordCountOn == 500000 ? 'on' : ''}`"
+              @click="changeWordCount(500000, 1000000)"
               >50-100万字</a
             >
             <a
               filter-value-min="1000000"
-              href="javascript:search(1,20)"
-              class=""
+              href="javascript:void(0)"
+              :class="`${wordCountOn == 1000000 ? 'on' : ''}`"
+              @click="changeWordCount(1000000, null)"
               >100万字以上</a
             >
           </li>
           <li class="so_update">
             <span class="tit">更新时间：</span>
-            <a href="javascript:search(1,20)" class="on">不限</a>
-            <a filter-value="3" href="javascript:search(1,20)" class=""
+            <a
+              href="javascript:void(0)"
+              :class="`${updateTimeOn == null ? 'on' : ''}`"
+              @click="changeUpdateTime(null)"
+              >不限</a
+            >
+            <a
+              filter-value="3"
+              href="javascript:void(0)"
+              :class="`${updateTimeOn == 3 ? 'on' : ''}`"
+              @click="changeUpdateTime(3)"
               >三日内</a
             >
-            <a filter-value="7" href="javascript:search(1,20)" class=""
+            <a
+              filter-value="7"
+              href="javascript:void(0)"
+              :class="`${updateTimeOn == 7 ? 'on' : ''}`"
+              @click="changeUpdateTime(7)"
               >七日内</a
             >
-            <a filter-value="15" href="javascript:search(1,20)" class=""
+            <a
+              filter-value="15"
+              href="javascript:void(0)"
+              :class="`${updateTimeOn == 15 ? 'on' : ''}`"
+              @click="changeUpdateTime(15)"
               >半月内</a
             >
-            <a filter-value="30" href="javascript:search(1,20)" class=""
+            <a
+              filter-value="30"
+              href="javascript:void(0)"
+              :class="`${updateTimeOn == 30 ? 'on' : ''}`"
+              @click="changeUpdateTime(30)"
               >一月内</a
             >
           </li>
           <li class="so_sort">
             <span class="tit">排序方式：</span>
-            <a href="javascript:search(1,20)" class="on">不限</a>
+            <a href="javascript:void(0)"
+              :class="`${sortOn == null ? 'on' : ''}`"
+              @click="changeSort(null)">不限</a>
             <a
               filter-value="last_index_update_time"
-              href="javascript:search(1,20)"
-              class=""
+              href="javascript:void(0)"
+              :class="`${sortOn == 'last_chapter_update_time desc' ? 'on' : ''}`"
+              @click="changeSort('last_chapter_update_time desc')"
               >更新时间</a
             >
-            <a filter-value="word_count" href="javascript:search(1,20)" class=""
+            <a filter-value="word_count" href="javascript:void(0)"
+              :class="`${sortOn == 'word_count desc' ? 'on' : ''}`"
+              @click="changeSort('word_count desc')"
               >总字数</a
             >
             <a
               filter-value="visit_count"
-              href="javascript:search(1,20)"
-              class=""
+              href="javascript:void(0)"
+              :class="`${sortOn == 'visitcount desc' ? 'on' : ''}`"
+              @click="changeSort('visit_count desc')"
               >点击量</a
             >
           </li>
         </ul>
       </div>
     </div>
--->
+
     <div class="channelWrap channelClassContent cf">
       <div class="updateTable rankTable">
         <table cellpadding="0" cellspacing="0">
@@ -184,7 +233,8 @@
 import "@/assets/styles/book.css";
 import { reactive, toRefs, onMounted, ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
-import { searchBooks } from "@/api/book";
+import { searchBooks, listCategorys } from "@/api/book";
+import { addDay, dateFormat } from "@/utils";
 import Top from "@/components/common/Top";
 import Navbar from "@/components/common/Navbar";
 import Footer from "@/components/common/Footer";
@@ -200,18 +250,25 @@ export default {
     const router = useRouter();
 
     const state = reactive({
+      bookCategorys: [],
       books: [],
       searchCondition: {},
       backgroud: true,
       total: 0,
       pageSize: 10,
       imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
+      workDirectionOn: 0,
+      categoryOn: 0,
+      bookStatusOn: null,
+      wordCountOn: null,
+      updateTimeOn: null,
+      sortOn:null
     });
     onMounted(() => {
       const key = route.query.key;
       state.searchCondition.keyword = key;
       state.searchCondition.pageSize = 10;
-      search();
+      loadCategoryList(0);
     });
 
     const search = async () => {
@@ -235,12 +292,71 @@ export default {
       search();
     };
 
+    const loadCategoryList = async (workDirection) => {
+      const { data } = await listCategorys({ workDirection: workDirection });
+      state.bookCategorys = data;
+      state.workDirectionOn = workDirection;
+      state.searchCondition.workDirection = workDirection;
+      state.categoryOn = 0;
+      state.searchCondition.categoryId = null;
+      search();
+    };
+
+    const changeCategory = async (categoryId) => {
+      state.categoryOn = categoryId;
+      if (categoryId > 0) {
+        state.searchCondition.categoryId = categoryId;
+      } else {
+        state.searchCondition.categoryId = null;
+      }
+      search();
+    };
+
+    const changeBookStatus = async (bookStatus) => {
+      state.bookStatusOn = bookStatus;
+      state.searchCondition.bookStatus = bookStatus;
+      search();
+    };
+
+    const changeWordCount = async (wordCountMin, wordCountMax) => {
+      state.wordCountOn = wordCountMin;
+      state.searchCondition.wordCountMin = wordCountMin;
+      state.searchCondition.wordCountMax = wordCountMax;
+
+      search();
+    };
+
+    const changeUpdateTime = async (days) => {
+      state.updateTimeOn = days;
+      if (days) {
+        state.searchCondition.updateTimeMin = dateFormat(
+          "YYYY-mm-dd",
+          addDay(-days)
+        );
+      } else {
+        state.searchCondition.updateTimeMin = null;
+      }
+      search();
+    };
+
+    const changeSort = async (sort) => {
+      state.sortOn = sort;
+      state.searchCondition.sort = sort;
+      search();
+    };
+
     return {
       ...toRefs(state),
       bookDetail,
       searchByK,
       search,
       handleCurrentChange,
+      loadCategoryList,
+      changeCategory,
+      changeBookStatus,
+      changeWordCount,
+      changeUpdateTime,
+      changeSort
     };
   },
   computed: {