119 lines
2.8 KiB
JavaScript
119 lines
2.8 KiB
JavaScript
class Info {
|
|
constructor() {
|
|
this.res = {}
|
|
this.like = {}
|
|
this.likeArr =
|
|
localStorage.getItem("like") == null
|
|
? []
|
|
: JSON.parse(localStorage.getItem("like"))
|
|
this.page = 1;
|
|
this.total_page = 0;
|
|
this.pswpElement = $(".pswp")[0]
|
|
this.getInfo()
|
|
.then(() => this.renderInfo())
|
|
|
|
}
|
|
|
|
|
|
async getInfo() {
|
|
this.res = await indexServe.info({
|
|
page: this.page,
|
|
id: query("id")
|
|
});
|
|
|
|
this.total_page = this.res.total_page
|
|
// this.total_page = 3
|
|
|
|
// 详情页
|
|
this.res.data.forEach(v => {
|
|
var image = new Image();
|
|
image.src = v.src
|
|
image.onload = () => {
|
|
if (image.width < image.height) {
|
|
this.like.preview = v.src
|
|
}
|
|
$(".info_img").append(`
|
|
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
|
<a href="${v.src}" itemprop="contentUrl" data-size="${image.width}x${image.height}">
|
|
<img src="${v.src}" itemprop="thumbnail" alt="${v.title}" />
|
|
</a>
|
|
<figcaption itemprop="caption description">${v.title}</figcaption>
|
|
</figure>
|
|
`)
|
|
}
|
|
})
|
|
|
|
initPhotoSwipeFromDOM(".info_img")
|
|
|
|
$(".tuijian").empty()
|
|
$(".xianguan").empty()
|
|
item(".tuijian", this.res.recommend)
|
|
item(".xianguan", this.res.relevant)
|
|
|
|
|
|
}
|
|
|
|
|
|
renderInfo() {
|
|
console.log(this.res)
|
|
pHeader(this.res.title, `
|
|
<i class="iconfont like icon-xin"></i>
|
|
<i class="iconfont icon-home"></i>
|
|
`);
|
|
|
|
this.like = {
|
|
id: query("id"),
|
|
title: this.res.title,
|
|
total: this.res.total,
|
|
preview: ''
|
|
}
|
|
|
|
var isHave = this.likeArr.filter((v,i) => {
|
|
if (v.id == query("id")) {
|
|
return v
|
|
}
|
|
})
|
|
|
|
// 本地收藏过了
|
|
if (isHave.length != 0) {
|
|
$(".like").removeClass("icon-xin")
|
|
$(".like").addClass("icon-aixin")
|
|
} else {
|
|
$(".like").removeClass("icon-aixin")
|
|
$(".like").addClass("icon-xin")
|
|
}
|
|
|
|
|
|
$(".like").click(() => {
|
|
// 如果空心，表示未收藏，改成实心 收藏
|
|
if ($(".like").hasClass("icon-xin")) {
|
|
$(".like").removeClass("icon-xin")
|
|
$(".like").addClass("icon-aixin")
|
|
this.likeArr.push(this.like)
|
|
localStorage.setItem("like",JSON.stringify(this.likeArr))
|
|
// 取消收藏
|
|
} else {
|
|
$(".like").removeClass("icon-aixin")
|
|
$(".like").addClass("icon-xin")
|
|
this.likeArr = this.likeArr.filter((v,i) => {
|
|
if (v.id != query("id")) {
|
|
return v
|
|
}
|
|
})
|
|
|
|
localStorage.setItem("like",JSON.stringify(this.likeArr))
|
|
}
|
|
})
|
|
|
|
$(".icon-xiangxia").click(() => {
|
|
this.page+=1
|
|
if (this.page == this.total_page) {
|
|
$(".icon-xiangxia").hide()
|
|
}
|
|
this.getInfo()
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
new Info(); |