first commit

历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/js/config/index.js

@@ -0,0 +1,30 @@
+var config = {
+  environment: 'dev',  // 当前项目所属的开发环境 dev,test,prod
+
+  baseUrl () {
+    switch (config.environment) {
+      case "dev":
+        return config.devbasrUrl;
+        break;
+      case "test":
+        return config.testbasrUrl;
+        break;
+      case "prod":
+        return config.prodbasrUrl;
+        break;
+    }
+  },
+
+  devbasrUrl: 'http://127.0.0.1:3000/api', // dev 开发阶段
+  testbasrUrl: 'http://127.0.0.1:3000/test', // test 测试阶段
+  prodbasrUrl: 'http://127.0.0.1:3000/prod', // prod 正式阶段
+
+  apiList: {
+    index: '/index/class', // 首页获取分类数据接口
+    banner: '/index/banner', // 获取banner图
+    type: '/index/type', // 获取九宫格分类数据
+    threeMeals: '/index/threeMeals', // 每日三餐
+    search:'/search/list',   //搜索
+    video:'/video/list',//视频接口
+  }
+}

历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/js/http/api.js

@@ -0,0 +1,63 @@
+class Api {
+
+  constructor() {
+    this.ajax = new XMLHttpRequest();
+    this.baseUrl = config.baseUrl();
+  }
+
+  get(option) {
+    // toast.loading();
+
+    // 转换get参数
+    var params = "";
+    for (const key in option.data) {
+      params+= `&${key}=${option.data[key]}`
+    }
+
+    params = params.replace("&", "?")
+    option.url = this.baseUrl + option.url + params;
+
+    return new Promise((resolve,reject) => {
+      this.ajax.open("GET",option.url);
+      this.ajax.send();
+      return this.readystatechange(resolve, reject)
+    });
+  }
+
+  post(option) {
+    this.ajax = new XMLHttpRequest();
+    toast.loading();
+    return new Promise( (resolve,reject) => {
+      this.ajax.open("POST",this.baseUrl+option.url);
+      this.ajax.setRequestHeader("Content-Type","application/json");
+      this.ajax.setRequestHeader("bmy","liubing");
+
+      this.ajax.send(option.data);
+      return this.readystatechange(resolve, reject)
+    });
+  }
+
+  readystatechange(success,error) {
+    this.ajax.onreadystatechange = () => {
+      if (this.ajax.readyState == 4 ) {
+        if (this.ajax.status == 200) {
+          var data = JSON.parse(this.ajax.response);
+          // toast.clearLoading();
+          switch (data.status) {
+            case 200:
+              success(data.result);
+              break;
+            case 500:
+              toast.tips({ message: data.message });
+              throw new Error(data.message);
+              break;
+          }
+        } else {
+          error && error(this.ajax)
+          throw new Error("网络请求出错");
+        }
+      }
+    }
+  }
+
+}

历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/js/page/index.js

