first commit

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

@@ -0,0 +1,105 @@
+class AjAX {
+
+    constructor() {
+        this.xhr = new XMLHttpRequest();
+    }
+
+
+    /**
+     * 
+     * @param {*} params 
+     * url: 字符串 请求地址，
+     * data: 对象
+     */
+    get(params) {
+        return new Promise((success, error) => {
+            var record = ""
+            for (const key in params.data) {
+                record += `&${key}=${params.data[key]}`
+            }
+            record = record.replace("&", "?")
+            console.log(`${config.checkStage()}${params.url}${record}`);
+            this.xhr.open("GET", `${config.checkStage()}${params.url}${record}`)
+            this.xhr.send();
+            this.readystatechange(success, error)
+        })
+    }
+
+    post(params) {
+        console.log(params);
+        return new Promise((success, error) => {
+            this.xhr.open("POST", `${config.checkStage()}${params.url}`)
+            this.xhr.setRequestHeader("Content-type","application/json");
+            this.xhr.send(JSON.stringify(params.data));
+            this.readystatechange(success, error)
+        })
+    }
+
+
+    readystatechange(success, error) {
+        this.xhr.onreadystatechange = () => {
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    var res = JSON.parse(this.xhr.responseText);
+
+                    // 业务逻辑状态码的判断
+                    switch (res.status) {
+                        case 200:
+                            success(res.result || res.data)
+                            break;
+                        case 404:
+                            alert(res.message)
+                            throw new Error(res.message)
+                            break;
+                        default:
+                            break;
+                    }
+                } else {
+                    error(this.xhr)
+                }
+            }
+        }
+    }
+
+}
+
+// a.get({
+//     url: '/index/class',
+    // data: {
+    //     type: 1,
+    //     page: 1
+    // },
+//     success: (res) => {
+//         console.log("拿到的数据为：", res);
+//     },
+//     error: (err) => {
+//         console.log("请求出错了：", err);
+//     }
+// });
+
+// function test() {
+//     return new Promise(function (success, error) {
+//         var a = 1
+//         setTimeout(() => {
+//             a += 1;
+//             success(a)
+//         }, 3000)
+//     })
+// }
+
+// var dd = async () => {
+//     // test()
+//     //     .then((res) => {
+//     //         console.log(res);
+//     //     })
+//     //     .catch()
+//     var num = await test();
+//     console.log(num);
+// }
+
+// dd()
+
+// 回调地狱
+// 异步返回值   回调   promise
+// 系统级别判断
+// await indexService.class({ type: 1, page: 1 })

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

@@ -0,0 +1,47 @@
+var config = {
+    // 开发阶段的请求基地址
+    devBaseUrl: 'http://127.0.0.1:3000/api/json',
+
+    // 测试阶段的请求基地址
+    testBaseUrl: 'http://127.0.0.1:3000/test/api',
+
+    // 上线阶段的请求基地址
+    prodBaseUrl: 'http://127.0.0.1:3000/prod/api',
+
+    stage: "dev", // dev test prod
+    
+    apiList: {
+        type: '/class', // 请求分类
+        classList: '/classList', // 请求分类列表
+        index: '/index',
+        info: '/agent/info',
+        classListt:"/classList",
+        search:'/agent/search',
+        modelList: '/modelList', 
+        mechanism:"/mechanism"
+    },
+
+    // 底部导航
+    footerArr: [
+        { title: '首页', icon: 'icon-home', path: 'index.html' },
+        { title: '机构', icon: 'icon-jigou', path: 'mechanism.html'  },
+        { title: '模特', icon: 'icon-me', path: 'model.html'  },
+        { title: '我的', icon: 'icon-wo', path: 'my.html'  },
+    ],
+
+
+    checkStage: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl;
+                break;
+
+            case "test":
+                return this.testBaseUrl;
+                break;
+            case "prod":
+                return this.prodBaseUrl;
+                break;
+        }
+    }
+}

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/lib/PhotoSwipeFromDOM.js

