first commit

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/page/editClass.js

@@ -0,0 +1,80 @@
+class editClass {
+    constructor () {
+        this.defaultChioose = JSON.parse(localStorage.getItem("classList"));
+        this.YourChioose = 
+         localStorage.getItem("YourChioose") == null 
+         ? []
+         : JSON.parse(localStorage.getItem("YourChioose"));
+
+        this.RenderDefault()
+        this.RenderAdd()
+
+    }
+
+    RenderDefault () {
+        utils.$(".you_chioose .chiooseWrap").innerHTML = "";
+        this.defaultChioose.forEach(v => {
+            utils.$(".you_chioose .chiooseWrap").innerHTML+=
+            `<li>${v.title}</li>`
+        });
+
+        document.querySelectorAll(".you_chioose .chiooseWrap li").forEach((v,i)=>{
+            v.onclick = () => {
+                console.log(i);
+                // 获取你点击的数据
+                this.YourChioose = [...this.YourChioose,this.defaultChioose[i]];
+                localStorage.setItem("YourChioose", JSON.stringify(this.YourChioose))
+                this.RenderAdd()
+
+                // 从原数据里面删除你点击的数据
+                this.defaultChioose = this.defaultChioose.filter((v)=>{
+                    if (this.defaultChioose[i].id != v.id) {
+                        return v
+                    }
+                })
+
+                localStorage.setItem("classList", JSON.stringify(this.defaultChioose))
+
+                this.RenderDefault()
+            }
+        })
+    }
+
+
+    RenderAdd() {
+        utils.$(".chioose_list .chiooseWrap").innerHTML = "";
+        if (localStorage.getItem("YourChioose") != null) {
+            var a = JSON.parse(localStorage.getItem("YourChioose"));
+            
+            a.forEach(v=> {
+                utils.$(".chioose_list .chiooseWrap").innerHTML+=
+                `
+                 <li>${v.title}</li>
+                `
+            });
+
+            document.querySelectorAll(".chioose_list .chiooseWrap li").forEach((v,i)=>{
+                v.onclick = () => {
+                    console.log(v);
+                    // 获取点击对象
+                    this.defaultChioose = [...this.defaultChioose,this.YourChioose[i]];
+                    localStorage.setItem("classList", JSON.stringify(this.defaultChioose))
+                    this.RenderDefault()
+    
+    
+                     // 从原数据里面删除你点击的数据
+                     this.YourChioose = this.YourChioose.filter((v)=>{
+                        if (this.YourChioose[i].id != v.id) {
+                            return v
+                        }
+                    })
+                    localStorage.setItem("YourChioose", JSON.stringify(this.YourChioose))
+                    this.RenderAdd()
+                }
+            })
+
+        };
+    }
+}
+
+new editClass()

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/page/home.js

