hahah

2024-12-03 11:18:07 +08:00
parent 9e7485dfa2
commit 4991b3686c
16 changed files with 589 additions and 402 deletions
--- a/css/page/domestic.css
+++ b/css/page/domestic.css
@@ -0,0 +1,24 @@
+@import "../tool/color.css";
+@import "../tool/size.css";
+@import "../tool/utils.css";
+
+.type_list {
+    li {
+        text-align: center;
+        margin-bottom: var(--f10);
+        width: 25%;
+        a {
+            .text {
+                color: var(--textColor);
+                font-size: var(--f18);
+                margin-bottom: .14rem;
+            }
+            .nums {
+                font-size: var(--f14);
+                color: var(--tipsTextColor);
+            }
+        }
+        
+       
+    }
+}
--- a/css/page/info.css
+++ b/css/page/info.css
@@ -4,11 +4,7 @@


 .header {
-    color: var(--textColor);
-    font-size: var(--f16);
-    .title{
-        margin: 0 .16rem;
-    }
+ 
    .ilist {
        i {
            font-size: var(--f22) !important;
--- a/css/page/tagListInfo.css
+++ b/css/page/tagListInfo.css
--- a/css/tool/clear.css
+++ b/css/tool/clear.css
@@ -7,13 +7,23 @@
  font-size: .32rem;
 }

-p,body,h1,h2,h3,h4,h5,h6,ul,li{
+p,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+li {
  margin: 0;
  padding: 0;
 }

 html {
-    font-family: sans-serif; /* 1 */
+  font-family: sans-serif;
+  /* 1 */
  line-height: 1;
 }

@@ -29,6 +39,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
  height: 0;
 }

+a {
+  color: #000;
+}
+
 li {
  list-style: none;
 }
@@ -62,7 +76,8 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{

 figcaption,
 figure,
-  main { /* 1 */
+main {
+  /* 1 */
  display: block;
 }

@@ -80,9 +95,12 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   */

 hr {
-    box-sizing: content-box; /* 1 */
-    height: 0; /* 1 */
-    overflow: visible; /* 2 */
+  box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
 }

 /**
@@ -91,8 +109,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   */

 pre {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
@@ -108,8 +128,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{

 a {
  text-decoration: none;
-    background-color: transparent; /* 1 */
-    -webkit-text-decoration-skip: objects; /* 2 */
+  background-color: transparent;
+  /* 1 */
+  -webkit-text-decoration-skip: objects;
+  /* 2 */
  user-select: none;
  -webkit-user-select: none;
 }
@@ -130,9 +152,12 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   */

 abbr[title] {
-    border-bottom: none; /* 1 */
-    text-decoration: underline; /* 2 */
-    text-decoration: underline dotted; /* 2 */
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
 }

 /**
@@ -161,8 +186,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
 code,
 kbd,
 samp {
-    font-family: monospace, monospace; /* 1 */
-    font-size: 1em; /* 2 */
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
 }

 /**
@@ -263,10 +290,14 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
 textarea {
  border: none;
  outline: none;
-    font-family: sans-serif; /* 1 */
-    font-size: 100%; /* 1 */
-    line-height: 1.15; /* 1 */
-    margin: 0; /* 2 */
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
 }

 /**
@@ -275,7 +306,8 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   */

 button,
-  input { /* 1 */
+input {
+  /* 1 */
  overflow: visible;
 }

@@ -285,7 +317,8 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   */

 button,
-  select { /* 1 */
+select {
+  /* 1 */
  text-transform: none;
 }

@@ -296,10 +329,12 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   */

 button,
-  html [type="button"], /* 1 */
+html [type="button"],
+/* 1 */
 [type="reset"],
 [type="submit"] {
-    -webkit-appearance: button; /* 2 */
+  -webkit-appearance: button;
+  /* 2 */
 }

 /**
@@ -343,12 +378,18 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   */

 legend {
-    box-sizing: border-box; /* 1 */
-    color: inherit; /* 2 */
-    display: table; /* 1 */
-    max-width: 100%; /* 1 */
-    padding: 0; /* 3 */
-    white-space: normal; /* 1 */
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
 }

 /**
@@ -357,8 +398,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   */

 progress {
-    display: inline-block; /* 1 */
-    vertical-align: baseline; /* 2 */
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */
 }

 /**
@@ -377,8 +420,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{

 [type="checkbox"],
 [type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
 }

 /**
@@ -396,8 +441,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   */

 [type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    outline-offset: -2px; /* 2 */
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
 }

 /**
@@ -415,8 +462,10 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   */

 ::-webkit-file-upload-button {
-    -webkit-appearance: button; /* 1 */
-    font: inherit; /* 2 */
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
 }

 /* Interactive
@@ -427,7 +476,8 @@ p,body,h1,h2,h3,h4,h5,h6,ul,li{
   * 1. Add the correct display in Edge, IE, and Firefox.
   */

-  details, /* 1 */
+details,
+/* 1 */
 menu {
  display: block;
 }
--- a/css/tool/utils.css
+++ b/css/tool/utils.css
@@ -61,3 +61,9 @@
    text-overflow:ellipsis; 
    white-space:nowrap;
 }
+
+.header_title {
+    color: var(--textColor);
+    font-size: var(--f16);
+    margin: 0 .16rem;
+}
--- a/js/config/index.js
+++ b/js/config/index.js
@@ -36,6 +36,7 @@ let config = {
        infoList: '/info/list',
        tagList: '/tag/list',
        tagRecommend: '/tag/recommend',
+        tagInfo: '/tag/info',
        searchHot: '/search/hot',
        searchKey: '/search/key',
    }
--- a/js/page/domestic.js
+++ b/js/page/domestic.js
@@ -1,6 +1,30 @@
 class Domestic {
    constructor() {
+        util.header(
+            `<div class="header_title">分类</div>`,
+            "",
+            ""
+        )
        util.footer()
+        this.getTagListData()
+    }
+
+
+    async getTagListData() {
+       let res = await tagServe.tagList()
+       
+       $(".type_list").innerHTML = res.maps(v => {
+         
+          return `
+            <li>
+                <a href="./tagListInfo.html?url=${v.url}&title=${v.title}">
+                    <div class="text">${v.title}</div>
+                    <p class="nums">${v.count}套</p>
+                </a>
+            </li>
+          `
+       })
+       
    }
 }

--- a/js/page/index.js
+++ b/js/page/index.js
@@ -17,7 +17,7 @@ class Index {
        this.getTagRecommend() 
        this.getHomeHotData()
        this.getHomeListData()
-        this.initSwiper()
+       
        this.event()
    }

@@ -39,8 +39,8 @@ class Index {
        $(".recommend-tag").innerHTML =  res.maps(v => {
            return `
               <li>
-                    <div class="icon">${v.title.substr(0,1)}</div>
-                    <div class="title">${v.title}</div>
+                    <a class="icon" href="./tagListInfo.html?url=${v.url}&title=${v.title}">${v.title.substr(0,1)}</a>
+                    <a class="title" href="./tagListInfo.html?url=${v.url}&title=${v.title}">${v.title}</a>
                </li>
            `
        })
@@ -56,14 +56,14 @@ class Index {
                </div>
            `
        })
+
+        this.initSwiper()
    }


    initSwiper() {
        var mySwiper = new Swiper('.banner', {
-            loop: true, // 循环模式选项
-
-            // 如果需要分页器
+            loop: true,
            pagination: {
                el: '.swiper-pagination',
            },
--- a/js/page/info.js
+++ b/js/page/info.js
@@ -13,7 +13,7 @@ class Info {
            .then(() => {

                util.header(
-                    `<div class="title flex1 ellipsis">${this.title}</div>`,
+                    `<div class="header_title flex1 ellipsis">${this.title}</div>`,
                    `
                    <div class="ilist">
                        <i class="iconfont icon-wujiaoxing"></i>
@@ -53,11 +53,15 @@ class Info {

        // TODO 找一个合适分享
        $(".icon-fenxiang").onclick = async () => {
-            await navShare({
-                title: this.title,
-                text: `我这有个好看的，快来看看 ${this.title}`,
-                url: location.href
-            })
+            await navigator.clipboard.writeText(`
+我这有个好看的，快来看看 ${this.title}
+${location.href}
+            `)
+            // await navShare({
+            //     title: this.title,
+            //     text: `我这有个好看的，快来看看 ${this.title}`,
+            //     url: location.href
+            // })
        }

        let sc = $(".icon-wujiaoxing")
--- a/js/page/search.js
+++ b/js/page/search.js
@@ -43,6 +43,7 @@ class Search {
        let input = $(".header input")

        $(".header .button").onclick = async () => {
+            this.page = 1
            if (input.value.length != 0) {
                this.keyword = input.value
                this.totalArr = []
@@ -51,7 +52,13 @@ class Search {
                    util.hidden(".no-search")
                    item(".have-search ul", this.totalArr)
                    util.show(".have-search")
-                    this.onscroll()
+                    onscroll(async () => {
+                        this.page += 1
+                        if (this.page <= this.totalPage) {
+                            await this.getSearchKeyData()
+                            item(".have-search ul", this.totalArr)
+                        }
+                    })
                }

            }
@@ -75,23 +82,6 @@ class Search {
        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
--- a/js/page/tagListInfo.js
+++ b/js/page/tagListInfo.js
@@ -0,0 +1,37 @@
+class TagListInfo {
+    page = 1;
+    totalPage = 0;
+    totalArr = []
+
+    constructor() {
+        util.header(
+            `<div class="header_title">${query("title")}</div>`,
+            "",
+        )
+        this.getTagInfoData()
+    }
+
+    async getTagInfoData() {
+        let { totalPage, list } = await tagServe.tagInfo({ 
+            url: query("url"), 
+            page: this.page 
+        });
+
+        this.totalPage = totalPage
+        // list.forEach(v => {
+        //     this.totalArr.push(v)
+        // });
+
+        this.totalArr = [ ...this.totalArr, ...list ]
+        item(".default-model ul", this.totalArr)
+        onscroll(async () => {
+            this.page += 1
+            if (this.page <= this.totalPage) {
+                await this.getTagInfoData()
+                // item(".default-model ul", list)
+            }
+        })
+    }
+}
+
+new TagListInfo
--- a/js/serve/tag.js
+++ b/js/serve/tag.js
@@ -10,6 +10,15 @@ class TagServe {
        })
    }   

+    async tagInfo (data = {}) {
+        let http = new Ajax()
+        // suc的返回值（ajax请求到的，后端给我们的数据）
+        return await http.get({
+            url: config.urlList.tagInfo,
+            // data: data   key 和 value 名字一样的时候，可以直接只写一个
+            data
+        })
+    }   

    async tagRecommend (data = {}) {
        let http = new Ajax()
--- a/js/utils/index.js
+++ b/js/utils/index.js
@@ -101,9 +101,6 @@ class Utils {
        if (r != null) return decodeURIComponent(r[2]); return null;
    }

-    
-
-
    header(content, action, back = `<i class="iconfont icon-fanhui"></i>`) {
        this.$("body").insertAdjacentHTML('afterbegin', `
         <div class="header fixed flex ais flex1 border-box p15">
@@ -118,6 +115,19 @@ class Utils {
        }
    }

+    // 滚动到底部实现自动加载下一页数据
+    onscroll(callback) {
+        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) {
+              callback()
+            }
+        }
+    }
+

    async navShare(title = "", text = "", url = "") {
        console.log(navigator.share && navigator.canShare);
@@ -151,7 +161,12 @@ class Utils {
 }

 let u = new Utils
-let util = u, { $, item, query, navShare, getItem, setItem } = u
+let util = u, 
+{ 
+    $, item, query, navShare, 
+    getItem, setItem, onscroll
+} 
+= u

 // let util = new Utils
 // let $ = (new Utils).$
--- a/page/domestic.html
+++ b/page/domestic.html
@@ -7,7 +7,7 @@
    <title>国产</title>
    <script src="../js/utils/rem.js"></script>
    <link rel="stylesheet" href="../css/tool/clear.css">
-    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4738996_raea6u0p92.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4738996_b8zp7vfi90h.css">
    <link rel="stylesheet" href="../css/tool/public.css">

    <link rel="stylesheet" href="../css/page/domestic.css">
@@ -16,12 +16,10 @@
 <body>


-    <div class="header fixed border-box flex ais js">
-      
-    </div>
-
    <div class="content">
-        国产
+        <ul class="type_list flex wrap p15">
+           
+        </ul>
    </div>

    
@@ -30,8 +28,7 @@
 <script src="../js/utils/index.js"></script>
 <script src="../js/config/index.js"></script>
 <script src="../js/http/index.js"></script>
-<script src="../js/serve/home.js"></script>
-<script src="../js/serve/info.js"></script>
+<script src="../js/serve/tag.js"></script>
 <script src="../js/page/domestic.js"></script>

 </html>
--- a/page/tagListInfo.html
+++ b/page/tagListInfo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="../js/utils/rem.js"></script>
+    <link rel="stylesheet" href="../css/tool/clear.css">
+    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4738996_b8zp7vfi90h.css">
+    <link rel="stylesheet" href="../css/tool/public.css">
+    <link rel="stylesheet" href="../css/page/tagListInfo.css">
+</head>
+
+<body>
+
+    <div class="content">
+        <div class="recommend-model default-model">
+            <ul class="flex list p15 js"></ul>
+        </div>
+    </div>
+
+</body>
+<script src="../js/utils/index.js"></script>
+<script src="../js/config/index.js"></script>
+<script src="../js/http/index.js"></script>
+<script src="../js/serve/tag.js"></script>
+<script src="../js/page/tagListInfo.js"></script>
+
+</html>
--- a/笔记.md
+++ b/笔记.md
@@ -24,3 +24,7 @@ ajax 请求一般会有三个状态码
    code == 404 ：不返回数据给前端页面，但需要toast提示用户
    code == 500 ：不返回数据给前端页面，但需要弹窗提示用户！
    code == 403 ：不返回数据给前端页面，但需要弹窗提示用户，强制用户进行某些操作！
+
+TODO 作业：
+  热门
+  我的