first commit

h5/js/page/.pydio

@@ -0,0 +1 @@
+1389d664-0cad-42b0-b080-5e05130ca49c

h5/js/page/home.js

@@ -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();

h5/js/page/info.js

@@ -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()

h5/js/page/like.js

@@ -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()

h5/js/page/mechanism.js

@@ -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();

h5/js/page/mechanism_info.js

@@ -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()

h5/js/page/model.js

@@ -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();

h5/js/page/model_info.js

@@ -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()

h5/js/page/my.js

@@ -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()

h5/js/page/reg.js

@@ -0,0 +1,59 @@
+class Reg {
+    constructor() {
+       this.showPassword();
+       this.phone = document.querySelector(".userphone");
+       this.pass = document.querySelector(".showpas input");
+       this.UserReg()
+    }
+
+    showPassword() {
+        var showPassword = document.querySelector(".showPassword");
+        
+        showPassword.onclick = () => {
+            if (showPassword.classList.contains("icon-eye1")) {
+                showPassword.classList.remove("icon-eye1")
+                showPassword.classList.add("icon-eye")
+                this.pass.type = "text"
+            } else {
+                this.pass.type = "password"
+                showPassword.classList.remove("icon-eye")
+                showPassword.classList.add("icon-eye1")
+            }
+            
+        }
+    }
+
+    UserReg() {
+        document.querySelector(".reg_input button").onclick = async () => {
+            if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone.value)) {
+                Tips.toast("手机号格式不正确",2000) 
+                return;
+            }
+
+            if (this.pass.value.length == 0) {
+                Tips.toast("密码不能为空",2000) 
+                return;
+            }
+
+            let res = await homeService.search({
+                userphone: this.phone.value,
+                userpwd: this.pass.value,
+                superior: utils.GetQueryString("objectId") == null 
+                    ? '' 
+                    : utils.GetQueryString("objectId")
+            });
+
+            Tips.dialog({
+                title: '温馨提示',
+                message: '注册成功，点击确定跳转至App下载页面，请安装App',
+                cancelText: '取消',
+                confirmText: '确定',
+                confirm: ()=> {
+                    location.href = "../share/index.html";
+                }
+             })
+        }
+
+    }
+}
+new Reg()

h5/js/page/search.js

@@ -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()

h5/js/page/type_edit.js

@@ -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()