112 lines
3.6 KiB
JavaScript
112 lines
3.6 KiB
JavaScript
class info {
|
|
constructor () {
|
|
this.getInfo();
|
|
}
|
|
|
|
async getInfo() {
|
|
let res = await indexServe.info({
|
|
url: query("url")
|
|
});
|
|
|
|
|
|
$(".header img").src = res.backImg
|
|
$(".info_main h2").innerText = res.title
|
|
$(".info_main .posttime").innerText = res.posttime;
|
|
|
|
res.Statistics.forEach(v => {
|
|
$(".yyinfos").innerHTML += `
|
|
<li>
|
|
<span>${v.title}</span>
|
|
<div class="jdw">
|
|
<div class="jd" style="${v.proportion}"></div>
|
|
</div>
|
|
</li>
|
|
`
|
|
});
|
|
|
|
res.stepInfo.arr.forEach(v => {
|
|
$(".cpargsw").innerHTML += `
|
|
<li>
|
|
<div class="i" style="background-position: 0px ${v.position}px;"></div>
|
|
<span>${v.title}</span>
|
|
</li>
|
|
`
|
|
})
|
|
$(".show_more .text").innerText = res.stepInfo.message;
|
|
|
|
$(".more").onclick = () => {
|
|
if ($(".more span").innerText == "展开") {
|
|
$(".more span").innerText = "收起"
|
|
$(".more img").style = `transform: rotate(180deg);`
|
|
$(".show_more").style.height = "auto";
|
|
} else {
|
|
$(".more span").innerText = "展开"
|
|
$(".more img").style = `transform: rotate(0deg);`
|
|
$(".show_more").style.height = "42px";
|
|
}
|
|
}
|
|
|
|
res.material.main.forEach(v => {
|
|
$(".zhuliao ul").innerHTML+=`
|
|
<li>
|
|
<div class="list_title">${v.title}</div>
|
|
<div class="list_nums">${v.nums}</div>
|
|
</li>
|
|
`
|
|
})
|
|
|
|
res.material.accessories.forEach(v => {
|
|
$(".fuliao ul").innerHTML+=`
|
|
<li>
|
|
<div class="list_title">${v.title}</div>
|
|
<div class="list_nums">${v.nums}</div>
|
|
</li>
|
|
`
|
|
})
|
|
|
|
res.DetailedSteps.forEach(v => {
|
|
$(".info_list").innerHTML+=`
|
|
${
|
|
Array.isArray(v.step_img)
|
|
? `<li>
|
|
<div class="info_top cpimg">
|
|
<img src="${v.step_img[0]}" alt="">
|
|
<div class="setp">成品图</div>
|
|
</div>
|
|
<div class="change_list">
|
|
${
|
|
v.step_img.map((item,index) => {
|
|
return `<img src="${item}" alt="" style="opacity: ${index == 0 ? 1:0.4}">`
|
|
}).toString().replaceAll(",", "")
|
|
}
|
|
</div>
|
|
</li>`
|
|
: v.step_img == null
|
|
? `<li class="step">
|
|
<div class="step_title">烹饪技巧</div>
|
|
<div class="stepdes">${v.step_text}</div>
|
|
</li>`
|
|
: `<li>
|
|
<div class="info_top">
|
|
<img src="${v.step_img}" alt="">
|
|
<div class="setp">${v.step_title}</div>
|
|
</div>
|
|
<p>${v.step_text}</p>
|
|
</li>`
|
|
}`
|
|
})
|
|
|
|
_(".change_list img").forEach(v => {
|
|
v.onclick = () => {
|
|
_(".change_list img").forEach( item => item.style.opacity = 0.4)
|
|
$(".cpimg img").src = v.src
|
|
v.style.opacity = 1
|
|
}
|
|
})
|
|
|
|
|
|
console.log(res)
|
|
}
|
|
}
|
|
|
|
new info() |