first commit

历届学生/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()