first commit
This commit is contained in:
7
js/page/domestic.js
Normal file
7
js/page/domestic.js
Normal file
@@ -0,0 +1,7 @@
|
||||
class Domestic {
|
||||
constructor() {
|
||||
util.footer()
|
||||
}
|
||||
}
|
||||
|
||||
new Domestic
|
||||
7
js/page/hot.js
Normal file
7
js/page/hot.js
Normal file
@@ -0,0 +1,7 @@
|
||||
class Hot {
|
||||
constructor() {
|
||||
util.footer()
|
||||
}
|
||||
}
|
||||
|
||||
new Hot
|
||||
80
js/page/index.js
Normal file
80
js/page/index.js
Normal file
@@ -0,0 +1,80 @@
|
||||
class Index {
|
||||
constructor() {
|
||||
util.header(
|
||||
`
|
||||
<div class="search flex1 flex ais">
|
||||
<i class="iconfont icon-sousuo-m"></i>
|
||||
<p>开启精彩搜索..</p>
|
||||
</div>
|
||||
`,
|
||||
"",
|
||||
""
|
||||
)
|
||||
|
||||
util.footer()
|
||||
|
||||
this.getHomeBanner()
|
||||
this.getTagRecommend()
|
||||
this.getHomeHotData()
|
||||
this.getHomeListData()
|
||||
this.initSwiper()
|
||||
this.event()
|
||||
}
|
||||
|
||||
|
||||
async getHomeListData() {
|
||||
let res = await homeServe.homeList()
|
||||
item(".default-model ul", res)
|
||||
}
|
||||
|
||||
// 获取热门推荐的写真
|
||||
async getHomeHotData() {
|
||||
let res = await homeServe.homeHot()
|
||||
item(".recommend-model ul", res)
|
||||
}
|
||||
|
||||
// 请求热门分类
|
||||
async getTagRecommend() {
|
||||
let res = await tagServe.tagRecommend()
|
||||
$(".recommend-tag").innerHTML = res.maps(v => {
|
||||
return `
|
||||
<li>
|
||||
<div class="icon">${v.title.substr(0,1)}</div>
|
||||
<div class="title">${v.title}</div>
|
||||
</li>
|
||||
`
|
||||
})
|
||||
}
|
||||
|
||||
// 请求banner图
|
||||
async getHomeBanner() {
|
||||
let res = await homeServe.homeBanner()
|
||||
$(".swiper-wrapper").innerHTML = res.maps(v => {
|
||||
return `
|
||||
<div class="swiper-slide">
|
||||
<img src="${v.src}" alt="">
|
||||
</div>
|
||||
`
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
initSwiper() {
|
||||
var mySwiper = new Swiper('.banner', {
|
||||
loop: true, // 循环模式选项
|
||||
|
||||
// 如果需要分页器
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
event() {
|
||||
$(".search").onclick = () => {
|
||||
location.href = "./search.html"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new Index
|
||||
102
js/page/info.js
Normal file
102
js/page/info.js
Normal file
@@ -0,0 +1,102 @@
|
||||
class Info {
|
||||
title = ""
|
||||
defaultArr = []
|
||||
allArr = []
|
||||
|
||||
// 收藏的数据，本地有收藏就读取本地之前的收藏数据，没有就给默认值
|
||||
// likeArr = JSON.parse(localStorage.getItem("like")) || []
|
||||
|
||||
likeArr = getItem("like")
|
||||
|
||||
constructor() {
|
||||
this.getInfoListData()
|
||||
.then(() => {
|
||||
|
||||
util.header(
|
||||
`<div class="title flex1 ellipsis">${this.title}</div>`,
|
||||
`
|
||||
<div class="ilist">
|
||||
<i class="iconfont icon-wujiaoxing"></i>
|
||||
<i class="iconfont icon-fenxiang"></i>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
|
||||
this.event()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
async getInfoListData() {
|
||||
let { title, src_list, recommend } = await infoServe.infoList({ id: query("id") })
|
||||
|
||||
this.title = title
|
||||
// 手动实现 懒加载
|
||||
this.allArr = src_list
|
||||
this.defaultArr = [ this.allArr[0], this.allArr[1] ]
|
||||
|
||||
$(".info_img_list .img_list").innerHTML = this.defaultArr.maps(v => `<img src="${v}" alt="">`)
|
||||
|
||||
item(".recommend-model ul", recommend)
|
||||
}
|
||||
|
||||
|
||||
event() {
|
||||
$(".view_all").onclick = () => {
|
||||
$(".img_list").style.height = "auto"
|
||||
$(".view_all").style.display = "none"
|
||||
|
||||
$(".info_img_list .img_list").innerHTML = this.allArr.maps(v => `<img src="${v}" alt="">`)
|
||||
|
||||
}
|
||||
|
||||
|
||||
// TODO 找一个合适分享
|
||||
$(".icon-fenxiang").onclick = async () => {
|
||||
await navShare({
|
||||
title: this.title,
|
||||
text: `我这有个好看的，快来看看 ${this.title}`,
|
||||
url: location.href
|
||||
})
|
||||
}
|
||||
|
||||
let sc = $(".icon-wujiaoxing")
|
||||
|
||||
console.log("this.likeArr: ", this.likeArr);
|
||||
|
||||
let isHave = this.likeArr.filter(v => v.id == query("id"))
|
||||
if (isHave.length != 0) {
|
||||
sc.classList.add("icon-wujiaoxing1")
|
||||
}
|
||||
|
||||
$(".icon-wujiaoxing").onclick = async () => {
|
||||
// 已收藏，应该变成未收藏
|
||||
if (sc.classList.contains("icon-wujiaoxing1")) {
|
||||
sc.classList.remove("icon-wujiaoxing1")
|
||||
this.likeArr = this.likeArr.filter(v => v.id != query("id"))
|
||||
setItem("like", this.likeArr)
|
||||
|
||||
// 未收藏，应该变成已收藏
|
||||
} else {
|
||||
this.likeArr.push({
|
||||
id: query("id"),
|
||||
thumbnail: this.allArr[0],
|
||||
title: this.title,
|
||||
time: query("time"),
|
||||
// TODO 这个浏览量需要后端提供
|
||||
view: "42"
|
||||
})
|
||||
setItem("like", this.likeArr)
|
||||
sc.classList.add("icon-wujiaoxing1")
|
||||
}
|
||||
// await navShare({
|
||||
// title: this.title,
|
||||
// text: `我这有个好看的，快来看看 ${this.title}`,
|
||||
// url: location.href
|
||||
// })
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
new Info
|
||||
7
js/page/me.js
Normal file
7
js/page/me.js
Normal file
@@ -0,0 +1,7 @@
|
||||
class Me {
|
||||
constructor() {
|
||||
util.footer()
|
||||
}
|
||||
}
|
||||
|
||||
new Me
|
||||
97
js/page/search.js
Normal file
97
js/page/search.js
Normal file
@@ -0,0 +1,97 @@
|
||||
class Search {
|
||||
|
||||
page = 1;
|
||||
totalPage = 0;
|
||||
keyword = "";
|
||||
totalArr = [];
|
||||
|
||||
constructor() {
|
||||
util.header(
|
||||
`<input class="flex1" type="text" placeholder="输入关键字">`,
|
||||
`<div class="button">搜索</div>`,
|
||||
`<i class="iconfont icon-fanhui"></i>`
|
||||
)
|
||||
this.getSearchHotData()
|
||||
this.event()
|
||||
}
|
||||
|
||||
|
||||
async getSearchHotData() {
|
||||
let { hotKeyword, recommend } = await searchServe.searchHot()
|
||||
|
||||
$(".search_list ul").innerHTML = hotKeyword.maps(v => {
|
||||
return `
|
||||
<li>
|
||||
<a>${v}</a>
|
||||
</li>
|
||||
`
|
||||
});
|
||||
|
||||
item(".search_recommend", recommend, 2)
|
||||
|
||||
$(".search_recommend ul li").forEach(v => {
|
||||
v.onclick = () => {
|
||||
// 把你点击的文字放到搜索框里面
|
||||
$(".header input").value = v.innerText
|
||||
$(".header .button").onclick()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
event() {
|
||||
|
||||
let input = $(".header input")
|
||||
|
||||
$(".header .button").onclick = async () => {
|
||||
if (input.value.length != 0) {
|
||||
this.keyword = input.value
|
||||
this.totalArr = []
|
||||
await this.getSearchKeyData()
|
||||
if (this.totalArr.length != 0) {
|
||||
util.hidden(".no-search")
|
||||
item(".have-search ul", this.totalArr)
|
||||
util.show(".have-search")
|
||||
this.onscroll()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
input.oninput = () => {
|
||||
if (input.value.length == 0) {
|
||||
util.show(".no-search")
|
||||
util.hidden(".have-search")
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 用来发送搜索请求的
|
||||
async getSearchKeyData() {
|
||||
let { totalPage, list } = await searchServe.searchKey({
|
||||
keyword: this.keyword,
|
||||
page: this.page
|
||||
})
|
||||
this.totalPage = totalPage
|
||||
list.forEach(v => this.totalArr.push(v));
|
||||
}
|
||||
|
||||
// 滚动到底部实现自动加载下一页数据
|
||||
onscroll() {
|
||||
window.onscroll = async () => {
|
||||
var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
|
||||
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
||||
var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);
|
||||
|
||||
if (clientHeight + Math.ceil(scrollTop) >= scrollHeight) {
|
||||
this.page += 1
|
||||
if (this.page <= this.totalPage) {
|
||||
await this.getSearchKeyData()
|
||||
item(".have-search ul", this.totalArr)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new Search
|
||||
Reference in New Issue
Block a user