first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1 @@
56b03fe6-526a-4c1e-a3cb-a55994dc95f8

View File

@@ -0,0 +1,322 @@
class Home {
constructor() {
this.TabsDatas = [];
this.list = [];
this.PageSwiper = null;
this.CurrentPage = 0;
// 点击搜索进入搜索页面
document.querySelector(".search").onclick = () => {
location.href = "./search.html"
}
// 通过在本地保存一个变量 homeIndex记录用户在首页当前浏览到哪个分类
// 然后从其他页面回首页,那么根据本地变量 homeIndex 的数值,再回到上次浏览的分类
if (localStorage.getItem("homeIndex") != null) {
this.CurrentPage = localStorage.getItem("homeIndex")
}
this.GetTypeData().then(() => this.GetIndexData())
}
// 获取分类的数据,并渲染页面
async GetTypeData() {
if (localStorage.getItem("typeList") == null) {
// 获取分类数据
this.list = (await homeService.type({})).principal;
localStorage.setItem("typeList", JSON.stringify(this.list))
} else {
this.list = JSON.parse(localStorage.getItem("typeList"))
}
console.log("this.list ============== :", this.list);
// 根据分类的数组长度遍历生成与分类对应的内容
this.list.forEach((v, i) => {
this.TabsDatas.push({
id: v.id,
title: v.title,
page: 0,
TotalPage: 0,
content: []
})
document.querySelector(".s-wrapper").innerHTML +=
`
<div class="s-slide">
<div class="list_content item_list padding_30">
<ul>
</ul>
</div>
</div>
`
});
// 为每一个内容绑定滚动事件
var slide = document.querySelectorAll(".s-wrapper .s-slide");
var self = this;
slide.forEach((v, i) => {
if (i > 0) {
v.addEventListener('scroll', function () {
if (Math.ceil(this.scrollHeight - this.scrollTop) == this.clientHeight) {
self.TabsDatas[i - 1].page += 1;
if (self.TabsDatas[i - 1].page <= self.TabsDatas[i - 1].TotalPage) {
self.GetTypeInfoData(i)
}
}
})
}
})
// 向数据中追加首页
this.list.unshift({ id: -1, title: '首页' });
// 根据数据生成横向菜单
var MenuList = document.querySelector(".menu_list");
this.list.forEach((v, i) => {
MenuList.innerHTML += `
<li class="${i == this.CurrentPage ? 'menu_active' : ''}">${v.title}</li>
`
});
// 如果本地有 homeIndex那么从其他页面返回的时候将顶部菜单滚动到对应位置
if (localStorage.getItem("homeIndex") != null) {
var offsetLeft = document.querySelectorAll(".menu_list li")[this.CurrentPage].offsetLeft - 14;
document.querySelector(".menu_list").scrollLeft = offsetLeft
}
// 横向菜单被点击的时候
var mLi = document.querySelectorAll(".menu_list li")
mLi.forEach((v, i) => {
v.onclick = (e) => {
this.SetUrl(i)
// 使横向菜单滑动
document.querySelector(".menu_list").scrollLeft = e.target.offsetLeft - 14
// 清除激活样式
mLi.forEach(d => d.className = "")
// 添加激活样式
v.className = "menu_active"
this.PageSwiper.slideTo(i)
// 请求用户点击的分类的列表数据
if (this.list[i].id != -1 && this.TabsDatas[i - 1].content.length == 0) {
this.GetTypeInfoData(i)
}
}
})
this.initPageSwiper();
}
/**
* 初始化页面切换的轮播
*/
initPageSwiper() {
this.PageSwiper = new swiper('.s-container', {
time: 3,
wrapper: '.s-wrapper',
slide: '.s-slide',
auto: false,
speed: 300,
on: {
slideChangeTransitionStart: (index) => {
this.SetUrl(index)
// 获取所有菜单的li标签
var MenuLi = document.querySelectorAll(".menu_list li");
// 清除激活样式
MenuLi.forEach(v => v.className = "")
// 添加激活样式
MenuLi[index].className = "menu_active"
// 页面滚动的时候顶部菜单也移动位置
document.querySelector(".menu_list").scrollLeft = MenuLi[index].offsetLeft - 14;
// 请求用户点击的分类的列表数据
if (this.list[index].id != -1 && this.TabsDatas[index - 1].content.length == 0) {
this.GetTypeInfoData(index)
}
}
}
})
// 必须在轮播图初始化后才去请求跳转到对应的页面和请求页面数据
if (this.CurrentPage != 0) {
this.GetTypeInfoData(this.CurrentPage)
this.PageSwiper.slideTo(this.CurrentPage)
}
}
// 修改地址栏id参数为下标然后重新进入首页的时候直接继续进入上次访问分类
SetUrl(index) {
// 本地保存下标
localStorage.setItem("homeIndex", index)
}
/**
* 获取分类下的列表数据
*/
async GetTypeInfoData(index) {
var res = await homeService.classList({
page: this.TabsDatas[index - 1].page,
id: this.TabsDatas[index - 1].id
});
this.TabsDatas[index - 1].page = res.current_page;
this.TabsDatas[index - 1].TotalPage = res.total_page;
this.TabsDatas[index - 1].content = [
...this.TabsDatas[index - 1].content,
...res.data
];
var sWrapper = document.querySelectorAll(".s-wrapper .s-slide .list_content ul")
res.data.forEach((v) => {
sWrapper[index - 1].innerHTML += `
<li>
<div class="newest_img">
<a href="./info.html?id=${v.id}">
<img src="${v.preview}" alt="${v.title}">
</a>
<span>${v.total}P</span>
</div>
<div class="newest_text">
<a href="./info.html?id=${v.id}">
<p class="t">${v.title}</p>
<p class="source">${v.user}</p>
<p class="source">${v.source}</p>
</a>
<div class="tags">
${(v.tags.map((t) => {
return `<div class="tags_item">
<a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a>
</div>`
})).toString().replace(/,/ig, " ")
}
</div>
</div>
</li>
`
});
}
// 获取首页的数据,并渲染各个布局
async GetIndexData() {
// 获取首页的数据
var list = await homeService.GetHomeData({});
// 轮播图模特的数据
var ModelList = list.model.res;
// 最新收录
var newestList = list.newest.data;
// 今日推荐
var recommendedList = list.recommended.data;
var swiperWrapper = document.querySelector(".swiper-wrapper");
// 根据数据遍历生成banner 的 swiper-slide
var slideElement = [];
[1, 2].forEach(() => {
var o = document.createElement("div");
o.className = "swiper-slide";
slideElement.push(o)
})
ModelList.forEach((v, i) => {
if (i <= 3) {
slideElement[0].innerHTML +=
`<div class="item">
<a href="./model_info.html?id=${v.id}&t=${v.title}">
<div class="top">
<img src="${v.preview}" alt="">
<span>${v.total}</span>
</div>
<p>${v.title}</p>
</a>
</div>`
} else {
slideElement[1].innerHTML +=
`<div class="item">
<a href="./model_info.html?id=${v.id}&t=${v.title}">
<div class="top">
<img src="${v.preview}" alt="">
<span>${v.total}</span>
</div>
<p>${v.title}</p>
</a>
</div>`
}
})
// 将 swiper-slide 填入页面中
slideElement.forEach(v => swiperWrapper.appendChild(v))
new swiper('.swiper-container', {
time: 3,
auto: false,
speed: 800
});
// 遍历 最新收录
document.querySelector(".newest .title").innerHTML = `
<i class="iconfont icon-huo color_theme"></i>
最新收录
`;
newestList.forEach(v => {
document.querySelector(".newest ul").innerHTML +=
`
<li>
<div class="newest_img">
<a href="./info.html?id=${v.id}">
<img src="${v.preview}" alt="${v.title}">
</a>
<span>${v.total_page}套</span>
</div>
<div class="newest_text">
<a href="./info.html?id=${v.id}">
<p class="t">${v.title}</p>
<p class="source">${v.user}</p>
<p class="source">${v.source}</p>
</a>
<div class="tags">
${(v.tags.map((t) => {
return `<div class="tags_item">
<a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a>
</div>`
})).toString().replace(/,/ig, " ")
}
</div>
</div>
</li>
`
})
// 今日推荐
document.querySelector(".recommended .title").innerHTML = `
<i class="iconfont icon-tuijian color_theme"></i>
今日推荐
`;
recommendedList.forEach(v => {
document.querySelector(".recommended ul").innerHTML +=
`
<li>
<div class="newest_img">
<a href="./info.html?id=${v.id}">
<img src="${v.preview}" alt="${v.title}">
</a>
<span>${v.total_page}套</span>
</div>
<div class="newest_text">
<a href="./info.html?id=${v.id}">
<p class="t">${v.title}</p>
<p class="source">${v.user}</p>
<p class="source">${v.source}</p>
</a>
<div class="tags">
${(v.tags.map((t) => {
return `<div class="tags_item"><a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a></div>`
})).toString().replace(/,/ig, " ")
}
</div>
</div>
</li>
`
})
}
}
var home = new Home();

