first commit

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/config/index.js

@@ -0,0 +1,39 @@
+// 放程序配置的，比如接口地址
+var config = {
+    devBaseUrl: 'http://127.0.0.1:3000/api/json',
+    testBaseUrl: 'http://127.0.0.1:3000/api/json/test',
+    prodBaseUrl: 'http://www.abc.com/api/json',
+    stage: 'dev',  // dev test prod
+    urlList: {
+        classList: '/classList',
+        info: '/info',
+        type: '/class',
+        index: '/index'
+    },
+    getBaseUrl: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl;
+                break;
+            case "test":
+                return this.testBaseUrl;
+
+                break;
+            case "prod":
+                return this.prodBaseUrl;
+                break;
+
+            default:
+                break;
+        }
+    }
+}
+
+// 基地址
+// 三个
+//  dev 开发阶段 http://127.0.0.1:3000/api/json/dev
+//  test 测试阶段 http://127.0.0.1:3000/api/json/test
+//  prod 上线阶段 http://www.abc.com/api/json
+
+// http://127.0.0.1:3000/api/json   /classList
+// http://127.0.0.1:3000/api/json   /info

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/http/index.js

@@ -0,0 +1,77 @@
+class Http {
+    defaultOption = {
+        timeout: 6000,
+        headers: {
+            'Content-Type': 'application/json;charset=utf-8'
+        }
+    }
+
+    constructor() {
+        this.xhr = new XMLHttpRequest()
+    }
+
+    get(par) {
+        return new Promise((success, error) => {
+            this.setOption(par)
+            let urlParams = ""
+            for (const key in par.data) {
+                urlParams += `&${key}=${par.data[key]}`
+            }
+            urlParams = urlParams.replace("&", "")
+            this.xhr.open("GET", `${config.getBaseUrl()}${par.url}?${urlParams}`)
+            this.xhr.timeout = this.defaultOption.timeout
+            this.setHeader(par.headers)
+            this.xhr.send()
+            this.statechange(success, error);
+        })
+    }
+
+    post(par) {
+        return new Promise((success, error) => {
+            this.setOption(par)
+            this.xhr.open("POST", par.url)
+            this.xhr.timeout = this.defaultOption.timeout
+            this.setHeader(par.headers)
+            this.xhr.send(JSON.stringify(par.data))
+            this.statechange(success, error);
+        })
+    }
+
+    setOption(par) {
+        this.defaultOption.timeout = par.timeout || this.defaultOption.timeout
+        // ....
+    }
+
+    setHeader(headerObject = {}) {
+        Object.assign(headerObject, this.defaultOption.headers)
+        for (const key in headerObject) {
+            this.xhr.setRequestHeader(key, headerObject[key]);
+        }
+    }
+
+    statechange(success, error) {
+        this.xhr.onreadystatechange = () => {
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    let data = JSON.parse(this.xhr.response)
+                    switch (data.status) {
+                        case 200:
+                            success(data.result)
+                            break;
+                        case 404:
+                            alert(data.msg)
+                            throw new Error(data.msg)
+                            break;
+                        default:
+                            break;
+                    }
+                  
+                } else {
+                    error(this.xhr)
+                }
+            }
+        }
+    }
+}
+
+var http = new Http()

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/edit.js

@@ -0,0 +1,32 @@
+class Edit {
+    constructor() {
+        header("分类编辑")
+        // additional 可选菜单
+        // principal 已选菜单
+        this.renderList()
+    }
+
+    renderList() {
+        $(".principal").html()
+        $(".additional").html()
+
+        $(".principal").html(getItem("principal").map(v => `<li>${v.title}</li>`))
+        $(".additional").html(getItem("additional").map(v => `<li>${v.title}</li>`))
+        _(".principal li").tap(({v,i}) => i != 0 ? this.clickEvent("principal", "additional", {v,i}) : null )
+        _(".additional li").tap(({v,i}) => this.clickEvent("additional", "principal", {v,i}))
+        
+    }
+
+    clickEvent(principal, additional, item) {
+        let {v,i} = item;
+        // 先把数据添加到 可选菜单 中
+        let getAdditional = getItem(additional)
+        getAdditional.push(getItem(principal)[i])
+        setItem(additional,getAdditional)
+      
+        setItem(principal,getItem(principal).filter(item => v.innerText != item.title))
+        this.renderList()
+    }
+}
+
+new Edit()

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/index.js

