first commit

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/about.js

@@ -0,0 +1,7 @@
+class about{
+    constructor () {
+        header("关于我们")
+    }
+
+}
+new about()

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/collect.js

@@ -0,0 +1,46 @@
+class collect{
+    constructor() {
+    header("我的收藏",'<i class="iconfont icon-xin"></i><i class="iconfont icon-home"></i>')
+     this.collect = JSON.parse(localStorage.getItem("likeArr")) == null
+         ? []
+         : JSON.parse(localStorage.getItem("likeArr"));
+ 
+     this.GetLikeArr()
+ }
+ 
+ GetLikeArr() {
+     if (this.collect == null || this.collect.length == 0) {
+         document.querySelector(".content_list ul").innerHTML = "";
+         document.querySelector(".content_list ul").innerHTML =
+             `
+         <div class="null">
+             <i class="iconfont icon-wushuju"></i>
+             <p>暂无收藏</p>
+         </div>
+         `
+     } else {
+         document.querySelector(".content_list ul").innerHTML = "";
+         this.collect.forEach(v => {
+             document.querySelector(".content_list ul").innerHTML +=
+                 `
+                 <li>
+                     <div class="content_img">
+                         <a href="./info.html?id=${v.id}">
+                             <img src="${v.img_src}">
+                         </a>
+                     </div>
+                     <div class="content_text">
+                         <a href="./info.html?id=${v.id}">
+                             <p class="tua">${v.title}</p>
+                         </a>
+                     </div>
+                 </li>
+             `
+         });
+     }
+ }
+ 
+ }
+ 
+ new collect()
+ 

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/index.js

@@ -0,0 +1,140 @@
+class index {
+    constructor() {
+        this.principal = [];
+        this.index = localStorage.getItem("index") == null ? 0 : localStorage.getItem("index");
+        footer()
+        this.getIndexData();
+        this.GetType();
+    }
+
+    // 获取横向分类的数据
+    async GetType() {
+        var res;
+        // 第一次访问app，本地没有缓存的principal分类，所以发送请求去获取
+        if (localStorage.getItem("principal") == null) {
+            var data = await indexServe.type();
+            console.log("data === ", data);
+            res = data.principal
+            localStorage.setItem("principal", JSON.stringify(data.principal))
+            localStorage.setItem("additional", JSON.stringify(data.additional))
+        } else {
+            res = JSON.parse(localStorage.getItem("principal"))
+        }
+       
+        this.principal = res;
+
+        this.principal.unshift({
+            id: -1,
+            page: 0,
+            title: "首页",
+            content: []
+        })
+
+
+        this.principal.forEach((v, i) => {
+            v.content = [];
+            // 渲染横向菜单
+            $(".header_menu ul").innerHTML += `<li class="${i == this.index ? 'active_menu' : ''}">${v.title}</li>`;
+
+            // 生成横向的轮播图
+            if (i != 0) {
+                $(".swiper-container .swiper-wrapper").innerHTML += `<div class="swiper-slide item_list"></div>`
+            }
+        });
+
+        OnScrollBottom(".swiper-wrapper .swiper-slide", async () => {
+            if (index != 0) {
+                this.principal[this.index].page++;
+                if (this.principal[this.index].page <= this.principal[this.index].total_page) {
+                    await this.GetClassList("more")
+                    if (this.principal[this.index].page == this.principal[this.index].total_page) {
+                        _(".swiper-wrapper .swiper-slide")[this.index].innerHTML += `<p class="nodata">...暂无数据...</p>`
+                    }
+                }
+                
+            }
+        })
+
+        console.log(this.principal);
+        this.initSwiper();
+    }
+
+    initSwiper() {
+       
+
+        // 改变激活样式的封装
+        function changeAction(index) {
+            _(".header_menu ul li").forEach(v => {
+                v.className = ""
+            });
+            _(".header_menu ul li")[index].className = "active_menu"
+        }
+
+        var page = new swiper(".swiper-container", {
+            time: 3,
+            on: {
+                slideChangeTransitionStart: (index) => {
+                    this.index = index;
+                    localStorage.setItem("index", this.index)
+                    changeAction(index)
+                    this.GetClassList()
+                }
+            }
+        });
+
+        _(".header_menu ul li").forEach((v, i) => {
+            v.onclick = () => {
+                this.index = i;
+                localStorage.setItem("index", this.index)
+                page.slideTo(i);
+                changeAction(i);
+                this.GetClassList()
+            }
+        });
+
+        if (localStorage.getItem("index") != null) {
+            this.GetClassList()
+            page.slideTo(this.index);
+        }
+    }
+
+    // type click 表示点击或者滑动
+    //      more  表示滚动加载数据
+    async GetClassList(type = "click") {
+        var getData = async () => {
+            var res = await indexServe.classList({
+                page: this.principal[this.index].page,
+                id: this.principal[this.index].id
+            });
+
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data
+            ];
+
+            this.principal[this.index].total_page = res.total_page;
+            item(res.data, _(".swiper-wrapper .swiper-slide")[this.index])
+
+        }
+        if (this.index != 0) {
+            if (type == "click") {
+                if (this.principal[this.index].content == 0) { 
+                   await getData()
+                }
+            } else {
+                await getData()
+            }
+        }
+
+
+    }
+
+
+    async getIndexData() {
+        var res = await indexServe.index();
+        item(res.newest.data, $(".newest"))
+        item(res.recommended.data, $(".recommended"))
+    }
+}
+
+new index()

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/info.js

