first commit

历届学生/fontendsix/项目练习/上课项目/美食杰/js/ajax/index.js

@@ -0,0 +1,95 @@
+class AjAX {
+
+    constructor() {
+        this.xhr = new XMLHttpRequest();
+    }
+
+
+    /**
+     * 
+     * @param {*} params 
+     * url: 字符串 请求地址，
+     * data: 对象
+     */
+    get(params) {
+        return new Promise((success, error) => {
+            $.ajax({
+                type: "GET",
+                url: `${config.checkStage()}${params.url}`,
+                data: params.data,
+                success: (msg) => this.readystatechange(success, error, msg)
+            });
+        })
+    }
+
+
+
+    post(params) {
+        return new Promise((success, error) => {
+            $.ajax({
+                type: "POST",
+                url: `${config.checkStage()}${params.url}`,
+                data: params.data,
+                success: (msg) => this.readystatechange(success, error, msg)
+            });
+        })
+    }
+
+
+    readystatechange(success, error, res) {
+        // 业务逻辑状态码的判断
+        switch (res.status) {
+            case 200:
+                success(res.result || res.data)
+                break;
+            case 404:
+                alert(res.message)
+                throw new Error(res.message)
+                break;
+            default:
+                break;
+        }
+    }
+
+}
+
+// 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,54 @@
+var config = {
+    // 开发阶段的请求基地址
+    devBaseUrl: 'http://127.0.0.1:3000/api',
+
+    // 测试阶段的请求基地址
+    testBaseUrl: 'http://127.0.0.1:3000/test/api',
+
+    // 上线阶段的请求基地址
+    prodBaseUrl: 'http://127.0.0.1:3000/prod/api',
+
+    stage: "dev", // dev test prod
+    
+    apiList: {
+        threeMeals: '/index/threeMeals', // 每日三餐
+        saerch:'/search/list',//搜索
+        banner1:'/index/banner',
+        typee:'/index/type',//九宫格
+        threeMealss:'/index/threeMeals',//每日三餐
+        indexType:'/index/class', // 首页获取分类数据接口
+        videoList:'/video/list' ,// 菜谱视频大全列表
+        indexx:'/index/class',
+        videoList:'/video/list', // 菜谱视频大全列表
+        indexBanner:'/index/banner', // 获取banner图
+        indexInfo:'/index/info',//详情
+        type:'/type/leftMenu', //分类左
+        typer:'/type/rightMenu',  //分类右
+        typerl:'/type/rightMenuList',  //分类右小分类
+
+    },
+    
+    // 底部导航
+    footerArr: [
+        { title: '首页', icon: 'icon-home', path: 'index.html' },
+        { title: '视频', icon: 'icon-jigou', path: 'video.html'  },
+        { title: '分类', icon: 'icon-me', path: 'type.html'  },
+        { title: '收藏', icon: 'icon-wo', path: 'like.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/page/collect.js

@@ -0,0 +1,18 @@
+class collect{
+    constructor(){
+        this.getcollect()
+       
+    }
+    
+
+    getcollect(){
+        $(".left").click(function(){
+            history.back()
+            
+        })
+        console.log(111);
+    }
+
+
+}
+new collect()

历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/index.js

@@ -0,0 +1,51 @@
+class index {
+    constructor() {
+        this.mySwiper = null;
+        this.GetThreeMeals();
+        footer()
+    }
+
+    async GetThreeMeals() {
+        var res = await indexServe.threeMeals();
+        console.log(res);
+        res.forEach((v, i) => {
+            $(".test").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
+
+            $(".banner .swiper-wrapper").append(`
+                <div class="swiper-slide">
+                   ${v.content.map((item) => {
+                return `
+                        <img src="${item.img}" alt="">
+                       `
+            }).toString().replaceAll(",", "")}
+                </div>
+            `)
+        });
+
+        var self = this;
+        $(".test li").click(function () {
+            $(this).addClass("active").siblings().removeClass("active");
+            self.mySwiper.slideTo($(this).index())
+        });
+
+
+        this.initThreeMealsSwiper()
+    }
+
+    initThreeMealsSwiper() {
+        this.mySwiper = new Swiper('.banner', {
+            direction: 'horizontal', // 垂直切换选项
+            // 如果需要分页器
+            pagination: {
+                el: '.swiper-pagination',
+            },
+            on: {
+                slideChangeTransitionEnd: function () {
+                    $(".test li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
+                },
+            },
+        })
+    }
+}
+
+new index()

历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/index_wam.js

@@ -0,0 +1,108 @@
+class index {
+    constructor() {
+        this.mySwiper = null;
+        this.tjmsg = [ { title: '推荐'}, { title: '时令'},{ title: '食肉'}, { title: '素食'}, { title: '烘焙'} ];
+        this.GetBanner();
+        this.GetThreeMeals();
+        this.GetindexType();
+        this.Getmenu();
+
+    }
+
+    async Getmenu() {
+        var res = await indexServe.typee();
+        res.forEach(v=>{
+            $(".menu").append(`<li>
+            <a href="${v.href}">
+              <img src="${v.img}" alt="">
+              <p>${v.title}</p>
+            </a>
+         </li>`)
+        })
+    }
+
+    async GetindexType() {
+        this.tjmsg.forEach((v, i)=>{
+            $(".tj .food_list").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
+        });
+        this.Updatelist();
+        console.log("11")
+        var self = this
+        $(".tj .food_list li").click(function () {
+            $(this).addClass("active").siblings().removeClass("active");
+            var type = $('.tj .food_list li').index($(this))
+            self.Updatelist(type+1)
+            
+        });
+
+    }
+
+    async Updatelist(type,page){
+        var res = await indexServe.indexType(
+            {
+                type:type,
+                page:page
+            }
+        );
+        $(".tj .food_content").html("");
+
+        FoodList(res,$(".tj .food_content"))
+    }
+
+    async GetBanner() {
+        var res = await indexServe.indexBanner();
+        res.forEach(v=>{
+            $(".banner .swiper-wrapper").append(`<div class="swiper-slide">
+                <a href="${v.url}">
+                    <img src="${v.img}" alt="">
+                </a>
+            </div>`)
+        })
+        this.initindexBanner();
+    }
+
+    async GetThreeMeals() {
+        var res = await indexServe.threeMeals();
+        res.forEach((v, i) => {
+            $(".threeMeals .food_list").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
+        });
+        FoodList(res,$(".threeMeals_content .swiper-wrapper"))
+        var self = this;
+       
+
+        var self = this;
+        $(".threeMeals .food_list li").click(function () {
+            $(this).addClass("active").siblings().removeClass("active");
+            self.mySwiper.slideTo($(this).index())
+        });
+
+        this.initThreeMealsSwiper()
+    }
+
+    initThreeMealsSwiper() {
+        this.mySwiper = new Swiper('.threeMeals_content', {
+           // direction: 'horizontal', // 垂直切换选项
+            // 如果需要分页器
+            pagination: {
+                el: '.swiper-pagination',
+            },
+            on: {
+                slideChangeTransitionEnd: function () {
+                    $(".threeMeals .food_list li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
+                },
+            },
+        })
+    }
+
+    initindexBanner() {
+        var ndexBannerSwiper = new Swiper('.banner', {
+        //    direction: 'horizontal', // 垂直切换选项
+            // 如果需要分页器
+            pagination: {
+                el: '.swiper-pagination',
+            },
+        })
+    }
+}
+
+new index()

历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/indext.js

@@ -0,0 +1,112 @@
+class indext{
+    constructor() {
+        screahtop("搜索百万免费菜谱")
+        this.mySwiper = null;
+        this.flistitle = [ { title: '推荐'}, { title: '时令'},{ title: '食肉'}, { title: '素食'}, { title: '烘焙'} ];
+        this.GetThreeMeals();
+        this.GetindexType();
+        this.Getmenu();
+        this.GetBanner();
+    }
+//头部轮播
+    async GetBanner() {
+        var res = await indexServe.indexBanner();
+        res.forEach(v=>{
+            $(".banner .swiper-wrapper").append(`<div class="swiper-slide">
+                <a href="${v.url}">
+                    <img src="${v.img}" alt="">
+                </a>
+            </div>`)
+        })
+        this.initindexBanner();
+    }
+
+//菜品分类
+    async Getmenu() {
+        var res = await indexServe.typee();
+        res.forEach(v=>{
+            $(".menu").append(`<li>
+            <a href="${v.href}">
+              <img src="${v.img}" alt="">
+              <p>${v.title}</p>
+            </a>
+         </li>`)
+        })
+    }
+
+//分类样式
+    async GetindexType() {
+        this.flistitle.forEach((v, i)=>{
+            $(".flist .test").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
+        });
+        this.Updatelist();
+        var self = this
+        $(".flist .test li").click(function () {
+            $(this).addClass("active").siblings().removeClass("active");
+            var type = $('.flist .test li').index($(this))
+            self.Updatelist(type+1)
+            
+        });
+
+    }
+
+    async Updatelist(type,page){
+        var res = await indexServe.indexType(
+            {
+                type:type,
+                page:page
+            }
+        );
+        $(".flist .flist_content").html("");
+
+        FoodList(res,$(".flist .flist_content"))
+    }
+
+//菜品轮播
+
+    async GetThreeMeals() {
+        var res = await indexServe.threeMeals();
+        console.log(res);
+        res.forEach((v, i) => {
+            $(".everyfood .test").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
+        });
+        FoodList(res,$(".bannertwo .swiper-wrapper"))
+        var self = this;
+
+
+        var self = this;
+        $(".everyfood .test li").click(function () {
+            $(this).addClass("active").siblings().removeClass("active");
+            self.mySwiper.slideTo($(this).index())
+        });
+
+
+        this.initThreeMealsSwiper()
+    }
+
+    initThreeMealsSwiper() {
+        this.mySwiper = new Swiper('.bannertwo', {
+            // direction: 'horizontal', // 垂直切换选项
+            // 如果需要分页器
+            pagination: {
+                el: '.swiper-pagination',
+            },
+            on: {
+                slideChangeTransitionEnd: function () {
+                    $(".test li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
+                },
+            },
+        })
+    }
+    initindexBanner() {
+        var ndexBannerSwiper = new Swiper('.banner', {
+        //    direction: 'horizontal', // 垂直切换选项
+            // 如果需要分页器
+            pagination: {
+                el: '.swiper-pagination',
+            },
+        })
+    }
+}
+
+new indext()

历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/indexx.js

@@ -0,0 +1,195 @@
+class banner {
+    constructor() {
+
+        this.index = 0;
+        this.mySwiper = null;
+        this.Recommend = [
+            {
+                type: 1,
+                title: '推荐',
+                content: [],
+                page: 1
+            },
+            {
+                type: 2,
+                title: '时令',
+                content: [],
+                page: 1
+            },
+            {
+                type: 3,
+                title: '食肉',
+                content: [],
+                page: 1
+            },
+            {
+                type: 4,
+                title: '素食',
+                content: [],
+                page: 1
+            },
+            {
+                type: 5,
+                title: '烘焙',
+                content: [],
+                page: 1
+            }
+        ];
+        this.Getbanner()
+        this.Gettypee()
+        this.GetthreeMealss()
+        this.GETRecommend()
+        this.Getindexx()
+       
+    }
+    //开始的轮播图
+    async Getbanner() {
+        var res = await indexServe.banner1();
+        console.log(res);
+        res.forEach((v, i) => {
+            $(".banner .swiper-wrapper").append(`
+            <div class="swiper-slide">
+            <a href="../html${v.url}">
+                <img src="${v.img}" alt="">
+            </a>
+        </div>
+     `)
+
+        });
+        
+        this.initBannerSwiper();
+      
+    }
+    //九宫格
+    async Gettypee() {
+        var res = await indexServe.typee();
+        res.forEach((v, i) => {
+            $(".list").append(`
+               <li>
+                  <a href="./?url=${v.href}">
+                    <img src="${v.img}" alt="">
+                    <p class="list_text">${v.title}</p>
+                  </a>
+                </li>
+            `)
+        });
+
+       
+
+    }
+    //每日三餐轮播图
+    async GetthreeMealss() {
+
+        var res = await indexServe.threeMealss();
+        console.log(res);
+        res.forEach((v, i) => {
+            $(".meals_list").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
+
+
+            $(".meals .swiper-wrapper").append(`
+          <div class="swiper-slide">
+
+                   ${v.content.map((item) => {
+                return `
+                
+                <a href="">
+                    <div class="meals_text">
+                        <img src="${item.img}" alt="">
+                        <p class="meals_name">${item.title}</p>
+                        <span class="text">养</span>
+                        <p class="tips">${item.des}</p>
+                    </div>
+                </a>
+            
+                       `
+            }).toString().replaceAll(",", "")}
+           
+                </div>`)
+        })
+
+        var self = this;
+        $(".meals_list li").click(function () {
+            $(this).addClass("active").siblings().removeClass("active");
+            self.mySwiper.slideTo($(this).index())
+            
+        });
+        this.initThreeMealsSwiper()
+    }
+    //大家都在做 渲染
+    async Getindexx() {
+        var res = await indexServe.indexx({
+            type: this.Recommend[this.index].type,
+            page: this.Recommend[this.index].page
+        })
+    
+        
+
+        FoodList(res, $('.together_act'))
+    }
+    // 推荐 时令 食肉……
+    GETRecommend() {
+        this.Recommend.forEach((v, i) => {
+            $(".together_list").append(`
+             <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `)
+        })
+
+        var a = this;
+        $(".together_list li").click(function () {
+            $('.together_act ').html("")
+
+            a.index = $(this).index();
+            $(this).addClass("active").siblings().removeClass("active");
+            a.Getindexx()
+           
+        });
+    
+    }
+
+
+   
+    //滚动加载
+    // scrollLoadData() {
+    //     window.onscroll = async () => {
+    //         var scrollTop = document.documentElement.scrollTop
+    //         var scrollHeight = document.documentElement.scrollHeight
+    //         var clientHeight = document.documentElement.clientHeight
+    //         if (parseInt(scrollHeight - scrollTop) == clientHeight) {
+    //             this.Recommend[this.index].page++;
+    //             await this.Getindexx();
+    //             console.log( this.Recommend[this.index].page++);
+
+    //         }
+    //     }
+
+    // }
+    //轮播图初始化
+    initThreeMealsSwiper() {
+        this.mySwiper = new Swiper('.meals', {
+            direction: 'horizontal',
+            // pagination: {
+            //     el: '.swiper-pagination',
+            // },
+            on: {
+                slideChangeTransitionEnd: function () {
+                    $(".meals_list li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
+                    
+                },
+            },
+        })
+     
+    }
+
+    initBannerSwiper() {
+        this.banner = new Swiper('.banner', {
+            direction: 'horizontal', // 垂直切换选项
+            // 如果需要分页器
+            pagination: {
+                el: '.swiper-pagination',
+            },
+        })
+    }
+
+
+}
+new banner()

历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/info.js

@@ -0,0 +1,14 @@
+class info{
+    constructor () {
+        this.GetfoodInfo()
+        
+    }
+    async GetfoodInfo() {
+        var res = await indexServe.indexInfo({
+            url: $_GET("url"),
+
+        })
+    }
+
+}
+new info()

历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/like.js

@@ -0,0 +1,9 @@
+class like {
+    constructor() {
+        footer()
+    }
+
+
+}
+
+new like()

历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/search.js

@@ -0,0 +1,54 @@
+class search {
+    constructor() {
+        this.page = 1
+        this.scrollLoadData() 
+        this.search_header()
+       
+
+    }
+    search_header() {
+        $(".header_return").click(function () {
+            history.back()
+        })
+        $(".header_search").click(async () => {
+           this.Getser()
+        })
+
+    }
+
+    async Getser(){
+        var res = await indexServe.saerch({
+            q: $(".search_input").val(),
+            page:this.page
+        })
+        res.forEach(v => {
+            $(".content .content_list").append(`
+        <li>
+           <a href="../info.html?url=${v.href}">
+             <div class="imgs"><img src="${v.img}" alt=""></div>
+             <div class="text">
+                 <h3>${v.title}</h3>
+                 <p>${v.des}</p>
+             </div>  
+           </a>
+        </li>`)
+        });
+    }
+    scrollLoadData() {
+        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, "页数");
+                await this.Getser();
+               
+            }
+        }
+
+    }
+
+}
+
+new search()

历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/type.js

@@ -0,0 +1,52 @@
+class type {
+    constructor(){
+        this.typeurl = [];
+        this.Gettype();
+        // this.Gettyper();
+        
+    }
+
+    async Gettype() {
+        var res = await indexServe.type();
+        res.forEach((v, i)=>{
+            this.typeurl.push(v.url)
+            $(".left_menu").append(`
+            <li class="${i == 0 ? 'active' : ''}"> 
+                <div class="img" style="background-position: ${v.position};"></div>
+                <p>${v.title}</p>
+            </li>
+            `)
+        })
+        this.Gettyper(this.typeurl[0])
+        var self = this
+        console.log(this.typeurl)
+        $(".left_menu li").click(function () {
+            if($(this).is('.active')){
+            }else {
+                $(this).addClass("active").siblings().removeClass("active");
+                var url = $('.left_menu li').index($(this))
+                self.Gettyper(self.typeurl[url])
+            }
+        });
+    }
+    async Gettyper(url){
+        var res = await indexServe.typer(
+            {
+                url:url
+            }
+        );
+        $(".right_content").html("");
+        res.forEach(v=>{
+            $(".right_content").append(`
+            <li>
+                <a href="${v.id}">
+                <img src="${v.img}" alt="">
+                <p>${v.title}</p>
+                </a>
+            </li>`)
+        })
+
+    }
+}
+
+new type()

历届学生/fontendsix/项目练习/上课项目/美食杰/js/page/video.js

@@ -0,0 +1,9 @@
+class video {
+    constructor() {
+        footer()
+    }
+
+
+}
+
+new video()

历届学生/fontendsix/项目练习/上课项目/美食杰/js/service/indexService.js

@@ -0,0 +1,92 @@
+class IndexService {
+    async threeMeals(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.threeMeals,
+            data: params
+        });
+    }
+    async saerch(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.saerch,
+            data: params
+        });
+    }
+    async banner1(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.banner1,
+            data: params
+        });
+    }
+    async typee(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.typee,
+            data: params
+        });
+    }
+    async threeMealss(params) {
+        return await (new AjAX()).get({
+            url: config.apiList.threeMealss,
+            data: params
+        });
+    }
+    
+
+
+    async indexType(params) {
+        return await (new AjAX()).get({
+                url: config.apiList.indexType,
+                data: params
+            });
+    }
+
+    async videoList(params) {
+        return await (new AjAX()).get({
+                url: config.apiList.videoList,
+                data: params
+            });
+    }
+    async indexx(params) {
+        return await (new AjAX()).get({
+                url: config.apiList.indexx,
+                data: params
+            });
+    }
+    
+
+    async indexBanner(params) {
+        return await (new AjAX()).get({
+                url: config.apiList.indexBanner,
+                data: params
+            });
+    }
+    async indexInfo(params) {
+        return await (new AjAX()).get({
+                url: config.apiList.indexInfo,
+                data: params
+            });
+    }
+
+    async type(params) {
+        return await (new AjAX()).get({
+                url: config.apiList.type,
+                data: params
+            });
+    }
+
+    async typer(params) {
+        return await (new AjAX()).get({
+                url: config.apiList.typer,
+                data: params
+            });
+    }
+
+    async typerl(params) {
+        return await (new AjAX()).get({
+                url: config.apiList.typerl,
+                data: params
+            });
+    }
+}
+
+
+var indexServe = new IndexService()

