first commit

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/banner.js

@@ -0,0 +1,16 @@
+class banner{
+    constructor() {
+        console.log("测试")
+        this.getbannerInfo()
+    }
+    async getbannerInfo(){
+        let res = await indexServe.bannerInfo({
+            url: query("url")//引入AJAX
+            });
+            $(".header img").src=res.banner
+            $(".content h1").innerText=res.title
+            $(".contentJs").innerHTML=res.content
+        console.log(res)
+    }
+}
+new banner()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/index.js

@@ -0,0 +1,222 @@
+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="./banner.html?url=${v.url}" target="_blank">
+              <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}" target="_blank">
+                      <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>
+         <a href="./info.html?url=${v.path}" target="_blank">
+          <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>`
+            : ''
+        }</a>
+        </li>
+      `
+        console.log(v)
+      })
+
+
+
+    }
+
+
+    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();

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/info.js

@@ -0,0 +1,111 @@
+class info {
+    constructor() {
+        console.log("详情");
+        this.getInfo()
+    }
+
+    async getInfo() {
+        let res = await indexServe.info({
+            url: query("url")//引入AJAX
+        });
+        console.log(res)
+        $(".header img").src = res.backImg;//背景图
+        $(".info_main h2").innerText = res.title;//更改文字
+        $(".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 = "收起"
+                $(".show_more").style.height = "auto";
+                $(".more img").style = `transform: rotate(180deg);`
+            } 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/*二次判断是否为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
+            }
+        })
+    }
+
+}
+
+new info()

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/like.js

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

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/search.js

@@ -0,0 +1,77 @@
+class Search {
+    constructor() {
+        this.page = 1;
+        this.getSearch();
+
+        $("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.page += 1
+                this.getces()
+            }
+        }
+    }
+
+    getSearch() {
+        console.log("2223")
+        let res
+        $(".ser").onclick = async () => {
+            res = await indexServe.search({
+                page: this.page,
+                q: $(".caipu").value//获取输入框里面的内容返回
+            });
+            console.log(res)
+            if (res.length == 0) {
+                alert("暂无数据")
+            } else {
+                res.forEach((v) => {
+                    $(".list").innerHTML += `
+                 <li>
+                <a href="./info.html?url=${v.href}" target="_blank">
+                    <img src="${v.img}" alt="">
+                    <div class="li_left">
+                        <h3>${v.title}</h3>
+                        <p>${v.des}</p>
+                    </div>
+                </a>
+                   </li>                     
+                                            
+                                            `
+                })
+            }
+        }
+    }
+
+    async getces(){
+      let  res = await indexServe.search({
+            page: this.page,
+            q: $(".caipu").value//获取输入框里面的内容返回
+        });
+        console.log(res)
+        if (res.length == 0) {
+            alert("暂无数据")
+        } else {
+            res.forEach((v) => {
+                $(".list").innerHTML += `
+                 <li>
+                <a href="">
+                    <img src="${v.img}" alt="">
+                    <div class="li_left">
+                        <h3>${v.title}</h3>
+                        <p>${v.des}</p>
+                    </div>
+                </a>
+                   </li>                     
+                                            
+                                            `
+            })
+        }
+    }
+
+}
+
+new Search();

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/type.js

@@ -0,0 +1,60 @@
+class Type {
+    constructor() {
+        footer();
+        this.gettypeLeft();
+this.gettypeRight()
+
+    }
+
+    reulr = "/fenlei/zhushidaquan/"//用来接受url
+    async gettypeLeft() {
+        let res = await indexServe.typeLeft({})//AJAX
+
+        res.forEach((v, i) => {
+            $(".content_left_list").innerHTML += `
+      <li style=".back">
+        <div class="list_a">
+          <i  style="background-position:0px ${v.position}px"></i>
+          <span class="list_span">${v.title}</span>
+        </div>
+      </li>
+     `
+
+        })//遍历左侧菜单栏
+
+
+        _(".content_left_list li").forEach((v, i) => {
+            v.onclick = () => {
+                console.log(res[i].url)//这个是url数据
+                this.reulr=res[i].url
+                // $(".content_right_list li").style.classText =`background:#fff`
+                $(".content_right_list").innerHTML=""//点击之前还要滞空一次url数据
+
+                this.gettypeRight()//调用方法遍历
+            }
+
+
+        })
+        console.log(res)
+    }
+
+    async gettypeRight() {
+        let res = await indexServe.typeRight({
+            url: this.reulr//返回参数
+        })
+        res.forEach(v=>{
+            $(".content_right_list").innerHTML+=`
+                   <li>
+                <a href="">
+                 <img src="${v.img}" alt="" class="content_right_list_img">
+                    <span class="content_right_list_span">${v.title}</span>
+                    </a>
+                    </li>
+            
+            `
+        })//遍历右侧菜单
+        console.log(res)
+    }
+}
+
+new Type();

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/video.js

@@ -0,0 +1,72 @@
+class Video {
+    constructor() {
+        footer()
+
+        this.classList = {total_page: 0, page: 1, content: []}
+        this.getvideo()
+
+        $("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.classList.page += 1
+                this.getvideo()
+            }
+        }
+    }
+
+    async getvideo() {
+        let res = await indexServe.video({
+            page: this.classList.page,
+        });
+
+        this.classList.total_page = res.total_page;
+        console.log(this.classList.content)
+        this.classList.content = [
+            ...this.classList.content,
+            ...res.items,
+        ]
+
+        $(".content_title").innerHTML = ""
+        this.classList.content.forEach(v => {
+            $(".content_title").innerHTML += `
+       <li class="food">
+                <div class="content_img">
+                    <img src="${v.bd_photo}" alt=""class="content_img_1">
+                    <i class="content_img_play"></i>
+                </div>
+                <div class="content_font">
+                    <p class="title">${v.seo_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">${v.click_num}</span>
+                        </div>
+                    </div>
+                </div>
+        </li>
+                                `
+        });
+
+
+
+        _(".content_title li").forEach((v, i) => {/*获取所有li标签*/
+            v.onclick = function () {
+                localStorage.setItem("videoInfo", JSON.stringify(res.items[i]))//数据进行转化存储到本地并
+                location.href="./video_detailed.html"
+            }
+        })
+    }
+
+
+}
+
+new Video();

历届学生/吴欣阳/项目开发/练习项目/课程练习/7.8/front/js/page/videoInfo.js

@@ -0,0 +1,19 @@
+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
+    $(".shijian").innerText = secondToTimeStr(info.total_time);
+
+  }
+
+}
+
+new VideoInfo()