first commit

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/edit.js

@@ -0,0 +1,70 @@
+class Edit {
+    constructor() {
+        this.principal = JSON.parse(localStorage.getItem("principal"));
+        this.additional = JSON.parse(localStorage.getItem("additional"));
+        header("分类编辑")
+        // console.log(this.principal)
+        // console.log(this.additional)
+        this.renderPrincipal();
+        this.renderAdditional();
+    }
+
+    // 已选菜单
+    renderPrincipal() {
+        $(".you_select ul").innerHTML = ""
+        this.principal.forEach((v,i) => {
+            $(".you_select ul").innerHTML += `
+               <li>${v.title}</li>
+            `
+        });
+
+        _(".you_select ul li").forEach((v,i) => {
+            v.onclick = () => {
+                if (i != 0) {
+                    this.additional.push(this.principal[i])
+                    localStorage.setItem("additional", JSON.stringify(this.additional))
+                    this.renderAdditional()
+
+
+                    this.principal = this.principal.filter((item,index) => {
+                        if (this.principal[i].id != item.id) {
+                            return item
+                        }
+                    })
+                    localStorage.setItem("principal", JSON.stringify(this.principal))
+                    this.renderPrincipal();
+                }
+            }
+        })
+    }
+
+
+    // 未选菜单
+    renderAdditional() {
+        $(".wait_select ul").innerHTML = ""
+        this.additional.forEach((v,i) => {
+            $(".wait_select ul").innerHTML += `
+                   <li>${v.title}</li>
+                `
+        });
+
+
+        _(".wait_select ul li").forEach((v,i) => {
+            v.onclick = () => {
+                this.principal.splice(1,0,this.additional[i])
+                localStorage.setItem("principal", JSON.stringify(this.principal))
+                this.renderPrincipal()
+
+                this.additional = this.additional.filter((item,index) => {
+                    if (this.additional[i].id != item.id) {
+                        return item
+                    }
+                })
+                localStorage.setItem("additional", JSON.stringify(this.additional))
+                this.renderAdditional();
+            }
+        })
+    }
+}
+
+new Edit()

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/index.js

@@ -0,0 +1,139 @@
+class Index {
+    constructor() {
+        // 横向菜单的下标
+        this.index = 0;
+        // 默认横向菜单的数据
+        this.principal = []
+        footer()
+        this.getClassApi();
+    }
+
+    async getClassApi() {
+        // 第一次打开app，本地没有缓存，发送请求获取菜单
+        if (localStorage.getItem("principal") == null) {
+            // 请求横向 菜单的数据
+            var res = await index.classApi();
+            localStorage.setItem("principal", JSON.stringify(res.principal));
+            localStorage.setItem("additional", JSON.stringify(res.additional));
+            this.principal = res.principal
+
+        // 第二次打开，本地已经有缓存了， 直接使用本地缓存过的菜单数据
+        } else {
+            this.principal = JSON.parse(localStorage.getItem("principal"))
+        }
+
+        // 渲染生成横向菜单和对应的内容
+        this.principal.forEach((v,i) => {
+
+            // 生成横向菜单
+            $(".header_menu ul").innerHTML += `
+               <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `;
+
+            // 生成横向菜单对应列表内容
+            if (i > 0) {
+                $(".swiper-wrapper").innerHTML += `
+                   <div class="swiper-slide">${v.title}</div>
+                `
+            }
+            
+        });
+
+
+        // 为每一个内容绑定滚动事件
+        var slide = _(".swiper-wrapper .swiper-slide");
+        var self = this;
+        slide.forEach((v, i) => {
+            if (i > 0) {
+                v.addEventListener('scroll', function () {
+                    if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
+                        self.principal[self.index].page += 1;
+                        if (self.principal[self.index].page <= self.principal[self.index].total_page) {
+                            console.log("请求数据")
+                            self.getClassList("loadMore")
+                        }
+                    }
+                })
+            }
+        })
+
+
+        // 初始化页面内容的轮播图
+        var self = this;
+        var mySwiper = new Swiper ('.swiper', {
+            direction: 'horizontal',
+            on: {
+                slideChangeTransitionEnd: function(){
+                    self.changeActive(this.activeIndex)
+                    self.getClassList();
+                },
+            },
+        })
+
+        // 为菜单的li标签绑定点击事件
+        var liArr = _(".header_menu ul li")
+        liArr.forEach((v,i) => {
+            v.onclick = () => {
+                this.changeActive(i)
+                mySwiper.slideTo(i)
+            }
+        })
+
+        this.getIndex();
+    }
+
+    async getIndex() {
+        var res = await index.indexList();
+
+        var slide = _(".swiper-wrapper .swiper-slide");
+
+        item(slide[this.index],res.list)
+    }
+
+    async getClassList(type = "click") {
+
+        var loadData = async () => {
+            var res = await index.classList({
+                id: this.principal[this.index].id,
+                page: this.principal[this.index].page
+            })
+
+            this.principal[this.index].total_page = res.total_page;
+            // res.data.forEach(v => {
+            //     this.principal[this.index].content.push(v)
+            // })
+
+            this.principal[this.index].content = [
+                ...this.principal[this.index].content,
+                ...res.data
+            ];
+
+            console.log("this.principal[this.index]: ", this.principal[this.index])
+            var slide = _(".swiper-wrapper .swiper-slide");
+            item(slide[this.index], res.data)
+        }
+
+        if (this.principal[this.index].id != -1) {
+            // 滚动加载更多
+            if (type == "loadMore") {
+                loadData();
+            // 点击 和 滑动页面
+            } else  {
+                if (this.principal[this.index].content.length == 0) {
+                    loadData();
+                }
+            }
+        }
+
+    }
+
+    changeActive(index) {
+        this.index = index;
+        var liArr = _(".header_menu ul li")
+        liArr.forEach(item => item.classList.remove("active"))
+        liArr[index].classList.add("active")
+    }
+}
+
+
+new Index();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/info.js

