first commit

历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/config/index.js

@@ -0,0 +1,45 @@
+// 全局js配置，一般用来配置接口的基地址，和 短地址 等一些...
+var config = {
+    // 开发阶段
+    devBaseUrl: 'http://127.0.0.1:3030',
+
+    // 测试阶段
+    testBaseUrl: 'http://127.0.0.1:3030',
+
+    // 正式阶段
+    prodBaseUrl: 'http://127.0.0.1:3030',
+
+    stage: 'dev',  // dev  test  prod
+
+    switchStage: function () {
+        switch (this.stage) {
+            case "dev":
+                return this.devBaseUrl
+                break;
+            case "test":
+                return this.testBaseUrl
+                break;
+            case "prod":
+                return this.prodBaseUrl
+                break;
+            default:
+                break;
+        }
+    },
+
+    apiList: {
+        notice: '/home/notice',
+        info:'/home/info',
+        search: '/home/search',
+        tab: '/home/tab'
+    },
+
+    footerArr: [
+        { title: '首页', href: 'index.html', img: '../img/index-icon/index.png' },
+        { title: '广场', href: 'square.html', img: '../img/index-icon/dating.png' },
+        { title: '我的', href: 'me.html', img: '../img/index-icon/user.png' },
+        // { title: '我的', href: 'me.html', icon: 'icon-wo' },
+    ]
+}
+
+

历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/http/index.js

@@ -0,0 +1,56 @@
+class Http {
+
+    constructor() {
+        this.xhr = new XMLHttpRequest();
+    }
+
+    get(params) {
+        return new Promise((success, error) => {
+            var par = ""
+            for (const key in params.data) {
+                par += `&${key}=${params.data[key]}`
+            }
+            par = par.replace("&", "?")
+            this.xhr.open("GET", `${config.switchStage()}${params.url}${par}`)
+            this.xhr.send()
+
+            this.ReadyState(success, error)
+        })
+    }
+
+    post(params) {
+        return new Promise((success, error) => {
+            this.xhr.open("POST", `${config.switchStage()}${params.url}`)
+            this.xhr.setRequestHeader('Content-Type', 'application/json');
+            this.xhr.send(JSON.stringify(params.data))
+            this.ReadyState(success, error)
+        })
+    }
+
+
+    ReadyState(success, error) {
+        this.xhr.onreadystatechange = () => {
+            if (this.xhr.readyState == 4) {
+                if (this.xhr.status == 200) {
+                    var data = JSON.parse(this.xhr.response);
+                    switch (data.status) {
+                        case 200:
+                            success(data.result)
+                            break;
+
+                        case 404:
+                            alert(data.msg);
+                            throw new Error(data.msg)
+                            break;
+
+                        default:
+                            break;
+                    }
+                    
+                } else {
+                    error(this.xhr)
+                }
+            }
+        }
+    }
+}

历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/page/commodityinfo.js

@@ -0,0 +1,67 @@
+class commodityinfo {
+    constructor() {
+        title("详情", `<i class="iconfont icon-fanhui"></i>`)
+        this.getcommodityinfo()
+    }
+    async getcommodityinfo() {
+        var res = await indexService.info({
+            thing_id: 7,
+            // thing_category:3
+
+        });
+        console.log(res);
+
+
+        var html = `
+        <div class="content">
+            <div class="head">
+                <img src="https://losta.oss-cn-shanghai.aliyuncs.com/7cpXrZK8JcenmECFRn6WD6P47PSf3kdR.jpg" alt="">
+                <div class="information">
+                    <div class="name">bmy4</div>
+                    <div class="address">电子信息职业技术学院3</div>
+                </div>
+                <div></div>
+            </div>
+            
+            <div class="time">
+                <div class="test">
+                    <p>测试标题2</p>
+                    <span>2022-03-03 11:40:57</span>
+                </div>
+                <div class="certificate">证件</div>
+            </div>
+
+            <div class="bot">
+                <p>测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1测试介绍1
+                </p>
+                <img src="https://img13.360buyimg.com/n7/jfs/t1/220760/23/10339/352290/61d8e957E230aa7ce/9b38fef9ff0513e5.jpg"
+                    alt="">
+            </div>
+    </div>
+          `
+        $("body").insertAdjacentHTML("beforeend", html);
+
+
+        res.forEach(v => {
+            var img = document.createElement("img")
+            img.src = v;
+
+            img.onload = () => {
+                // console.log(img.width);
+                $(".bot").innerHTML += `
+                    <figure>
+                        <a href="${v}" data-size="${img.width}x${img.height}">
+                            <img src="${v}" alt="${v}" />
+                        </a>
+                        <figcaption itemprop="caption description"></figcaption>
+                    </figure>
+                  `
+            }
+        });
+        initPhotoSwipeFromDOM('.bot');
+
+    }
+
+}
+
+new commodityinfo()