View File

@@ -0,0 +1,173 @@
class Info {
constructor() {
this.page = 1;
this.TotalPage = 0;
this.preview = "";
this.InfoList = [];
this.GetInfoData()
}
async GetInfoData(action = "first") {
this.InfoList = await homeService.info({
id: utils.GetQueryString("id"),
page: this.page
});
this.TotalPage = this.InfoList.total_page
// 设置网页标题
document.title = this.InfoList.title
this.InfoList.data.forEach((v) => {
var image = new Image();
image.src = v.src;
image.onload = () => {
if (image.width < image.height) {
this.preview = v.src;
}
this.LikePhotot()
document.querySelector(".info").innerHTML += `
<figure>
<a href="${v.src}" data-size="${image.width}x${image.height}">
<img src="${v.src}" alt="${v.title}" />
</a>
<figcaption itemprop="caption description">${v.title}</figcaption>
</figure>
`
}
});
this.BindNextPage();
initPhotoSwipeFromDOM('.info');
if (action == "first") {
document.querySelector(".recommend .title").innerText = "推荐写真"
this.InfoList.recommend.forEach(v => {
document.querySelector(".recommend ul").innerHTML +=
`
<li>
<div class="newest_img">
<a href="./info.html?id=${v.id}">
<img src="${v.preview}" alt="${v.title}">
</a>
<span>${v.total}P</span>
</div>
<div class="newest_text">
<a href="./info.html?id=${v.id}">
<p class="t">${v.title}</p>
<p class="source">${v.user}</p>
<p class="source">${v.source}</p>
</a>
<div class="tags">
${(v.tags.map((t) => {
return `<div class="tags_item"><a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a></div>`
})).toString().replace(/,/ig, " ")
}
</div>
</div>
</li>
`
})
document.querySelector(".relevant .title").innerText = "相关写真"
this.InfoList.relevant.forEach(v => {
document.querySelector(".relevant ul").innerHTML +=
`
<li>
<div class="newest_img">
<a href="./info.html?id=${v.id}">
<img src="${v.preview}" alt="${v.title}">
</a>
<span>${v.total}P</span>
</div>
<div class="newest_text">
<a href="./info.html?id=${v.id}">
<p class="t">${v.title}</p>
<p class="source">${v.user}</p>
<p class="source">${v.source}</p>
</a>
<div class="tags">
${(v.tags.map((t) => {
return `<div class="tags_item"><a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a></div>`
})).toString().replace(/,/ig, " ")
}
</div>
</div>
</li>
`
})
}
}
BindNextPage() {
document.querySelector(".next_page").style.display = "block"
document.querySelector(".next_page").onclick = () => {
this.page += 1;
if (this.page > this.TotalPage) {
document.querySelector(".next_page").style.display = "none"
} else {
if (this.page == this.TotalPage) {
document.querySelector(".next_page").style.display = "none"
this.GetInfoData("loadMore")
} else {
this.GetInfoData("loadMore")
}
}
}
}
LikePhotot() {
// true 收藏, false 取消收藏
var status = null;
var LikeList = JSON.parse(localStorage.getItem("likeList")) == null
? [] : JSON.parse(localStorage.getItem("likeList"))
var isHave = LikeList.filter((v) => {
if (v.id == utils.GetQueryString("id")) {
return v
}
})
// 该写真你未收藏true 点击进行收藏
if (isHave.length == 0) {
status = true
// 改写真你已收藏,点击取消收藏
} else {
status = false
document.querySelector(".like").className = "like iconfont icon-aixin"
}
document.querySelector(".like").onclick = () => {
console.log(this.preview);
if (status == true) {
LikeList.push({
id: utils.GetQueryString("id"),
title: this.InfoList.title,
user: this.InfoList.info,
source: this.InfoList.source,
total: this.InfoList.total,
preview: this.preview
})
localStorage.setItem("likeList", JSON.stringify(LikeList))
status = false
document.querySelector(".like").className = "like iconfont icon-aixin"
} else {
LikeList = LikeList.filter((v) => {
if (v.id != utils.GetQueryString("id")) {
return v
}
});
status = true
document.querySelector(".like").className = "like iconfont icon-xin"
localStorage.setItem("likeList", JSON.stringify(LikeList))
}
}
}
}
new Info()

