✨ 搜索新增“最新”“最热”排序

src/components/viewPost/vp-overlay-search.vue

@@ -1,9 +1,24 @@
+<!-- 搜索悬浮层 -->
 <template>
   <TOverlay v-model="visible">
     <div class="tops-box">
       <div class="tops-top">查找：{{ search }}</div>
       <div class="tops-act">
-        <span>分区：{{ label }}</span>
+        <div class="tops-game">
+          <span>分区：{{ label }}</span>
+        </div>
+        <div class="tops-sort">
+          <v-select
+            density="compact"
+            v-model="sortType"
+            :items="sortOrderList"
+            item-title="text"
+            item-value="value"
+            variant="outlined"
+            label="排序"
+            :disabled="load"
+          />
+        </div>
       </div>
       <div class="tops-divider" />
       <div class="tops-list" ref="listRef">
@@ -28,6 +43,12 @@ import { storeToRefs } from "pinia";
 import { computed, onMounted, ref, shallowRef, useTemplateRef, watch } from "vue";
 
 type ToPostSearchProps = { gid: string; keyword?: string };
+type SortSelect = { text: string; value: number };
+
+const sortOrderList: Array<SortSelect> = [
+  { text: "最新", value: 2 },
+  { text: "最热", value: 1 },
+];
 
 const { gameList } = storeToRefs(useBBSStore());
 
@@ -42,6 +63,7 @@ const lastId = ref<string>("");
 const gameId = ref<string>("2");
 const isLast = ref<boolean>(false);
 const load = ref<boolean>(false);
+const sortType = ref<number>(1);
 const results = shallowRef<Array<TGApp.BBS.Post.FullData>>([]);
 const label = computed<string>(() => {
   const gameFind = gameList.value.find((v) => v.id.toString() === gameId.value);
@@ -62,6 +84,15 @@ watch(
     await searchPosts();
   },
 );
+watch(
+  () => sortType.value,
+  async () => {
+    results.value = [];
+    lastId.value = "";
+    isLast.value = false;
+    await searchPosts();
+  },
+);
 watch(
   () => visible.value,
   async () => {
@@ -119,7 +150,7 @@ async function searchPosts(): Promise<void> {
     load.value = false;
     return;
   }
-  const res = await postReq.search(gameId.value, search.value, lastId.value);
+  const res = await postReq.search(gameId.value, search.value, lastId.value, sortType.value);
   if (lastId.value === "") results.value = res.posts;
   else results.value = results.value.concat(res.posts);
   lastId.value = res.last_id;
@@ -166,6 +197,11 @@ async function searchPosts(): Promise<void> {
   justify-content: space-between;
 }
 
+.tops-sort {
+  width: 100px;
+  height: 40px;
+}
+
 .tops-divider {
   position: relative;
   width: 100%;

src/request/postReq.ts

@@ -1,7 +1,6 @@
 /**
- * @file request/postReq.ts
+ * 帖子相关的请求
- * @description 帖子相关的请求
+ * @since Beta v0.8.7
- * @since Beta v0.7.7
  */
 import { getRequestHeader } from "@utils/getRequestHeader.js";
 import TGHttp from "@utils/TGHttp.js";
@@ -195,23 +194,25 @@ async function getUserPost(
 }
 
 /**
- * @description 搜索帖子
+ * 搜索帖子
- * @since Beta v0.7.1
+ * @since Beta v0.8.7
  * @param {string} gid 游戏分区 ID
  * @param {string} keyword 关键词
  * @param {string} lastId 最后一条帖子 ID
+ * @param {number} orderType 排序方式,1-最热，2-最新
  * @return {Promise<TGApp.BBS.Post.SearchRes>} 返回帖子列表
  */
 async function searchPosts(
   gid: string = "2",
   keyword: string,
   lastId: string,
+  orderType: number,
 ): Promise<TGApp.BBS.Post.SearchRes> {
   return (
     await TGHttp<TGApp.BBS.Post.SearchResp>(`${bapBu}searchPosts`, {
       method: "GET",
       headers: { "Content-Type": "application/json" },
-      query: { gids: gid, keyword, last_id: lastId, size: 20 },
+      query: { gids: gid, keyword, last_id: lastId, size: 20, order_type: orderType },
     })
   ).data;
 }