增加新项目

项目合集/最新写真app/fontend/js/config/index.js

@@ -0,0 +1,60 @@
+const config = {
+    stage: "prod", // dev test  prod
+
+    // 开发阶段请求地址
+    devUrl: 'https://pc.buyusdt.xyz/v1/api',
+
+    // 测试阶段请求地址
+    testUrl: 'http://[240e:362:223f:2e00::fce]:3030/v1/test',
+
+    // 正式阶段请求地址
+    prodUrl: 'https://pc.buyusdt.xyz/v1/api',
+
+
+    urlList: {
+        homeHot: '/home/hot',  // 获取热门推荐的写真
+        homeBanner: '/home/banner',
+        homeList: '/home/list',
+
+        tagRecommend: '/tag/recommend',
+        tagList: '/tag/list',
+        tagInfo: '/tag/info',
+
+        infoList: '/info/list',
+
+        hotList: '/hot/list',
+
+    },
+    footerArr: [
+        { title: '首页', icon: 'icon-shouye', href: 'index.html' },
+        { title: '分类', icon: 'icon-changchenglogo', href: 'type.html' },
+        { title: '热门', icon: 'icon-hot', href: 'hot.html' },
+        { title: '我的', icon: 'icon-wo', href: 'me.html' },
+    ],
+    // 动态的返回不同阶段的项目 基地址
+    checkStage: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devUrl
+                break;
+
+            case "test":
+                return this.testUrl
+                break;
+
+            case "prod":
+                return this.prodUrl
+                break;
+
+            default:
+                break;
+        }
+    },
+
+}
+
+
+
+//  基（基本）地址    短地址（具体的功能地址）
+// http://[240e:362:223f:2e00::fce]:3030/v1/api   /home/hot
+// https://pc.buyusdt.xyz/v1/api     /home/hot

项目合集/最新写真app/fontend/js/http/index.js

@@ -0,0 +1,78 @@
+// 用js的function 来模拟class
+const http = () => {
+    NProgress.configure({
+        easing: 'ease', speed: 200,
+        trickleSpeed: 150
+    });
+
+    const init = () => {
+        return new XMLHttpRequest();
+    }
+
+    const get = (params) => {
+        let http = init()
+        NProgress.start();
+        return new Promise((success, error) => {
+            http.open("get", handleGetParams(params))
+            http.send()
+            readystatechange(http, success, error)
+        })
+    }
+
+    const post = (params) => {
+        let http = init()
+        NProgress.start();
+        return new Promise((success, error) => {
+            http.open("post", config.checkStage() + params.url)
+            http.setRequestHeader("Content-Type", "application/json")
+            http.send(JSON.stringify(params.data))
+            readystatechange(http, success, error)
+        })
+    }
+
+    const readystatechange = (ajax, success, error) => {
+        ajax.onreadystatechange = () => {
+            // http status
+            // ajax readyState
+            // 接口提供的 标识当前你访问的接口操作的 具体信息
+            if (ajax.readyState == 4) {
+                if (ajax.status == 200) {
+                    NProgress.done();
+                    let result = JSON.parse(ajax.responseText)
+
+                    switch (result.status) {
+                        case 200:
+                            success(result.data)
+                            break;
+
+                        case 500:
+                            alert(result.message)
+                            break;
+
+                        default:
+                            break;
+                    }
+
+                } else {
+                    error(ajax)
+                    console.error(ajax)
+                }
+            }
+        }
+    }
+
+
+    // 处理get请求参数并 拼接地址
+    const handleGetParams = (params) => {
+        let str = ""
+        for (const key in params.data) {
+            str += `&${key}=${params.data[key]}`
+        }
+        str = str.replace("&", "?")
+        return config.checkStage() + params.url + str
+    }
+
+
+    return { get, post }
+}
+

项目合集/最新写真app/fontend/js/page/hot.js

@@ -0,0 +1,22 @@
+
+// 每一个页面都应该有一个init方法
+// 用来做初始化
+const init = async () => {
+    header(
+        "",
+        "热门",
+    )
+    footer()
+    getHotList()
+}
+
+
+
+const getHotList = async () => {
+
+     data = await hotList(
+        { page: 1 }
+    );
+    item(".random ul", data.list);
+}
+init()

项目合集/最新写真app/fontend/js/page/index.js