@@ -0,0 +1,139 @@
+class Index {
+  constructor() {
+    this.getBanner();
+   
+   this.getType();
+
+   this.getThreeMeals();
+  }
+
+  async getIndexClass() {
+    var res = await indexService.indexClass({type:1,page:1});
+  }
+
+  //轮播图
+  async getBanner() {
+    var res = await indexService.banner();
+    let banners=document.querySelector('.swiper-wrapper');
+    res.forEach((item,index) => {
+
+    banners.innerHTML+=`
+          <li>
+            <a href="./bannerInfo.html?id=${item.url}"> 
+              <img src="${item.img}" alt="">
+            </a>
+          </li>
+      `;
+    });
+    new Swiper(".swiper",{
+      time: 1000,
+      initialSlide: 0,
+      loop: false,
+      speed: 300,
+      autoplay: false,
+      grabCursor: true,
+    });
+  }
+
+  //轮播图下面的九宫格
+  async getType() {
+    var res = await indexService.type();
+    let jiugong=document.querySelector('.jiu ul');
+    res.forEach((item,index)=>{
+      jiugong.innerHTML+=`
+        <li>
+          <a href="./jiugongInfo.html?id=${item.href}">
+            <img src="${item.img}" alt="">
+            <span>${item.title}</span>
+          </a>
+        </li>
+      `;
+
+    })
+  }
+
+  //每日三餐
+  async getThreeMeals() {
+    var res = await indexService.threeMeals();
+    let sancan=document.querySelector('.sancan_ul');
+    let three=document.querySelector('.wrapper_list');
+    res.forEach((item,index)=>{
+      sancan.innerHTML+=`
+          <li class='${index==0?'activesan':''}'>${item.title}</li>
+      `;
+    });
+
+    res.forEach((item,index)=>{
+      three.innerHTML+=`
+        <li class="three_meals_list">
+          ${
+           ( item.content.map((a,b)=>{
+            return ` <div class="three_meals_item">
+                        <img src="${a.img}" alt="">
+                        <div class="text">${a.title}</div>
+                        <div class="yang"></div>
+                        <div class="desc">${a.des}</div>
+                      </div>`
+        })).join('')
+          }
+        </li>
+      `;
+    });
+
+    var thress=document.querySelectorAll('.sancan_ul li');
+   
+   
+
+    var threeSwiper= new Swiper(".swiper_list",{
+      time: 1000,
+      initialSlide: 0,
+      loop: false,
+      speed: 300,
+      autoplay: false,
+      grabCursor: true,
+      swiperWrapper: '.wrapper_list',
+      pagination: {
+        el: '.pagination'
+      },
+      on:{
+        slideChange:function (index) {
+          thress.forEach((q,w)=>{
+           q.className='';
+           thress[index].className='activesan';
+          })
+          }
+      }
+    });
+
+
+    thress.forEach((item,index)=>{
+    
+      item.onclick=()=>{
+        thress.forEach((i,j)=>{
+          i.className='';
+        })
+        item.className='activesan';
+        threeSwiper.slideTo(index)
+      }
+    })
+
+
+
+  }
+
+  
+
+
+
+
+
+  initSwiper(){
+     // 初始banner轮播
+     
+
+   
+
+  }
+}
+
+new Index();

历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/js/page/search.js

@@ -0,0 +1,41 @@
+class Search{
+    constructor(){
+        this.page=1;
+        this.getSearch();
+    }
+
+    async getSearch() {
+        // var res = await indexService.search();
+        let div=document.querySelector('.header div');
+        let input=document.querySelector('.header input');
+        let conn=document.querySelector('.content');
+        input.onfocus=()=>{
+            input.value='';
+         };
+        div.onclick=async()=>{
+           let ser= await indexService.search({
+                q:input.value,
+                page:'1',
+            });
+            ser.forEach((item,index)=>{
+               conn.innerHTML+=`
+                <a href=''>
+                    <div class="three_meals_item">
+                    <img src="${item.img}" alt="">
+                    <div class="text">${item.title}</div>
+                    <div class="desc">${item.des}</div>
+                    </div>
+                </a>
+               `;
+            })
+        };
+        
+       
+    }
+
+
+}
+
+
+
+new Search();

历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/js/page/video.js

@@ -0,0 +1,66 @@
+class Video{
+constructor(){
+    this.page = 0;
+    this.getVoid();
+    this.scrolles();
+}
+
+    async getVoid(){
+       
+        let connt=document.querySelector('.content');
+        var res = await indexService.video();
+        console.log(res.items);
+        
+        connt.innerHTML+='';
+        res.items.forEach((item,index) => {
+            connt.innerHTML+=`
+                <a class="tuitupian" href="./voidInfo.html?vid=${item.xhz_video_url}&tid=${item.seo_title}&inif=${item.intro}">
+                    <img src="${item.bd_photo}" alt="">
+                    <i class="iconfont icon-shipin"></i>
+                    <span>${item.seo_title}</span>
+                    <div class="yonghu">
+                        <div>
+                            <img src="https://st-cn.meishij.net/user/68/143/ns13598318_155093722619492.jpg" alt="">
+                            <span>阿青美食</span>
+                        </div>
+                        <div>
+                            <i class="iconfont icon-yanjing"></i>
+                            <span>${item.click_num}</span>
+                        </div>
+                    </div>
+                </a>
+            `;
+        });
+
+
+        this.scrolles(()=>{
+            this.page+=1;
+            this.getVoid();
+        })
+
+      
+
+    }
+
+    scrolles(callback) { 
+        let body=document.querySelector('body');
+        body.onscroll = () => {
+            
+            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+            let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+        
+    
+            if(scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
+            callback();
+            }
+          }
+    }
+
+}
+
+
+new Video();
+
+
+

