Files
ClassContent/历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/page/commodityinfo.js
2024-09-27 02:06:13 +08:00

67 lines
2.3 KiB
JavaScript

class commodityinfo {
constructor() {
title("详情", `<i class="iconfont icon-fanhui"></i>`)
this.getcommodityinfo()
}
async getcommodityinfo() {
var res = await indexService.info({
thing_id: 7,
// thing_category:3
});
console.log(res);
var html = `
<div class="content">
<div class="head">
<img src="https://losta.oss-cn-shanghai.aliyuncs.com/7cpXrZK8JcenmECFRn6WD6P47PSf3kdR.jpg" alt="">
<div class="information">
<div class="name">bmy4</div>
<div class="address">电子信息职业技术学院3</div>
</div>
<div></div>
</div>
<div class="time">
<div class="test">
<p>测试标题2</p>
<span>2022-03-03 11:40:57</span>
</div>
<div class="certificate">证件</div>
</div>
<div class="bot">
<p>测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1
</p>
<img src="https://img13.360buyimg.com/n7/jfs/t1/220760/23/10339/352290/61d8e957E230aa7ce/9b38fef9ff0513e5.jpg"
alt="">
</div>
</div>
`
$("body").insertAdjacentHTML("beforeend", html);
res.forEach(v => {
var img = document.createElement("img")
img.src = v;
img.onload = () => {
// console.log(img.width);
$(".bot").innerHTML += `
<figure>
<a href="${v}" data-size="${img.width}x${img.height}">
<img src="${v}" alt="${v}" />
</a>
<figcaption itemprop="caption description"></figcaption>
</figure>
`
}
});
initPhotoSwipeFromDOM('.bot');
}
}
new commodityinfo()