@@ -0,0 +1,58 @@
+let mySwiper = null
+
+
+// 每一个页面都应该有一个init方法
+// 用来做初始化
+const init = async () => {
+    footer()
+    getTagRecommend()
+    getHomeBanner()
+    getHomeHot()
+    getHomeList()
+}
+
+const getHomeBanner = async () => {
+    innerMaps(
+        ".swiper-wrapper",
+        await homeBanner(),
+        v => `<div class="swiper-slide">
+                    <img src="${v.src}" alt="">
+               </div>`
+    )
+    initSwiper();
+}
+
+const getTagRecommend = async () => {
+    innerMaps(
+        ".recommend-tag",
+        await tagRecommend(),
+        v => `
+            <li>
+                <a href="">
+                    <div class="title">${v.short_title}</div>
+                    <div class="desc">${v.title}</div>
+                </a>
+            </li>
+        `
+    )
+}
+
+const getHomeHot= async () => item(".roll ul",await homeHot())
+
+const getHomeList = async () => item(".random ul", await homeList())
+
+
+const initSwiper = () => {
+    mySwiper = new Swiper('.banner', {
+        loop: true, // 循环模式选项
+        // 如果需要分页器
+        pagination: {
+            el: '.swiper-pagination',
+        },
+    })
+}
+
+
+
+
+init()

项目合集/最新写真app/fontend/js/page/info.js

@@ -0,0 +1,95 @@
+
+// 每一个页面都应该有一个init方法
+// 用来做初始化
+let infoData = {}
+let likeData = JSON.parse(localStorage.getItem("like")) || []
+const init = async () => {
+    header(
+        `<div class="flex ai-c">
+            <i class="iconfont icon-wujiaoxing "></i>
+            <i class="iconfont icon-fenxiang"></i>
+        </div>`,
+    )
+    getInfoList()
+    bindEvent()
+}
+
+const getInfoList = async () => {
+    infoData = await infoList({ id: query("id") })
+    $(".header_title").innerText = infoData.title
+
+    item(".recommend-model ul", infoData.recommend)
+
+    innerMaps(
+        ".info .img_arr",
+        infoData.src_list,
+        (v, i) => `<a href="${v}" class="js-smartPhoto" data-id="${i}">
+                      <img data-src="${v}" class="lazyload" data-sizes="auto" alt="">
+                    </a>`
+    )
+
+
+
+    _(".img_arr img").click(v => {
+        new SmartPhoto(".js-smartPhoto", {
+            resizeStyle: 'fit'
+        });
+    });
+}
+
+
+const bindEvent = () => {
+    _(".all").click(v => {
+        $(".info").classList.replace("hidden", "show")
+    })
+
+
+    _(".icon-fenxiang").click(async v => {
+        await navigator.clipboard.writeText(stripIndents`
+            我发现一个好看的，快来看看: 《${infoData.title}》
+            ${location.href}
+        `);
+        alert("已粘贴，快分享给朋友吧")
+    })
+
+
+    // 在这判断 写真是否收藏
+    // foreach  map  filter
+    // 如果写真已经被收藏在本地，那么将图标改为收藏状态（实心）
+    likeData.filter(v => v.id == query("id") ? v : null).length != 0
+    ? $(".icon-wujiaoxing").classList.add("icon-wujiaoxing1")
+    : null
+    
+
+    _(".icon-wujiaoxing").click(async v => {
+         // $(".icon-wujiaoxing").classList.toggle("icon-wujiaoxing1")
+        
+        // 取消收藏
+        if ($(".icon-wujiaoxing").classList.contains("icon-wujiaoxing1")) {
+            $(".icon-wujiaoxing").classList.remove("icon-wujiaoxing1")
+            likeData = likeData.filter((v,i) => {
+                if (v.id != query("id")) {
+                    return v
+                }
+            })
+
+            localStorage.setItem("like", JSON.stringify(likeData))
+        
+        // 收藏    
+        } else {
+            likeData.push({
+                id: query("id"),
+                title: infoData.title,
+                thumbnail: infoData.src_list[0],
+                time: query("time"),
+                view: query("view")
+            })
+
+            localStorage.setItem("like", JSON.stringify(likeData))
+            $(".icon-wujiaoxing").classList.add("icon-wujiaoxing1")
+        }
+    })
+}
+
+
+init()

项目合集/最新写真app/fontend/js/page/me.js

@@ -0,0 +1,9 @@
+
+// 每一个页面都应该有一个init方法
+// 用来做初始化
+const init = async () => {
+    footer()
+}
+
+
+init()

项目合集/最新写真app/fontend/js/page/type.js

