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

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();