151 lines
3.8 KiB
JavaScript
151 lines
3.8 KiB
JavaScript
class Info {
|
|
constructor() {
|
|
|
|
this.likeList
|
|
= localStorage.getItem("list") == null
|
|
? []
|
|
: JSON.parse(localStorage.getItem("list"));
|
|
|
|
this.currentinfo = {};
|
|
this.getInfo();
|
|
}
|
|
|
|
async getInfo() {
|
|
var res = await indexService.indexInfo({
|
|
url: query("url")
|
|
});
|
|
|
|
this.currentinfo = res;
|
|
|
|
$(".list_title h2").innerText = res.title;
|
|
res.stepInfo.arr.forEach((v) => {
|
|
$(".setp").innerHTML += `
|
|
<li>
|
|
<div class="icons" style="background-position: 0px ${v.position}px"></div>
|
|
<p>${v.title}</p>
|
|
</li>
|
|
`
|
|
});
|
|
|
|
$(".list_text p").innerText = res.stepInfo.message;
|
|
$(".posttime").innerText = res.posttime;
|
|
if (res.stepInfo.message.length > 22) {
|
|
$(".list_text").innerHTML += '<div class="more">更多</div>';
|
|
|
|
$(".list_text .more").onclick = function () {
|
|
$(".list_text").style.height = "auto";
|
|
$(".list_text .more").style.display = "none";
|
|
}
|
|
}
|
|
|
|
|
|
res.material.main.forEach((v) => {
|
|
$(".main_f").innerHTML += `
|
|
<li>
|
|
<span>${v.title}</span>
|
|
<span>${v.nums}</span>
|
|
</li>
|
|
`
|
|
})
|
|
|
|
res.material.accessories.forEach((v) => {
|
|
$(".fu_f").innerHTML += `
|
|
<li>
|
|
<span>${v.title}</span>
|
|
<span>${v.nums}</span>
|
|
</li>
|
|
`
|
|
})
|
|
|
|
res.DetailedSteps.forEach((v,i,arr) => {
|
|
$(".setp_content").innerHTML += `
|
|
<li>
|
|
${
|
|
v.step_img == null
|
|
? `<h3>${v.step_title}</h3><p>${v.step_text}</p>`
|
|
: `
|
|
<div class="step_text">${v.step_title}</div>
|
|
<img class="${v.step_title == "成品图" ? 'lastimg': ''}" src="${ Array.isArray(v.step_img) ? v.step_img[0] : v.step_img}" alt="">
|
|
|
|
${
|
|
v.step_text == null ? '' : `<p>${v.step_text || ''}</p>`
|
|
}
|
|
|
|
${
|
|
Array.isArray(v.step_img)
|
|
? `
|
|
<div class="tabs_img">
|
|
${
|
|
(v.step_img.map((item, index) => {
|
|
return `<img src="${item}"/>`
|
|
})).toString().replace(/,/g, "")
|
|
}
|
|
</div>
|
|
`
|
|
: ''
|
|
}
|
|
`
|
|
}
|
|
|
|
</li>
|
|
`
|
|
});
|
|
|
|
var tabImg = document.querySelectorAll(".tabs_img img");
|
|
tabImg.forEach((v) => {
|
|
v.onclick = function () {
|
|
$(".lastimg").setAttribute("src", v.getAttribute("src"))
|
|
}
|
|
})
|
|
|
|
|
|
this.like();
|
|
|
|
}
|
|
|
|
like() {
|
|
var isHave = this.likeList.filter((item,index) => {
|
|
if (item.backImg == this.currentinfo.backImg) {
|
|
return item
|
|
}
|
|
});
|
|
|
|
if (isHave.length != 0) {
|
|
$(".likeicon").classList.replace("iconshoucang1", "iconshoucang")
|
|
}
|
|
|
|
|
|
|
|
|
|
// iconshoucang1 表示空心图标
|
|
// iconshoucang 表示实心图标
|
|
$(".likeicon").onclick = () => {
|
|
|
|
// true 表示当前是 空心图标 收藏操作
|
|
if ($(".likeicon").classList.contains("iconshoucang1")) {
|
|
$(".likeicon").classList.replace("iconshoucang1", "iconshoucang")
|
|
|
|
this.likeList.push(this.currentinfo)
|
|
|
|
localStorage.setItem("list", JSON.stringify(this.likeList))
|
|
|
|
// false 表示当前是 实心图标 取消收藏
|
|
} else {
|
|
$(".likeicon").classList.replace("iconshoucang", "iconshoucang1")
|
|
|
|
|
|
this.likeList = this.likeList.filter((item,index) => {
|
|
if (item.backImg != this.currentinfo.backImg) {
|
|
return item
|
|
}
|
|
});
|
|
|
|
localStorage.setItem("list", JSON.stringify(this.likeList))
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
new Info(); |