ClassContent/历届学生/韩一伟/项目开发/练习项目/作业/2021.07.27/js/page/index.js

class Index {
    constructor() {
        this.currentIndex = 0;
        this.classArr = [
            { id: 1, title: '推荐', page: 1, total_page: 0, content: [] },
            { id: 2, title: '时令', page: 1, total_page: 0, content: [] },
            { id: 3, title: '食肉', page: 1, total_page: 0, content: [] },
            { id: 4, title: '素食', page: 1, total_page: 0, content: [] },
            { id: 5, title: '烘焙', page: 1, total_page: 0, content: [] },
        ]
        this.getIndex();
        this.getBanner();
        this.getType();
        this.renderLi()

        footer()
    }

    renderLi() {
        this.classArr.forEach((v,i) => {
            $(".djdzz ul").append(`
              <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
            `);

            $(".djdzz-container .swiper-wrapper").append(`
                <div class="swiper-slide ${i == 0 ? '' : 'ai'}">
                    <div class="mrsc_list cj-item"></div>
                </div>
            `);
        });

        var li_arr = $(".djdzz ul li");
        var swiperSlide = $(".djdzz-container .swiper-slide")
        var self = this;

        var djdzz = new Swiper('.djdzz-container', {
            on: {
                slideChangeTransitionStart: function () {
                    self.currentIndex = this.activeIndex;
                    swiperSlide.eq(this.activeIndex).removeClass("ai").siblings().addClass("ai")
                    li_arr.eq(this.activeIndex).addClass("active").siblings().removeClass("active")
                    // self.getClassList()
                },
            },
        });


       
        li_arr.click(function() {
            djdzz.slideTo($(this).index())
        });

        this.getClassList();

        var abc = () => {
            console.log(this)
            this.classArr[this.currentIndex].page += 1;
            this.getClassList("more");
        }

        var throttleFun = throttle(abc, 1000);

        new auiScroll({ listen:true, distance: 200 },(ret) => {
            if(ret.isToBottom){
                throttleFun()
            }
        });
    }

    async getClassList(type = "click") {
        var getData = async () => {
            var res = await indexServe.classList({
                type: this.classArr[this.currentIndex].id,
                page: this.classArr[this.currentIndex].page
            });
            this.classArr[this.currentIndex].content = [
                ...this.classArr[this.currentIndex].content,
                ...res.items
            ]
            var mrsc_list = $(".djdzz-container .mrsc_list")
            mrsc_list.eq(this.currentIndex).empty()
            this.classArr[this.currentIndex].content.forEach((v,i) => {
                mrsc_list.eq(this.currentIndex).append(`
                    <a href="">
                        <div class="mrsc_list_item">
                            <img src="${Array.isArray(v.img) ? v.img[0] : v.img}" alt="">
                            <p class="tips_titles">${v.title}</p>
                            <span class="tips_text">养</span>
                            ${
                  typeof v.label == "string" ||
                  v.label == null
                    ? ''
                    : `<p class="tips">${v.label.desc}</p>`
                }
                        </div>
                    </a>
                `)
            })
        }


        if (type == "click") {
            if (this.classArr[this.currentIndex].content.length == 0) {
                getData()
            }
        } else {
            getData()
        }

    }

    async getIndex() {
        var res = await indexServe.threeMeals();
        console.log(res);

        res.forEach((v, i) => {
            $(".dddd ul").append(`
              <li class="${i == 0 ? 'active' : ''}">${v.title}</li>
            `);

            $(".mrsc-container .swiper-wrapper").append(`
                <div class="swiper-slide">
                  <div class="mrsc_list">
                    ${v.content.map(item => {
                return `<a href="./info.html?url=${item.url}">
                            <div class="mrsc_list_item">
                                <img src="${item.img}" alt="">
                                <p class="tips_titles">${item.title}</p>
                                <span class="tips_text">养</span>
                                <p class="tips">${item.des}</p>
                            </div>
                            </a>`
            }).toString().replaceAll(",", "")
                }
                  </div>
                </div>
            `)
        });

        var li = $(".dddd ul li")

  
        li.click(function() {
            mySwiper.slideTo($(this).index())
        })

        var mySwiper = new Swiper('.mrsc-container', {
            on: {
                slideChangeTransitionStart: function () {
                   li.eq(this.activeIndex).addClass("active").siblings().removeClass("active")
                },
            },
        })
    }

    async getType() {
        let res = await indexServe.type();

        res.forEach(v => {
            $(".menu .aui-row").append(`
            <div class="aui-col-5">
                <img src="${v.img}" alt="">
                <div class="aui-grid-label">${v.title}</div>
            </div>
            `)
        });
    }

    async getBanner() {
        var res = await indexServe.banner();
        res.forEach(v => {
            $(".banner-container .swiper-wrapper").append(`
                <div class="swiper-slide">
                    <a href="">
                      <img src="${v.img}" alt="">
                    </a>
                </div>
            `)
        });

        var mySwiper = new Swiper('.banner-container', {
            loop: true,
            pagination: {
                el: '.swiper-pagination',
            },
        })
    }


}

new Index()