View File

@@ -0,0 +1,74 @@
class Like {
constructor() {
this.like = JSON.parse(localStorage.getItem("likeList")) == null
? []
: JSON.parse(localStorage.getItem("likeList"));
this.GetLikeList()
}
GetLikeList() {
if (this.like == null || this.like.length == 0) {
document.querySelector(".jglist ul").innerHTML = "";
document.querySelector(".jglist ul").innerHTML =
`
<div class="nodata">
<i class="iconfont icon-wushuju"></i>
<p>暂无收藏</p>
</div>
`
} else {
document.querySelector(".jglist ul").innerHTML = "";
this.like.forEach(v => {
document.querySelector(".jglist ul").innerHTML +=
`
<li>
<div class="newest_img">
<a href="./info.html?id=${v.id}">
<img src="${v.preview}" alt="${v.title}">
</a>
<span>${v.total}</span>
</div>
<div class="newest_text">
<a href="./info.html?id=${v.id}">
<p class="t">${v.title}</p>
<p class="source">${v.user}</p>
${v.hasOwnProperty("source")
? `<p class="source">${v.source}</p>`
: ''
}
</a>
</div>
</li>
`
});
this.BindLongPress()
}
}
BindLongPress() {
var Li = document.querySelectorAll(".jglist ul li");
Li.forEach((v, i) => {
utils.longPress(v, () => {
Tips.dialog({
title: '删除收藏',
message: '确认删除您选中的写真集吗?',
cancelText: '取消',
confirmText: '确定',
cancel: () => { },
confirm: () => {
this.like = this.like.filter((r)=>{
return r.id != this.like[i].id
})
localStorage.setItem("likeList", JSON.stringify(this.like))
this.GetLikeList()
}
})
})
})
}
}
new Like()

