first commit

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/ajax/ajax.js

@@ -0,0 +1,75 @@
+class Ajax {
+
+  constructor () {
+    this.http = new XMLHttpRequest();
+  }
+
+  get(option) {
+    Tips.loading()
+    var params = ""
+    for (const key in option.data) {
+      params+= `&${key}=${option.data[key]}`
+    }
+    params = params.replace("&", "?")
+    option.url = this.url() + option.url + params
+
+    return new Promise( (resolve, reject) => {
+
+      this.http.open("GET", option.url);
+      this.http.send()
+      return this.onreadystatechange(resolve, reject)
+    })
+  }
+
+  post(option) {
+    this.http.open("POST", option.url);
+    this.http.setRequestHeader('Content-Type', 'application/josn');
+    this.http.send(JSON.stringify(option.data))
+    this.onreadystatechange(option)
+  }
+
+
+  onreadystatechange(resolve, reject) {
+    this.http.onreadystatechange = () => {
+      if (this.http.readyState == 4) {
+        Tips.close()
+        if (this.http.status == 200) {
+          var res = JSON.parse(this.http.response);
+          switch (res.status) {
+            case 200:
+              resolve(res.result);
+              break;
+
+            case 404:
+              Tips.dialog({
+                title: '程序出错啦',
+                message: res.msg
+              });
+              throw new Error(res.msg);
+              break;
+
+          }
+          resolve()
+        }  else {
+          reject(this.http)
+        }
+      }
+    }
+  }
+
+  url() {
+    switch (config.stage) {
+      case "dev":
+        return config.devUrl;
+        break;
+      case "test":
+        return config.testUrl;
+        break;
+      case "prod":
+        return config.prodUrl;
+        break;
+    }
+  }
+}
+
+var ajax = new Ajax()

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/config/config.js

@@ -0,0 +1,15 @@
+var config = {
+  devUrl: 'http://192.168.1.102:3000/api',
+  testUrl: 'http://test.com/api/json',
+  prodUrl: 'http://prod.com/api/json',
+  stage: 'dev',
+  urlList: {
+    index: '/index',
+    banner: '/index/banner',
+    threeMeals: '/index/threeMeals',
+    type: '/index/class',
+    info: '/index/info',
+    search: '/search/list',
+    video: '/video/list'
+  }
+}

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/lib/loading.js

