ClassContent/历届学生/front-end-team-11/项目开发/学生项目/贡婉宝/得到/js/utils/index.js

class Utils {


    footer() {
        let curretHref = location.href
        let list = [
            { title: "首页", icon: "home", href: "index.html" },
            { title: "机构", icon: "jigou", href: "mechanism.html" },
            { title: "模特", icon: "me", href: "mannequin.html" },
            { title: "我的", icon: "wo", href: "Itsmine.html" },
        ]

        let html =
            `
           <ul class="footer">
               ${list.map((v) => {
                return `
                    <li class="${curretHref.includes(v.href) ? "active" : ""}">
                        <a href="${v.href}">
                             <i class="iconfont icon-${v.icon}"></i>
                             <p>${v.title}</p>
                        </a>
                    </li>
                    `
            })
            }
           </ul>
        `
        $("body").insertAdjacentHTML("beforeend", html)
    }


    customMethods() {
        Array.prototype.map = function (callback) {
            let result = []
            for (let index = 0; index < this.length; index++) {
                result.push(callback(this[index], index, this))
            }
            return result.toString().replaceAll(",", "");
        }

        Element.prototype.html = function (name) {
            this.innerHTML += name;
        }

        //为单个多个元素绑定 click事件

        //Eventcode是点击事件里所写的代码  例如：sss.onclick=()=>{   Eventcode是这里面的方法  }
        NodeList.prototype.tap = function (Eventcode) {

            this.forEach((v, i) => ClickTransfer(v, Eventcode, i))

        }

        //为单个元素绑定 click事件
        Element.prototype.tap = function (Eventcode) {
            ClickTransfer(this, Eventcode)

        }

        //

        let ClickTransfer = (v, Eventcode, i) => {
            v.onclick = (e) => {
                console.log()
                Eventcode({ v, i, e })
            }
        }
        //添加类
        Element.prototype.appClass = function (name) {
            this.classList.add(name)
            return this
        }

        Element.prototype.siblings = function () {
            return Array.from(this.parentElement.children).filter(v => v != this)
        }
        //循环删除
        Array.prototype.removeClass = function (name) {
            this.forEach(v => bindElementRemoveClass(v, name))
            return this;
        }
        //删除单个类
        Element.prototype.removeClass = function (name) {
            bindElementRemoveClass(this, name)
            return this;
        }

        var bindElementRemoveClass = (v, name) => {
            v.classList.remove(name)
        }
    }

    //详情头部
    header(title = "", like = "") {
        $("body").html(`
            <div class="header_pub">
                <div class="left">
                    <i class="iconfont icon-back1"></i>
                    <span class="ellipsis">${title}</span>
                </div>
                ${like}
                
            </div>
        `);

        $(".header_pub .icon-back1").tap(() => {
            history.back()
        })
    }



    $(className) {
        return document.querySelector(className);
    }

    _(className) {
        return document.querySelectorAll(className);
    }

    query(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return decodeURIComponent(r[2]);
        return null;
    }
    item(dom, data, type = 1) {
        console.log(type)
        if (type == 1 || type) {
            dom.innerHTML = ""
        }

        data.forEach((v, i) => {
            dom.html(`
            <li>
                 <a>
                     <div class="img">
                        <img src="${v.img_src || v.preview}" alt="">
                        <span>${v.total || v.shuliang || v.quantity}P</span>
                     </div>
                     <div class="title ellipsis">${v.title}</div>
                     ${type == 3 ? "" : `<div class="model ellipsis">${v.user || `模特：${(v?.renwulist.length != 0 ? v.renwulist[0].name : '')||(v.renwulist.length != 0 ? v.renwulist[0].name : '')}`}</div>
                     <div class="jg ellipsis"> ${v.source || `机构：${v.jigoulist[0].name}`}</div>`}
                     
                </a>
                ${type == 3 ? "" : `<div class="tag">${(v.biaoqianlist || v.tags).map(item => { return `<a href="">${item.name || item.title}</a>` })}</div>`}
                
        </li>
            `)
        })
    }

    //添加到浏览器
    setItem(key, value) {

        localStorage.setItem(key, value.constructor == Object || value.constructor == Array ? JSON.stringify(value) : value)
    }

    //从浏览器获取数据
    getItem(key) {
        return localStorage.getItem(key) == null ? false : JSON.parse(localStorage.getItem(key))
    }

    //添加a标签点击
    clicka(dom, data, href) {
        console.log(data)

        _(dom).tap(({ v, i }) => {

            let clickaadd = () => {
                let sss = {
                    id: data[i].id,
                    img_src: data[i].img_src || data[i].preview,
                    title: data[i].title,
                    renwulist: data[i].renwulist || data[i].user,
                    jigoulist: data[i].jigoulist || data[i].source,
                    biaoqianlist: data[i].biaoqianlist || data[i].tags,
                    shuliang: data[i].shuliang || data[i].total
                }
                let ddd = getItem("History")
                ddd.unshift(sss)
                //添加到浏览器
                setItem("History", ddd)
                window.location.href = `${href}?id=${data[i].id}&quantity=${data[i].total || data[i].shuliang||data[i].quantity}&title=${encodeURIComponent(data[i].title)}&img_src=${data[i].preview || data[i].img_src}`
            }
            // window.location.href = `${href}?id=${data[i].id}&quantity=${data[i].total || data[i].shuliang}&title=${encodeURIComponent(data[i].title)}&img_src=${data[i].preview || data[i].img_src}`

            // 添加历史记录
            let ty = false;
            try {

                getItem("History").forEach(v => {
                    if (data[i].id == v.id) {
                        let data1 = getItem("History").filter(item => item.id != data[i].id)
                        
                        setItem("History", data1)
                        
                        clickaadd()
                        ty = true
                    }
                })

            } catch (e) {
                if (e.message != "第三") throw e;
            };

            if (ty == false) {
                clickaadd()
            }

        })
    }

}

let {
    $, _,
    customMethods, footer,
    query, item, header, setItem, getItem, clicka,
} = new Utils()
customMethods()