@@ -0,0 +1,201 @@
+var initPhotoSwipeFromDOM = function(gallerySelector) {
+
+    // parse slide data (url, title, size ...) from DOM elements 
+    // (children of gallerySelector)
+    var parseThumbnailElements = function(el) {
+        var thumbElements = el.childNodes,
+            numNodes = thumbElements.length,
+            items = [],
+            figureEl,
+            linkEl,
+            size,
+            item;
+
+        for(var i = 0; i < numNodes; i++) {
+
+            figureEl = thumbElements[i]; // <figure> element
+
+            // include only element nodes 
+            if(figureEl.nodeType !== 1) {
+                continue;
+            }
+
+            linkEl = figureEl.children[0]; // <a> element
+
+            size = linkEl.getAttribute('data-size').split('x');
+
+            // create slide object
+            item = {
+                src: linkEl.getAttribute('href'),
+                w: parseInt(size[0], 10),
+                h: parseInt(size[1], 10)
+            };
+
+
+
+            if(figureEl.children.length > 1) {
+                // <figcaption> content
+                item.title = figureEl.children[1].innerHTML; 
+            }
+
+            if(linkEl.children.length > 0) {
+                // <img> thumbnail element, retrieving thumbnail url
+                item.msrc = linkEl.children[0].getAttribute('src');
+            } 
+
+            item.el = figureEl; // save link to element for getThumbBoundsFn
+            items.push(item);
+        }
+
+        return items;
+    };
+
+    // find nearest parent element
+    var closest = function closest(el, fn) {
+        return el && ( fn(el) ? el : closest(el.parentNode, fn) );
+    };
+
+    // triggers when user clicks on thumbnail
+    var onThumbnailsClick = function(e) {
+        e = e || window.event;
+        e.preventDefault ? e.preventDefault() : e.returnValue = false;
+
+        var eTarget = e.target || e.srcElement;
+
+        // find root element of slide
+        var clickedListItem = closest(eTarget, function(el) {
+            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
+        });
+
+        if(!clickedListItem) {
+            return;
+        }
+
+        // find index of clicked item by looping through all child nodes
+        // alternatively, you may define index via data- attribute
+        var clickedGallery = clickedListItem.parentNode,
+            childNodes = clickedListItem.parentNode.childNodes,
+            numChildNodes = childNodes.length,
+            nodeIndex = 0,
+            index;
+
+        for (var i = 0; i < numChildNodes; i++) {
+            if(childNodes[i].nodeType !== 1) { 
+                continue; 
+            }
+
+            if(childNodes[i] === clickedListItem) {
+                index = nodeIndex;
+                break;
+            }
+            nodeIndex++;
+        }
+
+
+
+        if(index >= 0) {
+            // open PhotoSwipe if valid index found
+            openPhotoSwipe( index, clickedGallery );
+        }
+        return false;
+    };
+
+    // parse picture index and gallery index from URL (#&pid=1&gid=2)
+    var photoswipeParseHash = function() {
+        var hash = window.location.hash.substring(1),
+        params = {};
+
+        if(hash.length < 5) {
+            return params;
+        }
+
+        var vars = hash.split('&');
+        for (var i = 0; i < vars.length; i++) {
+            if(!vars[i]) {
+                continue;
+            }
+            var pair = vars[i].split('=');  
+            if(pair.length < 2) {
+                continue;
+            }           
+            params[pair[0]] = pair[1];
+        }
+
+        if(params.gid) {
+            params.gid = parseInt(params.gid, 10);
+        }
+
+        return params;
+    };
+
+    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
+        var pswpElement = document.querySelectorAll('.pswp')[0],
+            gallery,
+            options,
+            items;
+
+        items = parseThumbnailElements(galleryElement);
+        // define options (if needed)
+        options = {
+
+            // define gallery index (for URL)
+            galleryUID: galleryElement.getAttribute('data-pswp-uid'),
+
+            getThumbBoundsFn: function(index) {
+                // See Options -> getThumbBoundsFn section of documentation for more info
+                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
+                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+                    rect = thumbnail.getBoundingClientRect(); 
+
+                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
+            }
+
+        };
+
+        // PhotoSwipe opened from URL
+        if(fromURL) {
+            if(options.galleryPIDs) {
+                // parse real index when custom PIDs are used 
+                // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
+                for(var j = 0; j < items.length; j++) {
+                    if(items[j].pid == index) {
+                        options.index = j;
+                        break;
+                    }
+                }
+            } else {
+                // in URL indexes start from 1
+                options.index = parseInt(index, 10) - 1;
+            }
+        } else {
+            options.index = parseInt(index, 10);
+        }
+
+        // exit if index not found
+        if( isNaN(options.index) ) {
+            return;
+        }
+
+        if(disableAnimation) {
+            options.showAnimationDuration = 0;
+        }
+
+        // Pass data to PhotoSwipe and initialize it
+        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
+        gallery.init();
+    };
+
+    // loop through all gallery elements and bind events
+    var galleryElements = document.querySelectorAll( gallerySelector );
+
+    for(var i = 0, l = galleryElements.length; i < l; i++) {
+        galleryElements[i].setAttribute('data-pswp-uid', i+1);
+        galleryElements[i].onclick = onThumbnailsClick;
+    }
+
+    // Parse URL and open gallery if it contains #&pid=3&gid=1
+    var hashData = photoswipeParseHash();
+    if(hashData.pid && hashData.gid) {
+        openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
+    }
+};

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/lib/onscroll.js

@@ -0,0 +1,17 @@
+function OnScrollBottom(className, callback, type = "2") {
+    if (type == 1) {
+        $(className).onscroll = function () {
+            if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
+                callback()
+            }
+        };
+    } else {
+        _(className).forEach((v, i) => {
+            v.onscroll = function () {
+                if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
+                    callback()
+                }
+            };
+        })
+    }
+}

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/lib/rem.js

@@ -0,0 +1,11 @@
+window.onload = function () {
+    getRem(750, 100)
+};
+window.onresize = function () {
+    getRem(750, 100)
+};
+function getRem(pwidth, prem) {
+    var html = document.getElementsByTagName("html")[0];
+    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
+    html.style.fontSize = oWidth / pwidth * prem + "px";
+}

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/lib/swiper.js

