list.vue 2.99 KB
<style>
.sort-select .sort-list{display: block;}
</style>
<template>
<div>
	<banner></banner>

	<div class="infor container clearfix">
	  <div class="infor-navbar">
	    <leftnav></leftnav>
	  </div>
	  <div class="infor-borad">
	    <div class="infor-list-header">
	      <h3>{{typename}}</h3>
	      <div class="sort-select fr">
	        <div class="sort-by"
	        v-on:click="show=!show">
	    {{search.days==""?'全部':search.days=='7'?'近一周':'近一月'}}
	        </div>
	        <ul class="sort-list"  v-show="show" 
	        style="background:#fff;z-index:3;">
	          <li v-on:click="day('')">全部</li>
	          <li v-on:click="day('7')">近一周</li>
	          <li v-on:click="day('30')">近一月</li>
	        </ul>
	      </div>
	    </div>

	    <ul class="ullist1">
	      <li v-for="item in list" style="display:block;position:relative;">
	         <a  v-link="{path:'/show/'+item.typecode+'/'+item.guid}"
	         	style="padding-right: 190px;height: 20px;overflow: hidden;display: inline-block;    line-height: 18px;"
	         >
	         	{{item.title}}
	         	
	         </a>
	         <span style="position: absolute; top: 13px; right: 0px;">{{item.pubdate}}</span>
	      </li>
	    </ul>

	    <pagination 
		   @page-change="getData" 
		   :class="['m-20-0']"
		   :page-no.sync="search.page" 
		   :total-pages.sync="search.totalPages">
		   
		</pagination>

	  </div>
	</div>
</div>
</template>
<script>
module.exports={
	data:function(){
		return {
			list:[],
			search: {
		        size: 20,
		        page: 1,
		        totalPages: 0,time:'',typecode:0,id:0,days:''       
		    },typelist:[],typename:'',show:false
		}
	},methods:{
		day:function(v){
			this.show=false;
			this.search.days=v;
			this.getData();
		},
		getData:function(casetxt){//请求数据
			this.search.typecode=this.$route.params.id=="0"? this.$route.params.type:this.$route.params.id;
	        if(casetxt){
	          this.search.page=1;       
	        }
	        Ajax.get('/cms/public_act_getAll?size='+this.search.size+'&typecode='+this.search.typecode+'&page='+this.search.page+'&days='+this.search.days).then(function(res){
	            var result=res.data;
	            console.log('all',result);
	            if(result.data){
	                this.$set('list',result.data.list);
	                this.search.totalPages = result.data.totalPages || 0;
	            }
	        }.bind(this))
	    },gettype:function(){
	    	Ajax.get('/cms/typelist').then(function(res){
				var result=res.data;
		        console.log('typelist',result);
		        if(result.data){
		            this.$set('typelist',result.data);
		        }
		        this.getData();
			}.bind(this))
	    }
	},route:{
		activate:function(){
			this.gettype();
			//this.getData();			
		}
	},watch:{
		'$route.path':function(val){
			this.getData();
		},'search.typecode':function(val){
			console.log(val);
			for(var i=0;i<this.typelist.length;i++){
				if(this.typelist[i].id==val){
					this.typename=this.typelist[i].title;
				}
			}
		}
	}
}
</script>