View File

@@ -0,0 +1,23 @@
class Mechanism {
constructor () {
this.GetMechanismList()
}
async GetMechanismList() {
var res = await homeService.mechanism({});
console.log(res);
var Li = document.querySelector(".mechanism_list");
res.forEach(v => {
Li.innerHTML+=`
<li>
<a href="./mechanism_info.html?id=${v.id}&t=${v.title}&type=mechanism">
<p>${v.title}</p>
<span>${v.quantity}</span>
</a>
</li>
`
});
}
}
var mechanism = new Mechanism();

View File

@@ -0,0 +1,60 @@
class MechanismInfo {
constructor () {
// 设置标题栏文字
utils.SetHeaderTitle(utils.GetQueryString("t"))
this.GetMechanismInfo()
}
async GetMechanismInfo() {
var res = []
if (utils.GetQueryString("type") == "tags") {
res = await homeService.classList({
page: 0,
id: utils.GetQueryString("id")
})
} else {
res = await homeService.mechanismList({
page: 0,
id: utils.GetQueryString("id")
})
}
console.log(res);
res.data.forEach(v => {
document.querySelector(".jglist ul").innerHTML+=
`
<li>
<div class="newest_img">
<a href="./info.html?id=${v.id}">
<img src="${v.preview}" alt="${v.title}">
</a>
<span>${v.total}P</span>
</div>
<div class="newest_text">
<a href="./info.html?id=${v.id}">
<p class="t">${v.title}</p>
<p class="source">${v.user}</p>
${
v.hasOwnProperty("source")
? `<p class="source">${v.source}</p>`
: ''
}
</a>
<div class="tags">
${
(v.tags.map((t) => {
return `<div class="tags_item"><a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a></div>`
})).toString().replace(/,/ig, " ")
}
</div>
</div>
</li>
`
});
}
}
new MechanismInfo()

