138 lines
4.0 KiB
JavaScript
138 lines
4.0 KiB
JavaScript
class Index {
|
||
constructor() {
|
||
this.principal = [];
|
||
this.currentIndex = 0;
|
||
footer()
|
||
this.getIndex();
|
||
this.getClass();
|
||
}
|
||
|
||
// 请求横向菜单
|
||
async getClass() {
|
||
var res;
|
||
// 本地没有缓存数据，表示用户是第一次使用这个app
|
||
if (localStorage.getItem("principal") == null) {
|
||
res = await server.type();
|
||
localStorage.setItem("principal", JSON.stringify(res.principal))
|
||
localStorage.setItem("additional", JSON.stringify(res.additional))
|
||
} else {
|
||
res = {
|
||
principal: JSON.parse(localStorage.getItem("principal")),
|
||
additional: JSON.parse(localStorage.getItem("additional"))
|
||
}
|
||
console.log("res: ", res)
|
||
}
|
||
|
||
|
||
this.principal = res.principal;
|
||
|
||
this.principal.unshift({
|
||
id: null,
|
||
page: 0,
|
||
title: "首页"
|
||
})
|
||
|
||
this.principal.forEach(v => {
|
||
v.content = []
|
||
})
|
||
|
||
this.principal.forEach((v,i) => {
|
||
$(".header_menu ul").innerHTML += `
|
||
<li class="${i == 0 ? 'active' : ''}">${v.title}</li>
|
||
`;
|
||
|
||
if (i > 0) {
|
||
$(".swiper-container .swiper-wrapper").innerHTML += `
|
||
<div class="swiper-slide pic_item padding_lr"></div>
|
||
`
|
||
}
|
||
|
||
});
|
||
|
||
var silder = _(".swiper-wrapper .swiper-slide");
|
||
silder.forEach((v,i) => {
|
||
if (i > 0) {
|
||
loadMore(v, () => {
|
||
console.log("滚动到底部了：",i )
|
||
this.principal[i].page += 1;
|
||
if (this.principal[i].page <= this.principal[i].total_page) {
|
||
this.getClassList("load")
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
this.initSwiper();
|
||
}
|
||
|
||
initSwiper() {
|
||
var liArr = _(".header_menu ul li");
|
||
var pageSwiper = new swiper('.swiper-container', {
|
||
time: 3,
|
||
auto: false,
|
||
speed: 800,
|
||
on: {
|
||
slideChangeTransitionStart: (index) => {
|
||
this.currentIndex = index;
|
||
this.getClassList()
|
||
liArr.forEach(v => v.className = "")
|
||
liArr[index].className = "active"
|
||
}
|
||
}
|
||
});
|
||
|
||
liArr.forEach((v,i) => {
|
||
v.onclick = () => {
|
||
this.currentIndex = i;
|
||
this.getClassList()
|
||
pageSwiper.slideTo(i)
|
||
liArr.forEach(v => v.className = "")
|
||
v.className = "active"
|
||
}
|
||
})
|
||
}
|
||
|
||
// 请求首页的数据
|
||
async getIndex() {
|
||
var res = await server.index();
|
||
item($(".recommended ul"), res.recommended.data)
|
||
item($(".newest ul"), res.newest.data)
|
||
model(".model_banner", res.model.res)
|
||
}
|
||
|
||
async getClassList(type = "click") {
|
||
var getData = async () => {
|
||
var res = await server.classList({
|
||
id: this.principal[this.currentIndex].id,
|
||
page: this.principal[this.currentIndex].page
|
||
});
|
||
|
||
this.principal[this.currentIndex].content
|
||
= this.principal[this.currentIndex].content.concat(res.data);
|
||
|
||
this.principal[this.currentIndex].total_page = res.total_page;
|
||
this.principal[this.currentIndex].page = res.current_page;
|
||
var clickSlide = _(".swiper-wrapper .swiper-slide")[this.currentIndex]
|
||
item(clickSlide, res.data);
|
||
}
|
||
|
||
if (type == "click") {
|
||
// 第一次点击这个分类，那么请求数据
|
||
if (
|
||
this.principal[this.currentIndex].content.length == 0
|
||
&&
|
||
this.principal[this.currentIndex].id != null
|
||
) {
|
||
getData()
|
||
}
|
||
} else {
|
||
getData()
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
new Index(); |