@@ -0,0 +1,150 @@
+/**
+ * 封装加载提示
+ */
+class Loading {
+    /**
+     * 加载进度
+     */
+    loading() {
+        this.SetLoading()
+        // 塞入loading的html
+        this.$(".isShow .loading").innerHTML = 
+        `
+            <div class="back">
+                <div class="load8">
+                    <div class="load8-container container1">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                    <div class="load8-container container2">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                    <div class="load8-container container3">
+                        <div class="circle1"></div>
+                        <div class="circle2"></div>
+                        <div class="circle3"></div>
+                        <div class="circle4"></div>
+                    </div>
+                </div>                 
+            </div>
+        `;
+        this.$(".isShow .back").style = `padding: 0.4rem;`
+        this.show()
+    }
+
+    /**
+     * 显示toast提示
+     * @param {*} text 文字
+     * @param {*} time 自动关闭提示的时间 默认3秒
+     */
+    toast(text, time = 3000) {
+        this.SetLoading()
+        this.$(".isShow .loading").innerHTML = `<div class="back"></div>`
+        // 设置边距
+        this.$(".isShow .back").style = `padding: 0.14rem 0.4rem;`
+
+        // 设置内容
+        this.$(".isShow .back").innerHTML = `<span>${text}</span>`;
+        this.show()
+        setTimeout(()=> this.close(),time)
+    }
+
+    /**
+     * 弹出框 dialog
+     * @param {*} params 
+     */
+    dialog(params) {
+        params == undefined ? params = {} : null;
+        let defaultParams = { title: '标题', message: '内容', 
+            cancelText: '取消', confirmText: '确定', 
+            cancelColor: '#323233', confirmColor: '#fb7299'
+        };
+
+        defaultParams.title = params.title ||  defaultParams.title;
+        defaultParams.message = params.message ||  defaultParams.message;
+        defaultParams.cancelText = params.cancelText ||  defaultParams.cancelText;
+        defaultParams.confirmText = params.confirmText ||  defaultParams.confirmText;
+        defaultParams.cancelColor = params.cancelColor ||  defaultParams.cancelColor;
+        defaultParams.confirmColor = params.confirmColor ||  defaultParams.confirmColor;
+  
+        this.SetLoading()
+        this.$(".isShow .loading").innerHTML = `
+            <div class="dialog_f">
+              <div class="dialog_header">${defaultParams.title}</div>
+              <div class="dialog_content">
+                <div class="dialog_message">${defaultParams.message}</div>
+              </div>
+              <div class="dialog_footer">
+                <div class="dialog_cancel" style="color:${defaultParams.cancelColor}">
+                    ${defaultParams.cancelText}
+                </div>
+                <div class="dialog_confirm" style="color:${defaultParams.confirmColor}">
+                    ${defaultParams.confirmText}
+                </div>
+              </div>
+            </div>
+        `;
+        // 取消按钮被点击的时候
+        this.$(".isShow .dialog_cancel").onclick = () => {
+            params.cancel && params.cancel()
+            this.close()
+        }
+         // 确定按钮被点击的时候
+         this.$(".isShow .dialog_confirm").onclick = () => {
+            params.confirm && params.confirm()
+            this.close()
+        }
+        this.$(".isShow .loading").style = 'background: rgba(0, 0, 0, 0.7)'
+        this.show()
+    }
+
+    /**
+     * 填充loading的html结构
+     */
+    SetLoading () {
+        if (this.$(".isShow") == null) {
+            var isShow = document.createElement("div")
+            isShow.className = "isShow"
+            isShow.style = "display: none;"
+
+            var loading = document.createElement("div")
+            loading.className = "loading";
+            isShow.appendChild(loading)
+            this.$("body").appendChild(isShow)
+        }
+    }
+   
+    /**
+     * 删除内容，隐藏弹窗
+     */
+    close() {
+        this.clearContent()
+        this.$(".isShow").style.display = "none"
+    }
+
+    /**
+     * 显示弹窗
+     */
+    show() {
+        this.$(".isShow").style.display = "block"
+    }
+
+    /**
+     * 清空弹窗内部的内容
+     */
+    clearContent() {
+        this.$(".isShow .loading").style = "";
+        this.$(".isShow .loading").innerHTML = "";
+    }
+
+    $(className) {
+        return document.querySelector(className);
+    }
+}
+
+var Tips = new Loading()

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/lib/previewImage.js

