first commit

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

@@ -0,0 +1,150 @@
+class Index {
+    constructor() {
+        this.indexList = [
+            { id: 1, title: '推荐', content: [], page: 1, totalPage: 0 },
+            { id: 2, title: '时令', content: [], page: 1, totalPage: 0 },
+            { id: 3, title: '食肉', content: [], page: 1, totalPage: 0 },
+            { id: 4, title: '素食', content: [], page: 1, totalPage: 0 },
+            { id: 5, title: '烘焙', content: [], page: 1, totalPage: 0 },
+        ];
+        this.index = 0;
+        this.getBanner();
+        this.getType();
+        this.threeMeals();
+        this.getIndex();
+        this.renderMRSC();
+    }
+
+    async threeMeals() {
+        var res = await server.threeMeals();
+        res.forEach((v,i) => {
+            $(".ddd ul").append(`
+              <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+            `);
+
+            $(".mrsc_swiper .swiper-wrapper").append(`
+              <div class="swiper-slide">
+                  <div class="mrsc_list">
+                  ${
+                    v.content.map((item,index) => {
+                      return `
+                        <a href="info.html?url=${item.url}">
+                          <div class="mrsc_list_item">
+                            <img src="${item.img}" alt="">
+                            <p class="tips_titles">${item.title}</p>
+                            <span class="tips_text">养</span>
+                            <p class="tips">${item.des}</p>
+                          </div>
+                        </a>
+                      `
+                    }).toString().replaceAll(",", "")
+                   }
+                  </div>
+                </div>
+            `);
+        })
+
+        $(".ddd ul li").click(function () {
+            // 链式调用
+            $(this).addClass("active").siblings().removeClass("active")
+            mySwiper.slideTo($(this).index())
+        });
+
+        var mySwiper = new Swiper ('.mrsc_swiper', {
+            direction: 'horizontal',
+            on: {
+                slideChangeTransitionEnd: function(){
+                    $(".ddd ul li")
+                        .eq(this.activeIndex)
+                        .addClass("active")
+                        .siblings()
+                        .removeClass("active")
+                },
+            },
+            pagination: {
+                el: '.swiper-pagination',
+            },
+        })
+    }
+
+    async getType() {
+        var res = await server.type();
+        res.forEach(v => {
+            $(".menu").append(`
+             <li>
+              <a href="./typeList.html?url=${v.href}">
+                <img src="${v.img}" alt="">
+                <p>${v.title}</p>
+              </a>
+             </li>
+            `)
+        })
+    }
+
+    async getBanner() {
+        var res = await server.banner();
+        res.forEach(v => {
+            $(".banner_swiper .swiper-wrapper")
+                .append(`<div class="swiper-slide">
+                          <a href="./bannerinfo.html?url=${v.url}"><img src="${v.img}" alt=""></a>
+                        </div>`)
+        });
+
+        new Swiper ('.banner_swiper', {
+            direction: 'horizontal',
+            pagination: {
+                el: '.swiper-pagination',
+            },
+        });
+    }
+
+    async getIndex() {
+        if (this.indexList[this.index].content.length == 0) {
+            var res = await server.index({
+                type: this.indexList[this.index].id,
+                page: this.indexList[this.index].page
+            });
+            this.indexList[this.index].page = res.current_page
+            this.indexList[this.index].totalPage = res.total_page
+            this.indexList[this.index].content = [
+                ...this.indexList[this.index].content,
+                ...res.items
+            ]
+
+            item(
+                $(".do_together_content .roll_father").eq(this.index),
+                this.indexList[this.index].content
+            )
+        }
+    }
+
+
+    renderMRSC() {
+        this.indexList.forEach((v,i) => {
+            $(".alldo ul").append(`
+              <li class="${i == 0 ? 'active': ''}">${v.title}</li>
+            `);
+
+            $(".do_together_content").append(`
+                <div class="roll_father ${i == 0 ? 'showRoll': ''}"></div>
+            `);
+        });
+
+        var self = this;
+        $(".alldo ul li").click(function () {
+            self.index = $(this).index();
+            $(this).addClass("active").siblings().removeClass("active")
+
+            $(".do_together_content .roll_father")
+                .eq(self.index)
+                .addClass("showRoll")
+                .siblings()
+                .removeClass("showRoll")
+
+            self.getIndex()
+        })
+    }
+
+}
+
+new Index();

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

