first commit

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/枸杞社/js/page/edit.js

@@ -0,0 +1,53 @@
+class Edit {
+    constructor() {
+        title("分类管理")
+        this.principal = JSON.parse(localStorage.getItem("principal"))
+        this.additional = JSON.parse(localStorage.getItem("additional"))
+
+        this.renderPage()
+    }
+
+    renderPage() {
+        $(".selected ul").innerHTML = ""
+        this.principal.forEach(v => {
+            $(".selected ul").innerHTML += `
+                <li>${v.title}</li>
+            `
+        });
+
+        $(".optional ul").innerHTML = ""
+
+        this.additional.forEach(v => {
+            $(".optional ul").innerHTML += `
+                <li>${v.title}</li>
+            `
+        });
+
+        click(".selected ul li", (v,i) => {
+            if (i != 0) {
+                this.additional.push(this.principal[i])
+                this.principal = this.principal.filter((val,index) => {
+                    return index != i
+                });
+
+                localStorage.setItem("principal", JSON.stringify(this.principal))
+                localStorage.setItem("additional", JSON.stringify(this.additional))
+        
+                this.renderPage()
+            }
+        })
+
+        click(".optional ul li", (v,i) => {
+            this.principal.push(this.additional[i])
+            this.additional = this.additional.filter((val,index) => {
+                return index != i
+            });
+
+            localStorage.setItem("principal", JSON.stringify(this.principal))
+            localStorage.setItem("additional", JSON.stringify(this.additional))
+    
+            this.renderPage()
+        })
+    }
+}
+new Edit()

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/枸杞社/js/page/index.js

@@ -0,0 +1,126 @@
+class Index {
+    constructor() {
+        this.index = 0;
+        this.principa = []
+        footer();
+        this.initSwiper();
+        this.getType().then(() => this.getIndex());
+        
+
+    }
+
+    async getType() {
+
+        // 本地无数值，那么发送请求
+        if (localStorage.getItem("principal") == null) {
+            var { principal, additional } = await indexService.type()
+            localStorage.setItem("principal", JSON.stringify(principal))
+            localStorage.setItem("additional", JSON.stringify(additional))
+        } else {
+            var principal = JSON.parse(localStorage.getItem("principal"))
+            var additional = JSON.parse(localStorage.getItem("additional"))
+        }
+      
+
+
+        this.principal = principal;
+
+        console.log("测试：",this.principal);
+
+        // TODO 改造这个代码，实现下面的作业
+        this.principal.forEach((v, i) => {
+            $(".header_menu ul").innerHTML += `<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`;
+            $(".swiper .swiper-wrapper").innerHTML += `
+                <div class="swiper-slide">
+                    <div class="list">
+                    </div>
+                </div>
+            `;
+        });
+
+
+        click(".header_menu ul li", (v, i) => {
+            _(".header_menu ul li").forEach(v => v.classList.remove("active"))
+            v.classList.add("active")
+            this.index = i
+            this.getClassList()
+            this.mySwiper.slideTo(i)
+        })
+
+        _(".swiper .swiper-wrapper .swiper-slide").forEach((v,i) => {
+            if (i != 0) {
+                v.onscroll = () => {
+                    const {clientHeight, scrollHeight, scrollTop} = v;
+                    var distance = scrollHeight- scrollTop - clientHeight;
+                    if (distance <= 0.5) {
+                        this.principal[this.index].page += 1
+                        if (this.principal[this.index].page <= this.principal[this.index].total_page) {
+                            this.getClassList("loadMore")
+                        }
+                    }
+                }
+            }
+        })
+
+    }
+
+    async getIndex() {
+        var res = await indexService.index()
+        this.principal[this.index].content = res.list
+        item(
+            _(".swiper .swiper-wrapper .swiper-slide .list")[this.index],
+            this.principal[this.index].content
+        )
+    }
+
+    async getClassList(type = "click") {
+        
+
+        var getList = async () => {
+            var res = await indexService.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
+            console.log("getClassList: ", this.principal);
+
+            // 渲染页面（注意：把指定数组下标的content渲染到对应下标的 swiper-slide）
+            item(
+                _(".swiper .swiper-wrapper .swiper-slide .list")[this.index],
+                this.principal[this.index].content
+            )
+        }
+
+        
+        if (type == "click") {
+            if (this.principal[this.index].content.length == 0 && this.index != 0) {
+                getList();
+            }
+        } else {
+            getList();
+        }
+    }
+
+
+    initSwiper() {
+        var self = this;
+        this.mySwiper = new Swiper('.swiper', {
+            direction: 'horizontal',
+            on: {
+                slideChangeTransitionEnd: function () {
+                    _(".header_menu ul li").forEach(v => v.classList.remove("active"))
+                    _(".header_menu ul li")[this.activeIndex].classList.add("active")
+
+                    self.index = this.activeIndex
+                    self.getClassList()
+                },
+            },
+        })
+    }
+}
+
+new Index()

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/枸杞社/js/page/info.js