@@ -0,0 +1,134 @@
+let mySwiper = null;
+let tagListData = [];
+let tagIndex = 0;
+
+const init = async () => {
+    header(
+        "",
+        "分类",
+    )
+    footer()
+    await getTagList()
+
+    initSwiper()
+    bindEvent()
+}
+
+const getTagList = async () => {
+    tagListData = await tagList()
+
+    console.log("tagListData: ", tagListData);
+
+    innerMaps(
+        ".tabs_title",
+        tagListData,
+        (v, i) => `
+            <li class="${i == tagIndex ? 'active' : ''}">${v.title}</li>
+        `
+    )
+
+    innerMaps(
+        ".tabs_content .swiper-wrapper",
+        tagListData,
+        v => `
+            <div class="swiper-slide recommend-model">
+              <ul class="list flex wrap p18 jc-sb"></ul>
+            </div>
+        `
+    );
+
+    await getTagInfo()
+}
+
+const getTagInfo = async () => {
+    let res = await tagInfo({
+        url: tagListData[tagIndex].url,
+        page: tagListData[tagIndex].page
+    })
+    
+    tagListData[tagIndex].totalPage = res.totalPage
+    // tagListData[tagIndex].content = res.list
+
+    tagListData[tagIndex].content = [
+        ...tagListData[tagIndex].content,
+        ...res.list
+    ]
+
+    // res.list.forEach(v => {
+    //     tagListData[tagIndex].content.push(v)
+    // })
+
+    item(
+        _(".swiper-wrapper .swiper-slide ul")[tagIndex],
+        res.list
+    )
+
+    // 渲染页面
+    // item()
+    // 滚动加载更多数据....
+
+    console.log("getTagInfo: ", tagListData);
+}
+
+const initSwiper = async () => {
+    mySwiper = new Swiper('.tabs_content', {
+        on: {
+            slideChangeTransitionEnd: async function () {
+                tagIndex = this.activeIndex
+                changeLiActive(this.activeIndex)
+                if (tagListData[tagIndex].content.length == 0) {
+                    await getTagInfo()
+                }
+            },
+        },
+    })
+}
+
+const bindEvent = async () => {
+    _(".tabs_title li").click((v, i) => {
+        mySwiper.slideTo(i)
+    })
+
+
+    // TODO 防抖 节流 优化这块代码
+    _(".swiper-slide").scroll(async v => {
+        //文档内容实际高度（包括超出视窗的溢出部分）
+        // ul 总高度
+
+        let ulHeight = v.children[0].clientHeight;
+
+        //滚动条滚动距离
+        //  ul 在 swiper-slide 中的滚动距离
+        let ulScrollTop = v.scrollTop
+
+        //窗口可视范围高度
+        // swiper-slide 高度
+        let SwiperSlideHeight = v.clientHeight
+
+        // console.log("ulHeight: ", ulHeight);
+        // console.log("ulScrollTop: ", ulScrollTop);
+        // console.log("SwiperSlideHeight: ", SwiperSlideHeight);
+        // console.log("");
+
+        if (SwiperSlideHeight + ulScrollTop >= ulHeight) {
+            tagListData[tagIndex].page += 1
+
+            if (tagListData[tagIndex].page <= tagListData[tagIndex].totalPage) {
+                console.log("===加载更多内容……===");
+                await getTagInfo()
+            }
+
+        }
+    })
+
+}
+
+const changeLiActive = async (index) => {
+    _(".tabs_title li").forEach(v => v.classList.remove("active"))
+    _(".tabs_title li")[index].classList.add("active")
+}
+
+
+
+
+init()

项目合集/最新写真app/fontend/js/serve/home.js

@@ -0,0 +1,38 @@
+
+
+/**
+ * 
+ * @param {*} data 是get请求的参数，
+ *                 由页面调用者传递过来给我
+ */
+const homeBanner = async (data = {}) => {
+    return await http().get({
+        url: config.urlList.homeBanner,
+        // data: data
+        data
+    })
+}
+
+const homeHot = async (data = {}) => {
+    let res = await http().get({
+        url: config.urlList.homeHot,
+        // data: data
+        data
+    })
+    res.forEach(v => v.view = v.view.replaceAll("W+", ""));
+    return res
+}
+
+
+
+const homeList = async (data = {}) => {
+    let res = await http().get({
+        url: config.urlList.homeList,
+        // data: data
+        data
+    });
+    res.forEach(v => v.view = v.view.replaceAll("W+", ""));
+    return res
+}
+
+

项目合集/最新写真app/fontend/js/serve/hot.js

@@ -0,0 +1,11 @@
+
+const hotList = async (data = {}) => {
+       let res = await http().get({
+           url: config.urlList.hotList,
+           // data: data
+           data
+       });
+       console.log(res)
+       res.list.forEach(v => v.view = v.view.replaceAll("W+", ""));
+       return res    
+   }

项目合集/最新写真app/fontend/js/serve/info.js

@@ -0,0 +1,7 @@
+const infoList = async (data = {}) => {
+    return await http().get({
+        url: config.urlList.infoList,
+        // data: data
+        data
+    });
+}