@@ -0,0 +1,83 @@
+class Info {
+    constructor() {
+        this.getInfo();
+    }
+
+    async getInfo() {
+        var res = await server.info({
+            url: query("url")
+        });
+        $(".img_hidden img").attr({
+            src: res.backImg
+        })
+
+        $(".list_title h2").text(res.title)
+        $(".posttime").text(res.posttime)
+        $(".list_text p").text(res.stepInfo.message)
+
+        $(".list_text .more").click(function () {
+            $(".list_text").css({
+                height: 'auto'
+            });
+            $(this).hide();
+        })
+
+        res.stepInfo.arr.forEach(v => {
+            $(".ddd").append(`
+              <li>
+                <div class="i" style="background-position: 0px ${v.position}px"></div>
+                <p>${v.title}</p>
+              </li>
+            `)
+        })
+
+
+        res.material.main.forEach(v => {
+            $(".main_l").append(`
+              <li>
+                <span>${v.title}</span>
+                <span>${v.nums}</span>
+              </li>
+            `)
+        })
+
+        res.material.accessories.forEach(v => {
+            $(".accessories_l").append(`
+              <li>
+                <span>${v.title}</span>
+                <span>${v.nums}</span>
+              </li>
+            `)
+        })
+
+        res.DetailedSteps.forEach(v => {
+            $(".content_list").append(`
+                <li>
+                  <div class="step ${v.step_img == null ? 'zj': ''}">${v.step_title}</div>
+                  <img class="${Array.isArray(v.step_img) ? 'change': ''}" src="${Array.isArray(v.step_img) ? v.step_img[0] : v.step_img }" alt="">
+                  <p>${v.step_text == null ? "" : v.step_text}</p>
+                  ${
+                     Array.isArray(v.step_img)
+                     ? `<div class="tabs_img">
+                            ${
+                               v.step_img.map(item => {
+                                   return `<img src="${item}" alt="">`
+                               }).toString().replaceAll(",","")
+                             }
+                        </div>`
+                     : ''    
+                   }
+                </li>
+            `)
+        })
+
+        $(".tabs_img img").click(function () {
+            $(".change").attr({
+                src: $(this).attr("src")
+            })
+        })
+        console.log(res)
+    }
+}
+
+new Info();

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

@@ -0,0 +1,55 @@
+class Type {
+    constructor() {
+        this.getLeftMenu()
+        // this.getRightMenu()
+        
+    }
+
+    async getLeftMenu() {
+        var res = await server.leftMenu()
+        console.log(res);
+        res.forEach((v, i) => {
+            $(".left_menu").append(`
+                <li class="${i == 0 ? 'active_menu' : ''}"> 
+                    <div class="img" style="background-position: 0 ${v.position}px;"></div>
+                    <p>${v.title}</p>
+                </li>
+            `)
+           
+        });
+        
+
+
+        // $(".left_menu li").click(function() {
+        //     $(this).addClass("active_menu").siblings().removeClass("active_menu")
+        // })
+        var b = this
+        $(".left_menu").find("li").each(function (index, item) {
+            $(this).click(function () {
+                $(this).addClass("active_menu").siblings().removeClass("active_menu")
+                console.log(res[index].url);
+                b.getRightMenu(res[index].url)
+            })
+        })
+
+    }
+    
+
+    async getRightMenu(a) {
+        var data = await server.rightMenu({
+            url:a
+        })
+        console.log(data);
+        data.forEach((v, i) => {
+            $(".left_menu").append(`
+                <li>
+                    <a href="./fllist.html?url=${v.id}">
+                    <img src="${v.img}" alt="">
+                    <p>${v.title}</p>
+                    </a>
+                </li>
+            `)
+        })
+    }
+}
+new Type;

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

@@ -0,0 +1,63 @@
+class Video {
+    constructor() {
+        this.getVideo()
+        
+    }
+
+
+    async getVideo() {
+        var res = await server.video()
+        console.log(res);
+        res.items.forEach((v, i) => {
+            $(".video_content").append(`
+            <li>
+                <a>
+                    <div class="content_pic" style="background-image: url(${v.bd_photo});">
+                        <div class="pic_yingyin">
+                            <i class="iconfont icon-shipin"></i>
+                        </div>
+                    </div>
+                    <p>${v.seo_title}</p>
+                    <div class="pic_pinglun">
+                        <div class="toux_left">
+                            <img src="../img/ms.jpg" alt="">
+                            <span>美食杰</span>
+                        </div>
+                        <div class="toux_right">
+                            <i class="iconfont icon-eye"></i>
+                            <span>${v.click_num}</span>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            
+            `)
+        })
+        var videoList = {};
+
+        $(".video_content").find("li").each(function(index) {
+            $(this).click(function() {
+                console.log(index);
+                addvideo(index)
+            })
+        })
+
+        function addvideo(index) {
+           videoList.title = res.items[index].seo_title,
+           videoList.video = res.items[index].xhz_video_url,
+           videoList.introduce = res.items[index].intro
+    
+            localStorage.setItem("video", JSON.stringify(videoList))
+            location.href = "./videoinfo.html"
+        }
+
+    }
+
+    
+    
+
+
+
+}
+
+new Video();

历届学生/fontendseven/项目练习/上课项目/美食/js/page/videoinfo.js

@@ -0,0 +1,16 @@
+class videoInfo {
+    constructor() {
+        this.renderVideo()
+    }
+
+
+    renderVideo() {
+        this.data= JSON.parse(localStorage.getItem("video"))
+        
+        
+        $(".img_hidden a video").attr("src", this.data.video)
+        $(".conten h1").text(this.data.title)
+        $(".conten p").text(this.data.introduce)
+    }
+}
+new videoInfo ();