<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> 
  <title>Bean Drivin | Guide</title> 
  <link rel="stylesheet" href="/static/home/css/swiper-bundle.min.css"> 
  <link rel="stylesheet" href="/static/home/css/reset.css"> 
  <link rel="stylesheet" href="/static/home/css/style.css"> 
  <link rel="stylesheet" href="/static/home/layui/css/layui.css"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/css/layui.min.css">
</head> 
<body class="huiBg"> 
  <div class="top"> 
    <a href="{{ route('dashboard') }}" class="topLeft"> 
      <i class="layui-icon layui-icon-left"></i> 
    </a> 
    <div class="topTit">Guide</div> 
  </div> 

  <div class="home-news"> 
    <div class="home-new-list"> 
      <ul></ul> 
    </div> 
    <div class="dropload-down">
      <div class="dropload-load">
        <span class="loading"></span>loading...
      </div>
    </div>
  </div> 

  <script src="/static/home/js/jquery.min.js"></script>
  <script src="/static/home/layui/layui.js"></script>
  <script src="/static/home/js/dropload.min.js"></script>

  <script type="text/javascript">
    var page = 0;
    var _token = "{{ csrf_token() }}";

    layui.use(['form', 'layer'], function () {
        var $ = layui.jquery, form = layui.form, layer = layui.layer;
    });

    $(function () {
        var page = 0;
        $('.home-news').dropload({
            scrollArea: window,
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑ pull up to load more</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>loading...</div>',
                domNoData: '<div class="dropload-nodata">none more</div>'
            },
            loadDownFn: function (me) {
                page++;
                $.post("{{ route('guide.fetch') }}", {page: page, _token: _token}, function (result) {
                    if (result.code === 200) {
                        var html = '';
                        var dataLen = result.data.length;
                        for (var i = 0; i < dataLen; i++) {
                            html += '<li>';
                            html += '<a href="' + result.data[i].link + '">';
                            html += '<img src="' + result.data[i].img + '" alt="">';
                            html += '<dl>';
                            html += '<dt>' + result.data[i].title + '</dt>';
                            html += '<dd class="desc">' + result.data[i].content + '</dd>';
                            html += '<dd>' + result.data[i].createTime + '</dd>';
                            html += '</dl>';
                            html += '</a>';
                            html += '</li>';
                        }
                        $('.home-new-list ul').append(html);
                        me.resetload();
                    } else {
                        me.lock();
                        me.noData(true);
                    }
                }, "json");
            }
        });
    });
  </script>
</body>
</html>