@@ -0,0 +1,121 @@
+class Index {
+    constructor() {
+        // console.log(config.getBaseUrl());
+        // this.getClassList()
+        this.index = 0;
+        this.principal = [];
+        this.GetType()
+        this.initSwiper()
+
+        footer()
+    }
+
+    initSwiper() {
+        var self = this;
+        this.swiper = new Swiper('.swiper', {
+            direction: 'horizontal',
+            on: {
+                slideChangeTransitionStart: function () {
+                    _(".header_menu ul li")[this.activeIndex].addClass("active")
+                    .siblings().removeClass("active");
+                    self.index = this.activeIndex
+                    if (this.activeIndex != 0) {
+                        self.getClassList()
+                    }
+                },
+            },
+        })
+    }
+
+    async GetType() {
+       
+        // 第一次访问网页获取分类
+        if (!getItem("principal")) {
+            let { principal, additional } = await indexServe.type();
+            this.principal = principal
+
+            setItem("principal", principal)
+            setItem("additional", additional)
+        } else {
+            this.principal = getItem("principal")
+        }
+
+        this.principal.forEach((v, i) => {
+            $(".header_menu ul").html(`
+                <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `);
+
+            $(".swiper-wrapper").html(`
+              <div class="swiper-slide">
+                <ul></ul>
+              </div>
+            `)
+        });
+
+        _(".swiper-wrapper .swiper-slide").forEach(v => {
+            v.onscroll = () => {
+                const {clientHeight, scrollHeight, scrollTop} = v;
+                const distance = scrollHeight- scrollTop - clientHeight;
+                if(distance <= 0) {
+                    if (this.index != 0) {
+                        this.principal[this.index].page += 1;
+                        if (this.principal[this.index].page <= this.principal[this.index].total_page) {
+                            this.getClassList('load_more')
+                        } else {
+                            // 暂无数据的样式
+                        }
+                    }
+                }
+            }
+        })
+
+
+        _(".header_menu ul li").tap(( { v, i }) => {
+            // 链式调用
+            this.swiper.slideTo(i)
+        })
+
+        this.getIndex();
+    }
+
+    async getClassList(type = 'click') {
+       
+        let loadData = async () => {
+            let res = await indexServe.classList({
+                id: this.principal[this.index].id,
+                page: this.principal[this.index].page
+            });
+    
+            this.principal[this.index].content = res.data;
+            this.principal[this.index].total_page = res.total_page
+            console.log(this.principal);
+    
+            item(
+                _(".swiper-wrapper .swiper-slide ul")[this.index],
+                this.principal[this.index].content
+            )
+        }
+        this.principal=getItem("principal")
+        console.log(getItem("principal"))
+        if (type == 'click') {
+            if (this.principal[this.index].content.length == 0) {
+                loadData()
+
+            }
+        } else {
+            loadData()
+        }
+
+        
+    }
+
+    async getIndex() {
+        let res = await indexServe.index();
+        console.log("index: ",res);
+
+        item(_(".swiper-wrapper .swiper-slide ul")[0],res.list)
+    }
+
+}
+
+new Index()

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/info.js

@@ -0,0 +1,33 @@
+class Info {
+    constructor() {
+        this.page = 0;
+        this.pageRes = []
+        header(
+            query("title"), 
+            '<i class="iconfont icon-xin"></i>'
+        )
+        this.getInfo()
+    }
+
+    async getInfo() {
+        let res = await indexServe.info({
+            id: query("id"),
+            // quantity: parseInt(query("quantity") / 20) 
+            quantity: query("quantity")
+        });
+        
+        for (let i = 0; i < res.length; i+=10) {
+            this.pageRes.push(res.slice(i, i + 10))
+        }
+        this.renderPage()
+    }
+
+    renderPage() {
+        $(".content").html(
+            this.pageRes[this.page].map(v => {
+                return `<img src="${v}" alt="">`
+            })
+        )
+    }
+}
+new Info()

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/institution.js

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

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/model.js

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

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/page/my.js

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

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/serve/index.js

@@ -0,0 +1,63 @@
+class IndexServe {
+
+    async info(data = {}, headers = {}) {
+        let http = new Http();
+        let res =  await http.get({
+            url: config.urlList.info,
+            data,
+            headers
+        });
+        http = null;
+        return res;
+    }
+
+    async classList(data = {}, headers = {}) {
+        let http = new Http();
+        let res =  await http.get({
+            url: config.urlList.classList,
+            data,
+            headers
+        });
+        http = null;
+        return res;
+    }
+
+    async index(data = {}, headers = {}) {
+        let http = new Http();
+        let res = await http.get({
+            url: config.urlList.index,
+            data,
+            headers
+        });
+        http = null;
+        return res;
+    }
+
+    async type(data = {}, headers = {}) {
+        let http = new Http();
+        let res =  await http.get({
+            url: config.urlList.type,
+            data,
+            headers
+        });
+        res.principal.unshift({
+            id: -1,
+            page: -1,
+            title: "首页"
+        });
+        res.principal.forEach(v => {
+            v.content = []
+            v.total_page = 0
+        });
+
+        res.additional.forEach(v => {
+            v.content = []
+            v.total_page = 0
+        });
+        http = null;
+        return res;
+    }
+
+}
+
+var indexServe = new IndexServe()

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/utils/index.js

