ClassContent/项目合集/菜谱App/fontend/js/page/index.js

class Index {
  constructor() {
    this.index = 0;
    this.doTogetherData = [
      {
        type: 1,
        title: '推荐',
        content: [],
        page: 1
      },
      {
        type: 2,
        title: '时令',
        content: [],
        page: 1
      },
      {
        type: 3,
        title: '食肉',
        content: [],
        page: 1
      },
      {
        type: 4,
        title: '素食',
        content: [],
        page: 1
      },
      {
        type: 5,
        title: '烘焙',
        content: [],
        page: 1
      }
    ];
    this.getBannerList();
    this.renderMenu();
    this.getThreeMeals();
    
    this.renderDoTogether();
    this.DoTogether();

    this.scrollLoadData();
  }

  /**
   * 获取轮播图列表
   */
  async getBannerList() {
    var banner = $(".banner_swiper .swiper-wrapper");
    let res = await indexService.bannerIndex({ id: 1 });
    res.forEach((val,index) => {
      banner.append(`
        <div class="swiper-slide">
          <a href="./bannerinfo.html?url=${val.url}">
            <img src="${val.img}" alt=""/>
          </a>
        </div>
      `)
    });

    this.initBannerSwiper();
  }

  // 初始化banner轮播图
  initBannerSwiper() {
    var mySwiper = new Swiper('.banner_swiper', {
      direction: 'horizontal',
      loop: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      }
    })
  }

  async getThreeMeals() {
    var mrscUl = $(".mrsc ul");
    var mrscSwiper = $(".mrsc_swiper .swiper-wrapper");

    let res = await indexService.threeMeals({});
    console.log(res)
    res.forEach((val,index)=>{
      mrscUl.append(`
        <li class="${index==0? 'active': ''}">${val.title}</li>
      `)

      mrscSwiper.append(
          `               
            <div class="swiper-slide">
              <div class="mrsc_list">
              </div>
            </div>           
          `
      );

      val.content.forEach((v,i)=>{
        $(".mrsc_swiper .swiper-wrapper .mrsc_list")
            .eq(index).append(
                ` <a href="./info.html?url=${v.url}">
                    <div class="mrsc_list_item">
                      <img src="${v.img}" alt="">
                      <p class="tips_titles">${v.title}</p>
                      <span class="tips_text">养</span>
                      <p class="tips">${v.des}</p>
                    </div>
                  </a> 
                `
        );
      })

    });

    this.initMrsc()
  }

  initMrsc() {
    var MrscUl = $(".mrsc ul li");
 
    var MrscSwiper = new Swiper('.mrsc_swiper', {
      direction: 'horizontal',
      on: {
        slideChangeTransitionEnd: function(){
          console.log(this.activeIndex);
          MrscUl.eq(this.activeIndex).addClass("active").siblings().removeClass("active")
        },
      },
    });

    MrscUl.each(function(i,e) {
      $(this).on("click", function() {
        MrscSwiper.slideTo(i)
      });
    });
  }

  async renderMenu() {
    let res = await indexService.type({});
    console.log(res)
    res.forEach((v,i)=>{
      $(".menu").append(`
         <li>
            <a href="./fllist.html?url=${v.href}">
              <img src="${v.img}" alt="">
              <p>${v.title}</p>
            </a>
          </li>
      `)
    })
  }

  /**
   * 渲染内容的
   * @returns {Promise<void>}
   * @constructor
   */
  async DoTogether() {

    let res = await indexService.indexClass({
      type: this.doTogetherData[this.index].type,
      page: this.doTogetherData[this.index].page
    });

    this.doTogetherData[this.index].content
        = [ ...this.doTogetherData[this.index].content, ...res.items ]

    $(".do_together_content .roll_father").eq(this.index).empty()

    // 渲染列表的
    this.doTogetherData[this.index].content.forEach((v,i)=>{
      $(".do_together_content .roll_father").eq(this.index).append(`
      <div class="do_together_item" 
      style="height: ${ typeof v.img == 'string' ? 'auto' : '12rem !important' }">
      <a href="info.html?url=${v.path}">
        <div class="item_img">
      ${
          typeof v.img == 'string'
              ? `<img src="${v.img}" alt="">`
              : `<img src="${v.img[0]}" alt="">`
        }
    </div>
   
    <div class="item_padd">
      <div class="tips_titles">${v.title}</div>
      <span class="tips_text">养</span>
      ${
          v.label == null || v.label.length == 0
          ? '' 
          : `<p class="tips">${v.label.desc}</p>` 
        }
    </div>
      ${
          v.author.hasOwnProperty("avatar_url")
          ? `<div class="item_avatr item_pa">
              <div class="avatr_left">
                <img src="${v.author.avatar_url}" alt="">
                <span>${v.author.nickname}</span>
              </div>
              <div class="avatr_view">
                <i class="iconfont icon-yanjing"></i>
                <span>${v.viewed_amount}</span>
              </div>
            </div>`
          : ''    
        }
      </div>
            </a> 
      `)
    })


    // console.log("RenderDoTogether: ", res);
  }

  /**
   * 渲染标题
   */
  renderDoTogether() {
    this.doTogetherData.forEach((v,i)=>{
      $(".do_together_title").append(`
         <li class="${i==0?'active':''}">${v.title}</li>
      `);

      $(".do_together_content").append(`
        <div class="roll_father ${i==0?'showRoll':''}"></div>
      `)
    });

    var titleLi = $(".do_together_title li"),
        RollFather = $(".do_together_content .roll_father");

    var a = this;
    titleLi.on('click', function () {
      a.index = $(this).index();
      $(this).addClass("active").siblings().removeClass("active")

      if (a.doTogetherData[a.index].content.length == 0) {
        a.DoTogether()
      }

      RollFather.eq($(this).index()).addClass("showRoll").siblings().removeClass("showRoll")
    })
  }

  scrollLoadData() {
    var scroll = new auiScroll({
      listen:true,
      distance: 10 //判断到达底部的距离，isToBottom为true
    }, (ret) => {
      if(ret.isToBottom){
        console.log("滚动到底部")
        this.doTogetherData[this.index].page += 1;
        this.DoTogether()
      }
    });
  }
}

new Index()