183 lines
5.2 KiB
HTML
183 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<script src="../js/utils/rem.js"></script>
|
|
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_2124975_ogwnuct6mbe.css">
|
|
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="../css/page/detail.css">
|
|
<style>
|
|
body {}
|
|
|
|
.content {
|
|
height: 100%;
|
|
height: calc(100vh);
|
|
overflow-y: scroll;
|
|
|
|
}
|
|
|
|
.content img {
|
|
height: 13.34rem;
|
|
width: 7.5rem;
|
|
background-color: aqua;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="content">
|
|
|
|
</div>
|
|
|
|
</body>
|
|
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/9.2.4/swiper-bundle.min.js"></script>
|
|
<script src="../js/config/index.js"></script>
|
|
<script src="../js/http/index.js"></script>
|
|
<script src="../js/serve/index.js"></script>
|
|
<script src="../js/utils/index.js"></script>
|
|
<script>
|
|
class Info {
|
|
inex = [[]];
|
|
index = 1;
|
|
|
|
constructor() {
|
|
let t
|
|
if (getItem("like").length == 0) {
|
|
t = '<i class="iconfont icon-xin Love"></i>'
|
|
} else {
|
|
console.log(getItem("like"))
|
|
|
|
|
|
try {
|
|
getItem("like").forEach((v) => {
|
|
|
|
if (v.id == query("id")) {
|
|
t = '<i class="iconfont icon-aixin Love"></i>'
|
|
throw new Error("第三");
|
|
} else {
|
|
t = '<i class="iconfont icon-xin Love"></i>'
|
|
}
|
|
})
|
|
} catch (e) {
|
|
if (e.message != "第三") throw e;
|
|
};
|
|
|
|
|
|
}
|
|
|
|
console.log(t)
|
|
header(query("title"), t)
|
|
this.detail()
|
|
this.Love()
|
|
|
|
}
|
|
|
|
async detail() {
|
|
console.log(query("quantity"), query("id"))
|
|
let info = await indexserve.info({
|
|
id: query("id"),
|
|
quantity: query("quantity")
|
|
})
|
|
console.log(info)
|
|
info.result.forEach((v, i) => {
|
|
|
|
if (i == (10 * this.index) - 1) {
|
|
this.inex[(this.index - 1)].push(v)
|
|
this.index += 1;
|
|
|
|
this.inex.push([])
|
|
} else {
|
|
this.inex[(this.index - 1)].push(v)
|
|
}
|
|
});
|
|
//滑动数组下标
|
|
this.indexs = 0;
|
|
|
|
this.xunhuan()
|
|
$(".content").onscroll = (v) => {
|
|
|
|
const { clientHeight, scrollHeight, scrollTop } = $(".content");
|
|
|
|
let distance = scrollHeight - scrollTop - clientHeight;
|
|
console.log(distance)
|
|
if (distance <= 1) {
|
|
if (this.indexs < this.index - 1) {
|
|
this.indexs += 1;
|
|
this.xunhuan()
|
|
} else {
|
|
alert(1)
|
|
}
|
|
} else {
|
|
|
|
}
|
|
}
|
|
}
|
|
dd = 0;
|
|
xunhuan() {
|
|
this.inex[this.indexs].forEach(v => {
|
|
$(".content").html(`
|
|
<img src=${v} alt="${this.dd += 1}">
|
|
`)
|
|
})
|
|
}
|
|
|
|
Love() {
|
|
|
|
$(".Love").tap(({ v, i }) => {
|
|
let ty = false;
|
|
if (getItem("like").length == 0) {
|
|
//没有查到添加进 like
|
|
|
|
this.Love1();
|
|
} else {
|
|
console.log(getItem("like"))
|
|
//查询是否存在
|
|
try {
|
|
getItem("like").forEach((c, i) => {
|
|
if (c.id == query("id")) {
|
|
let ssd = getItem("like").filter(item => item.id != query("id"))
|
|
setItem("like", ssd)
|
|
console.log(1)
|
|
$(".Love").removeClass("icon-aixin").appClass("icon-xin")
|
|
ty = true
|
|
}
|
|
})
|
|
} catch (e) {
|
|
if (e.message != "第三") throw e;
|
|
};
|
|
|
|
if (ty == false) {
|
|
this.Love1();
|
|
console.log(2)
|
|
}
|
|
}
|
|
|
|
|
|
})
|
|
}
|
|
|
|
|
|
//添加收藏
|
|
Love1() {
|
|
//没有查到添加进 like
|
|
let sss = {
|
|
id: query("id"),
|
|
quantity: query("quantity"),
|
|
title: query("title"),
|
|
img_src: query("img_src"),
|
|
}
|
|
let ddd = getItem("like")
|
|
ddd.push(sss)
|
|
setItem("like", ddd)
|
|
ddd = null
|
|
$(".Love").removeClass("icon-xin").appClass("icon-aixin")
|
|
}
|
|
}
|
|
new Info()
|
|
</script>
|
|
|
|
</html> |