@@ -0,0 +1,22 @@
+class Info {
+    constructor() {
+        header(query("title"),`<i class="iconfont icon-xin"></i>`);
+        this.getInfo();
+    }
+
+    async getInfo() {
+        var res = await index.info({
+            id: query("id"),
+            quantity: query("quantity")
+        })
+
+        res.forEach(v => {
+            $(".content").innerHTML+= `
+                <img src="${v}" alt="">
+            `
+        })
+    }
+
+}
+
+new Info();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/mechanism.js

@@ -0,0 +1,23 @@
+class Mechanism {
+    constructor() {
+        footer()
+        header("机构")
+        this.getMechanism()
+    }
+
+
+    async getMechanism() {
+        var res = await index.mechanism();
+        res.forEach(v => {
+            $(".content ul").innerHTML += `
+            <li>
+                <a href="">${v.title}</a>
+            </li>
+            `
+        });
+    }
+}
+
+
+
+new Mechanism();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/medolHome.js

@@ -0,0 +1,29 @@
+ class MedolHome{
+     constructor(){ 
+         this.MedolHome()
+         this.total_page = 0
+         page = 1
+     }
+
+     async getMedolHome(){
+         var res = MedolHome({
+             id:query("id"),
+             page:this.page
+         })
+         this.total_page = res.res
+         console.log(res)
+
+
+
+        var self = this;
+         $(className: "content").addEventListener('scroll', function () {
+            if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
+                self.page += 1;
+                if (self.page <= self.principal[self.index].total_page) {
+                    console.log("请求数据")
+                    self.getClassList("loadMore") 
+                }
+            }
+        })
+     }
+ }

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/model.js

@@ -0,0 +1,32 @@
+
+class Model {
+    constructor() {
+        footer()
+        header("模特")
+        this.allModel();
+    }
+
+
+    async allModel() {
+        var res = await index.allModel({
+            id: query("id"),
+            quantity: query("quantity")
+        })
+        console.log( res);
+
+
+        
+        res.forEach(v => {
+            $(".content").innerHTML += `
+        <li>
+            <a href="">
+                <img src="${v.img}" alt="">
+                <p class="ellipsis">${v.title}</p>
+            </a>
+        </li> 
+            `
+        })
+    }
+}
+
+new Model();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/my.js

@@ -0,0 +1,7 @@
+class My {
+    constructor() {
+        footer()
+    }
+}
+
+new My();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/search.js

@@ -0,0 +1,21 @@
+class Search {
+    constructor() {
+        this.getsearch();
+    }
+
+    async getsearch() {
+        $(".icon-search").onclick = async () => {
+            var res = await index.search({
+                keyword: $("input").value
+            })  
+
+            console.log(res);
+        }
+        
+       
+    }
+}
+
+
+
+new Search();

历届学生/front-end-team/项目练习/上课项目/屁桃儿/js/page/tagList.js

@@ -0,0 +1,41 @@
+class indexJump {
+    constructor() {
+        header(query("title"));
+        this.page = 1
+        this.classList();
+        
+    }
+
+    more(){
+        this.page += 1
+        console.log(this.page);
+        this.classList()
+    }
+    async classList() {
+        var res = await index.classList({
+            page: this.page,
+            id: query("id"),
+        })
+        console.log(res.data);
+       
+        var aaa = res.data
+
+        aaa.forEach(v => {
+            $(".content").innerHTML += `
+            <li>
+             <img src="${v.preview}" alt="">
+             <div class="text">
+                <span>${v.user}</span>
+                <p>${v.source}</p>
+             </div>
+                   </li>    
+            `
+        })
+    }
+    
+    
+
+}
+
+
+new indexJump();