项目合集/最新写真app/fontend/js/serve/tag.js

@@ -0,0 +1,33 @@
+const tagRecommend = async (data = {}) => {
+    let res = await http().get({
+        url: config.urlList.tagRecommend,
+        // data: data
+        data
+    });
+    res.forEach(v => v.short_title = v.title.substring(0,1));
+    return res
+}
+
+const tagList = async (data = {}) => {
+    let res = await http().get({
+        url: config.urlList.tagList,
+        // data: data
+        data
+    });
+
+    res.forEach(v => {
+        v.page = 1;
+        v.totalPage = 0;
+        v.content = [];
+    });
+    
+    return res;
+}
+
+const tagInfo = async (data = {}) => {
+    return await http().get({
+        url: config.urlList.tagInfo,
+        // data: data
+        data
+    });
+}

项目合集/最新写真app/fontend/js/utils/index.js

@@ -0,0 +1,106 @@
+const footer = () => {
+    let currentHref = location.href
+    let html = `
+    <ul class="footer fixed flex jc-sb ai-c border-box border-top">
+        ${config.footerArr.maps((v, i) => {
+            return `<li class="${location.href.includes(v.href) ? 'active' : ''}"> 
+                        <a href="${v.href}">
+                            <i class="iconfont ${v.icon}"></i>
+                            <div>${v.title}</div>
+                        </a>
+                    </li>`
+        })}
+    </ul>
+    `
+    $("body").insertAdjacentHTML("beforeend", html)
+}
+
+const header = (right, center = "", left = `<i class="iconfont icon-fanhui"></i>`) => {
+    let html = `
+      <div class="header fixed flex ai-c jc-sb p18 border-box border-bottom">
+         ${left}
+         <div class="header_title ellipsis">${center}</div>
+         ${right}
+     </div>
+    `
+ 
+    $("body").insertAdjacentHTML("afterbegin", html)
+    _(".header .icon-fanhui").click(v => {
+        history.back()
+    })
+}
+
+const item = (father, data) => {
+    (typeof father == "string" ? $(father) : father).insertAdjacentHTML("beforeend",data.maps(v => {
+        return `
+         <li>
+            <a href="./info.html?id=${v.id}&time=${v.time}&view=${v.view}">
+                <img src="${v.thumbnail}" alt="">
+                <div class="desc">
+                    <div class="name ellipsis">${v.title}</div>
+                    <div class="time flex ai-c jc-sb">
+                        <div class="text">${v.time}</div>
+                        <div class="view flex ai-c">
+                            <i class="iconfont icon-liulan"></i>
+                            <span>${v.view}W+</span>
+                        </div>
+                    </div>
+                </div>
+            </a>
+        </li>
+        `
+    }))
+}
+
+const 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;
+}
+
+const stripIndents = (template, ...expressions) => {
+    let result = template.reduce((prev, next, i) => {
+        let expression = expressions[i - 1];
+        return prev + expression + next;
+    });
+
+    result = result.replace(/\n[^\S\n]*/g, '\n');
+    result = result.trim();
+
+    return result;
+}
+
+
+const innerMaps = (father, data, callback) => {
+    $(father).insertAdjacentHTML("afterbegin", data.maps((v,i) => {
+        return callback(v,i)
+    })) 
+}
+
+const $ = className => {
+    return document.querySelector(className)
+}
+
+const _ = className => {
+    return document.querySelectorAll(className)
+}
+
+// prototype 原型
+//  js给我们提供的一个方法，通过这个方法作为入口，
+//  我们可以直接对js进行修改
+Array.prototype.maps = function (callback) {
+    let result = []
+    for (let i = 0; i < this.length; i++) {
+        result.push(callback(this[i], i, this))
+    }
+    return result.toString().replaceAll(",", "")
+}
+
+NodeList.prototype.click = function (callback) {
+    this.forEach((v,i) => v.onclick = () => callback(v,i))
+}
+
+
+NodeList.prototype.scroll = function (callback) {
+    this.forEach((v,i) => v.onscroll = () => callback(v,i))
+}

项目合集/最新写真app/fontend/js/utils/rem.js

@@ -0,0 +1,10 @@
+(function (w, d) {
+    function setSize() {
+        var screenWidth = d.documentElement.clientWidth;
+        var currentFontSize = screenWidth * 100 / 750;
+        d.documentElement.style.fontSize = currentFontSize + 'px';
+    }
+    w.addEventListener('resize', setSize);
+    w.addEventListener('pageShow', setSize)
+    w.addEventListener('DOMContentLoaded', setSize)
+})(window, document)