@@ -0,0 +1,72 @@
+class Info {
+    constructor() {
+        this.infoArr = []
+        this.likeArr = JSON.parse(JSON.stringify(localStorage.getItem("like"))) == null 
+                        ? [] 
+                        : JSON.parse(JSON.stringify(localStorage.getItem("like")))
+
+        title(query("title"), `<i class="like iconfont icon-xin"></i>`)
+        this.getInfo()
+        this.like()
+    }
+
+    async getInfo() {
+        this.infoArr = await indexService.info({
+            id: query("id"),
+            quantity: query("quantity")
+        });
+
+        this.infoArr.forEach((v,i) => {
+            var img = document.createElement("img")
+            img.src = v;
+          
+            img.onload = () => {
+                 $(".imgList").innerHTML += `
+                    <figure>
+                        <a href="${v}" data-size="${img.width}x${img.height}">
+                            <img src="${v}" alt="${v}" />
+                        </a>
+                        <figcaption itemprop="caption description">${query("title")} ${i+1}P</figcaption>
+                    </figure>
+                  `
+            }
+        });
+
+        initPhotoSwipeFromDOM('.imgList');
+    }
+
+    like() {
+
+        var res = this.likeArr.filter((v,i) => {
+            return query("id") == v.id
+        });
+
+        if (res.length != 0) {
+            $(".like").classList.replace("icon-xin", "icon-aixin")
+        }
+
+
+        click(".like", () => {
+            // 空心  未收藏 去收藏
+            if ($(".like").classList.contains("icon-xin")) {
+                $(".like").classList.replace("icon-xin", "icon-aixin")
+
+                this.likeArr.push({
+                    id: query("id"),
+                    quantity: query("quantity"),
+                    img: this.infoArr[0]
+                });
+              
+            } else {
+                $(".like").classList.replace("icon-aixin", "icon-xin")
+                this.likeArr = this.likeArr.filter((v,i) => {
+                    return query("id") != v.id
+                });
+            }
+
+            localStorage.setItem("like", JSON.stringify(this.likeArr))
+        })
+    }
+}
+
+new Info();

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/枸杞社/js/page/jigouxiangqing.js

@@ -0,0 +1,49 @@
+
+class jigouxiangqing {
+    constructor() {
+        title("机构详情")
+        this.page = 1
+
+        this.getjigouxiangqing();
+    }
+
+    async getjigouxiangqing() {
+        var self = this
+        var params = {
+            id: query("id"),
+            page: self.page
+        }
+        var res = await indexService.jigouxiangqing(params)
+        console.log(res);
+        res.data.forEach((val) => {
+          
+            $(".gggg").innerHTML +=`
+            <div class="ccccc">
+                <img src="${val.preview}" alt="">
+                <div class="list">
+                    <span class="bb">${val.title}</span>
+                    <p class="qq">${val.user}</p>
+                </div>
+            </div>
+          `
+        })
+      
+    }
+     hotscroll() {
+        console.log("$('.hot')",$('.hot'));
+        $('.hot').onscroll = () => {
+            const {clientHeight, scrollHeight, scrollTop} = $('.hot');
+            const distance = scrollHeight- scrollTop - clientHeight;
+            console.log(clientHeight, scrollHeight, scrollTop);
+                if(distance <= 10){
+                    console.log("滚动到底部...");
+                    this.getModel()
+                }
+        }
+
+
+    }
+}
+
+
+new jigouxiangqing()

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/枸杞社/js/page/me.js

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

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/枸杞社/js/page/mechanism.js