@@ -0,0 +1,331 @@
+(() => {
+    /**
+     * 构造函数
+     * @param {*} ParentElement 父节点的选择器名称
+     * @param {*} Configuration 插件的自定义设置项
+     */
+    function Swiper(ParentElement, Configuration) {
+        // 默认参数
+        // slideChangeTransitionStart【完成】
+        // slideTo【完成】
+        this.defaultConf = {
+            reverse: false,
+            timer: '', // 保存自动播放的定时器
+            ParentElement: '.swiper-container',
+            wrapper: '.swiper-wrapper',
+            slide: '.swiper-slide',
+            config: {
+                loop: false, // 是否开启循环播放【完成】
+                time: 1,     // 自动播放的间隔事件【完成】
+                speed: 300,  // 切换轮播图时候用的时间【完成】
+                grabCursor: false, // 鼠标放到轮播图上是否显示为 小手【完成】
+                initialSlide: 0, // 默认显示第一个【完成】
+                auto: false, // 是否开启自动播放【完成】
+            },
+            // 小圆点的父标签选择器名称
+            pagination: {
+                el: '.swiper-pagination',
+            },
+            navigation: {
+                nextEl: '.swiper-button-next', // 下一页
+                prevEl: '.swiper-button-prev', // 上一页
+            },
+        }
+
+        this.defaultConf.ParentElement = ParentElement || this.defaultConf.ParentElement;
+        this.defaultConf.config.loop = Configuration.loop || this.defaultConf.config.loop;
+        this.defaultConf.config.time = Configuration.time || this.defaultConf.config.time;
+        this.defaultConf.config.speed = Configuration.speed || this.defaultConf.config.speed;
+        this.defaultConf.config.grabCursor = Configuration.grabCursor || this.defaultConf.config.grabCursor;
+        this.defaultConf.config.initialSlide = Configuration.initialSlide || this.defaultConf.config.initialSlide;
+        this.defaultConf.config.auto = Configuration.auto || this.defaultConf.config.auto;
+        this.defaultConf.wrapper = Configuration.wrapper || this.defaultConf.wrapper;
+        this.defaultConf.slide = Configuration.slide || this.defaultConf.slide;
+
+        this.slideArr = this._(`${this.defaultConf.wrapper} ${this.defaultConf.slide}`);
+
+        // 最外层 swiper-container 宽度
+        this.f = this.$(this.defaultConf.ParentElement).offsetWidth;
+
+        // 判断小圆点
+        if (Configuration.hasOwnProperty("pagination")) {
+            this.defaultConf.pagination.el = Configuration.pagination.el;
+            this.RenderDot()
+        }
+
+        // 判断使用自定义前进后退按钮
+        if (Configuration.hasOwnProperty("navigation")) {
+            this.RenderNavigation()
+            //判断下一页按钮的名称是否自定义
+            if (Configuration.navigation.hasOwnProperty("nextEl")) {
+                this.defaultConf.navigation.nextEl = Configuration.navigation.nextEl;
+            }
+            //判断上一页按钮的名称是否自定义
+            if (Configuration.navigation.hasOwnProperty("prevEl")) {
+                this.defaultConf.navigation.prevEl = Configuration.navigation.prevEl;
+            }
+        }
+
+        this.UserConfig = Configuration
+        this.init()
+    }
+
+
+    // 类的方法
+    Swiper.prototype = {
+        init: function () {
+            this.SetWrapperWidth();
+            this.defaultConf.config.auto ? this.AutoPlay() : '';
+            this.initSwiperSlide()
+        },
+        // 设置swiper-slide父类的宽度
+        SetWrapperWidth: function () {
+
+            // 计算swiper-slide的宽度
+            this.slideArr.forEach(v => v.style.width = `${this.f}px`)
+            this.$(this.defaultConf.wrapper).style = `
+                width: ${this.f * this.slideArr.length}px;
+                left: -${this.f * this.defaultConf.config.initialSlide}px;
+                transition: all ease ${this.defaultConf.config.speed / 1000}s;
+                cursor: ${this.defaultConf.config.grabCursor ? 'pointer' : ''} ;
+            `
+        },
+
+        /**
+         * 注册移动端滑动
+         */
+        initSwiperSlide: function () {
+            var fa = this.$(this.defaultConf.ParentElement),
+                startX = 0,
+                startY = 0;
+
+            fa.addEventListener('touchstart', function (e) {
+                e.stopPropagation()
+                startX = e.targetTouches[0].pageX
+                startY = e.targetTouches[0].pageY
+            })
+
+            var getDirection = function (startx, starty, endx, endy) {
+                // 获得角度
+                var getAngle = function(angx, angy) {
+                    return Math.atan2(angy, angx) * 180 / Math.PI;
+                };
+
+                var angx = endx - startx;
+                var angy = endy - starty;
+                var result = 0;
+
+                // 如果滑动距离太短
+                if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
+                    return result;
+                }
+
+                var angle = getAngle(angx, angy);
+                if (angle >= -135 && angle <= -45) {
+                    result = 1;
+                } else if (angle > 45 && angle < 135) {
+                    result = 2;
+                } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
+                    result = 3;
+                } else if (angle >= -45 && angle <= 45) {
+                    result = 4;
+                }
+
+                return result;
+            }
+
+            fa.addEventListener('touchmove', (e) => {
+                e.stopPropagation()
+                var endX = e.changedTouches[0].pageX;
+                var endY = e.changedTouches[0].pageY;
+                
+                var direction = getDirection(startX, startY, endX, endY);
+                if (direction == 3 || direction == 4) {
+                    var x = parseInt(endX - startX) - 40
+                    this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(${x}px,0px,0px)`;
+                }
+            });
+
+            fa.addEventListener('touchend', (e) => {
+                e.stopPropagation()
+                var endX = e.changedTouches[0].pageX;
+                var endY = e.changedTouches[0].pageY;
+
+                var direction = getDirection(startX, startY, endX, endY);
+
+                switch (direction) {
+                    case 0:
+                        // console.log("未滑动！");
+                        break;
+                    case 1:
+                        // console.log("向上！")
+                        break;
+                    case 2:
+                        // console.log("向下！")
+                        break;
+                    case 3:
+                        this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(0px,0px,0px)`;
+                        this.animation(-this.f)
+                        this.CallMethods()
+                        this.UserConfig.pagination && this.ChangeDotActive()
+                        // console.log("向左！")
+                        break;
+                    case 4:
+                        this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(0px,0px,0px)`;
+                        this.animation(this.f)
+                        this.CallMethods()
+                        this.UserConfig.pagination && this.ChangeDotActive()
+                        // console.log("向右滑动");
+                        break;
+                    default:
+                }
+            })
+        },
+
+        CallMethods() {
+            if (this.UserConfig.hasOwnProperty("on")) {
+                var TotalLeft = Math.abs(parseInt(this.$(this.defaultConf.wrapper).style.left));
+                index = TotalLeft / this.f;
+                // 实现调用用户传入的方法，返回下标给用户
+                this.UserConfig.on && this.UserConfig.on.slideChangeTransitionStart(index)
+            }
+        },
+
+        // 生成小圆点
+        RenderDot: function () {
+            this.slideArr.forEach((v, i) => {
+                this.$(this.defaultConf.pagination.el).innerHTML +=
+                    `
+                    <div class="swiper-dot ${i == 0 ? 'swiper-active' : ''}"></div>
+                `
+            });
+
+            var Dot = this._(`${this.defaultConf.pagination.el} .swiper-dot`);
+            Dot.forEach((v, i) => {
+                v.onclick = () => {
+                    this.UserConfig.pagination && this.ChangeDotActive(i)
+                    this.$(this.defaultConf.wrapper).style.left = `-${i * this.f}px`;
+                }
+            })
+        },
+
+        // 渲染左右前进后退按钮
+        RenderNavigation: function () {
+            var prev = this.$(this.defaultConf.navigation.prevEl);
+            var next = this.$(this.defaultConf.navigation.nextEl);
+            prev.innerText = "<";
+            next.innerText = ">";
+            this.BindNavigationClick(prev, next)
+        },
+
+        // 为上一页下一页按钮绑定切换事件
+        BindNavigationClick() {
+            // var a = this
+            // 下一页
+            this.$(this.defaultConf.navigation.nextEl).onclick = () => {
+                this.animation(-this.f)
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }
+            // 上一页
+            this.$(this.defaultConf.navigation.prevEl).onclick = () => {
+                this.animation(this.f)
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }
+        },
+
+        // 切换动画
+        animation(offset) {
+            var swiperWrapper = this.$(this.defaultConf.wrapper);
+            var y = parseInt(swiperWrapper.style.left) + offset,
+                max = -(this.f * (this.slideArr.length - 1));
+
+            // 如果时最后一张图    
+            if (y < max) {
+                if (this.defaultConf.config.loop) {
+                    swiperWrapper.style.left = "0px";
+                } else if (this.defaultConf.config.auto) {
+                    this.defaultConf.reverse = true
+                    this.animation(this.f)
+                }
+                return;
+
+                // 判断是不是第一张图    
+            } else if (y > 0) {
+                if (this.defaultConf.config.loop == false && this.defaultConf.config.auto) {
+                    this.defaultConf.reverse = false
+                    swiperWrapper.style.left = `${y - this.f * 2}px`
+                }
+                if (this.defaultConf.config.loop) {
+                    swiperWrapper.style.left = `${max}px`
+                }
+                return
+            } else {
+                if (this.defaultConf.config.loop == false
+                    && this.defaultConf.config.auto
+                    && this.defaultConf.reverse) {
+                    swiperWrapper.style.left = `${y}px`
+                } else {
+                    swiperWrapper.style.left = `${y}px`
+                }
+
+            }
+        },
+
+        ChangeDotActive(type = null) {
+            var Dot = this._(`${this.defaultConf.pagination.el} .swiper-dot`);
+            var index = "";
+            if (type == null) {
+                var TotalLeft = Math.abs(parseInt(this.$(this.defaultConf.wrapper).style.left));
+                index = TotalLeft / this.f;
+            } else {
+                index = type;
+            }
+
+            // 实现调用用户传入的方法，返回下标给用户
+            this.CallMethods()
+
+            // 清除所有的激活样式
+            Dot.forEach(val => val.className = "swiper-dot");
+            // 为你点击的li加激活样式
+            Dot[index].className = "swiper-dot swiper-active";
+        },
+
+        AutoPlay() {
+            this.defaultConf.timer = setInterval(() => {
+                if (this.defaultConf.config.loop == false
+                    && this.defaultConf.config.auto
+                    && this.defaultConf.reverse) {
+                    this.animation(this.f)
+                } else {
+                    this.animation(-this.f)
+                }
+                this.UserConfig.pagination && this.ChangeDotActive()
+            }, this.defaultConf.config.time * 1000)
+
+            this.$(this.defaultConf.ParentElement).onmouseover = function () {
+                clearInterval(this.defaultConf.timer)
+            }
+
+            this.$(this.defaultConf.ParentElement).onmouseout = () => {
+                this.AutoPlay()
+            }
+        },
+
+        // 通过js调用此方法，实现轮播图的切换
+        slideTo(index) {
+            this.$(this.defaultConf.wrapper).style.left = `-${index * this.f}px`;
+            this.UserConfig.pagination && this.ChangeDotActive()
+        },
+        $: function (className) {
+            return document.querySelector(className)
+        },
+        _: function (className) {
+            return document.querySelectorAll(className)
+        }
+    }
+
+
+    window.swiper = Swiper
+
+
+})()

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

@@ -0,0 +1,7 @@
+class about{
+    constructor () {
+        header("关于我们")
+    }
+
+}
+new about()

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

@@ -0,0 +1,46 @@
+class collect{
+    constructor() {
+    header("我的收藏",'<i class="iconfont icon-xin"></i><i class="iconfont icon-home"></i>')
+     this.collect = JSON.parse(localStorage.getItem("likeArr")) == null
+         ? []
+         : JSON.parse(localStorage.getItem("likeArr"));
+ 
+     this.GetLikeArr()
+ }
+ 
+ GetLikeArr() {
+     if (this.collect == null || this.collect.length == 0) {
+         document.querySelector(".content_list ul").innerHTML = "";
+         document.querySelector(".content_list ul").innerHTML =
+             `
+         <div class="null">
+             <i class="iconfont icon-wushuju"></i>
+             <p>暂无收藏</p>
+         </div>
+         `
+     } else {
+         document.querySelector(".content_list ul").innerHTML = "";
+         this.collect.forEach(v => {
+             document.querySelector(".content_list ul").innerHTML +=
+                 `
+                 <li>
+                     <div class="content_img">
+                         <a href="./info.html?id=${v.id}">
+                             <img src="${v.img_src}">
+                         </a>
+                     </div>
+                     <div class="content_text">
+                         <a href="./info.html?id=${v.id}">
+                             <p class="tua">${v.title}</p>
+                         </a>
+                     </div>
+                 </li>
+             `
+         });
+     }
+ }
+ 
+ }
+ 
+ new collect()
+ 

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

@@ -0,0 +1,140 @@
+class index {
+    constructor() {
+        this.principal = [];
+        this.index = localStorage.getItem("index") == null ? 0 : localStorage.getItem("index");
+        footer()
+        this.getIndexData();
+        this.GetType();
+    }
+
+    // 获取横向分类的数据
+    async GetType() {
+        var res;
+        // 第一次访问app，本地没有缓存的principal分类，所以发送请求去获取
+        if (localStorage.getItem("principal") == null) {
+            var data = await indexServe.type();
+            console.log("data === ", data);
+            res = data.principal
+            localStorage.setItem("principal", JSON.stringify(data.principal))
+            localStorage.setItem("additional", JSON.stringify(data.additional))
+        } else {
+            res = JSON.parse(localStorage.getItem("principal"))
+        }
+       
+        this.principal = res;
+
+        this.principal.unshift({
+            id: -1,
+            page: 0,
+            title: "首页",
+            content: []
+        })
+
+
+        this.principal.forEach((v, i) => {
+            v.content = [];
+            // 渲染横向菜单
+            $(".header_menu ul").innerHTML += `<li class="${i == this.index ? 'active_menu' : ''}">${v.title}</li>`;
+
+            // 生成横向的轮播图
+            if (i != 0) {
+                $(".swiper-container .swiper-wrapper").innerHTML += `<div class="swiper-slide item_list"></div>`
+            }
+        });
+
+        OnScrollBottom(".swiper-wrapper .swiper-slide", async () => {
+            if (index != 0) {
+                this.principal[this.index].page++;
+                if (this.principal[this.index].page <= this.principal[this.index].total_page) {
+                    await this.GetClassList("more")
+                    if (this.principal[this.index].page == this.principal[this.index].total_page) {
+                        _(".swiper-wrapper .swiper-slide")[this.index].innerHTML += `<p class="nodata">...暂无数据...</p>`
+                    }
+                }
+                
+            }
+        })
+
+        console.log(this.principal);
+        this.initSwiper();
+    }
+
+    initSwiper() {
+       
+
+        // 改变激活样式的封装
+        function changeAction(index) {
+            _(".header_menu ul li").forEach(v => {
+                v.className = ""
+            });
+            _(".header_menu ul li")[index].className = "active_menu"
+        }
+
+        var page = new swiper(".swiper-container", {
+            time: 3,
+            on: {
+                slideChangeTransitionStart: (index) => {
+                    this.index = index;
+                    localStorage.setItem("index", this.index)
+                    changeAction(index)
+                    this.GetClassList()
+                }
+            }
+        });
+
+        _(".header_menu ul li").forEach((v, i) => {
+            v.onclick = () => {
+                this.index = i;
+                localStorage.setItem("index", this.index)
+                page.slideTo(i);
+                changeAction(i);
+                this.GetClassList()
+            }
+        });
+
+        if (localStorage.getItem("index") != null) {
+            this.GetClassList()
+            page.slideTo(this.index);
+        }
+    }
+
+    // type click 表示点击或者滑动
+    //      more  表示滚动加载数据
+    async GetClassList(type = "click") {
+        var getData = async () => {
+            var res = await indexServe.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;
+            item(res.data, _(".swiper-wrapper .swiper-slide")[this.index])
+
+        }
+        if (this.index != 0) {
+            if (type == "click") {
+                if (this.principal[this.index].content == 0) { 
+                   await getData()
+                }
+            } else {
+                await getData()
+            }
+        }
+
+
+    }
+
+
+    async getIndexData() {
+        var res = await indexServe.index();
+        item(res.newest.data, $(".newest"))
+        item(res.recommended.data, $(".recommended"))
+    }
+}
+
+new index()

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

@@ -0,0 +1,70 @@
+class info {
+    constructor() {
+        this.likeArr = localStorage.getItem("likeArr") == null ? [] : JSON.parse(localStorage.getItem("likeArr"))
+        this.GetInfo()
+    }
+
+
+    async GetInfo() {
+        var res = await indexServe.info({
+            id: $_GET("id")
+        });
+
+        console.log(res);
+
+        header(res.title, '<i class="like iconfont icon-xin"></i>');
+
+        var isLike = this.likeArr.filter(v => v.id == res.id);
+
+        if (isLike.length != 0) {
+            $(".like").classList.add("icon-aixin")
+            $(".like").classList.remove("icon-xin")
+        }
+
+
+        $(".like").onclick = () => {
+
+            var isHave = this.likeArr.filter(v => v.id == res.id);
+
+            // 表示已经收藏
+            if (isHave.length != 0) {
+                this.likeArr = this.likeArr.filter(v => v.id != res.id)
+                // 表示未收藏    
+            } else {
+                this.likeArr.push({
+                    id: res.id,
+                    title: res.title,
+                    img_src: res.img_src
+                });
+            }
+
+            localStorage.setItem("likeArr", JSON.stringify(this.likeArr))
+
+            $(".like").classList.toggle("icon-xin")
+            $(".like").classList.toggle("icon-aixin")
+        }
+
+        res.imgs.forEach(v => {
+            console.log("111");
+
+            var img = new Image();
+            img.src = v;
+            img.onload = function () {
+                $(".imgList").innerHTML += `
+                <figure >
+                    <a href="${v}" data-size="${img.width}x${img.height}">
+                        <img src="${v}" alt="${res.title}" />
+                    </a>
+                    <figcaption itemprop="caption description">${res.title}</figcaption>
+                </figure>
+                `
+            }
+
+        });
+
+        initPhotoSwipeFromDOM(".imgList")
+
+    }
+}
+
+new info()

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

@@ -0,0 +1,36 @@
+class mechanism{
+    constructor () {
+        header("机构")
+        footer()
+        this.mechanismdo()
+    }
+    async mechanismdo() {
+        var res = await indexServe.mechanism();
+        mechanismList(res,$(".content_theme1"))
+        console.log(res)
+    }
+
+}
+
+new mechanism()
+
+// class search {
+//     constructor() {
+//         this.search_header()
+//     }
+//     search_header() {
+//         $(".search_input .icon-back1").onclick = () => history.back()
+//         var searchVale
+//         $(".search_input .icon-search").onclick = async () => {
+//             searchVale = $(".search_input .search_msg").value
+//             var res = await indexServe.search({
+//                 "keyword": searchVale
+//             });
+//             console.log(res)
+//             item(res,$(".search_list"))
+            
+//         }
+//     }
+// }
+
+// new search

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

@@ -0,0 +1,8 @@
+class model{
+    constructor () {
+        footer()
+
+    }
+}
+
+new model()

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

@@ -0,0 +1,74 @@
+class model_info {
+    constructor() {
+        this.GetModelInfo()
+    }
+    async GetModelInfo() {
+        var res = await indexServe.modelList({
+
+            id: $_GET("id"),
+            page: 0
+            
+        })
+        header(res.model_info.name)
+        console.log(res)
+      
+        document.querySelector(".model_info_header").innerHTML = `
+            <img src="${res.model_info.portrait}" alt="${res.model_info.name}">
+            <div class="right_text">
+                <p>${res.model_info.name}</p>
+                <span>${res.model_info.explain}</span>
+            </div>
+        `
+
+        document.querySelector(".tazuop .title").innerText = "她的作品"
+        res.data.forEach(v => {
+            document.querySelector(".tazuop ul").innerHTML+=
+            `
+                <li>
+                    <div class="newest_img">
+                        <a href="./info.html?id=${v.id}">
+                            <img src="${v.preview}" alt="${v.title}">
+                        </a>
+                        <span>${v.total}P</span>
+                    </div>
+                    <div class="newest_text">
+                        <a href="./info.html?id=${v.id}">
+                            <p class="t">${v.title}</p>
+                            <p class="source">${v.source}</p>
+                        </a>
+                        <div class="tags">
+                        ${
+                            (v.tags.map((t) => {
+                                return `<div class="tags_item"><a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a></div>`
+                            })).toString().replace(/,/ig, " ")
+                        }
+                        </div>
+                    </div>
+                </li>
+            `
+        });
+
+        
+        document.querySelector(".similar .title").innerText = "类似模特"
+        res.similar.forEach((v)=>{
+            document.querySelector(".similar .model_list").innerHTML+= `
+                <div class="item">
+                    <div class="top">
+                        <img src="${v.preview}" alt="${v.title}">
+                        <span>${v.total}</span>
+                    </div>
+                    <p>${v.title}</p>
+                </div>
+            `
+        })
+        var items = document.querySelectorAll(".similar .model_list .item")
+        items.forEach((v,i)=>{
+            v.onclick = function () {
+                location.href = `model_info.html?id=${res.similar[i].id}&t=${res.similar[i].title}`
+            }
+        })
+
+    }
+
+    }
+new model_info()

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

@@ -0,0 +1,8 @@
+class my{
+    constructor () {
+        footer()
+
+    }
+}
+
+new my()

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

@@ -0,0 +1,20 @@
+class search {
+    constructor() {
+        this.search_header()
+    }
+    search_header() {
+        $(".search_input .icon-back1").onclick = () => history.back()
+        
+        $(".search_input .icon-search").onclick = async () => {
+            $(".search_list").innerHTML=""
+            var res = await indexServe.search({
+                "keyword": $(".search_input .search_msg").value
+            });
+            console.log(res)
+            item(res,$(".search_list"))
+            
+        }
+    }
+}
+
+new search

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

@@ -0,0 +1,43 @@
+class taglist {
+
+    constructor() {
+        this.page = 0
+        this.gettaglist();
+        header(decodeURIComponent($_GET("title")))
+
+    }
+
+    async gettaglist() {
+        var res = await indexServe.taglist({
+            id: $_GET("id"),
+            page: this.page,
+        });
+
+        // this.total_page=1;
+        this.total_page = res.total_page;
+        item(res.data, $(".tagst"))
+        this.GETtp()
+    };
+
+    GETtp() {
+
+        window.onscroll = async () => {
+            var scrollTop = document.documentElement.scrollTop
+            var scrollHeight = document.documentElement.scrollHeight
+            var clientHeight = document.documentElement.clientHeight
+            if (parseInt(scrollHeight - scrollTop) == clientHeight) {
+                this.page++;
+                // console.log(this.page, "页数");
+                if (this.page <= this.total_page) {
+                    await this.gettaglist();
+                    if (this.page == this.total_page) {
+                        $(".tagst").innerHTML += `<p class="nodata">...暂无数据...</p>`
+                    }
+                }
+            }
+        }
+
+    };
+
+}
+new taglist()

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

@@ -0,0 +1,69 @@
+class typeClass {
+    constructor () {
+        this.principal = JSON.parse(localStorage.getItem("principal"));
+        this.additional = JSON.parse(localStorage.getItem("additional"));
+        header("分类管理")
+        this.initType()
+      
+    }
+
+
+    initType() {
+        // 已选分类
+        $(".you_chioose .chiooseWrap").innerHTML = ""
+        this.principal.forEach(v => {
+            $(".you_chioose .chiooseWrap").innerHTML += `<li>${v.title}</li>`
+        });
+
+
+      
+        // 未选分类
+        $(".chioose_list .chiooseWrap").innerHTML= ""
+        this.additional.forEach(v => {
+            $(".chioose_list .chiooseWrap").innerHTML += `<li>${v.title}</li>`
+        });
+
+        this.bindClick()
+       
+    }
+
+    bindClick() {
+        _(".you_chioose .chiooseWrap li").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.initType()
+            }
+        })
+
+        _(".chioose_list .chiooseWrap li").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("principal", JSON.stringify(this.principal))
+                localStorage.setItem("additional", JSON.stringify(this.additional))
+                
+                this.initType()
+            }
+        })
+    }
+}
+
+new typeClass()

历届学生/fontendsix/项目练习/上课项目/屁桃儿/js/service/indexService.js

@@ -0,0 +1,58 @@
+class IndexService {
+    async type(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.type,
+            data: params
+        });
+    }
+
+    async classList(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.classList,
+            data: params
+        });
+    }
+
+    async index(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.index,
+            data: params
+        });
+    }
+
+    async info(params) {
+        return await (new AjAX()).post({
+            url: config.apiList.info,
+            data: params
+        });
+    }
+    async taglist(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.classListt,
+            data: params
+        });
+    }
+
+    async search(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.search,
+            data: params
+        });
+    }
+
+    async mechanism(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.mechanism,
+            data: params
+        });
+    }
+    async modelList(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.modelList,
+            data: params
+        });
+    }
+}
+
+
+var indexServe = new IndexService()

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

@@ -0,0 +1,151 @@
+class Utils {
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+
+
+    footer() {
+        var currentPath = location.href;
+        var footerHtml = `
+        <ul class="footer">
+         ${config.footerArr.map((v, i) => {
+            return `
+                    <li class="${currentPath.includes(v.path) ? 'footer_active' : ''}">
+                        <a href="${v.path}">
+                            <i class="iconfont ${v.icon}"></i>
+                            <span>${v.title}</span>
+                        </a>
+                    </li>
+                `
+        }).toString().replaceAll(",", "")
+            }
+         </ul>
+        `;
+
+        $("body").insertAdjacentHTML("beforeend", footerHtml)
+    }
+
+    item(arr, father) {
+        var html = `
+        <ul>
+        ${arr.map((v, i) => {
+            return `
+              <li>
+                    <div class="newest_img">
+                        <a href="./info.html?id=${v.id}">
+                            <img  src="${v.preview || v.img_src}"
+                                alt="${v.title}">
+                        </a>
+                        <span>${v.total || v.shuliang}P</span>
+                    </div>
+                    <div class="newest_text">
+                        <a href="./info.html?id=${v.id}">
+                            <p class="t">${v.title}</p>
+                            ${
+                                v.hasOwnProperty("source")
+                                ? `<p class="source">${v.source}</p>`
+                                : ''
+                            }
+                        </a>
+                            ${v.hasOwnProperty("tags")
+                            ? `<div class="tags">
+                            ${v.tags.map(item => {
+                                return `
+                                            <div class="tags_item">
+                                        <a href="./tag_list.html?id=${item.id}&title=${item.title}">${item.title}</a>
+                                        </div>
+                                         `
+                            }).toString().replaceAll(",", "")
+                                }
+                            </div>`
+                            : ''
+                            }
+                    </div>
+                </li>
+              `;
+        }).toString().replaceAll(",", "")
+            }
+        </ul>
+        `;
+        father.innerHTML += html;
+    }
+
+    mechanismList(arr, father){
+        var html = `
+        <ul class="mechanism_list">
+        ${arr.map((v, i) => {
+            return `
+            <li>
+            <a href="./mechanism_info.html?id=${v.id}&t=${v.title}">
+                <p>${v.title}</p>
+                <span>${v.quantity}</span>
+            </a>
+        </li>
+              `;
+        }).toString().replaceAll(",", "")
+            }
+        </ul>
+        `;
+        father.innerHTML += html;
+    }
+
+
+    // model(arr, father, test = "") {
+    //     var html = `
+    //     <div class="similar item_list padding_30">
+    //     ${arr.map((v, i) => {
+    //         return `
+    //         <div class="title">${test}</div>
+    //         <div class="item">
+    //                 <div class="top">
+    //                     <img src="${v.preview}" alt="${v.title}">
+    //                     <span>${v.total}</span>
+    //                 </div>
+    //                 <p>${v.title}</p>
+    //             </div>
+    //     `;
+    //       }).toString().replaceAll(",", "")
+    //    }
+    //    </div>
+    //    `;
+    //     father.innerHTML += html;
+    // }
+
+    header(title, icon = "") {
+        var html = `
+        <div class="header_theme1 theme_color">
+            <div class="header_theme1_left">
+                <i class="iconfont icon-back1"></i>
+                <span>${title}</span>
+            </div>
+            <div class="header_theme1_right">
+                ${icon}
+            </div>
+        </div>
+        `;
+        $("body").innerHTML = html + $("body").innerHTML;
+
+        $(".header_theme1_left .icon-back1").onclick = () => history.back()
+    }
+
+    $_GET(variable) {
+        var query = window.location.search.substring(1);
+        var vars = query.split("&");
+        for (var i = 0; i < vars.length; i++) {
+            var pair = vars[i].split("=");
+            if (pair[0] == variable) { return pair[1]; }
+        }
+        return (false);
+    }
+}
+
+// 解构赋值
+var { $, footer, _, item, $_GET, header, mechanismList,model} = new Utils()
+
+
+