@@ -0,0 +1,170 @@
+class Home {
+    constructor() {
+        this.Swiper = null;
+        this.Menu = null;
+        this.TabsList = [
+            { id: -1, title: '首页' },
+        ]
+        this.initSwiper();
+        this.GetClass();
+    }
+
+    /**
+     * 获取首页的数据
+     */
+    async GetIndex() {
+        var data = await homeService.index();
+
+        data.model.list.forEach(v => {
+            utils.$(".modeList").innerHTML +=
+                `
+            <li>
+                <div class="top">
+                    <img src="${v.preview}" alt="">
+                    <span>${v.total}</span>
+                </div>
+                <p>${v.title}</p>
+            </li>
+            `
+        })
+
+        utils.$(".news ul").innerHTML = utils.item(data.newest.list)
+        utils.$(".recommended ul").innerHTML = utils.item(data.recommended.list)
+
+    }
+
+    /**
+     * 初始化轮播图
+     */
+    initSwiper() {
+        this.Swiper = new Swiper({
+            el: '.swiper-container',
+            initialSlide: 0
+        });
+    }
+
+
+    /**
+     * 获取分类
+     */
+    async GetClass() {
+        var classList = [];
+        if (localStorage.getItem("classList") == null) {
+            classList = await homeService.class();
+            localStorage.setItem("classList", JSON.stringify(classList));
+        } else {
+            classList = JSON.parse(localStorage.getItem("classList"))
+        }
+
+        this.TabsList = [...this.TabsList, ...classList];
+        console.log(this.TabsList);
+
+        this.RenderSlide()
+        this.RenderMenu();
+        // 获取首页的数据
+        this.GetIndex();
+    }
+
+
+    RenderSlide() {
+        this.TabsList.forEach((v, i) => {
+            if (i != 0) {
+                utils.$(".swiper-wrapper").innerHTML +=
+                    `
+                <div class="swiper-slide">
+                    <div class="newList padding_30">
+                        <ul>
+                           
+                        </ul>
+                    </div>
+                </div>
+                `
+            }
+        });
+
+        var newList = document.querySelectorAll(".swiper-slide")
+        var self = this;
+        newList.forEach((v, i) => {
+            if (i > 0) {
+                v.addEventListener("scroll", function () {
+                    if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
+                        console.log("到底了: ", self.TabsList[i]);
+                        self.TabsList[i].page += 1;
+                        if (self.TabsList[i].page <= self.TabsList[i].totalPage) {
+                            self.GetClassList(i,'more')
+                        }
+                    }
+                })
+            }
+        })
+    }
+
+    /**
+     * 渲染菜单
+     */
+    RenderMenu() {
+        this.TabsList.forEach((v, i) => {
+            utils.$(".header_menu ul").innerHTML +=
+                `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`
+        });
+
+        var Li = document.querySelectorAll(".header_menu ul li");
+
+        // 轮播图切换的时候，改变li的激活样式
+        this.Swiper.on("slideChange", (index) => {
+            this.GetClassList(index)
+            Li.forEach(t => t.classList.remove("active"))
+            Li[index].classList.add("active")
+        });
+
+        // 点击li的时候，切换轮播图，并改变li激活样式  
+        Li.forEach((v, i) => {
+            v.onclick = () => {
+                this.GetClassList(i)
+                Li.forEach(t => t.classList.remove("active"))
+                this.Swiper.slideTo(i);
+                v.classList.add("active")
+            }
+        });
+    }
+
+
+    /**
+     * 获取分类的列表
+     */
+    GetClassList(index, type = "click") {
+        var getData = async () => {
+            var data = await homeService.classList({
+                id: this.TabsList[index].id,
+                page: this.TabsList[index].page
+            });
+
+            // 存储改分类的总页数
+            this.TabsList[index].totalPage = data.total_page
+
+            // 合并数据
+            this.TabsList[index].content =
+            [
+                ...this.TabsList[index].content
+                ,
+                ...data.list
+            ];
+
+            var Silde = utils.$(".swiper-wrapper .swiper-slide");
+
+            // 向内容中插入li标签
+            Silde[index].querySelector("ul").innerHTML += utils.item(data.list)
+        }
+
+        if (type == "click") {
+            // 不是首页，并且没有数据，才发送请求
+            if (this.TabsList[index].id != -1 && this.TabsList[index].content.length == 0) {
+                getData()
+            }
+        } else {
+            getData()
+        }
+    }
+}
+
+new Home()

历届学生/18课程/class18_2/项目/上课项目/枸杞社/js/page/info.js

@@ -0,0 +1,89 @@
+class info {
+    constructor() {
+        this.page = 1;
+        this.totalPage = null;
+        this.res = {};
+        this.LikeArr =
+            localStorage.getItem("LikeList") == null
+                ? []
+                : JSON.parse(localStorage.getItem("LikeList"));
+
+        this.GetInfo();
+        this.Like()
+    }
+
+    async GetInfo() {
+        this.res = await infoService.info({
+            id: utils.GetQueryString("id"),
+            page: this.page
+        });
+        // 渲染详情图片
+        this.res.list.forEach((v) => {
+            utils.$(".info").innerHTML +=
+                `<img src="${v.src}" alt="">`
+        })
+        this.totalPage = this.res.total_page
+
+        utils.$(".news ul").innerHTML = utils.item(this.res.recommend)
+        utils.$(".relevant ul").innerHTML = utils.item(this.res.relevant)
+
+        console.log(this.res);
+
+        utils.$(".next_page").onclick = () => {
+            this.page += 1;
+            if (this.page <= this.totalPage) {
+                this.GetInfo()
+                if (this.page == this.totalPage) {
+                    utils.$(".next_page").style.display = "none"
+                }
+            } else {
+                utils.$(".next_page").style.display = "none"
+            }
+        }
+    }
+
+    Like() {
+        var like = document.querySelector(".like");
+        var isLike = this.LikeArr.filter(v => {
+            if (v.id == utils.GetQueryString("id")) {
+                return v
+            }
+        });
+
+        // 收藏过了
+        if (isLike.length != 0) {
+            like.className = "like iconfont icon-aixin";
+        }
+
+        like.onclick = () => {
+            // 进行收藏 
+            if (like.className.indexOf("icon-xin") != -1) {
+                like.className = "like iconfont icon-aixin";
+                this.LikeArr.push({
+                    id: utils.GetQueryString("id"),
+                    title: this.res.title,
+                    source: this.res.source,
+                    total: this.res.total,
+                    info: this.res.info,
+                    src: this.res.list[0].src,
+                    total: this.res.total,
+                })
+                localStorage.setItem("LikeList", JSON.stringify(this.LikeArr))
+                // 取消收藏 
+            } else {
+                console.log("1111111");
+                like.className = "like iconfont icon-xin";
+                this.LikeArr = this.LikeArr.filter(v => {
+                    if (v.id != utils.GetQueryString("id")) {
+                        return v
+                    }
+                });
+
+                localStorage.setItem("LikeList", JSON.stringify(this.LikeArr))
+
+            }
+        }
+    }
+}
+
+new info()