first commit

历届学生/逯帅帅/项目开发/上课项目/美食App/js/page/index.js

@@ -0,0 +1,249 @@
+class Index {
+  constructor() {
+    this.currentIndex = 0;
+    this.allUserDo = [
+      { type: 1, title: '推荐', page: 1, content: [] },
+      { type: 2, title: '时令', page: 1, content: [] },
+      { type: 3, title: '食肉', page: 1, content: [] },
+      { type: 4, title: '素食', page: 1, content: [] },
+      { type: 5, title: '烘焙', page: 1, content: [] }
+    ];
+    this.getBanner();
+    this.getType();
+    this.getthreeMeals();
+    this.getIndexClass();
+
+  }
+
+  getIndexClass() {
+
+    // 渲染大家都在做的标题和内容
+    this.allUserDo.forEach((v,i) => {
+      $(".userdo").innerHTML += `
+         <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+      `;
+
+      $(".djdzz_father").innerHTML += `
+            <div class="djdzz_list three_meals_list ${i == 0 ? 'active' : ''}">
+            </div>
+        `;
+    });
+
+    var a = $(".userdo li"),
+        b = $(".djdzz_father .djdzz_list");
+
+    $("body").onscroll = () => {
+      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+      let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+
+      if(scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
+        Array.from(b).filter((v,i)=>{
+          if (v.className.indexOf("active") > -1) {
+            this.currentIndex = i;
+          }
+        });
+
+        this.allUserDo[this.currentIndex].page+=1;
+        this.getdata("scroll");
+        console.log(this.currentIndex)
+      }
+    }
+
+    // tabs 切换
+    a.forEach((v, i) => {
+      v.onclick = async () => {
+        this.currentIndex = i;
+        a.forEach((item,index) => {
+          item.className = "";
+          b[index].classList.remove("active")
+        });
+
+        b[i].classList.add("active")
+        v.className = "active";
+        await this.getdata();
+      }
+    });
+
+    this.getdata();
+
+  }
+
+  /**
+   * 获取首页的分类数据
+   * @returns {Promise<void>}
+   */
+  async getdata(type = "click") {
+    if (this.allUserDo[this.currentIndex].content.length == 0 || type == "scroll") {
+      var res = await indexService.indexClass({
+        type: this.allUserDo[this.currentIndex].type,
+        page: this.allUserDo[this.currentIndex].page
+      });
+
+      this.allUserDo[this.currentIndex].content = [
+        ...this.allUserDo[this.currentIndex].content,
+        ...res.items
+      ]
+
+      var currentF = $(".djdzz_father .djdzz_list")[this.currentIndex]
+
+      // 把数据插入到对应的 djdzz_list 中
+      var a = this.allUserDo[this.currentIndex].content;
+      currentF.innerHTML = "";
+      a.forEach((item,i) => {
+        currentF.innerHTML += `
+            <a href="../page/info.html?url=${item.path}">
+            <div class="djdzz_item">
+              ${
+          Array.isArray(item.img)
+            ? `<img src="${item.img[0]}" alt="">`
+            : `<img src="${item.img}" alt="">`
+        }
+              <div class="cons">
+                  <div class="text">${item.title}</div>
+                  ${
+          typeof item.label == "string" || item.label == null
+            ? ''
+            : `<span class="yang">养</span>
+                         <div class="desc">${item.label.desc}</div>`
+        }
+            
+                  ${
+          Array.isArray(item.author) ? '' : `<div class="user">
+                       <div class="user_left">
+                         <img src="${item.author.avatar_url}" alt="">
+                           <span>${item.author.nickname}</span>
+                       </div>
+                       <div class="user_right">
+                         <i class="iconfont iconyanjing"></i>
+                         <span>${item.viewed_amount}</span>
+                       </div>
+                     </div>`
+        }
+              </div>
+            </div>
+            </a>
+            `
+      })
+
+    }
+
+  }
+
+
+
+  /**
+   * banner下面的九宫格数据
+   * @returns {Promise<void>}
+   */
+  async getType() {
+    var res = await indexService.type();
+    res.forEach((v,i) => {
+      $(".menu_type").innerHTML += `
+        <li>
+            <a href="flist.html?id=${v.href}">
+              <img src="${v.img}" alt="">
+              <p>${v.title}</p>
+            </a>
+        </li>
+      `
+    })
+  }
+
+  /**
+   * 每日三餐
+   * @returns {Promise<void>}
+   */
+  async getthreeMeals() {
+    let res = await indexService.threeMeals();
+
+    // 渲染 每日三餐 标题
+    res.forEach((v,i) => {
+      $(".meals_title").innerHTML += `
+          <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
+      `
+    });
+
+    res.forEach((v,i) => {
+      $(".wrapper_list").innerHTML+=`
+            <li class="three_meals_list">
+                ${
+        (v.content.map((item, index) => {
+          return `<div class="three_meals_item">
+                                <img src="${item.img}" alt="">
+                                <div class="text">${item.title}</div>
+                                <span class="yang">养</span>
+                                <div class="desc">${item.des}</div>
+                            </div>`
+        })).toString().replace(/,/g,"")
+      }
+            </li>
+      
+      `;
+    });
+
+    var titleLi = $(".three_title li");
+
+    var threeSwiper = new Swiper(".swiper_list",{
+      time: 1000,
+      initialSlide: 0,
+      loop: false,
+      speed: 300,
+      autoplay: false,
+      grabCursor: true,
+      swiperWrapper: '.wrapper_list',
+      pagination: {
+        el: '.pagination'
+      },
+      on: {
+        slideChange: function (index) {
+          titleLi.forEach(v => v.className = "");
+          titleLi[index].className = "active"
+        }
+      },
+    });
+
+    titleLi.forEach((v,i) => {
+      v.onclick = function () {
+        threeSwiper.slideTo(i)
+      }
+    })
+
+
+
+
+
+  }
+
+  /**
+   * 获取banner数据
+   * @returns {Promise<void>}
+   */
+  async getBanner() {
+    var res = await indexService.banner();
+
+    var bannerFather = $(".swiper-wrapper")
+    res.forEach((v,i)=>{
+      bannerFather.innerHTML += `
+            <li>
+                <a href="./bannerinfo.html?id=${v.url}">
+                    <img src="${v.img}" alt="">
+                </a>
+            </li>
+      `
+    });
+
+    // 初始banner轮播
+    new Swiper(".swiper",{
+      time: 1000,
+      initialSlide: 0,
+      loop: false,
+      speed: 300,
+      autoplay: false,
+      grabCursor: true,
+    });
+  }
+
+}
+
+new Index();

