150 lines
4.6 KiB
JavaScript
150 lines
4.6 KiB
JavaScript
class Index {
|
|
constructor() {
|
|
this.indexList = [
|
|
{ id: 1, title: '推荐', content: [], page: 1, totalPage: 0 },
|
|
{ id: 2, title: '时令', content: [], page: 1, totalPage: 0 },
|
|
{ id: 3, title: '食肉', content: [], page: 1, totalPage: 0 },
|
|
{ id: 4, title: '素食', content: [], page: 1, totalPage: 0 },
|
|
{ id: 5, title: '烘焙', content: [], page: 1, totalPage: 0 },
|
|
];
|
|
this.index = 0;
|
|
this.getBanner();
|
|
this.getType();
|
|
this.threeMeals();
|
|
this.getIndex();
|
|
this.renderMRSC();
|
|
}
|
|
|
|
async threeMeals() {
|
|
var res = await server.threeMeals();
|
|
res.forEach((v,i) => {
|
|
$(".ddd ul").append(`
|
|
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>
|
|
`);
|
|
|
|
$(".mrsc_swiper .swiper-wrapper").append(`
|
|
<div class="swiper-slide">
|
|
<div class="mrsc_list">
|
|
${
|
|
v.content.map((item,index) => {
|
|
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>
|
|
`);
|
|
})
|
|
|
|
$(".ddd ul li").click(function () {
|
|
// 链式调用
|
|
$(this).addClass("active").siblings().removeClass("active")
|
|
mySwiper.slideTo($(this).index())
|
|
});
|
|
|
|
var mySwiper = new Swiper ('.mrsc_swiper', {
|
|
direction: 'horizontal',
|
|
on: {
|
|
slideChangeTransitionEnd: function(){
|
|
$(".ddd ul li")
|
|
.eq(this.activeIndex)
|
|
.addClass("active")
|
|
.siblings()
|
|
.removeClass("active")
|
|
},
|
|
},
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
},
|
|
})
|
|
}
|
|
|
|
async getType() {
|
|
var res = await server.type();
|
|
res.forEach(v => {
|
|
$(".menu").append(`
|
|
<li>
|
|
<a href="./typeList.html?url=${v.href}">
|
|
<img src="${v.img}" alt="">
|
|
<p>${v.title}</p>
|
|
</a>
|
|
</li>
|
|
`)
|
|
})
|
|
}
|
|
|
|
async getBanner() {
|
|
var res = await server.banner();
|
|
res.forEach(v => {
|
|
$(".banner_swiper .swiper-wrapper")
|
|
.append(`<div class="swiper-slide">
|
|
<a href="./bannerinfo.html?url=${v.url}"><img src="${v.img}" alt=""></a>
|
|
</div>`)
|
|
});
|
|
|
|
new Swiper ('.banner_swiper', {
|
|
direction: 'horizontal',
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
},
|
|
});
|
|
}
|
|
|
|
async getIndex() {
|
|
if (this.indexList[this.index].content.length == 0) {
|
|
var res = await server.index({
|
|
type: this.indexList[this.index].id,
|
|
page: this.indexList[this.index].page
|
|
});
|
|
this.indexList[this.index].page = res.current_page
|
|
this.indexList[this.index].totalPage = res.total_page
|
|
this.indexList[this.index].content = [
|
|
...this.indexList[this.index].content,
|
|
...res.items
|
|
]
|
|
|
|
item(
|
|
$(".do_together_content .roll_father").eq(this.index),
|
|
this.indexList[this.index].content
|
|
)
|
|
}
|
|
}
|
|
|
|
|
|
renderMRSC() {
|
|
this.indexList.forEach((v,i) => {
|
|
$(".alldo ul").append(`
|
|
<li class="${i == 0 ? 'active': ''}">${v.title}</li>
|
|
`);
|
|
|
|
$(".do_together_content").append(`
|
|
<div class="roll_father ${i == 0 ? 'showRoll': ''}"></div>
|
|
`);
|
|
});
|
|
|
|
var self = this;
|
|
$(".alldo ul li").click(function () {
|
|
self.index = $(this).index();
|
|
$(this).addClass("active").siblings().removeClass("active")
|
|
|
|
$(".do_together_content .roll_father")
|
|
.eq(self.index)
|
|
.addClass("showRoll")
|
|
.siblings()
|
|
.removeClass("showRoll")
|
|
|
|
self.getIndex()
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
new Index(); |