@@ -0,0 +1,196 @@
+class Utils {
+
+    footer() {
+        var curretHref = location.href;
+        var footerList = [
+            { title: '首页', icon: 'home', href: 'index.html' },
+            { title: '机构', icon: 'jigou', href: 'institution.html' },
+            { title: '模特', icon: 'me', href: 'model.html' },
+            { title: '我的', icon: 'wo', href: 'my.html' },
+        ];
+
+        var html = `
+        <ul class="footer">
+            ${footerList.map(v => {
+            return `
+                    <li class="${curretHref.includes(v.href) ? 'active' : ''}">
+                        <a href="./${v.href}">
+                            <i class="iconfont icon-${v.icon}"></i>
+                            <p>${v.title}</p>
+                        </a>
+                    </li>
+                    `
+        })
+            }
+        </ul>
+        `;
+        $("body").insertAdjacentHTML("beforeend", html)
+    }
+
+    header(title = "", like = "") {
+        $("body").html(`
+            <div class="header_pub">
+                <div class="left">
+                    <i class="iconfont icon-back1"></i>
+                    <span class="ellipsis">${title}</span>
+                </div>
+                ${ like }
+                
+            </div>
+        `);
+
+        $(".header_pub .icon-back1").tap(() => {
+            history.back()
+        })
+    }
+
+    item(dom, data) {
+        data.forEach((v,i) => {
+            dom.html(`
+                <li>
+                    <a href="./info.html?id=${v.id}&quantity=${v.shuliang || v.total}&title=${encodeURIComponent(v.title)}">
+                        <div class="img">
+                            <img src="${v.img_src || v.preview}" alt="">
+                            <span>${v.shuliang || v.total}P</span>
+                        </div>
+                        <div class="title ellipsis">${v.title}</div>
+                        <div class="model ellipsis">${v.user || `模特：${(v?.renwulist.length != 0 ? v.renwulist[0].name : '')}`}</div>
+                        <div class="jg ellipsis">${v.source || `机构：${v.jigoulist[0].name}`}</div>
+                    </a>
+                    <div class="tag">
+                      ${
+                        (v.biaoqianlist || v.tags).map(item => {
+                            return `<a href="">${item.name || item.title}</a>`
+                         })
+                       }
+                    </div>
+                </li>
+            `)
+        })
+    }
+
+    $(className) {
+        return document.querySelector(className);
+    }
+
+    _(className) {
+        return document.querySelectorAll(className);
+    }
+
+
+    click(className, callback, type = "click",) {
+        $(`${className}`)[`on${type}`] = (event) => {
+            callback(event)
+        }
+    }
+
+    query(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null)
+            return decodeURIComponent(r[2]);
+        return null;
+    }
+
+    setItem(key, value) {
+        localStorage.setItem(
+            key, 
+            value.constructor == Object || value.constructor == Array 
+              ? JSON.stringify(value) 
+              : value 
+        )
+    }
+
+    getItem(key) {
+        return localStorage.getItem(key) == null ? false : JSON.parse(localStorage.getItem(key))
+    }
+
+    customMethods() {
+
+        NodeList.prototype.tap = function (callback) {
+            this.forEach((v, i) => bindElementClick(v, callback, i))
+            
+        }
+
+        Element.prototype.tap = function (callback) {
+            bindElementClick(this, callback)
+        }
+
+        var bindElementClick = (v, callback, i) => {
+            v.onclick = (e) => {
+                callback({ v, i, e })
+                
+            }
+        }
+
+
+
+        Element.prototype.html = function (html = "") {
+            if (html.length == 0) {
+                this.innerHTML = ""
+            } else {
+                this.innerHTML += html
+            }
+        }
+
+        Element.prototype.addClass = function (className) {
+            this.classList.add(className)
+            return this;
+        }
+
+
+        Element.prototype.siblings = function () {
+            return Array.from(this.parentElement.children).filter(v => v != this)
+        }
+
+        Array.prototype.removeClass = function (className) {
+            this.forEach(v => bindElementRemoveClass(v, className))
+            return this;
+        }
+
+        Element.prototype.removeClass = function (className) {
+            bindElementRemoveClass(this, className)
+            return this;
+        }
+
+        var bindElementRemoveClass = (v, className) => {
+            v.classList.remove(className)
+        }
+
+        Element.prototype.none = function () {
+            this.style.display = "none"
+            return this;
+        }
+
+        Element.prototype.show = function () {
+            this.style.display = "block"
+            return this;
+        }
+
+        Element.prototype.toggle = function () {
+            if (this.style.display == "none") {
+                this.style.display = "block"
+            } else {
+                this.style.display = "none"
+            }
+        }
+
+        Array.prototype.map = function (callback) {
+            let result = []
+            for (let index = 0; index < this.length; index++) {
+                result.push(callback(this[index], index, this))
+            }
+            return result.toString().replaceAll(",", "");
+        }
+    }
+
+
+}
+
+let { 
+    $, _, click, 
+    customMethods, query, footer,
+    item, header, setItem, getItem
+} = new Utils()
+customMethods()
+

历届学生/front-end-team-11/项目开发/上课项目/枸杞社/js/utils/rem.js

@@ -0,0 +1,10 @@
+((w, d) => {
+    function setSize() {
+        var screenWidth = d.documentElement.clientWidth;
+        var currentFontSize = screenWidth * 100 / 750;
+        d.documentElement.style.fontSize = currentFontSize + 'px';
+    }
+    w.addEventListener('resize', setSize);
+    w.addEventListener('pageShow', setSize)
+    w.addEventListener('DOMContentLoaded', setSize)
+})(window, document)