first commit

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

@@ -0,0 +1,6 @@
+class UserAgreement {
+    constructor () {
+        header("用户协议")
+    }
+}
+new UserAgreement();

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

@@ -0,0 +1,6 @@
+class About {
+    constructor () {
+        header("关于我们")
+    }
+}
+new About();

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

@@ -0,0 +1,6 @@
+class Like {
+    constructor () {
+        header("我的收藏")
+    }
+}
+new Like();

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

@@ -0,0 +1,74 @@
+class Edit {
+
+    constructor() {
+        // 已选择分类
+        this.principal = JSON.parse(localStorage.getItem("principal"))
+        // 待选择分类
+        this.additional = JSON.parse(localStorage.getItem("additional"))
+        header("分类管理")
+        this.renderYourSelect()
+        this.renderNoSelect()
+    }
+
+    // 渲染已选择分类
+    renderYourSelect() {
+        $(".default ul").innerHTML = ""
+        this.principal.forEach(v => {
+            $(".default ul").innerHTML += `
+             <li>${v.title}</li>
+            `
+        })
+
+        var defaultLi = _(".default ul li");
+        defaultLi.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.renderYourSelect();
+                this.renderNoSelect();
+            }
+        })
+    }
+
+    renderNoSelect () {
+        $(".select ul").innerHTML = ""
+        this.additional.forEach(v => {
+            $(".select ul").innerHTML += `
+             <li>${v.title}</li>
+            `
+        });
+
+        var NoLi = _(".select ul li");
+        NoLi.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("additional", JSON.stringify(this.additional))
+                localStorage.setItem("principal", JSON.stringify(this.principal))
+
+
+                this.renderYourSelect();
+                this.renderNoSelect();
+            }
+        });
+    }
+
+}
+
+new Edit();

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

@@ -0,0 +1,138 @@
+class Index {
+    constructor() {
+        this.principal = [];
+        this.currentIndex = 0;
+        footer()
+        this.getIndex();
+        this.getClass();
+    }
+
+    // 请求横向菜单
+    async getClass() {
+        var res;
+        // 本地没有缓存数据，表示用户是第一次使用这个app
+        if (localStorage.getItem("principal") == null) {
+            res = await server.type();
+            localStorage.setItem("principal", JSON.stringify(res.principal))
+            localStorage.setItem("additional", JSON.stringify(res.additional))
+        } else {
+            res = {
+                principal: JSON.parse(localStorage.getItem("principal")),
+                additional: JSON.parse(localStorage.getItem("additional"))
+            }
+            console.log("res: ", res)
+        }
+
+
+        this.principal = res.principal;
+
+        this.principal.unshift({
+            id: null,
+            page: 0,
+            title: "首页"
+        })
+
+        this.principal.forEach(v => {
+            v.content = []
+        })
+
+        this.principal.forEach((v,i) => {
+            $(".header_menu ul").innerHTML += `
+             <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `;
+
+            if (i > 0) {
+                $(".swiper-container .swiper-wrapper").innerHTML += `
+                  <div class="swiper-slide pic_item padding_lr"></div>
+                `
+            }
+
+        });
+
+        var silder = _(".swiper-wrapper .swiper-slide");
+        silder.forEach((v,i) => {
+            if (i > 0) {
+                loadMore(v, () => {
+                    console.log("滚动到底部了：",i )
+                    this.principal[i].page += 1;
+                    if (this.principal[i].page <= this.principal[i].total_page) {
+                        this.getClassList("load")
+                    }
+                })
+            }
+        })
+
+        this.initSwiper();
+    }
+
+    initSwiper() {
+        var liArr = _(".header_menu ul li");
+        var pageSwiper = new swiper('.swiper-container', {
+            time: 3,
+            auto: false,
+            speed: 800,
+            on: {
+                slideChangeTransitionStart: (index) => {
+                    this.currentIndex = index;
+                    this.getClassList()
+                    liArr.forEach(v => v.className = "")
+                    liArr[index].className = "active"
+                }
+            }
+        });
+
+        liArr.forEach((v,i) => {
+            v.onclick = () => {
+                this.currentIndex = i;
+                this.getClassList()
+                pageSwiper.slideTo(i)
+                liArr.forEach(v => v.className = "")
+                v.className = "active"
+            }
+        })
+    }
+
+    // 请求首页的数据
+    async getIndex() {
+        var res = await server.index();
+        item($(".recommended ul"), res.recommended.data)
+        item($(".newest ul"), res.newest.data)
+        model(".model_banner", res.model.res)
+    }
+
+    async getClassList(type = "click") {
+        var getData = async () => {
+            var res = await server.classList({
+                id: this.principal[this.currentIndex].id,
+                page: this.principal[this.currentIndex].page
+            });
+
+            this.principal[this.currentIndex].content
+                = this.principal[this.currentIndex].content.concat(res.data);
+
+            this.principal[this.currentIndex].total_page = res.total_page;
+            this.principal[this.currentIndex].page = res.current_page;
+            var clickSlide = _(".swiper-wrapper .swiper-slide")[this.currentIndex]
+            item(clickSlide, res.data);
+        }
+
+        if (type == "click") {
+            // 第一次点击这个分类，那么请求数据
+            if (
+                this.principal[this.currentIndex].content.length == 0
+                &&
+                this.principal[this.currentIndex].id != null
+            ) {
+                getData()
+            }
+        } else {
+            getData()
+        }
+
+    }
+
+
+
+}
+
+new Index();

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