历届学生/逯帅帅/项目开发/上课项目/美食App/js/page/info.js

@@ -0,0 +1,151 @@
+class Info {
+  constructor() {
+
+    this.likeList
+      = localStorage.getItem("list") == null
+        ? []
+        : JSON.parse(localStorage.getItem("list"));
+
+    this.currentinfo = {};
+    this.getInfo();
+  }
+
+  async getInfo() {
+    var res = await indexService.indexInfo({
+      url: query("url")
+    });
+
+    this.currentinfo = res;
+
+    $(".list_title h2").innerText = res.title;
+    res.stepInfo.arr.forEach((v) => {
+      $(".setp").innerHTML += `
+       <li>
+            <div class="icons" style="background-position: 0px ${v.position}px"></div>
+            <p>${v.title}</p>
+        </li>
+      `
+    });
+
+    $(".list_text p").innerText = res.stepInfo.message;
+    $(".posttime").innerText = res.posttime;
+    if (res.stepInfo.message.length > 22) {
+      $(".list_text").innerHTML += '<div class="more">更多</div>';
+
+      $(".list_text .more").onclick = function () {
+        $(".list_text").style.height = "auto";
+        $(".list_text .more").style.display = "none";
+      }
+    }
+
+
+    res.material.main.forEach((v) => {
+      $(".main_f").innerHTML += `
+        <li>
+            <span>${v.title}</span>
+            <span>${v.nums}</span>
+        </li>
+      `
+    })
+
+    res.material.accessories.forEach((v) => {
+      $(".fu_f").innerHTML += `
+        <li>
+            <span>${v.title}</span>
+            <span>${v.nums}</span>
+        </li>
+      `
+    })
+
+    res.DetailedSteps.forEach((v,i,arr) => {
+      $(".setp_content").innerHTML += `
+        <li>
+           ${
+              v.step_img == null 
+                ? `<h3>${v.step_title}</h3><p>${v.step_text}</p>`
+                : `
+                <div class="step_text">${v.step_title}</div>
+                  <img class="${v.step_title == "成品图" ? 'lastimg': ''}" src="${ Array.isArray(v.step_img) ? v.step_img[0] : v.step_img}" alt="">
+                  
+                  ${
+                      v.step_text == null ? '' : `<p>${v.step_text || ''}</p>`
+                   }
+                  
+                  ${
+                    Array.isArray(v.step_img)
+                    ? `
+                         <div class="tabs_img">
+                            ${
+                        (v.step_img.map((item, index) => {
+                          return `<img src="${item}"/>`
+                            })).toString().replace(/,/g, "")
+                          }
+                          </div>
+                      `
+                    : ''
+                  }
+                `
+            }
+            
+        </li>
+      `
+    });
+
+    var tabImg = document.querySelectorAll(".tabs_img img");
+    tabImg.forEach((v) => {
+      v.onclick = function () {
+        $(".lastimg").setAttribute("src", v.getAttribute("src"))
+      }
+    })
+
+
+    this.like();
+
+  }
+
+  like() {
+    var isHave = this.likeList.filter((item,index) => {
+      if (item.backImg == this.currentinfo.backImg) {
+        return item
+      }
+    });
+
+    if (isHave.length != 0) {
+      $(".likeicon").classList.replace("iconshoucang1", "iconshoucang")
+    }
+
+
+
+
+    // iconshoucang1 表示空心图标
+    // iconshoucang 表示实心图标
+    $(".likeicon").onclick = () => {
+
+      // true 表示当前是 空心图标  收藏操作
+      if ($(".likeicon").classList.contains("iconshoucang1")) {
+        $(".likeicon").classList.replace("iconshoucang1", "iconshoucang")
+
+        this.likeList.push(this.currentinfo)
+
+        localStorage.setItem("list", JSON.stringify(this.likeList))
+
+        // false 表示当前是 实心图标  取消收藏
+      } else {
+        $(".likeicon").classList.replace("iconshoucang", "iconshoucang1")
+
+
+        this.likeList = this.likeList.filter((item,index) => {
+          if (item.backImg != this.currentinfo.backImg) {
+            return item
+          }
+        });
+
+        localStorage.setItem("list", JSON.stringify(this.likeList))
+
+
+      }
+    }
+  }
+}
+
+new Info();