@@ -0,0 +1,25 @@
+class Mechanism {
+    constructor () {
+        footer()
+        title('机构')
+        this.getmechanism()
+    }
+
+    async getmechanism() {
+        var res = await indexService.mechanism({
+        });
+        console.log("test:",res)
+
+        res.forEach((v) => {
+            $(".list").innerHTML += `
+            <a href="./mechanisminfo.html?id=${v.id}&title=${v.title}" class="shuliang">
+                <div class="title">${v.title}</div>
+                <div class="number">${v.id}套</div>
+            </a>
+          `
+        })
+    }
+
+}
+
+new Mechanism()

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/枸杞社/js/page/model.js

@@ -0,0 +1,54 @@
+class Model {
+    constructor () {
+        footer()
+        title('模特')//调用外部方法
+        this.getModel() 
+        this.hotscroll()//加this调用内部方法
+    }
+    //渲染页面
+    async getModel() {
+        var res = await indexService.model()
+        
+        console.log("test",res);
+
+        this.model($('.hot_modelAll'),res)   //调用model这个方法取出数据 
+    };
+
+//($('.hot_modelAll')=father res=data   model(father, data)这就是个方法 
+    model(father, data) {
+
+        data.forEach(v => {
+            father.innerHTML +=`
+                <div class="model">
+                    <a href="./modelinfo.html?id=${v.id}&title=${v.title}"> 
+                        <div class="model_top">
+                            <img src="${v.img}" alt="">
+                            <span>63套</span>
+                        </div>
+                        <div class="model_bottom">${v.title}</div>
+                    </a>
+                </div>
+            `
+        })
+    }
+
+
+    //请求更多数据
+    hotscroll() {
+        console.log("$('.hot')",$('.hot'));
+        $('.hot').onscroll = () => {
+            // console.log('123');
+            const {clientHeight, scrollHeight, scrollTop} = $('.hot');
+            const distance = scrollHeight- scrollTop - clientHeight;
+            console.log(clientHeight, scrollHeight, scrollTop);
+                if(distance <= 10){
+                    console.log("滚动到底部...");
+                    this.getModel()
+                }
+        }
+
+
+    }
+}
+
+new Model()

历届学生/front-end-team-10/项目练习/学生项目/冯凯/练习/枸杞社/js/page/modelinfo.js

@@ -0,0 +1,68 @@
+class Modelinfo {
+    constructor() {
+        this.list = []
+        title(query("title"))
+        this.show = true
+        this.page = 1
+        this.getmodelList();
+    }
+
+    async getmodelList() {
+        
+        var self = this;
+        var res = await indexService.modelList({
+            id: query("id"),
+            page: this.page
+        })
+        //每次请求接口，把数组累加
+        res.data.forEach(element => {
+            this.list.push(element)
+        });
+        //判断是否第一次请求，是 === 渲染简介 否 === 不渲染
+        if (this.show) {modelList($('.title'),res) }
+ 
+        testModelList($('.test'), this.list) 
+        console.log("ceshi:",this.list); 
+
+        this.click($(".icon-xiangxia"), function () {
+            if (self.page < res.total_page) {
+                // self.page += 1 
+                self.page += 1
+                self.show = false
+                self.getmodelList()
+             
+                  
+                // console.log("ceshi:",self.getmodelList());
+            }else{
+                alert("没有了！")
+            }
+           
+       })
+       
+    }
+    
+
+    click(className, callback) {
+        var domArr = Array.from(className);
+        if (domArr.length != 0) {
+            className.forEach((v, i) => {
+                v.onclick = function (e) {
+                    v.index = i;
+                    v.e = e;
+                    callback.call(this)
+                }
+            })
+        } else {
+            className.onclick = function (e) {
+                className.e = e;
+                callback.call(this)
+            }
+        }
+    }
+
+    
+   
+    
+}
+
+new Modelinfo();