历届学生/fontendsix/项目练习/上课项目/美食杰/js/utils/index.js

@@ -0,0 +1,205 @@
+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>
+                            <p>${v.title}</p>
+                        </a>
+                    </li>
+                `
+        }).toString().replaceAll(",", "")
+            }
+         </ul>
+        `;
+
+        $("body").insertAdjacentHTML("beforeend", footerHtml)
+    }
+
+    /**
+     * 公共的头部
+     * @param {*} title 头部的中文标题 
+     * @param {*} icon  左边的图标 传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()
+    }
+
+    /**
+  * 搜索
+  * @param {*} title 中文内容
+  */
+    screahtop(title) {
+        var html = `
+        <div class="header_screah">
+            <div class="header_screahtop">
+                <a class="header_screahcon">
+                    <span class="iconfont icon-search"></span>
+                    ${title}
+                </a>
+            </div>
+        </div>
+        `;
+        $("body").append(html);
+    }
+    /**
+     *   
+     *  /**
+     * 详情搜索
+     * @param {*} title 中文内容
+     */
+    screahinfo() {
+        var html = `
+        <div class="header_screah">
+            <div class="header_screahtop">
+                <span class="iconfont icon-search"></span>
+                <input type="text" placeholder="搜索百万免费菜谱">
+            </div>
+        </div>
+        `;
+        $("body").append(html);
+    }
+    /**
+     * 
+     * @param {*} res ajax请求的返回值
+     * @param {*} father 父容器
+     * 
+     * 例 ：
+     * async do(){
+     *     var res = await indexServe.videoList();
+     *     FoodList(res,$('.had'))  
+     * }
+     *
+     */
+    FoodList(res, father) {
+        var html = `
+        ${(Array.isArray(res)) ?
+                res.map((vv) => {
+                    return `
+                <div class="wf-father swiper-slide">
+                ${vv.content.map((vvv) => {
+                        return `
+                        <div class="wf-item">
+                        <a class="wf-itemw" href="${vvv.url}">
+                            <div class="wf-item-top">
+                                <img class="img-one" src="${vvv.img}" alt="">
+                            </div>
+                            <div class="wf-item-content">
+                                <div class="wf-title">${vvv.title}</div>
+                                    <div class="wf-des">
+                                        <div class="t">养</div>
+                                        <div class="wf-des-rel">${vvv.des}</div>
+                                    </div>
+                            </div>
+                        </a>
+                    </div>
+                        `;
+                    }).toString().replaceAll(",", "")
+                        }
+                </div>
+                `;
+                }).toString().replaceAll(",", "")
+                : `
+            <div class="wf-father">
+            ${res.items.map((v) => {
+                    return `
+                    <div class="wf-item">
+                        <a class="wf-itemw" href="${v.path || v.href}">
+                            <div class="wf-item-top">
+                                ${v.type == 5 ?
+                            `<div class="img-four">
+                                    ${v.img.map(item => {
+                                return `<img src="${item}" alt="">`
+                            }).toString().replaceAll(",", "")}
+                                    </div>
+                                    <div class="mount">${v.total_amount}菜</div>
+                                    `
+                            : `<img class="img-one" src="${v.img || v.bd_photo}" alt="">`}
+                                ${v.type == 7 || v.hasOwnProperty("intro") ?
+                            `<div class="vicon"></div>`
+                            : ``
+                        }
+                            </div>
+                            <div class="wf-item-content">
+                                <div class="wf-title">${v.title}</div>
+                                ${v.type == 5 ? ``
+                            :
+                            ` 
+                                    ${('label' in v && v.label != null) ?
+                                `<div class="wf-des">
+                                            <div class="t">养</div>
+                                            <div class="wf-des-rel">${v.label.desc}</div>
+                                        </div>`
+                                : ``
+                            }
+                                    <div class="wf-item-content-bottom">
+                                        <div class="wf-item-bottom-left">
+                                            <img src="${('intro' in v) ? `https://st-cn.meishij.net/user/162/221/ns117912_142372157780527.jpg` : v.author.avatar_url}" alt="">
+                                            <span>${('intro' in v) ? `美食杰` : v.author.nickname}</span>
+                                        </div>
+                                        <div class="wf-item-bottom-right">
+                                            <div class="wf-item-bottom-right-i"></div>
+                                            <span>${v.click_num || v.viewed_amount}</span>
+                                        </div>
+                                    </div>
+                                    `
+                        }
+                            </div>
+                        </a>
+                    </div>`;
+                }).toString().replaceAll(",", "")
+                }`
+
+            }
+        `;
+        father.append(html);
+        // $('.wf-father').masonry({
+        //     // options
+        //     itemSelector: '.wf-item',
+        //     columnWidth: 200
+        //   });
+    }
+
+    $_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, $_GET, header, FoodList, screahtop, screahinfo } = new Utils()
+
+
+