195 lines
5.0 KiB
JavaScript
195 lines
5.0 KiB
JavaScript
class banner {
|
|
constructor() {
|
|
|
|
this.index = 0;
|
|
this.mySwiper = null;
|
|
this.Recommend = [
|
|
{
|
|
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.Getbanner()
|
|
this.Gettypee()
|
|
this.GetthreeMealss()
|
|
this.GETRecommend()
|
|
this.Getindexx()
|
|
|
|
}
|
|
//开始的轮播图
|
|
async Getbanner() {
|
|
var res = await indexServe.banner1();
|
|
console.log(res);
|
|
res.forEach((v, i) => {
|
|
$(".banner .swiper-wrapper").append(`
|
|
<div class="swiper-slide">
|
|
<a href="../html${v.url}">
|
|
<img src="${v.img}" alt="">
|
|
</a>
|
|
</div>
|
|
`)
|
|
|
|
});
|
|
|
|
this.initBannerSwiper();
|
|
|
|
}
|
|
//九宫格
|
|
async Gettypee() {
|
|
var res = await indexServe.typee();
|
|
res.forEach((v, i) => {
|
|
$(".list").append(`
|
|
<li>
|
|
<a href="./?url=${v.href}">
|
|
<img src="${v.img}" alt="">
|
|
<p class="list_text">${v.title}</p>
|
|
</a>
|
|
</li>
|
|
`)
|
|
});
|
|
|
|
|
|
|
|
}
|
|
//每日三餐轮播图
|
|
async GetthreeMealss() {
|
|
|
|
var res = await indexServe.threeMealss();
|
|
console.log(res);
|
|
res.forEach((v, i) => {
|
|
$(".meals_list").append(`<li class="${i == 0 ? 'active' : ''}">${v.title}</li>`);
|
|
|
|
|
|
$(".meals .swiper-wrapper").append(`
|
|
<div class="swiper-slide">
|
|
|
|
${v.content.map((item) => {
|
|
return `
|
|
|
|
<a href="">
|
|
<div class="meals_text">
|
|
<img src="${item.img}" alt="">
|
|
<p class="meals_name">${item.title}</p>
|
|
<span class="text">养</span>
|
|
<p class="tips">${item.des}</p>
|
|
</div>
|
|
</a>
|
|
|
|
`
|
|
}).toString().replaceAll(",", "")}
|
|
|
|
</div>`)
|
|
})
|
|
|
|
var self = this;
|
|
$(".meals_list li").click(function () {
|
|
$(this).addClass("active").siblings().removeClass("active");
|
|
self.mySwiper.slideTo($(this).index())
|
|
|
|
});
|
|
this.initThreeMealsSwiper()
|
|
}
|
|
//大家都在做 渲染
|
|
async Getindexx() {
|
|
var res = await indexServe.indexx({
|
|
type: this.Recommend[this.index].type,
|
|
page: this.Recommend[this.index].page
|
|
})
|
|
|
|
|
|
|
|
FoodList(res, $('.together_act'))
|
|
}
|
|
// 推荐 时令 食肉……
|
|
GETRecommend() {
|
|
this.Recommend.forEach((v, i) => {
|
|
$(".together_list").append(`
|
|
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>
|
|
`)
|
|
})
|
|
|
|
var a = this;
|
|
$(".together_list li").click(function () {
|
|
$('.together_act ').html("")
|
|
|
|
a.index = $(this).index();
|
|
$(this).addClass("active").siblings().removeClass("active");
|
|
a.Getindexx()
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
//滚动加载
|
|
// scrollLoadData() {
|
|
// window.onscroll = async () => {
|
|
// var scrollTop = document.documentElement.scrollTop
|
|
// var scrollHeight = document.documentElement.scrollHeight
|
|
// var clientHeight = document.documentElement.clientHeight
|
|
// if (parseInt(scrollHeight - scrollTop) == clientHeight) {
|
|
// this.Recommend[this.index].page++;
|
|
// await this.Getindexx();
|
|
// console.log( this.Recommend[this.index].page++);
|
|
|
|
// }
|
|
// }
|
|
|
|
// }
|
|
//轮播图初始化
|
|
initThreeMealsSwiper() {
|
|
this.mySwiper = new Swiper('.meals', {
|
|
direction: 'horizontal',
|
|
// pagination: {
|
|
// el: '.swiper-pagination',
|
|
// },
|
|
on: {
|
|
slideChangeTransitionEnd: function () {
|
|
$(".meals_list li").eq(this.activeIndex).addClass("active").siblings().removeClass("active")
|
|
|
|
},
|
|
},
|
|
})
|
|
|
|
}
|
|
|
|
initBannerSwiper() {
|
|
this.banner = new Swiper('.banner', {
|
|
direction: 'horizontal', // 垂直切换选项
|
|
// 如果需要分页器
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
},
|
|
})
|
|
}
|
|
|
|
|
|
}
|
|
new banner() |