增加新项目

项目合集/最新写真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()