@@ -0,0 +1,267 @@
+class PreviewImage {
+
+    // 属性都是全局的
+    body = this.$("body");
+    option = {};
+    isBackMove = false;
+
+    x1 = 0;
+    y1 = 0;
+    l = 0;
+    t = 0;
+
+    constructor(option) {
+        if (!option.hasOwnProperty("image")) {
+            throw new Error("参数image缺少，请检查")
+        }
+
+        if (!option.hasOwnProperty("showIndex")) {
+            throw new Error("参数showIndex缺少，请检查")
+        }
+
+        this.option = option
+        console.log(this.option);
+
+        this.created();
+        this.BindClose();
+
+        this.BindPrevious();
+        this.BindNext();
+        this.BindSuoXiao();
+        this.BindFangDa();
+        this.BindFullScreen();
+
+        this.BindXuanZhuan();
+        this.MouseEvent();
+    }
+
+    // 1：把图片预览的html插入到网页上
+    created() {
+        this.body.insertAdjacentHTML("beforeend", `<div class="previewImage">
+                        <div class="zhezhao"></div>
+                        <div class="preview">
+                            <div class="closed">x</div>
+
+                            <div class="action">
+                                <div class="left d">&lt;</div>
+                                <div class="right d">&gt;</div>
+                            </div>
+
+                            <img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;"
+                                src="${this.option.image[this.option.showIndex]}" alt="">
+
+                            <ul class="operation">
+                                <li>
+                                    <i class="iconfont icon-suoxiao suoxiao"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-fangda fangda"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-fullscreen fullscreen"></i>
+                                </li>
+                                <li class="xz">
+                                    <i class="iconfont icon-shuaxin leftshuaxin"></i>
+                                </li>
+                                <li>
+                                    <i class="iconfont icon-shuaxin rightshuaxin"></i>
+                                </li>
+                            </ul>
+
+
+                        </div>
+                    </div>`)
+
+    }
+
+    // 缩小
+    BindSuoXiao() {
+        this.$(".suoxiao").onclick = () => {
+            var value = this.Scale() - 0.2;
+            if (value != 0) {
+                this.$(".mainImg").style.transform = `scale(${value}) rotate(${this.Rotate()}deg)`
+            }
+        }
+    }
+
+    // 全屏
+    BindFullScreen() {
+
+        this.$(".fullscreen").onclick = () => {
+            // true 缩小
+            if (this.$(".fullscreen").classList.contains("icon-fullscreen")) {
+                this.$(".fullscreen").classList.remove("icon-fullscreen")
+                this.$(".fullscreen").classList.add("icon-suoxiao1")
+
+                this.$(".mainImg").style = `
+                    transform: scale(2) rotate(${this.Rotate()}deg);
+                    margin-left: 0;
+                    margin-top: 0;
+                `
+
+            // 放大
+            } else {
+                this.$(".fullscreen").classList.remove("icon-suoxiao1")
+                this.$(".fullscreen").classList.add("icon-fullscreen")
+
+                this.$(".mainImg").style = `
+                    transform: scale(1) rotate(0deg);
+                    margin-left: 0;
+                    margin-top: 0;
+                `
+            }
+        }
+    }
+
+    // 放大
+    BindFangDa() {
+        this.$(".fangda").onclick = () => {
+            this.$(".mainImg").style.transform = `scale(${this.Scale() + 0.2}) rotate(${this.Rotate()}deg)`
+        }
+    }
+
+    // 旋转
+    BindXuanZhuan() {
+        // -90
+        this.$(".leftshuaxin").onclick = () => {
+            this.xuanzhuan(-90)
+        }
+
+        // +90
+        this.$(".rightshuaxin").onclick = () => {
+            this.xuanzhuan(90)
+        }
+    }
+
+    MouseEvent() {
+
+        // 鼠标滑动的时候放大缩小网页
+        document.onmousewheel = (e) => {
+            if (e.wheelDelta == 210) {
+                this.$(".fangda").onclick()
+            } else {
+                this.$(".suoxiao").onclick()
+            }
+        }
+
+        // document.addEventListener('mousewheel',(e) => {
+        //     if (e.wheelDelta == 210) {
+        //         this.$(".fangda").onclick()
+        //     } else {
+        //         this.$(".suoxiao").onclick()
+        //     }
+        // },false)
+
+        // 鼠标在图片上按下的时候
+        this.$(".mainImg").onmousedown = (e) => {
+
+            e.preventDefault()
+
+            this.isBackMove = true
+
+            //获取鼠标按下的坐标
+            this.x1 = e.clientX;
+            this.y1 = e.clientY;
+
+            this.l = parseInt(this.$(".mainImg").style.marginLeft);
+            this.t = this.$(".mainImg").offsetTop;
+
+            this.ImgMove(".mainImg")
+        }
+        // 按住拖动，但鼠标从图片上离开的
+        // 给背景层绑定鼠标移动事件
+        this.$(".mainImg").onmouseleave = () => {
+            console.log("鼠标从图片上离开的，给背景层绑定鼠标移动事件");
+            if (this.isBackMove) {
+                this.ImgMove(".preview")
+            }
+        }
+
+        // 鼠标在背景层上松开
+        this.$(".preview").onmouseup = (ev) => {
+            console.log("鼠标在背景层上松开");
+            this.isBackMove = false
+            this.$(".mainImg").onmousemove = null;
+            this.$(".preview").onmousemove = null;
+        }
+
+        // 鼠标在图片上松开
+        this.$(".mainImg").onmouseup = (ev) => {
+            console.log("鼠标在图片上松开");
+            this.$(".mainImg").onmousemove = null;
+            this.$(".preview").onmousemove = null;
+        }
+    }
+
+    ImgMove(className) {
+        this.$(className).onmousemove = (ev) => {
+            var x2 = ev.clientX;
+            var y2 = ev.clientY;
+
+            //计算出鼠标的移动距离
+            var x = x2 - this.x1;
+            var y = y2 - this.y1;
+
+            //移动的数值与元素的left，top相加，得出元素的移动的距离
+            var lt = y + this.t;
+            var ls = x + this.l;
+
+            //更改元素的left，top值
+            this.$(".mainImg").style.marginLeft = ls + 'px';
+            this.$(".mainImg").style.marginTop = lt + 'px';
+        }
+    }
+
+    xuanzhuan(offset) {
+        this.$(".mainImg").style.transform = `scale(${this.Scale()}) rotate(${this.Rotate() + offset}deg)`
+    }
+
+    // 关闭按钮
+    BindClose() {
+        //1  var ddddc = this;
+
+        //2 es6 => 箭头函数
+        console.log("this1: ", this);
+
+        // this 指向
+        this.$(".closed").onclick = () => {
+            this.body.removeChild(this.$(".previewImage"))
+        }
+    }
+
+    // 上一页
+    BindPrevious() {
+        this.$(".left").onclick = () => {
+            this.option.showIndex -= 1;
+            if (this.option.showIndex < 0) {
+                this.option.showIndex = this.option.image.length - 1
+            }
+            this.$(".mainImg").src = this.option.image[this.option.showIndex]
+        }
+    }
+
+    // 下一页
+    BindNext() {
+        this.$(".right").onclick = () => {
+            this.option.showIndex += 1;
+            if (this.option.showIndex > this.option.image.length - 1) {
+                this.option.showIndex = 0
+            }
+            this.$(".mainImg").src = this.option.image[this.option.showIndex]
+        }
+    }
+
+    Scale() {
+        return Number(this.$(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
+    }
+
+    Rotate() {
+        return Number(this.$(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+
+}

历届学生/吴欣阳/项目开发/上课项目/美食app/front/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";
+}

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/lib/swiper.js

@@ -0,0 +1,330 @@
+(function () {
+    /**
+     * 构造函数
+     * @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
+
+
+})()

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/page/index.js

@@ -0,0 +1,220 @@
+class Index {
+  constructor() {
+    footer()
+    this.classList = [
+      { title: '推荐', type: 1, page: 1, total_page: 0, content: [] },
+      { title: '时令', type: 2, page: 1, total_page: 0, content: [] },
+      { title: '食肉', type: 3, page: 1, total_page: 0, content: [] },
+      { title: '素食', type: 4, page: 1, total_page: 0, content: [] },
+      { title: '烘焙', type: 5, page: 1, total_page: 0, content: [] },
+    ];
+    this.currentIndex = 0;
+    this.isLoadMore = false; // false 不滚动加载，true 滚动加载
+    this.getThreeMeals();
+    this.getBanner();
+    this.renderTitle();
+
+    // 滚动加载更多数据
+    $("body").onscroll = () => {
+      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      scrollTop = Math.ceil(scrollTop)
+      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+
+      if (scrollHeight > clientHeight && scrollTop + clientHeight == scrollHeight) {
+        console.log("滚动到底部了: ", this.isLoadMore)
+        if (this.isLoadMore) {
+          this.classList[this.currentIndex].page += 1;
+          console.log(this.classList[this.currentIndex])
+          this.getIndexType("more")
+        }
+      }
+    }
+  }
+
+  initSwiper() {
+    new swiper('.swiper-container',{
+    })
+  }
+
+  async getBanner() {
+    let res = await indexServe.banner()
+    res.forEach(v => {
+      $(".swiper-wrapper").innerHTML += `
+        <div class="swiper-slide">
+          <div class="banner_item">
+            <a href="">
+              <img class="back_img" src="${v.img}" alt="">
+            </a>
+          </div>
+        </div>
+      `
+    });
+
+    this.initSwiper()
+  }
+
+  async getThreeMeals() {
+    let res = await indexServe.threeMeals()
+
+    res.forEach((v,i) => {
+      $(".three .title_li").innerHTML += `<li class="${i == 0 ? 'active': ''}">${v.title}</li>`;
+
+      $(".wrapper").innerHTML += `
+       <ul class="swiper-slide title_list">
+         ${
+            v.content.map(item => {
+              return `
+                 <li>
+                    <a href="./info.html?url=${item.url}" >
+                      <img class="item_img" src="${item.img}" alt="">
+                      <h2>${item.title}</h2>
+                      <div class="yyw">
+                        <div class="y">养</div>
+                        <div class="desc">${item.des}</div>
+                      </div>
+                    </a>  
+                  </li>
+              `
+            }).toString().replaceAll(",","")
+          }
+        </ul>
+      `
+    })
+
+
+    var liArr = _(".three .title_li li")
+
+    var sw = new swiper('.ddddddd',{
+      wrapper: '.wrapper',
+      on: {
+        slideChangeTransitionStart(index) {
+          liArr.forEach(v => v.classList.remove("active"))
+          liArr[index].classList.add("active")
+        }
+      }
+    });
+
+    liArr.forEach((v,i) => {
+      v.onclick = function () {
+        liArr.forEach(v => v.classList.remove("active"))
+        this.classList.add("active")
+        sw.slideTo(i)
+      }
+    })
+
+
+
+  }
+
+  // type click 点击加载数据，需要做判断
+  // type more  滚动加载，不需要
+  async getIndexType(type = "click") {
+
+    var getData = async () => {
+      console.log("======== type: ", type)
+      let res = await indexServe.type({
+        page: this.classList[this.currentIndex].page,
+        type: this.classList[this.currentIndex].type
+      });
+      this.classList[this.currentIndex].total_page = res.total_page;
+      this.classList[this.currentIndex].content = [
+        ...this.classList[this.currentIndex].content,
+        ...res.items
+      ]
+
+      if (type == "click") {
+        this.isLoadMore = true
+      }
+
+      var ul = _(".alldo_father ul")
+      ul[this.currentIndex].innerHTML = ""
+      this.classList[this.currentIndex].content.forEach((v, i) => {
+        ul[this.currentIndex].innerHTML += `
+        <li>
+        
+          <img class="item_img" src="${
+          Array.isArray(v.img) ? v.img[0] : v.img
+        }" alt="">
+          <h2>${v.title}</h2>
+          
+          <div class="yyw">
+            <div class="y">养</div>
+            ${
+          v.label == null
+            ? ''
+            : v.label.length == 0
+            ? ''
+            : `<div class="desc">${v.label.desc}</div>`
+        }
+            
+          </div>
+          
+          ${
+          v.author.length == undefined
+            ? `<div class="auth">
+                    <div class="left">
+                      <img src="${v.author.avatar_url}" alt="">
+                      <span>${v.author.nickname}</span>
+                    </div>
+                    <div class="right">
+                      <i class="iconfont icon-chakan"></i>
+                      <span>${v.total_amount}</span>
+                    </div>
+                  </div>`
+            : ''
+        }
+        </li>
+      `
+      })
+
+
+
+    }
+
+
+    if (type == "click") {
+
+      if (this.classList[this.currentIndex].content.length == 0) {
+        getData()
+      }
+    } else {
+      getData()
+    }
+  }
+
+
+  async renderTitle() {
+    this.classList.forEach((v,i) => {
+      $(".alldo .title_li").innerHTML += `<li class="${i==0?'active':''}">${v.title}</li>`;
+
+      $(".alldo_father").innerHTML += `
+        <ul class="title_list ${i == 0 ? 'f_active': ''}">
+        </ul>
+      `
+    });
+
+    this.getIndexType()
+
+    var ul = _(".alldo_father ul")
+
+    var li = _(".alldo .title_li li")
+    li.forEach((v,i) => {
+      v.onclick = () => {
+        li.forEach((item,index) => {
+          item.classList.remove("active")
+          ul[index].classList.remove("f_active")
+        })
+        ul[i].classList.add("f_active")
+        v.classList.add("active")
+
+        this.isLoadMore = false
+        console.log("你点击了：",this.isLoadMore)
+        this.currentIndex = i
+        this.getIndexType()
+      }
+    })
+  }
+}
+
+new Index();

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/page/info.js

@@ -0,0 +1,112 @@
+class info {
+    constructor () {
+        this.getInfo();
+    }
+
+    async getInfo() {
+        let res = await indexServe.info({
+            url: query("url")
+        });
+
+
+        $(".header img").src = res.backImg
+        $(".info_main h2").innerText = res.title
+        $(".info_main .posttime").innerText = res.posttime;
+
+        res.Statistics.forEach(v => {
+            $(".yyinfos").innerHTML += `
+               <li>
+                    <span>${v.title}</span>
+                    <div class="jdw">
+                        <div class="jd" style="${v.proportion}"></div>
+                    </div>
+                </li>
+            `
+        });
+
+        res.stepInfo.arr.forEach(v => {
+            $(".cpargsw").innerHTML += `
+              <li>
+                    <div class="i" style="background-position: 0px ${v.position}px;"></div>
+                    <span>${v.title}</span>
+                </li>
+            `
+        })
+        $(".show_more .text").innerText = res.stepInfo.message;
+
+        $(".more").onclick = () => {
+            if ($(".more span").innerText == "展开") {
+                $(".more span").innerText = "收起"
+                $(".more img").style = `transform: rotate(180deg);`
+                $(".show_more").style.height = "auto";
+            } else {
+                $(".more span").innerText = "展开"
+                $(".more img").style = `transform: rotate(0deg);`
+                $(".show_more").style.height = "42px";
+            }
+        }
+
+        res.material.main.forEach(v => {
+            $(".zhuliao ul").innerHTML+=`
+              <li>
+                <div class="list_title">${v.title}</div>
+                <div class="list_nums">${v.nums}</div>
+              </li>
+            `
+        })
+
+        res.material.accessories.forEach(v => {
+            $(".fuliao ul").innerHTML+=`
+              <li>
+                <div class="list_title">${v.title}</div>
+                <div class="list_nums">${v.nums}</div>
+              </li>
+            `
+        })
+
+        res.DetailedSteps.forEach(v => {
+            $(".info_list").innerHTML+=`
+                ${
+                  Array.isArray(v.step_img)
+                  ? `<li>
+                        <div class="info_top cpimg">
+                            <img src="${v.step_img[0]}" alt="">
+                            <div class="setp">成品图</div>
+                        </div>
+                        <div class="change_list">
+                            ${
+                                v.step_img.map((item,index) => {
+                                    return `<img src="${item}" alt="" style="opacity: ${index == 0 ? 1:0.4}">`
+                                }).toString().replaceAll(",", "")
+                            }
+                        </div>
+                    </li>`
+                  : v.step_img == null
+                    ? `<li class="step">
+                           <div class="step_title">烹饪技巧</div>
+                           <div class="stepdes">${v.step_text}</div>
+                        </li>`
+                    : `<li>
+                            <div class="info_top">
+                                <img src="${v.step_img}" alt="">
+                                <div class="setp">${v.step_title}</div>
+                            </div>
+                            <p>${v.step_text}</p>
+                        </li>`
+                 }`
+        })
+
+        _(".change_list img").forEach(v => {
+            v.onclick = () => {
+                _(".change_list img").forEach( item => item.style.opacity = 0.4)
+                $(".cpimg img").src = v.src
+                v.style.opacity = 1
+            }
+        })
+
+
+        console.log(res)
+    }
+}
+
+new info()

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/page/like.js

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

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/page/search.js

@@ -0,0 +1,25 @@
+class Search {
+  constructor() {
+    this.page = 1;
+    this.getSearch();
+  }
+
+  // TODO 实现 列表页面  和 点击进入详情（主要套个a标签）
+  //  和  滚动加载数据
+  getSearch() {
+
+    $(".ser").onclick = async () => {
+      let res = await indexServe.search({
+        page: this.page,
+        q: $(".caipu").value
+      });
+
+      console.log(res)
+    }
+
+
+  }
+
+}
+
+new Search();

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/page/type.js

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

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/page/video.js

@@ -0,0 +1,44 @@
+class Video {
+  constructor() {
+    footer()
+    this.getVideoList();
+  }
+
+  async getVideoList() {
+    let res = await indexServe.video({
+      page: 1
+    });
+
+    res.items.forEach(v => {
+      $(".content_title").innerHTML += `
+         <li class="food">
+            <div class="content_img">
+                <i class="content_img_play"></i>
+            </div>
+            <div class="content_font">
+                <p class="title">${v.title}</p>
+                <div class="content_font_below">
+                    <div class="content_font_below_left">
+                        <img src="../img/user.jpg" alt="">
+                        <span>美食杰</span>
+                    </div>
+                    <div class="content_font_below_right">
+                        <i class="view"></i>
+                        <span class="content_font_below_right_span">103k</span>
+                    </div>
+                </div>
+            </div>
+        </li>
+      `
+    })
+
+    _(".content_title li").forEach((v,i) => {
+      v.onclick = function () {
+        localStorage.setItem("videoInfo", JSON.stringify(res.items[i]));
+        location.href = "./video_detailed.html"
+      }
+    })
+    console.log(res)
+  }
+}
+new Video();

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/page/videoInfo.js

@@ -0,0 +1,16 @@
+class VideoInfo {
+  constructor() {
+    this.getVideoInfo()
+  }
+
+  getVideoInfo() {
+    let info = JSON.parse(localStorage.getItem("videoInfo"))
+    console.log(info)
+    $(".title").innerText = info.title
+    $(".video_top").src = info.xhz_video_url
+    $(".video_top").poster = info.bd_photo
+    $(".content_c").innerText = info.intro
+  }
+}
+
+new VideoInfo()

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/serve/IndexServe.js

@@ -0,0 +1,53 @@
+
+class IndexServe {
+  async index(params) {
+    return await new Ajax().get({
+      url: config.urlList.index,
+      data: params,
+    })
+  }
+
+  async banner(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.banner,
+      data: params,
+    })
+  }
+
+  async threeMeals(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.threeMeals,
+      data: params,
+    })
+  }
+
+  async type(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.type,
+      data: params,
+    })
+  }
+
+  async info(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.info,
+      data: params,
+    })
+  }
+
+  async search(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.search,
+      data: params,
+    })
+  }
+
+  async video(params = {}) {
+    return await new Ajax().get({
+      url: config.urlList.video,
+      data: params,
+    })
+  }
+}
+
+var indexServe = new IndexServe();

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/utils/utils.js

@@ -0,0 +1,53 @@
+class Utils {
+  constructor() {
+  }
+  $(className) {
+    return document.querySelector(className);
+  }
+
+  _(className) {
+    return document.querySelectorAll(className);
+  }
+
+  query(name) {
+    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
+    var r = window.location.search.substr(1).match(reg);
+    if(r!=null)return  unescape(r[2]); return null;
+  }
+
+  footer() {
+    var footerList = [
+      { title: '首页', img: 'home', isActve: true, url: './index.html' },
+      { title: '视频', img: 'video', isActve: false, url: './video.html' },
+      { title: '分类', img: 'type', isActve: false, url: './type.html' },
+      { title: '我的', img: 'like', isActve: true, url: './like.html' },
+    ];
+
+    // 当前访问的页面地址
+    var currentUrl = location.href.match(/page\/([\s\S]*?).html/)[1]
+
+    $("body").innerHTML+=`
+      <ul class="footer">
+        ${
+          footerList.map((v,i) => {
+            return `<li class="${ v.url.includes(currentUrl) ? 'footer_active': '' }">
+              <a href="${v.url}">
+                <img src="${
+                  v.url.includes(currentUrl)
+                  ? v.isActve
+                    ? `../img/${v.img}_active.png`
+                    : `../img/${v.img}.png`
+                  : `../img/${v.img}.png`
+                }" alt="">
+                
+                <p>${v.title}</p>
+              </a>
+            </li>`
+          }).toString().replaceAll(",","")
+        }
+      </ul>
+    `
+  }
+}
+
+var { $, _, footer, query } = new Utils();