历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/js/page/voidInfo.js

@@ -0,0 +1,28 @@
+class VoidInfo{
+    constructor(){
+       this.getVoidInfo();
+    }
+
+    async getVoidInfo(){
+        let video=document.querySelector('.header video');
+        let h2=document.querySelector('.content h2');
+        let p=document.querySelector('.content p');
+        video.src=getUrlSearch('vid');
+        h2.innerHTML=getUrlSearch('tid');
+        p.innerHTML=getUrlSearch('inif');
+    }
+}
+
+new VoidInfo();
+
+function getUrlSearch(name) {
+            if (!name) return null;
+            var after = window.location.search;
+            after = after.substr(1) || window.location.hash.split('?')[1];
+            if (!after) return null;
+            if (after.indexOf(name) === -1) return null;
+            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
+            var r = decodeURI(after).match(reg);
+            if (!r) return null;
+            return r[2];
+        }

历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/js/service/indexService.js

@@ -0,0 +1,72 @@
+
+class IndexService {
+
+  constructor() {}
+
+
+  /**
+   * 首页获取分类数据接口
+   */
+  async indexClass(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.index,
+      data: data
+    });
+    api = null;
+  }
+
+  //轮播图
+  async banner(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.banner,
+      data: data
+    });
+    api = null;
+  }
+
+  //九宫格
+  async type(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.type,
+      data: data
+    });
+    api = null;
+  }
+
+  //每日三餐
+  async threeMeals(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.threeMeals,
+      data: data
+    });
+    api = null;
+  }
+
+  //搜索页面
+  async search(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.search,
+      data: data
+    });
+    api = null;
+  }
+
+   //视频页面
+   async video(data = {}) {
+    var api = new Api();
+    return await api.get({
+      url: config.apiList.video,
+      data: data
+    });
+    api = null;
+  }
+
+  
+}
+
+var indexService = new IndexService();

历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/js/utils/index.js

@@ -0,0 +1,52 @@
+function $(className) {
+    var newClassName = className.split(" ");
+    if (newClassName.length > 1) {
+        var father = newClassName[newClassName.length - 2];
+        var childrenList = document.querySelector(father).children;
+
+        var arr = Array.from(childrenList).filter(function (el) {
+            if (
+                el.className.indexOf((newClassName[newClassName.length - 1]).replace(".", "")) > -1
+                ||
+                el.tagName.toLowerCase() == newClassName[newClassName.length - 1]
+            ) {
+                return el;
+            }
+        });
+
+        if (arr.length > 1) {
+            return document.querySelectorAll(className)
+        } else if (arr.length == 1) {
+            return document.querySelector(className)
+        } else {
+            throw new Error(`${className} 不存在，请检查`)
+        }
+
+    } else {
+        return document.querySelector(newClassName);
+
+    }
+}
+
+
+// function scroll(callback) {
+//     document.querySelector('bode').onscroll = () => {
+//         let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+//         let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
+//         let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
+
+//         if (scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
+//             Array.from(b).filter((v, i) => {
+//                 if (v.className.indexOf("active") > -1) {
+//                     this.currentIndex = i;
+//                 }
+//             });
+
+//             this.allUserDo[this.currentIndex].page += 1;
+//             this.getdata("scroll");
+//             console.log(this.currentIndex)
+//         }
+//     }
+// }
+
+

历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/js/utils/rem.js

