322 lines
12 KiB
JavaScript
322 lines
12 KiB
JavaScript
class Home {
|
||
|
||
constructor() {
|
||
this.TabsDatas = [];
|
||
this.list = [];
|
||
this.PageSwiper = null;
|
||
this.CurrentPage = 0;
|
||
// 点击搜索进入搜索页面
|
||
document.querySelector(".search").onclick = () => {
|
||
location.href = "./search.html"
|
||
}
|
||
|
||
// 通过在本地保存一个变量 homeIndex，记录用户在首页当前浏览到哪个分类，
|
||
// 然后从其他页面回首页，那么根据本地变量 homeIndex 的数值，再回到上次浏览的分类
|
||
if (localStorage.getItem("homeIndex") != null) {
|
||
this.CurrentPage = localStorage.getItem("homeIndex")
|
||
}
|
||
|
||
this.GetTypeData().then(() => this.GetIndexData())
|
||
}
|
||
|
||
// 获取分类的数据，并渲染页面
|
||
async GetTypeData() {
|
||
if (localStorage.getItem("typeList") == null) {
|
||
// 获取分类数据
|
||
this.list = (await homeService.type({})).principal;
|
||
localStorage.setItem("typeList", JSON.stringify(this.list))
|
||
} else {
|
||
this.list = JSON.parse(localStorage.getItem("typeList"))
|
||
}
|
||
|
||
console.log("this.list ============== :", this.list);
|
||
// 根据分类的数组长度遍历生成与分类对应的内容
|
||
this.list.forEach((v, i) => {
|
||
this.TabsDatas.push({
|
||
id: v.id,
|
||
title: v.title,
|
||
page: 0,
|
||
TotalPage: 0,
|
||
content: []
|
||
})
|
||
document.querySelector(".s-wrapper").innerHTML +=
|
||
`
|
||
<div class="s-slide">
|
||
<div class="list_content item_list padding_30">
|
||
<ul>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
`
|
||
});
|
||
|
||
// 为每一个内容绑定滚动事件
|
||
var slide = document.querySelectorAll(".s-wrapper .s-slide");
|
||
var self = this;
|
||
slide.forEach((v, i) => {
|
||
if (i > 0) {
|
||
v.addEventListener('scroll', function () {
|
||
if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
|
||
self.TabsDatas[i - 1].page += 1;
|
||
if (self.TabsDatas[i - 1].page <= self.TabsDatas[i - 1].TotalPage) {
|
||
self.GetTypeInfoData(i)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
// 向数据中追加首页
|
||
this.list.unshift({ id: -1, title: '首页' });
|
||
// 根据数据生成横向菜单
|
||
var MenuList = document.querySelector(".menu_list");
|
||
this.list.forEach((v, i) => {
|
||
MenuList.innerHTML += `
|
||
<li class="${i == this.CurrentPage ? 'menu_active' : ''}">${v.title}</li>
|
||
`
|
||
});
|
||
|
||
|
||
// 如果本地有 homeIndex，那么从其他页面返回的时候将顶部菜单滚动到对应位置
|
||
if (localStorage.getItem("homeIndex") != null) {
|
||
var offsetLeft = document.querySelectorAll(".menu_list li")[this.CurrentPage].offsetLeft - 14;
|
||
document.querySelector(".menu_list").scrollLeft = offsetLeft
|
||
}
|
||
|
||
// 横向菜单被点击的时候
|
||
var mLi = document.querySelectorAll(".menu_list li")
|
||
mLi.forEach((v, i) => {
|
||
v.onclick = (e) => {
|
||
this.SetUrl(i)
|
||
|
||
// 使横向菜单滑动
|
||
document.querySelector(".menu_list").scrollLeft = e.target.offsetLeft - 14
|
||
|
||
// 清除激活样式
|
||
mLi.forEach(d => d.className = "")
|
||
// 添加激活样式
|
||
v.className = "menu_active"
|
||
this.PageSwiper.slideTo(i)
|
||
// 请求用户点击的分类的列表数据
|
||
if (this.list[i].id != -1 && this.TabsDatas[i - 1].content.length == 0) {
|
||
this.GetTypeInfoData(i)
|
||
}
|
||
}
|
||
})
|
||
|
||
this.initPageSwiper();
|
||
}
|
||
|
||
/**
|
||
* 初始化页面切换的轮播
|
||
*/
|
||
initPageSwiper() {
|
||
this.PageSwiper = new swiper('.s-container', {
|
||
time: 3,
|
||
wrapper: '.s-wrapper',
|
||
slide: '.s-slide',
|
||
auto: false,
|
||
speed: 300,
|
||
on: {
|
||
slideChangeTransitionStart: (index) => {
|
||
this.SetUrl(index)
|
||
// 获取所有菜单的li标签
|
||
var MenuLi = document.querySelectorAll(".menu_list li");
|
||
// 清除激活样式
|
||
MenuLi.forEach(v => v.className = "")
|
||
// 添加激活样式
|
||
MenuLi[index].className = "menu_active"
|
||
// 页面滚动的时候顶部菜单也移动位置
|
||
document.querySelector(".menu_list").scrollLeft = MenuLi[index].offsetLeft - 14;
|
||
// 请求用户点击的分类的列表数据
|
||
if (this.list[index].id != -1 && this.TabsDatas[index - 1].content.length == 0) {
|
||
this.GetTypeInfoData(index)
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
// 必须在轮播图初始化后才去请求跳转到对应的页面和请求页面数据
|
||
if (this.CurrentPage != 0) {
|
||
this.GetTypeInfoData(this.CurrentPage)
|
||
this.PageSwiper.slideTo(this.CurrentPage)
|
||
}
|
||
}
|
||
|
||
// 修改地址栏id参数为下标，然后重新进入首页的时候，直接继续进入上次访问分类
|
||
SetUrl(index) {
|
||
// 本地保存下标
|
||
localStorage.setItem("homeIndex", index)
|
||
}
|
||
|
||
/**
|
||
* 获取分类下的列表数据
|
||
*/
|
||
async GetTypeInfoData(index) {
|
||
|
||
var res = await homeService.classList({
|
||
page: this.TabsDatas[index - 1].page,
|
||
id: this.TabsDatas[index - 1].id
|
||
});
|
||
this.TabsDatas[index - 1].page = res.current_page;
|
||
this.TabsDatas[index - 1].TotalPage = res.total_page;
|
||
this.TabsDatas[index - 1].content = [
|
||
...this.TabsDatas[index - 1].content,
|
||
...res.data
|
||
];
|
||
|
||
var sWrapper = document.querySelectorAll(".s-wrapper .s-slide .list_content ul")
|
||
res.data.forEach((v) => {
|
||
sWrapper[index - 1].innerHTML += `
|
||
<li>
|
||
<div class="newest_img">
|
||
<a href="./info.html?id=${v.id}">
|
||
<img src="${v.preview}" alt="${v.title}">
|
||
</a>
|
||
<span>${v.total}P</span>
|
||
</div>
|
||
<div class="newest_text">
|
||
<a href="./info.html?id=${v.id}">
|
||
<p class="t">${v.title}</p>
|
||
<p class="source">${v.user}</p>
|
||
<p class="source">${v.source}</p>
|
||
</a>
|
||
<div class="tags">
|
||
${(v.tags.map((t) => {
|
||
return `<div class="tags_item">
|
||
<a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a>
|
||
</div>`
|
||
})).toString().replace(/,/ig, " ")
|
||
}
|
||
</div>
|
||
</div>
|
||
</li>
|
||
`
|
||
});
|
||
}
|
||
|
||
// 获取首页的数据，并渲染各个布局
|
||
async GetIndexData() {
|
||
// 获取首页的数据
|
||
var list = await homeService.GetHomeData({});
|
||
// 轮播图模特的数据
|
||
var ModelList = list.model.res;
|
||
// 最新收录
|
||
var newestList = list.newest.data;
|
||
// 今日推荐
|
||
var recommendedList = list.recommended.data;
|
||
|
||
var swiperWrapper = document.querySelector(".swiper-wrapper");
|
||
// 根据数据遍历生成banner 的 swiper-slide
|
||
var slideElement = [];
|
||
[1, 2].forEach(() => {
|
||
var o = document.createElement("div");
|
||
o.className = "swiper-slide";
|
||
slideElement.push(o)
|
||
})
|
||
ModelList.forEach((v, i) => {
|
||
if (i <= 3) {
|
||
slideElement[0].innerHTML +=
|
||
`<div class="item">
|
||
<a href="./model_info.html?id=${v.id}&t=${v.title}">
|
||
<div class="top">
|
||
<img src="${v.preview}" alt="">
|
||
<span>${v.total}</span>
|
||
</div>
|
||
<p>${v.title}</p>
|
||
</a>
|
||
</div>`
|
||
} else {
|
||
slideElement[1].innerHTML +=
|
||
`<div class="item">
|
||
<a href="./model_info.html?id=${v.id}&t=${v.title}">
|
||
<div class="top">
|
||
<img src="${v.preview}" alt="">
|
||
<span>${v.total}</span>
|
||
</div>
|
||
<p>${v.title}</p>
|
||
</a>
|
||
</div>`
|
||
}
|
||
})
|
||
// 将 swiper-slide 填入页面中
|
||
slideElement.forEach(v => swiperWrapper.appendChild(v))
|
||
|
||
new swiper('.swiper-container', {
|
||
time: 3,
|
||
auto: false,
|
||
speed: 800
|
||
});
|
||
|
||
|
||
// 遍历 最新收录
|
||
document.querySelector(".newest .title").innerHTML = `
|
||
<i class="iconfont icon-huo color_theme"></i>
|
||
最新收录
|
||
`;
|
||
newestList.forEach(v => {
|
||
document.querySelector(".newest ul").innerHTML +=
|
||
`
|
||
<li>
|
||
<div class="newest_img">
|
||
<a href="./info.html?id=${v.id}">
|
||
<img src="${v.preview}" alt="${v.title}">
|
||
</a>
|
||
<span>${v.total_page}套</span>
|
||
</div>
|
||
<div class="newest_text">
|
||
<a href="./info.html?id=${v.id}">
|
||
<p class="t">${v.title}</p>
|
||
<p class="source">${v.user}</p>
|
||
<p class="source">${v.source}</p>
|
||
</a>
|
||
<div class="tags">
|
||
${(v.tags.map((t) => {
|
||
return `<div class="tags_item">
|
||
<a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a>
|
||
</div>`
|
||
})).toString().replace(/,/ig, " ")
|
||
}
|
||
</div>
|
||
</div>
|
||
</li>
|
||
`
|
||
})
|
||
|
||
// 今日推荐
|
||
document.querySelector(".recommended .title").innerHTML = `
|
||
<i class="iconfont icon-tuijian color_theme"></i>
|
||
今日推荐
|
||
`;
|
||
recommendedList.forEach(v => {
|
||
document.querySelector(".recommended ul").innerHTML +=
|
||
`
|
||
<li>
|
||
<div class="newest_img">
|
||
<a href="./info.html?id=${v.id}">
|
||
<img src="${v.preview}" alt="${v.title}">
|
||
</a>
|
||
<span>${v.total_page}套</span>
|
||
</div>
|
||
<div class="newest_text">
|
||
<a href="./info.html?id=${v.id}">
|
||
<p class="t">${v.title}</p>
|
||
<p class="source">${v.user}</p>
|
||
<p class="source">${v.source}</p>
|
||
</a>
|
||
<div class="tags">
|
||
${(v.tags.map((t) => {
|
||
return `<div class="tags_item"><a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a></div>`
|
||
})).toString().replace(/,/ig, " ")
|
||
}
|
||
|
||
</div>
|
||
</div>
|
||
</li>
|
||
`
|
||
})
|
||
}
|
||
}
|
||
|
||
var home = new Home(); |