@@ -0,0 +1,87 @@
+class Info {
+    constructor() {
+        this.getInfo();
+
+        this.like =
+            localStorage.getItem("like") == null
+            ? []
+            : JSON.parse(localStorage.getItem("like"))
+    }
+
+    async getInfo() {
+        var res = await server.agentInfo({
+            id: query("id")
+        })
+
+        header(res.title, `<i class="iconfont like icon-xin"></i>`);
+
+        if (this.checkIsLike().length != 0) {
+            $(".like").classList.replace("icon-xin", "icon-aixin")
+        }
+
+        res.imgs.forEach(v => {
+            var img = document.createElement("img");
+            img.src = v;
+            img.onload = () => {
+                $(".info").innerHTML+= `
+                  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+                    <a href="${v}" itemprop="contentUrl" data-size="${img.width}x${img.height}">
+                      <img src="${v}" itemprop="thumbnail" alt="${res.title}" />
+                    </a>
+                    <figcaption itemprop="caption description">${res.title}</figcaption>
+                  </figure>
+                `
+            }
+
+        });
+
+        initPhotoSwipeFromDOM('.my-gallery');
+        // icon-aixin 实心，icon-xin 空心
+        document.querySelector(".like")
+        var self = this;
+
+        $(".like").onclick = function () {
+
+
+            // 本地没收藏，进行收藏
+            if (self.checkIsLike().length == 0) {
+                self.like.push({
+                    id: query("id"),
+                    total: res.shuliang,
+                    preview: res.img_src,
+                    title: res.title,
+                    user: res.renwulist[0].name,
+                    source: res.jigoulist[0].name,
+                    tags: res.biaoqianlist
+                })
+            // 已经收藏过了，点击的时候取消收藏
+            } else {
+                self.like = self.like.filter(v => {
+                    if (v.id != query("id")) {
+                        return v
+                    }
+                });
+            }
+
+            localStorage.setItem("like", JSON.stringify(self.like))
+
+            // 如果为空心，点击变成实心，收藏
+            this.classList.contains("icon-xin")
+            ? this.classList.replace("icon-xin", "icon-aixin")
+            // 如果为实心，点击变成空心，取消收藏
+            : this.classList.replace("icon-aixin", "icon-xin")
+
+        }
+    }
+
+    // 判断本地是否有你当前正在浏览的这个写真
+    checkIsLike() {
+        return this.like.filter(v => {
+            if (v.id == query("id")) {
+                return v
+            }
+        })
+    }
+}
+
+new Info();

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

@@ -0,0 +1,47 @@
+class List {
+    constructor() {
+        this.page = 0;
+        this.total_page = 0;
+        this.checkUrl()
+    }
+
+
+    async checkUrl() {
+        header(query("t"))
+        // 调用分类接口
+        if (query("type") == "tag") {
+            var res = await server.classList({
+                id: query("id"),
+                page: this.page
+            });
+            this.total_page = res.total_page;
+            this.page = res.current_page;
+            item($(".pic_item"), res.data);
+
+        // 调用机构接口
+        } else {
+            var res = await server.mechanismList({
+                id: query("id"),
+                page: this.page
+            });
+            console.log(res)
+            this.total_page = res.total_page;
+            this.page = res.current_page;
+            item($(".pic_item"), res.data);
+        }
+
+        window.onscroll = () => {
+            var scrollTop = document.documentElement.scrollTop
+            var scrollHeight = document.documentElement.scrollHeight
+            var clientHeight = document.documentElement.clientHeight
+            if ((scrollHeight - scrollTop).toFixed() == clientHeight) {
+                this.page+=1;
+                if (this.page <= this.total_page) {
+                    this.checkUrl()
+                }
+            }
+        }
+    }
+}
+
+new List();

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

@@ -0,0 +1,23 @@
+class Mechanism {
+    constructor() {
+        footer()
+        header("机构")
+        this.getMechanism()
+    }
+
+    async getMechanism() {
+        var res = await server.mechanism();
+        res.forEach((v,i) => {
+            $(".mechanism_list").innerHTML += `
+              <li>
+                  <a href="./list.html?id=${v.id}&t=${v.title}&type=mechanism">
+                      <p>${v.title}</p>
+                      <span>${v.quantity}</span>
+                  </a>
+              </li>
+            `
+        })
+        console.log(res)
+    }
+}
+new Mechanism();

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

@@ -0,0 +1,16 @@
+class Model {
+    constructor() {
+        footer()
+        header("模特")
+        this.getAllmodel()
+    }
+
+
+
+    async getAllmodel () {
+        var res = await server.allModel();
+        model(".hot_models ul", res.hot_models)
+        model(".newest ul", res.newest)
+    }
+}
+new Model();

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

@@ -0,0 +1,27 @@
+class ModelInfo {
+
+    constructor () {
+        header(query("t"))
+        this.getModelInfo()
+    }
+
+    async getModelInfo () {
+        var res = await server.modelList({
+           id: query("id"),
+           page: 0
+        });
+        console.log(res);
+
+        $(".top").innerHTML += `
+          <img src="${res.model_info.portrait}" alt="">
+          <div class="model_introduce">
+             <p>${res.model_info.name}</p>
+             <span>${res.model_info.explain}</span>
+          </div>
+        `
+
+        item($(".works"), res.data);
+        model(".similar ul", res.similar)
+    }
+}
+new ModelInfo();

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

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