@@ -0,0 +1,70 @@
+class info {
+    constructor() {
+        this.likeArr = localStorage.getItem("likeArr") == null ? [] : JSON.parse(localStorage.getItem("likeArr"))
+        this.GetInfo()
+    }
+
+
+    async GetInfo() {
+        var res = await indexServe.info({
+            id: $_GET("id")
+        });
+
+        console.log(res);
+
+        header(res.title, '<i class="like iconfont icon-xin"></i>');
+
+        var isLike = this.likeArr.filter(v => v.id == res.id);
+
+        if (isLike.length != 0) {
+            $(".like").classList.add("icon-aixin")
+            $(".like").classList.remove("icon-xin")
+        }
+
+
+        $(".like").onclick = () => {
+
+            var isHave = this.likeArr.filter(v => v.id == res.id);
+
+            // 表示已经收藏
+            if (isHave.length != 0) {
+                this.likeArr = this.likeArr.filter(v => v.id != res.id)
+                // 表示未收藏    
+            } else {
+                this.likeArr.push({
+                    id: res.id,
+                    title: res.title,
+                    img_src: res.img_src
+                });
+            }
+
+            localStorage.setItem("likeArr", JSON.stringify(this.likeArr))
+
+            $(".like").classList.toggle("icon-xin")
+            $(".like").classList.toggle("icon-aixin")
+        }
+
+        res.imgs.forEach(v => {
+            console.log("111");
+
+            var img = new Image();
+            img.src = v;
+            img.onload = function () {
+                $(".imgList").innerHTML += `
+                <figure >
+                    <a href="${v}" data-size="${img.width}x${img.height}">
+                        <img src="${v}" alt="${res.title}" />
+                    </a>
+                    <figcaption itemprop="caption description">${res.title}</figcaption>
+                </figure>
+                `
+            }
+
+        });
+
+        initPhotoSwipeFromDOM(".imgList")
+
+    }
+}
+
+new info()

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/mechanism.js

@@ -0,0 +1,36 @@
+class mechanism{
+    constructor () {
+        header("机构")
+        footer()
+        this.mechanismdo()
+    }
+    async mechanismdo() {
+        var res = await indexServe.mechanism();
+        mechanismList(res,$(".content_theme1"))
+        console.log(res)
+    }
+
+}
+
+new mechanism()
+
+// class search {
+//     constructor() {
+//         this.search_header()
+//     }
+//     search_header() {
+//         $(".search_input .icon-back1").onclick = () => history.back()
+//         var searchVale
+//         $(".search_input .icon-search").onclick = async () => {
+//             searchVale = $(".search_input .search_msg").value
+//             var res = await indexServe.search({
+//                 "keyword": searchVale
+//             });
+//             console.log(res)
+//             item(res,$(".search_list"))
+            
+//         }
+//     }
+// }
+
+// new search

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/model.js

@@ -0,0 +1,8 @@
+class model{
+    constructor () {
+        footer()
+
+    }
+}
+
+new model()

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/model_info.js

@@ -0,0 +1,74 @@
+class model_info {
+    constructor() {
+        this.GetModelInfo()
+    }
+    async GetModelInfo() {
+        var res = await indexServe.modelList({
+
+            id: $_GET("id"),
+            page: 0
+            
+        })
+        header(res.model_info.name)
+        console.log(res)
+      
+        document.querySelector(".model_info_header").innerHTML = `
+            <img src="${res.model_info.portrait}" alt="${res.model_info.name}">
+            <div class="right_text">
+                <p>${res.model_info.name}</p>
+                <span>${res.model_info.explain}</span>
+            </div>
+        `
+
+        document.querySelector(".tazuop .title").innerText = "她的作品"
+        res.data.forEach(v => {
+            document.querySelector(".tazuop ul").innerHTML+=
+            `
+                <li>
+                    <div class="newest_img">
+                        <a href="./info.html?id=${v.id}">
+                            <img src="${v.preview}" alt="${v.title}">
+                        </a>
+                        <span>${v.total}P</span>
+                    </div>
+                    <div class="newest_text">
+                        <a href="./info.html?id=${v.id}">
+                            <p class="t">${v.title}</p>
+                            <p class="source">${v.source}</p>
+                        </a>
+                        <div class="tags">
+                        ${
+                            (v.tags.map((t) => {
+                                return `<div class="tags_item"><a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a></div>`
+                            })).toString().replace(/,/ig, " ")
+                        }
+                        </div>
+                    </div>
+                </li>
+            `
+        });
+
+        
+        document.querySelector(".similar .title").innerText = "类似模特"
+        res.similar.forEach((v)=>{
+            document.querySelector(".similar .model_list").innerHTML+= `
+                <div class="item">
+                    <div class="top">
+                        <img src="${v.preview}" alt="${v.title}">
+                        <span>${v.total}</span>
+                    </div>
+                    <p>${v.title}</p>
+                </div>
+            `
+        })
+        var items = document.querySelectorAll(".similar .model_list .item")
+        items.forEach((v,i)=>{
+            v.onclick = function () {
+                location.href = `model_info.html?id=${res.similar[i].id}&t=${res.similar[i].title}`
+            }
+        })
+
+    }
+
+    }
+new model_info()

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/my.js

