135 lines
4.0 KiB
JavaScript
135 lines
4.0 KiB
JavaScript
class Utils {
|
|
|
|
|
|
footer() {
|
|
var footerArr = [
|
|
{ title: '首页', icon: 'icon-home', href: 'index.html' },
|
|
{ title: '机构', icon: 'icon-jigou', href: 'mechanism.html' },
|
|
{ title: '模特', icon: 'icon-me', href: 'model.html' },
|
|
{ title: '我的', icon: 'icon-wo', href: 'my.html' },
|
|
];
|
|
// 用户当前正在访问的页面地址
|
|
// http://localhost:63342/page/mechanism.html
|
|
var currentPath = location.href;
|
|
$("body").innerHTML += `
|
|
<ul class="footer">
|
|
${
|
|
footerArr.map((v,index) => {
|
|
return `
|
|
<li class="${currentPath.includes(v.href) ? 'footer_active' : ''}">
|
|
<a href="./${v.href}">
|
|
<i class="iconfont ${v.icon}"></i>
|
|
<p>${v.title}</p>
|
|
</a>
|
|
</li>
|
|
`
|
|
}) .toString().replaceAll(",", "")
|
|
}
|
|
</ul>
|
|
`
|
|
}
|
|
|
|
header(title, action = "") {
|
|
$("body").innerHTML = `
|
|
<div class="pub_header">
|
|
<div class="pub_header_left">
|
|
<i class="iconfont icon-back1"></i>
|
|
<span>${title}</span>
|
|
</div>
|
|
<div class="pub_header_action">
|
|
${action}
|
|
</div>
|
|
</div>
|
|
` + $("body").innerHTML;
|
|
|
|
$(".icon-back1").onclick = () => {
|
|
history.back();
|
|
}
|
|
}
|
|
|
|
item(el, data) {
|
|
data.forEach((v,i) => {
|
|
el.innerHTML += `
|
|
<li>
|
|
<a href="./info.html?id=${v.id}">
|
|
<div class="pic_item_top">
|
|
<img src="${v.preview}" alt="">
|
|
<span>${v.total}套</span>
|
|
</div>
|
|
<div class="pic_item_title ellipsis">${v.title}</div>
|
|
<div class="pic_item_source">${v.user}</div>
|
|
${
|
|
v.source.length != 0
|
|
? `<div class="pic_item_source">${v.source}</div>`
|
|
: ''
|
|
}
|
|
</a>
|
|
<div class="pic_item_tags">
|
|
${
|
|
v.tags.map((item,index) => {
|
|
return `
|
|
<a href="./list.html?id=${item.id}&t=${item.title || item.name}&type=tag" class="pic_item_tags_item">${item.title || item.name}</a>
|
|
`
|
|
}).toString().replaceAll(",", '')
|
|
}
|
|
</div>
|
|
</li>
|
|
`
|
|
})
|
|
|
|
}
|
|
|
|
model(el, data) {
|
|
data.forEach((v,i) => {
|
|
$(el).innerHTML += `
|
|
<li>
|
|
<a href="./modelInfo.html?id=${v.id}&t=${v.title}">
|
|
<div class="top">
|
|
<img src="${v.preview}" alt="">
|
|
<span class="nums">${v.total}</span>
|
|
</div>
|
|
<span class="title ellipsis">${v.title}</span>
|
|
</a>
|
|
</li>
|
|
`
|
|
});
|
|
}
|
|
|
|
query(variable) {
|
|
var query = window.location.search.substring(1);
|
|
var vars = query.split("&");
|
|
for (var i=0;i<vars.length;i++) {
|
|
var pair = vars[i].split("=");
|
|
if(pair[0] == variable){
|
|
return decodeURI(pair[1]);
|
|
}
|
|
}
|
|
return(false);
|
|
}
|
|
|
|
loadMore(el, callback) {
|
|
el.addEventListener('scroll', function () {
|
|
console.log("111")
|
|
if (Math.ceil(el.scrollHeight - el.scrollTop) == el.clientHeight) {
|
|
callback()
|
|
}
|
|
})
|
|
}
|
|
|
|
$(className) {
|
|
return document.querySelector(className);
|
|
}
|
|
|
|
_(className) {
|
|
return document.querySelectorAll(className);
|
|
}
|
|
}
|
|
|
|
// 对象的解构赋值
|
|
var {
|
|
footer, $, _,
|
|
item, model,
|
|
query, header,
|
|
loadMore
|
|
} = new Utils()
|
|
// var utils = new Utils()
|