View File

@@ -0,0 +1,56 @@
class Model {
constructor () {
this.GetModelList()
this.newModelList = []
}
async GetModelList() {
var res = await homeService.allModel({});
console.log(res);
var hot_models = res.hot_models;
var newest = res.newest;
this.newModelList = [...hot_models, ...newest]
this.RenderModelItem(hot_models, '.hot_models')
this.RenderModelItem(newest, '.newest')
}
RenderModelItem(data, className) {
if (className == ".hot_models") {
document.querySelector(`${className} .title`).innerText='热门模特'
} else {
document.querySelector(`${className} .title`).innerText='最新模特'
}
data.forEach(v => {
document.querySelector(`${className} .model_list`).innerHTML+=
`
<div class="item">
<div class="top">
<img src="${v.preview}" alt="${v.title}">
${
v.total.length == 0
? ''
: `<span>${v.total}</span>`
}
</div>
<p>${v.title}</p>
</div>
`
});
this.BindItemClick()
}
BindItemClick() {
var Item = document.querySelectorAll(".item");
Item.forEach((v,i)=>{
v.onclick = () => {
location.href = `model_info.html?id=${this.newModelList[i].id}&t=${this.newModelList[i].title}`
}
})
}
}
var model = new Model();

View File

@@ -0,0 +1,75 @@
class ModelInfo {
constructor () {
utils.SetHeaderTitle(utils.GetQueryString("t"))
this.GetModelInfoData()
}
async GetModelInfoData() {
var res = await homeService.modelList({
page: 0,
id: utils.GetQueryString("id")
})
// 设置模特的头像,名字,介绍
document.querySelector(".model_info_header").innerHTML = `
<img src="${res.model_info.portrait}" alt="${res.model_info.name}">
<div class="right_text">
<p>${res.model_info.name}</p>
<span>${res.model_info.explain}</span>
</div>
`
// 遍历模特的作品
document.querySelector(".tazuop .title").innerText = "她的作品"
res.data.forEach(v => {
document.querySelector(".tazuop ul").innerHTML+=
`
<li>
<div class="newest_img">
<a href="./info.html?id=${v.id}">
<img src="${v.preview}" alt="${v.title}">
</a>
<span>${v.total}P</span>
</div>
<div class="newest_text">
<a href="./info.html?id=${v.id}">
<p class="t">${v.title}</p>
<p class="source">${v.source}</p>
</a>
<div class="tags">
${
(v.tags.map((t) => {
return `<div class="tags_item"><a href="./mechanism_info.html?id=${t.id}&type=tags&t=${t.title}">${t.title}</a></div>`
})).toString().replace(/,/ig, " ")
}
</div>
</div>
</li>
`
});
// 遍历类似模特
document.querySelector(".similar .title").innerText = "类似模特"
res.similar.forEach((v)=>{
document.querySelector(".similar .model_list").innerHTML+= `
<div class="item">
<div class="top">
<img src="${v.preview}" alt="${v.title}">
<span>${v.total}</span>
</div>
<p>${v.title}</p>
</div>
`
})
var items = document.querySelectorAll(".similar .model_list .item")
items.forEach((v,i)=>{
v.onclick = function () {
location.href = `model_info.html?id=${res.similar[i].id}&t=${res.similar[i].title}`
}
})
}
}
new ModelInfo()

View File

