first commit

历届学生/fontendsix/项目练习/上课项目/美食杰/js/utils/index.js

@@ -0,0 +1,205 @@
+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()
+
+
+