first commit

2024-11-29 20:54:53 +08:00
commit 55df3d398c
42 changed files with 1857 additions and 0 deletions
--- a/js/page/search.js
+++ b/js/page/search.js
@@ -0,0 +1,97 @@
+class Search {
+
+    page = 1;
+    totalPage = 0;
+    keyword = "";
+    totalArr = [];
+
+    constructor() {
+        util.header(
+            `<input class="flex1" type="text" placeholder="输入关键字">`,
+            `<div class="button">搜索</div>`,
+            `<i class="iconfont icon-fanhui"></i>`
+        )
+        this.getSearchHotData()
+        this.event()
+    }
+
+
+    async getSearchHotData() {
+        let { hotKeyword, recommend } = await searchServe.searchHot()
+
+        $(".search_list ul").innerHTML = hotKeyword.maps(v => {
+            return `
+                <li>
+                    <a>${v}</a>
+                </li>
+            `
+        });
+
+        item(".search_recommend", recommend, 2)
+
+        $(".search_recommend ul li").forEach(v => {
+            v.onclick = () => {
+                // 把你点击的文字放到搜索框里面
+                $(".header input").value = v.innerText
+                $(".header .button").onclick()
+            }
+        })
+    }
+
+    event() {
+
+        let input = $(".header input")
+
+        $(".header .button").onclick = async () => {
+            if (input.value.length != 0) {
+                this.keyword = input.value
+                this.totalArr = []
+                await this.getSearchKeyData()
+                if (this.totalArr.length != 0) {
+                    util.hidden(".no-search")
+                    item(".have-search ul", this.totalArr)
+                    util.show(".have-search")
+                    this.onscroll()
+                }
+
+            }
+        }
+
+        input.oninput = () => {
+            if (input.value.length == 0) {
+                util.show(".no-search")
+                util.hidden(".have-search")
+            }
+        }
+
+    }
+
+    // 用来发送搜索请求的
+    async getSearchKeyData() {
+        let { totalPage, list } = await searchServe.searchKey({
+            keyword: this.keyword,
+            page: this.page
+        })
+        this.totalPage = totalPage
+        list.forEach(v => this.totalArr.push(v));
+    }
+
+    // 滚动到底部实现自动加载下一页数据
+    onscroll() {
+        window.onscroll = async () => {
+            var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+            var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
+
+            if (clientHeight + Math.ceil(scrollTop) >= scrollHeight) {
+                this.page += 1
+                if (this.page <= this.totalPage) {
+                    await this.getSearchKeyData()
+                    item(".have-search ul", this.totalArr)
+                }
+            }
+        }
+    }
+}
+
+new Search