173 lines
6.1 KiB
JavaScript
173 lines
6.1 KiB
JavaScript
class Info {
|
||
|
||
constructor() {
|
||
this.page = 1;
|
||
this.TotalPage = 0;
|
||
this.preview = "";
|
||
this.InfoList = [];
|
||
this.GetInfoData()
|
||
}
|
||
|
||
async GetInfoData(action = "first") {
|
||
this.InfoList = await homeService.info({
|
||
id: utils.GetQueryString("id"),
|
||
page: this.page
|
||
});
|
||
|
||
this.TotalPage = this.InfoList.total_page
|
||
// 设置网页标题
|
||
document.title = this.InfoList.title
|
||
|
||
this.InfoList.data.forEach((v) => {
|
||
var image = new Image();
|
||
image.src = v.src;
|
||
image.onload = () => {
|
||
if (image.width < image.height) {
|
||
this.preview = v.src;
|
||
}
|
||
this.LikePhotot()
|
||
document.querySelector(".info").innerHTML += `
|
||
<figure>
|
||
<a href="${v.src}" data-size="${image.width}x${image.height}">
|
||
<img src="${v.src}" alt="${v.title}" />
|
||
</a>
|
||
<figcaption itemprop="caption description">${v.title}</figcaption>
|
||
</figure>
|
||
`
|
||
}
|
||
});
|
||
|
||
this.BindNextPage();
|
||
initPhotoSwipeFromDOM('.info');
|
||
|
||
if (action == "first") {
|
||
|
||
document.querySelector(".recommend .title").innerText = "推荐写真"
|
||
this.InfoList.recommend.forEach(v => {
|
||
document.querySelector(".recommend 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}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>
|
||
`
|
||
})
|
||
|
||
document.querySelector(".relevant .title").innerText = "相关写真"
|
||
this.InfoList.relevant.forEach(v => {
|
||
document.querySelector(".relevant 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}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>
|
||
`
|
||
})
|
||
|
||
}
|
||
|
||
}
|
||
|
||
BindNextPage() {
|
||
document.querySelector(".next_page").style.display = "block"
|
||
document.querySelector(".next_page").onclick = () => {
|
||
this.page += 1;
|
||
if (this.page > this.TotalPage) {
|
||
document.querySelector(".next_page").style.display = "none"
|
||
} else {
|
||
if (this.page == this.TotalPage) {
|
||
document.querySelector(".next_page").style.display = "none"
|
||
this.GetInfoData("loadMore")
|
||
} else {
|
||
this.GetInfoData("loadMore")
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
LikePhotot() {
|
||
// true 收藏， false 取消收藏
|
||
var status = null;
|
||
var LikeList = JSON.parse(localStorage.getItem("likeList")) == null
|
||
? [] : JSON.parse(localStorage.getItem("likeList"))
|
||
|
||
var isHave = LikeList.filter((v) => {
|
||
if (v.id == utils.GetQueryString("id")) {
|
||
return v
|
||
}
|
||
})
|
||
|
||
// 该写真你未收藏，true 点击进行收藏
|
||
if (isHave.length == 0) {
|
||
status = true
|
||
// 改写真你已收藏，点击取消收藏
|
||
} else {
|
||
status = false
|
||
document.querySelector(".like").className = "like iconfont icon-aixin"
|
||
}
|
||
|
||
document.querySelector(".like").onclick = () => {
|
||
console.log(this.preview);
|
||
if (status == true) {
|
||
LikeList.push({
|
||
id: utils.GetQueryString("id"),
|
||
title: this.InfoList.title,
|
||
user: this.InfoList.info,
|
||
source: this.InfoList.source,
|
||
total: this.InfoList.total,
|
||
preview: this.preview
|
||
})
|
||
localStorage.setItem("likeList", JSON.stringify(LikeList))
|
||
status = false
|
||
document.querySelector(".like").className = "like iconfont icon-aixin"
|
||
|
||
} else {
|
||
LikeList = LikeList.filter((v) => {
|
||
if (v.id != utils.GetQueryString("id")) {
|
||
return v
|
||
}
|
||
});
|
||
status = true
|
||
document.querySelector(".like").className = "like iconfont icon-xin"
|
||
|
||
localStorage.setItem("likeList", JSON.stringify(LikeList))
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
new Info() |