@@ -0,0 +1,20 @@
+// !(function(win, doc) {
+//     function setFontSize() {
+//         var winWidth = window.innerWidth;
+//         doc.documentElement.style.fontSize = (winWidth / 375) * 100 + 'px';
+//     }
+//     var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
+//     var timer = null;
+//     win.addEventListener(evt, function() {
+//         clearTimeout(timer);
+//         timer = setTimeout(setFontSize, 300);
+//     }, false);
+//     win.addEventListener("pageshow", function(e) {
+//         if (e.persisted) {
+//             clearTimeout(timer);
+//             timer = setTimeout(setFontSize, 300);
+//         }
+//     }, false);
+//     //初始化 
+//     setFontSize();
+// }(window, document));

历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/js/utils/swiper.js

@@ -0,0 +1,310 @@
+// 保护
+(function () {
+
+    // 类的构造函数
+    function swiper (el,option) {
+       this.defaultOption = {
+        el: '.swiper',
+        width () {
+          return $(this.el).clientWidth
+        },
+        timer: null,
+        time: 3000,
+        initialSlide: 0,
+        direction: 'vertical',
+        speed: 800,
+        grabCursor: false,
+        loop: false,
+        autoplay: false,
+        swiperWrapper: '.swiper-wrapper',
+        on: {
+
+        },
+        pagination: {
+          el: '.swiper-pagination',
+        },
+        // 如果需要前进后退按钮
+        navigation: {
+          nextEl: '.next',
+          prevEl: '.prev',
+        },
+        // 事件控制中心，主要保存事件的
+        eventList: {}
+      }
+
+       if (typeof el == "string") {
+
+         this.defaultOption.el = el || this.defaultOption.el;
+         this.defaultOption.time = option.time || this.defaultOption.time;
+         this.defaultOption.initialSlide = option.initialSlide || this.defaultOption.initialSlide;
+         this.defaultOption.direction = option.direction || this.defaultOption.direction;
+         this.defaultOption.speed = option.speed || this.defaultOption.speed;
+         this.defaultOption.grabCursor = option.grabCursor || this.defaultOption.grabCursor;
+         this.defaultOption.loop = option.loop || this.defaultOption.loop;
+         this.defaultOption.autoplay = option.autoplay || this.defaultOption.autoplay;
+         this.defaultOption.swiperWrapper = option.swiperWrapper || this.defaultOption.swiperWrapper;
+
+           if (option.hasOwnProperty("pagination")) {
+             this.defaultOption.pagination.el = option.pagination.el || this.defaultOption.pagination.el;
+           }
+
+           if (option.hasOwnProperty("navigation")) {
+             this.defaultOption.navigation.nextEl = option.navigation.nextEl || this.defaultOption.navigation.nextEl;
+             this.defaultOption.navigation.prevEl = option.navigation.prevEl || this.defaultOption.navigation.prevEl;
+           }
+
+           if (option.hasOwnProperty("on")) {
+               for (const key in option.on) {
+                 this.defaultOption.on[key] = option.on[key]
+               }
+           }
+
+
+           this.next = $(this.defaultOption.navigation.nextEl);
+           this.wrapper = $(this.defaultOption.swiperWrapper);
+
+           this.prev = $(this.defaultOption.navigation.prevEl);
+           this.pagination = $(this.defaultOption.pagination.el);
+           this.el = $(this.defaultOption.el);
+
+           this.init();
+
+       } else {
+           throw new Error("最外层父节点的类名必传")
+       }
+    }
+
+    // 类的方法
+    swiper.prototype = {
+        init () {
+            this.CreatedPagination();
+            this.setInitialSlide();
+            this.setGrabCursor();
+
+            if (this.defaultOption.autoplay) {
+                this.autoPlay();
+                this.el.onmouseover = () => clearInterval(this.defaultOption.timer);
+                this.el.onmouseout = () => this.autoPlay();
+            }
+
+            this.nextClick();
+            this.prevClick();
+
+            this.initSwiperSlide();
+        },
+      /**
+       * 注册移动端滑动
+       */
+      initSwiperSlide: function () {
+        var fa = this.el,
+          startX = 0,
+          startY = 0;
+
+        fa.addEventListener('touchstart', function (e) {
+          e.stopPropagation()
+          startX = e.targetTouches[0].pageX
+          startY = e.targetTouches[0].pageY
+        })
+
+        var getDirection = function (startx, starty, endx, endy) {
+          // 获得角度
+          var getAngle = function(angx, angy) {
+            return Math.atan2(angy, angx) * 180 / Math.PI;
+          };
+
+          var angx = endx - startx;
+          var angy = endy - starty;
+          var result = 0;
+
+          // 如果滑动距离太短
+          if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
+            return result;
+          }
+
+          var angle = getAngle(angx, angy);
+          if (angle >= -135 && angle <= -45) {
+            result = 1;
+          } else if (angle > 45 && angle < 135) {
+            result = 2;
+          } else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
+            result = 3;
+          } else if (angle >= -45 && angle <= 45) {
+            result = 4;
+          }
+
+          return result;
+        }
+
+        fa.addEventListener('touchmove', (e) => {
+          e.stopPropagation()
+          var endX = e.changedTouches[0].pageX;
+          var endY = e.changedTouches[0].pageY;
+
+          var direction = getDirection(startX, startY, endX, endY);
+          // if (direction == 3 || direction == 4) {
+          //   var x = parseInt(endX - startX) - 40
+          //   // this.$(this.defaultConf.wrapper).style.webkitTransform = `translate3d(${x}px,0px,0px)`;
+          // }
+        });
+
+        fa.addEventListener('touchend', (e) => {
+          e.stopPropagation()
+          var endX = e.changedTouches[0].pageX;
+          var endY = e.changedTouches[0].pageY;
+
+          var direction = getDirection(startX, startY, endX, endY);
+
+          switch (direction) {
+            case 0:
+              console.log("未滑动！");
+              break;
+            case 1:
+              console.log("向上！")
+              break;
+            case 2:
+              console.log("向下！")
+              break;
+            case 3:
+              console.log("向左！")
+              this.setSpeed();
+              this.animation(-this.defaultOption.width())
+              break;
+            case 4:
+              console.log("向右滑动");
+              this.setSpeed();
+              this.animation(this.defaultOption.width())
+              break;
+            default:
+          }
+        })
+      },
+        setInitialSlide() {
+            if (this.defaultOption.initialSlide != 0) {
+                this.changePagination(this.defaultOption.initialSlide)
+            }
+        },
+        setGrabCursor() {
+          this.defaultOption.grabCursor ? this.wrapper.style.cursor = "pointer" : ""
+        },
+        setSpeed() {
+            this.wrapper.style.transition = `all ease ${this.defaultOption.speed / 1000}s`;
+        },
+        nextClick() {
+            // this 指向
+            // var test = this;
+            // 1：保存this
+            // 2: =>
+            // 3: a().bind(this)
+            this.next != null ? this.next.onclick = () => {
+                this.setSpeed();
+                this.animation(-this.defaultOption.width())
+            } : ''
+        },
+        prevClick() {
+            this.prev != null ? this.prev.onclick = () => {
+                this.setSpeed();
+                this.animation(this.defaultOption.width())
+            } : ''
+        },
+        slideTo(index) {
+            this.setSpeed();
+            this.changePagination(index)
+        },
+        on (eventType,event) {
+          this.defaultOption.eventList[eventType] = event;
+        },
+        CreatedPagination() {
+          if (this.pagination != null) {
+              Array.from(this.wrapper.children).forEach((v,i) => {
+                  this.pagination.innerHTML += ` <li class="${i == 0 ? 'active' : ''}"></li>`
+              });
+              this.BindPaginationClick();
+          }
+        },
+        BindPaginationClick() {
+            Array.from(this.pagination.children).forEach((v,i) => {
+                v.onclick = () => {
+                    this.setSpeed();
+                    this.changePagination(i)
+                }
+            })
+        },
+        changePagination(i) {
+          this.defaultOption.eventList.slideChange && this.defaultOption.eventList.slideChange(i);
+          this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(i);
+          if (this.pagination != null) {
+            Array.from(this.pagination.children).forEach((item) => {
+              item.className = ""
+            });
+            Array.from(this.pagination.children)[i].className = "active";
+          }
+          this.wrapper.style.transform = `translateX(${i * -this.defaultOption.width()}px)`;
+        },
+
+        animation(offset) {
+            var val = parseInt(this.wrapper.style.transform.match(/translateX\(([\s\S]*?)\)/)[1]);
+            var newOffset = offset + val;
+            var maxWidth = -(this.wrapper.children.length - 1) * this.defaultOption.width();
+
+            if (newOffset > 0) {
+                if (this.defaultOption.loop) {
+                    newOffset = maxWidth;
+                } else {
+                    newOffset = 0
+                }
+            }
+
+            if (newOffset < maxWidth) {
+                if (this.defaultOption.loop) {
+                    newOffset = 0;
+                } else {
+                    newOffset = maxWidth
+                }
+            }
+
+            var index = Math.abs(newOffset / this.defaultOption.width());
+            this.changePagination(index);
+
+          this.defaultOption.eventList.slideChange && this.defaultOption.eventList.slideChange(index);
+          this.defaultOption.on.slideChange && this.defaultOption.on.slideChange(index)
+        },
+        autoPlay () {
+          this.defaultOption.timer = setInterval(() => {
+                this.animation(-this.defaultOption.width())
+            }, this.defaultOption.time);
+        }
+    }
+
+    function $(className) {
+        var newClassName = className.split(" ");
+        if (newClassName.length > 1) {
+            var father = newClassName[newClassName.length - 2];
+            var childrenList = document.querySelector(father).children;
+
+            var arr = Array.from(childrenList).filter(function (el){
+                if (
+                    el.className.indexOf( (newClassName[newClassName.length-1]).replace(".", "") ) > -1
+                    ||
+                    el.tagName.toLowerCase() == newClassName[newClassName.length-1]
+                ) {
+                    return el;
+                }
+            });
+
+            if (arr.length > 1) {
+                return document.querySelectorAll(className)
+            } else if (arr.length == 1){
+                return document.querySelector(className)
+            } else {
+                throw new Error(`${className} 不存在，请检查`)
+            }
+
+        } else {
+            return document.querySelector(newClassName);
+
+        }
+    }
+
+    window.Swiper = swiper;
+
+})()

