206 lines
7.0 KiB
JavaScript
206 lines
7.0 KiB
JavaScript
class Utils {
|
||
|
||
$(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
_(className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
|
||
|
||
footer() {
|
||
var currentPath = location.href;
|
||
var footerHtml = `
|
||
<ul class="footer">
|
||
${config.footerArr.map((v, i) => {
|
||
return `
|
||
<li class="${currentPath.includes(v.path) ? 'footer_active' : ''}">
|
||
<a href="${v.path}">
|
||
<i class="iconfont ${v.icon}"></i>
|
||
<p>${v.title}</p>
|
||
</a>
|
||
</li>
|
||
`
|
||
}).toString().replaceAll(",", "")
|
||
}
|
||
</ul>
|
||
`;
|
||
|
||
$("body").insertAdjacentHTML("beforeend", footerHtml)
|
||
}
|
||
|
||
/**
|
||
* 公共的头部
|
||
* @param {*} title 头部的中文标题
|
||
* @param {*} icon 左边的图标 传html代码
|
||
*/
|
||
header(title, icon = "") {
|
||
var html = `
|
||
<div class="header_theme1 theme_color">
|
||
<div class="header_theme1_left">
|
||
<i class="iconfont icon-back1"></i>
|
||
<span>${title}</span>
|
||
</div>
|
||
<div class="header_theme1_right">
|
||
${icon}
|
||
</div>
|
||
</div>
|
||
`;
|
||
$("body").innerHTML = html + $("body").innerHTML;
|
||
|
||
$(".header_theme1_left .icon-back1").onclick = () => history.back()
|
||
}
|
||
|
||
/**
|
||
* 搜索
|
||
* @param {*} title 中文内容
|
||
*/
|
||
screahtop(title) {
|
||
var html = `
|
||
<div class="header_screah">
|
||
<div class="header_screahtop">
|
||
<a class="header_screahcon">
|
||
<span class="iconfont icon-search"></span>
|
||
${title}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
`;
|
||
$("body").append(html);
|
||
}
|
||
/**
|
||
*
|
||
* /**
|
||
* 详情搜索
|
||
* @param {*} title 中文内容
|
||
*/
|
||
screahinfo() {
|
||
var html = `
|
||
<div class="header_screah">
|
||
<div class="header_screahtop">
|
||
<span class="iconfont icon-search"></span>
|
||
<input type="text" placeholder="搜索百万免费菜谱">
|
||
</div>
|
||
</div>
|
||
`;
|
||
$("body").append(html);
|
||
}
|
||
/**
|
||
*
|
||
* @param {*} res ajax请求的返回值
|
||
* @param {*} father 父容器
|
||
*
|
||
* 例 ：
|
||
* async do(){
|
||
* var res = await indexServe.videoList();
|
||
* FoodList(res,$('.had'))
|
||
* }
|
||
*
|
||
*/
|
||
FoodList(res, father) {
|
||
var html = `
|
||
${(Array.isArray(res)) ?
|
||
res.map((vv) => {
|
||
return `
|
||
<div class="wf-father swiper-slide">
|
||
${vv.content.map((vvv) => {
|
||
return `
|
||
<div class="wf-item">
|
||
<a class="wf-itemw" href="${vvv.url}">
|
||
<div class="wf-item-top">
|
||
<img class="img-one" src="${vvv.img}" alt="">
|
||
</div>
|
||
<div class="wf-item-content">
|
||
<div class="wf-title">${vvv.title}</div>
|
||
<div class="wf-des">
|
||
<div class="t">养</div>
|
||
<div class="wf-des-rel">${vvv.des}</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
`;
|
||
}).toString().replaceAll(",", "")
|
||
}
|
||
</div>
|
||
`;
|
||
}).toString().replaceAll(",", "")
|
||
: `
|
||
<div class="wf-father">
|
||
${res.items.map((v) => {
|
||
return `
|
||
<div class="wf-item">
|
||
<a class="wf-itemw" href="${v.path || v.href}">
|
||
<div class="wf-item-top">
|
||
${v.type == 5 ?
|
||
`<div class="img-four">
|
||
${v.img.map(item => {
|
||
return `<img src="${item}" alt="">`
|
||
}).toString().replaceAll(",", "")}
|
||
</div>
|
||
<div class="mount">${v.total_amount}菜</div>
|
||
`
|
||
: `<img class="img-one" src="${v.img || v.bd_photo}" alt="">`}
|
||
${v.type == 7 || v.hasOwnProperty("intro") ?
|
||
`<div class="vicon"></div>`
|
||
: ``
|
||
}
|
||
</div>
|
||
<div class="wf-item-content">
|
||
<div class="wf-title">${v.title}</div>
|
||
${v.type == 5 ? ``
|
||
:
|
||
`
|
||
${('label' in v && v.label != null) ?
|
||
`<div class="wf-des">
|
||
<div class="t">养</div>
|
||
<div class="wf-des-rel">${v.label.desc}</div>
|
||
</div>`
|
||
: ``
|
||
}
|
||
<div class="wf-item-content-bottom">
|
||
<div class="wf-item-bottom-left">
|
||
<img src="${('intro' in v) ? `https://st-cn.meishij.net/user/162/221/ns117912_142372157780527.jpg` : v.author.avatar_url}" alt="">
|
||
<span>${('intro' in v) ? `美食杰` : v.author.nickname}</span>
|
||
</div>
|
||
<div class="wf-item-bottom-right">
|
||
<div class="wf-item-bottom-right-i"></div>
|
||
<span>${v.click_num || v.viewed_amount}</span>
|
||
</div>
|
||
</div>
|
||
`
|
||
}
|
||
</div>
|
||
</a>
|
||
</div>`;
|
||
}).toString().replaceAll(",", "")
|
||
}`
|
||
|
||
}
|
||
`;
|
||
father.append(html);
|
||
// $('.wf-father').masonry({
|
||
// // options
|
||
// itemSelector: '.wf-item',
|
||
// columnWidth: 200
|
||
// });
|
||
}
|
||
|
||
$_GET(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 pair[1]; }
|
||
}
|
||
return (false);
|
||
}
|
||
}
|
||
|
||
// 解构赋值
|
||
var { footer, $_GET, header, FoodList, screahtop, screahinfo } = new Utils()
|
||
|
||
|
||
|