历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/page/guangchang.js

@@ -0,0 +1,41 @@
+class guangchang {
+    constructor() {
+        this.getClick()
+        this.seek()
+    }
+    
+
+    async seek(newKey) {
+        var res = await indexService.tab({
+            thing_category: -1,
+            page: 1,
+            thing_type:newKey == undefined ? 1 : newKey//这里用三元运算符判断获取参数为空 为1 不为空 为2
+        });
+        console.log(res);
+        // item($(".recommend"), res)
+    }
+
+
+    async getClick() {
+
+        //获取输入框值
+        $(".items").onclick = () => {
+            $(".content").style.display = "none"
+            $(".content1").style.display = "flex"
+            this.seek(2)
+        }
+        $(".itemf").onclick = () => {
+            $(".content1").style.display = "none"
+            $(".content").style.display = "flex"
+            this.seek(1)
+        }
+        
+    }
+}
+
+function getClick(params) {
+        
+}
+
+
+new guangchang()

历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/page/index.js

@@ -0,0 +1,55 @@
+class Index {
+    constructor() {
+        this.getNotice()
+        this.initSwiper ()
+        // this.footer()
+        // this.title()
+    }
+
+    async getNotice() {
+        var res = await indexService.notice();
+        console.log(res);
+
+        //获取最新消息
+        res.forEach((v, i) => {
+            $(".mass .mass_list").innerHTML += `
+                <li>
+                    <i></i>
+                    <a class="ellipsis" href="">${v.notice_text}</a>
+                </li>
+           `
+           // console.log(v.notice_text);
+        });
+
+
+        //轮播图
+        _(".swiper swiper-wrapper").forEach((v,i) => {
+            if(i != 0 ){
+                v.onscroll = () => {
+                    const {clientHeight,scrollHeight, scrollTop} = v;
+                    var distance = scrollHeight - scrollTop - clientHeight;
+                    if(distance <= 0.5){
+                        this.principal[this.index].page += 1;
+                        if(this.principal[this.index].page <= this.principal[this.index].total_page){
+                            this.getClassList("loadMore")
+                        }
+                    }
+                }
+            }
+        })
+
+    }
+    initSwiper () {
+        var mySwiper = new Swiper ('.swiper', {
+            direction: 'horizontal', // 垂直切换选项
+            loop: true, // 循环模式选项
+            autoplay:true,//自动播放
+            // 如果需要分页器
+            pagination: {
+              el: '.swiper-pagination',
+            },
+          })        
+    }
+}
+
+new Index()

历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/page/me.js

@@ -0,0 +1,10 @@
+class me {
+    constructor() {
+        
+        footer()
+    }
+
+    
+}
+
+new me()

历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/page/search.js

@@ -0,0 +1,37 @@
+class Search {
+    constructor() {
+        this.getSearch()
+    }
+    
+
+    async seek(newKey) {
+        var res = await indexService.search({
+            keyword: newKey,
+            page: 1
+        });
+        if(res.length > 0){
+            $(".image_a").style.display = "none"
+        }else{
+            $(".image_a").style.display = "flex"
+        }
+        items($(".recommend"), res)
+    }
+
+    async getSearch() {
+
+        //获取输入框值
+        $(".search_box").oninput = () => {
+            if ($(".search_box").value.length > 0) {
+                this.seek($(".search_box").value)
+            }
+        }
+
+        //input获得焦点
+        $(".search_box").onfocus = () => {
+            this.seek($(".search_box").value)
+         }
+    }
+}
+
+
+new Search()

历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/page/square.js

@@ -0,0 +1,10 @@
+class square {
+    constructor() {
+        
+        footer()
+    }
+
+    
+}
+
+new square()

历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/service/index.js