@@ -0,0 +1,30 @@
class My {
constructor() {
this.bindClick()
}
bindClick() {
document.querySelector(".updateApp").onclick = function () {
Tips.loading()
setTimeout(()=>{
Tips.close();
Tips.toast("当前已是最新版本",2000)
},2000)
}
document.querySelector(".clearData").onclick = function () {
Tips.dialog({
title: '清除缓存',
message: '是否清除App所有的缓存将会删除收藏的数据首页的自定义分类等慎重选择',
cancelText: '取消',
confirmText: '确定',
confirm: ()=> {
localStorage.clear()
setTimeout(()=>{
Tips.toast("缓存清除成功")
},1000)
}
})
}
}
}
new My()

View File

@@ -0,0 +1,48 @@
class Search {
constructor() {
this.GetSearchList()
}
async GetSearchList() {
var SearchInput = document.querySelector(".search_input input"),
SearchSubmit = document.querySelector(".search_input .icon-search");
SearchSubmit.onclick = async () => {
console.log("111");
if (SearchInput.value.length == 0) {
Tips.toast("输入不能为空")
} else {
var res = await homeService.search({
keyword: SearchInput.value
});
if (res.length == 0) {
document.querySelector(".search_list ul").innerHTML = ""
document.querySelector(".search_list ul").innerHTML = `
<span class="nodata">没有搜索结果</span>
`
} else {
document.querySelector(".search_list ul").innerHTML = ""
res.forEach(v => {
document.querySelector(".search_list ul").innerHTML+= `
<li>
<div class="newest_img">
<a href="./info.html?id=${v.id}">
<img src="${v.preview}" alt="${v.title}">
</a>
<span>49P</span>
</div>
<div class="newest_text">
<a href="./info.html?id=${v.id}">
<p class="t">${v.title}</p>
</a>
</div>
</li>
`
});
}
}
}
}
}
new Search()

View File

@@ -0,0 +1,84 @@
class TypeEdit {
constructor() {
this.YouChioose = []
this.NoChiooseList = []
this.RenderYouChioose()
}
RenderYouChioose() {
this.YouChioose = JSON.parse(localStorage.getItem("typeList"));
console.log(this.YouChioose);
// 渲染 点击删除以下分类
document.querySelector(".you_chioose .chiooseWrap").innerHTML = ""
this.YouChioose.forEach(v => {
document.querySelector(".you_chioose .chiooseWrap").innerHTML += `
<li>${v.title}</li>
`
});
this.BindTopClick()
// 渲染 点击添加以下分类
if (localStorage.getItem("nochioose") == null) {
localStorage.setItem("nochioose", JSON.stringify([]))
} else {
this.NoChiooseList = JSON.parse(localStorage.getItem("nochioose"))
document.querySelector(".chioose_list .chiooseWrap").innerHTML = ""
this.NoChiooseList.forEach(v => {
document.querySelector(".chioose_list .chiooseWrap").innerHTML += `
<li>${v.title}</li>
`
});
this.BindBottomClick()
}
}
BindTopClick() {
// 绑定事件
var YouChiooseLi = document.querySelectorAll(".you_chioose .chiooseWrap li");
YouChiooseLi.forEach((v, i) => {
v.onclick = () => {
var noCh = JSON.parse(localStorage.getItem("nochioose"))
noCh.push(this.YouChioose[i]);
localStorage.setItem("nochioose", JSON.stringify(noCh));
this.YouChioose = this.YouChioose.filter(res => {
if (res.id != this.YouChioose[i].id) {
return res
}
})
localStorage.setItem("typeList", JSON.stringify(this.YouChioose))
this.RenderYouChioose()
}
})
}
BindBottomClick() {
var Li = document.querySelectorAll(".chioose_list .chiooseWrap li");
Li.forEach((v,i)=>{
v.onclick = () => {
var typeList = JSON.parse(localStorage.getItem("typeList"))
typeList.push(this.NoChiooseList[i]);
localStorage.setItem("typeList", JSON.stringify(typeList));
this.NoChiooseList = this.NoChiooseList.filter(res => {
if (res.id != this.NoChiooseList[i].id) {
return res
}
});
localStorage.setItem("nochioose", JSON.stringify(this.NoChiooseList))
this.RenderYouChioose()
}
})
}
}
new TypeEdit()