{include file="header" /}
<div class="wrapper" id='app'>

<!-- 新课上线 -->
<div class="m-header-video">
<div class="header"><h2 class="text-titie">{$title}</h2></div>
<ul class="content_list" style="padding-bottom:10px;">
  <li v-for="itm in data" class="content_item" v-on:click='goUrl(itm.id)'>
	<img :src="itm.thumb" style='max-height:110px;min-height:110px;'>
	<em class="a"></em>
	<div class="main_title">{{itm.title}}</div>
	<div class="sub_title">
		<em class="ke-bs ke-bs1" v-if="itm.price==0">免费</em>
		<em class="price price58" v-else>{{itm.price}}</em>
		<em class="item_right fr">{{itm.hits}}次学习</em>
	</div>
</li>
</ul>
</div>
<!-- 新课上线 End -->
<div id="dianhuafei" class="yxw-list-loading">加载更多</div>
</div>
<style>
  .content_list .content_item .a{
     display:none;
  }
  /*加载中*/
.yxw-list-loading{width:100%;height:50px;line-height:50px;color:#757575;background:#f0f0f0;text-align:center;font-size:14px;}
.mall-totop{bottom:80px;}
</style>


<!-- 最底部导航 -->
<div class="gzs-bottombar">
<a href="/" class="gzs-bo gzs-on"><img src="/mobile/picture/index2.png">首页</a>
<a href="/course" class="gzs-bo"><img src="/mobile/picture/index-ke.png">课程</a>
<a href="/pay/index/buy_list.html" class="gzs-bo"><img src="/mobile/picture/index-yg.png">已购</a>
<a href="/member/" class="gzs-bo"><img src="/mobile/picture/index-admin.png">我的</a>
</div>
<!-- 最底部导航 End -->


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

<script>
  var f = true;
   var vue_app = new Vue({
        el: '#app',
		data:{
		  data:[],
		  page:1,
		  more:true
		},
		created:function(){
		   this.loadData();
		},
		mounted() {
		   window.loadMore = this.loadMore;
		   window.more = this.more;
		},
		methods:{
		  loadData(){
		     var that = this;
			 if(that.page == 1){
			    that.data = [];
			 }
		     $.getJSON("{:url('ajaxGetCourse')}", {page:that.page, type:"{$type}"}, function(data){
				 if(data.length > 0){
				     f = true;
				     that.data = that.data.concat(data);
				 }else{
				     that.more = false;
					 $(".yxw-list-loading").html('没有更多数据...');
				 }
			 })
		  },
		  loadMore(){
		     if(this.more){
				 this.page++;
				 this.loadData();
			 }
		  },
		  goUrl(id){
		      location.href = "/shows/"+id;
		  },
		  getData(id){
		     f = true;
		     this.page  = 1;
			 this.catid = id;
			 this.more  = true;
			 this.loadData();
		  }
		}
    })

$(document).scroll(function(){
	//滚动条滑动的时候获取滚动条距离顶部的距离
	var scroll=$(document).scrollTop();
	//屏幕的高度
	var client=$(window).height();
	var h=$(document).height();
	var flag=true;
	var bih = scroll+client+100 ;       
	if (h<= bih) {    
		if(f){
		   if(more){
		    $(".yxw-list-loading").html('加载中...');
			f = false;
			loadMore(); 
		   }
		}  
	}
});


</script>
<style>
  [v-cloak]{
    display: none;
}
</style>
</body>
</html>