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

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