历届学生/逯帅帅/项目开发/上课项目/美食App/js/page/search.js

@@ -0,0 +1,61 @@
+class Search {
+  constructor() {
+    this.page = 1;
+    this.value = "";
+    this.lock = true;
+    this.bindSearch()
+  }
+
+  bindSearch () {
+    $(".submitSearch").onclick = () => {
+      if (this.lock) {
+        this.value = $(".header input").value;
+        if (this.value.length != 0) {
+          $(".three_meals_list").innerHTML = "";
+          this.getSearch()
+        }
+      }
+    }
+
+    $(".header input").oninput = () => {
+      this.lock = true;
+      this.value = $(".header input").value;
+      if (this.value.length == 0) {
+        $(".three_meals_list").innerHTML = "";
+      }
+    }
+  }
+
+  async getSearch() {
+
+    var res = await indexService.search({
+      q: this.value,
+      page: this.page
+    });
+
+    this.lock = false;
+
+    if (res.length > 0) {
+      $(".three_meals_list").innerHTML += "";
+      res.forEach((v) => {
+        $(".three_meals_list").innerHTML += `
+        <li class="three_meals_item">
+            <img src="${v.img}" alt="">
+            <div class="text">${v.des}</div>
+            <div class="desc">${v.title}</div>
+        </li>
+        `
+      });
+
+      scroll( () => {
+        this.page+=1;
+        this.getSearch();
+      });
+    } else {
+      $(".three_meals_list").innerHTML = "<p class='nodata'>暂无数据</p>"
+    }
+
+  }
+}
+
+new Search();

历届学生/逯帅帅/项目开发/上课项目/美食App/js/page/type.js

@@ -0,0 +1,73 @@
+class Type {
+  constructor() {
+    this.index = 0;
+    this.typeMenu = [];
+    this.getLeftMenu();
+  }
+
+  async getLeftMenu() {
+    var res = await typeService.leftMenu();
+    res.forEach((v,i) => {
+      v.page = 1;
+      v.content = []
+      $(".type_left").innerHTML+= `
+       <li class="${i ==0 ?'active' : ''}">
+            <div class="icon" style="background-position: 0px ${v.position}px"></div>
+            <span>${v.title}</span>
+        </li>
+      `;
+
+      $(".type_right").innerHTML+= `
+         <div class="right_contet ${i ==0 ? 'active' : ''}"></div>
+      `
+    });
+
+    var typeLi = $(".type_left li");
+    var rightContent = $(".type_right .right_contet");
+
+    console.log("rightContent: ", rightContent);
+
+    typeLi.forEach((v,i) => {
+      v.onclick = () => {
+        typeLi.forEach((t,index) => {
+          t.className = "";
+          rightContent[index].classList.remove("active");
+        });
+        v.className = "active";
+        this.index = i;
+        this.getRightMenu();
+        rightContent[i].classList.add("active");
+      }
+    })
+
+    this.typeMenu = res;
+
+    this.getRightMenu();
+  }
+
+  async getRightMenu() {
+    if (this.typeMenu[this.index].content.length == 0) {
+      var res = await typeService.rightMenu({
+        url: this.typeMenu[this.index].url
+      });
+
+      this.typeMenu[this.index].content = [
+        ...this.typeMenu[this.index].content,
+        ...res
+      ];
+
+      var rContent = $(".type_right .right_contet");
+
+      this.typeMenu[this.index].content.forEach((v,i) => {
+        rContent[this.index].innerHTML+= `
+       <div class="li">
+           <img src="${v.img}" alt="">
+           <p>${v.title}</p>
+       </div>
+      `
+      });
+    }
+  }
+}
+
+new Type();