历届学生/逯帅帅/项目开发/学生项目/应越波/美食杰APP/js/utils/toast.js

@@ -0,0 +1,61 @@
+class Toast {
+  constructor() {
+    this.body = document.querySelector("body");
+  }
+
+  /**
+   * time: 提示显示时间
+   * position: 位置 top = 20%, center = 50%, bottom = 20%
+   * message: 提示的文字
+   * @param option
+   */
+  tips(option = {}) {
+    var defaultOption = {
+      time: 3000,
+      position: 'center',
+      message: '默认'
+    };
+
+    defaultOption.time = option.time || defaultOption.time;
+    defaultOption.position = option.position || defaultOption.position;
+    defaultOption.message = option.message || defaultOption.message;
+
+    var tpl = `<div class="lb-toast" style="${
+      defaultOption.position == "bottom" 
+        ? 'bottom: 10%'
+        : `top: ${defaultOption.position == "top" ? '10%' : '50%'}`
+    }">
+                    <div class="lb-toast_text">${defaultOption.message}</div>
+                </div>`;
+
+
+    this.body.innerHTML += tpl;
+
+    setTimeout(() => {
+      var toast = document.querySelector(".lb-toast");
+      console.log(toast)
+      this.body.removeChild(toast)
+    }, defaultOption.time)
+
+  }
+
+  loading() {
+    var tpl = `<div class="spinner">
+                  <div class="rect1"></div>
+                  <div class="rect2"></div>
+                  <div class="rect3"></div>
+                  <div class="rect4"></div>
+                  <div class="rect5"></div>
+              </div>`;
+    this.body.innerHTML += tpl;
+  }
+
+  clearLoading() {
+    var spinner = document.querySelector(".spinner");
+    if (spinner != null) {
+      this.body.removeChild(spinner)
+    }
+  }
+}
+
+var toast = new Toast();