first commit

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

@@ -0,0 +1,259 @@
+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()