@@ -0,0 +1,8 @@
+class my{
+    constructor () {
+        footer()
+
+    }
+}
+
+new my()

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/search.js

@@ -0,0 +1,20 @@
+class search {
+    constructor() {
+        this.search_header()
+    }
+    search_header() {
+        $(".search_input .icon-back1").onclick = () => history.back()
+        
+        $(".search_input .icon-search").onclick = async () => {
+            $(".search_list").innerHTML=""
+            var res = await indexServe.search({
+                "keyword": $(".search_input .search_msg").value
+            });
+            console.log(res)
+            item(res,$(".search_list"))
+            
+        }
+    }
+}
+
+new search

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/tag_list.js

@@ -0,0 +1,43 @@
+class taglist {
+
+    constructor() {
+        this.page = 0
+        this.gettaglist();
+        header(decodeURIComponent($_GET("title")))
+
+    }
+
+    async gettaglist() {
+        var res = await indexServe.taglist({
+            id: $_GET("id"),
+            page: this.page,
+        });
+
+        // this.total_page=1;
+        this.total_page = res.total_page;
+        item(res.data, $(".tagst"))
+        this.GETtp()
+    };
+
+    GETtp() {
+
+        window.onscroll = async () => {
+            var scrollTop = document.documentElement.scrollTop
+            var scrollHeight = document.documentElement.scrollHeight
+            var clientHeight = document.documentElement.clientHeight
+            if (parseInt(scrollHeight - scrollTop) == clientHeight) {
+                this.page++;
+                // console.log(this.page, "页数");
+                if (this.page <= this.total_page) {
+                    await this.gettaglist();
+                    if (this.page == this.total_page) {
+                        $(".tagst").innerHTML += `<p class="nodata">...暂无数据...</p>`
+                    }
+                }
+            }
+        }
+
+    };
+
+}
+new taglist()

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/page/typeClass.js

@@ -0,0 +1,69 @@
+class typeClass {
+    constructor () {
+        this.principal = JSON.parse(localStorage.getItem("principal"));
+        this.additional = JSON.parse(localStorage.getItem("additional"));
+        header("分类管理")
+        this.initType()
+      
+    }
+
+
+    initType() {
+        // 已选分类
+        $(".you_chioose .chiooseWrap").innerHTML = ""
+        this.principal.forEach(v => {
+            $(".you_chioose .chiooseWrap").innerHTML += `<li>${v.title}</li>`
+        });
+
+
+      
+        // 未选分类
+        $(".chioose_list .chiooseWrap").innerHTML= ""
+        this.additional.forEach(v => {
+            $(".chioose_list .chiooseWrap").innerHTML += `<li>${v.title}</li>`
+        });
+
+        this.bindClick()
+       
+    }
+
+    bindClick() {
+        _(".you_chioose .chiooseWrap li").forEach((v,i) => {
+            v.onclick = () => {
+                this.additional.push(this.principal[i])
+
+                this.principal =  this.principal.filter((item,index) => {
+                    if (item.id != this.principal[i].id) {
+                        return item
+                    }
+                });
+
+
+                localStorage.setItem("principal", JSON.stringify(this.principal))
+                localStorage.setItem("additional", JSON.stringify(this.additional))
+                
+                this.initType()
+            }
+        })
+
+        _(".chioose_list .chiooseWrap li").forEach((v,i) => {
+            v.onclick = () => {
+                this.principal.unshift(this.additional[i])
+
+                this.additional =  this.additional.filter((item,index) => {
+                    if (item.id != this.additional[i].id) {
+                        return item
+                    }
+                });
+
+
+                localStorage.setItem("principal", JSON.stringify(this.principal))
+                localStorage.setItem("additional", JSON.stringify(this.additional))
+                
+                this.initType()
+            }
+        })
+    }
+}
+
+new typeClass()