@@ -0,0 +1,33 @@
+class IndexService {
+
+    async notice(params = {}) {
+        return await (new Http()).post({
+            url: config.apiList.notice,
+            data: params
+        });
+    }
+    
+    async info(params = {}) {
+        return await (new Http()).post({
+            url: config.apiList.info,
+            data: params
+        });
+    }
+   
+    
+    async search(params = {}) {
+        return await (new Http()).post({
+            url: config.apiList.search,
+            data: params
+        });
+    }
+
+    async tab(params = {}) {
+        return await (new Http()).post({
+            url: config.apiList.tab,
+            data: params
+        });
+    }
+}
+
+var indexService = new IndexService()

历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/utils/index.js

@@ -0,0 +1,134 @@
+class Utils {
+
+    //渲染底部
+    footer() {
+        var html = `
+        <ul class="footer top">
+           ${config.footerArr.forH(v => {
+                return `<li>
+                            <a href="${v.href}" >
+                            <img src="${v.img}" alt="">
+                                <p class="${location.href.includes(v.href) ? 'active' : ''}">${v.title}</p>
+                            </a>
+                        </li>`
+           })}
+            
+        </ul>
+        `
+       
+
+            $("body").insertAdjacentHTML("beforeend", html);
+        }
+    //渲染广场页item
+    item(father, data) {
+            //console.log(data)
+            father.innerHTML = ""
+        data.forEach(v => {
+            father.innerHTML += `
+                <a href="" class="item_fz">
+                    <div class="img">
+                        <img src="./../img/img/show.jpg" alt="">
+                    </div>
+                    <p>${v.thing_title}</p>
+                    <div class="user_info">
+                        <img src="./../img/img/1.png" alt="">
+                        <span>${v.user_name}</span>
+                    </div>
+                </a>
+            `
+            })
+        }
+
+    // item(father, data) {
+    //     console.log(data)
+    //     father.innerHTML = ""
+    //     data.forEach(v => {
+    //         father.innerHTML += `
+    //         <div class="item">
+    //             <div class="img">
+    //                 <img src="./../img/img/show.jpg" alt="">
+    //             </div>
+    //             <p>${v.thing_title}</p>
+    //             <div class="user_info">
+    //                 <img src="./../img/img/1.png" alt="">
+    //                 <span>${v.user_name}</span>
+    //             </div>
+    //         </div>
+    //         `
+    //     })
+    // }
+
+    title(text = "", leftIcon = "",) {
+            var html = `
+            <div class="pub_title">
+                 ${leftIcon}
+                <span>${text}</span>
+                <div></div>
+                    
+                
+                
+            </div>
+        `
+
+        $("body").insertAdjacentHTML("beforeend", html);
+
+            click(".icon-fanhui", () => {
+            history.back()
+        })
+    }
+
+
+    click(className, callback) {
+        _(className).forEach((v, i) => v.onclick = () => callback(v, i))
+    }
+
+    query(name) {
+        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        let r = window.location.search.substr(1).match(reg);
+        if (r != null) {
+            return decodeURIComponent(r[2]);
+        };
+        return null;
+    }
+
+
+
+    cover() {
+        // 对map进行重写
+
+        // map的实现原理
+        // function a(callback) {
+        //     return callback(v).toString()
+        // }
+        // var c = a( function (v) {
+        //     return "v"
+        // } )
+
+        Array.prototype.forH = function (callback) {
+            var res = []
+            for (var index = 0; index < this.length; index++) {
+                res.push(callback(this[index]))
+            }
+            return res.toString().replaceAll(",", "")
+        }
+        // 其他很多重写
+    }
+
+    $(className) {
+        return document.querySelector(className)
+    }
+
+    _(className) {
+        return document.querySelectorAll(className)
+    }
+
+}
+
+
+var {
+    footer, $, _, query,
+    cover, click, item, items,
+    title
+} = new Utils();
+
+cover()

历届学生/front-end-team-10/项目练习/上课项目/失物招领/js/utils/rem.js

@@ -0,0 +1,15 @@
+(function (w, d) {
+    function setSize() {
+        // 获取屏幕的宽度 375px
+        var screenWidth = d.documentElement.clientWidth;
+
+        // 根据规则计算  html 的font-size数值
+        var currentFontSize = screenWidth * 100 / 750;
+
+        // 修改html上的font-size
+        d.documentElement.style.fontSize = currentFontSize + 'px';
+    }
+    w.addEventListener('resize', setSize);
+    w.addEventListener('pageShow', setSize)
+    w.addEventListener('DOMContentLoaded', setSize)
+})(window, document)