first commit

历届学生/吴欣阳/项目开发/上课项目/美食app/front/js/page/index.js

@@ -0,0 +1,220 @@
+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="">
+              <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}" >
+                      <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>
+        
+          <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>`
+            : ''
+        }
+        </li>
+      `
+      })
+
+
+
+    }
+
+
+    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();