<template>

??<div?class="list-con">

????<!--?<div?class="list"?v-for="(item,key)?in?list"?:key="key">?-->

????<div?class="positionfixd">

??????<ul>

????????<li?style="width:14.5%">序號</li>

????????<li>編號</li>

????????<li?style="width:24.5%">時間</li>

????????<li>等級</li>

????????<li?style="border-right:1.5px?solid?#000">照片</li>

??????</ul>

????</div>

????<table?border="1"?cellpadding="0"?cellspacing="0">

??????<tr?class="list"?v-for="(item,key)?in?list"?:key="key">

????????<td?class="td1">{{key+1}}</td>

????????<td>{{item.number}}</td>

????????<td?class="td2">

??????????<date-view?:date="item.createdTime"></date-view>

????????</td>

????????<td>{{item.level===1?'重要':'普通'}}</td>

????????<td?class="tdimg">

??????????<img?:src="item.problemPhotosList[0]"?alt?/>

????????</td>

??????</tr>

????</table>

????<!--?<p>?-->

????<!--?{{item.county}}

???????????????{{item.village}}

???????????????{{item.userName}}

????{{item.number}}-->

????<!--?{{item.title}}?-->

????<!--?{{item.number}}?-->

????<!--?</!-->

????<!--?</div>?-->

????<!--?<infinite-loading?:on-infinite="onInfinite"?ref="infiniteLoading">

???????????<span?slot="no-more">沒有更多消息了</span>

????</infinite-loading>-->

????<infinite-loading?@infinite="infiniteHandler">

??????<span?slot="no-more">沒有更多消息了</span>

????</infinite-loading>

??</div>

</template>

<script>

import?InfiniteLoading?from?"vue-infinite-loading";

import?dateView?from?"./../views/date-view.vue";

//?const?api?=?"http://hn.algolia.com/api/v1/search_by_date?tags=story";

export?default?{

??components:?{

????InfiniteLoading,

????"date-view":?dateView

??},

??data()?{

????return?{

??????list:?[]

????};

??},

??methods:?{

????//?$state??方法

????infiniteHandler($state)?{

??????let?params?=?{

????????pageNum:?this.list.length?/?20?+?1

??????};

??????this.$ajax

????????.get(

??????????"/openapi/sqrj/h5/findByVillage?status=2&pageSize=20&pageNum="?+

????????????params.pageNum,

??????????params

????????)

????????.then(res?=>?{

??????????//通過接口獲取到list????通過傳參?pageNum?來控制請求的數(shù)據(jù)

??????????console.log(res.data.result,?"res.data.result.list.length");

??????????console.log(this.list.length,?res.data.result.total);

??????????if?(res.data.result.list.length)?{

????????????//如果接口list里面有值???那么進(jìn)行下一步操作

????????????this.list?=?this.list.concat(res.data.result.list);?//將請求到的接口list:res.data.result.list?合并到this.list里面，這樣現(xiàn)在在頁面的list就合并進(jìn)去了

????????????console.log(this.list,?"data");

????????????$state.loaded();??//這一步操作相當(dāng)于監(jiān)聽上拉動作改變pageNum的值重新發(fā)送請求

????????????if?(this.list.length?===?res.data.result.total)?{???//如果this.list的長度等于請求接口里面的數(shù)據(jù)的總長度，那么提示已經(jīng)沒有新數(shù)據(jù)了

??????????????$state.complete();

????????????}

??????????}?else?{

????????????$state.complete();

??????????}

????????});

????}

????//?onInfinite()?{

????//?????let?params?=?{

????//?????????pageNum:?this.list.length?/?20?+?1

????//?????}

????//???????????this.$ajax.get('/openapi/sqrj/h5/findByVillage?status=2&pageSize=20&pageNum='+params.pageNum,params).then((res)=>{

????//???????????????//通過接口獲取到list????通過傳參?pageNum?來控制請求的數(shù)據(jù)

????//?????????console.log(res.data.result,'res.data.result.list.length');

????//?????????console.log(this.list.length,res.data.result.total);

????//??????????if?(res.data.result.list.length)?{????//如果接口list里面有值???那么進(jìn)行下一步操作

????//?????????????this.list?=?this.list.concat(res.data.result.list);??????//將請求到的接口list:res.data.result.list?合并到this.list里面，這樣現(xiàn)在在頁面的list就合并進(jìn)去了

????//?????????????console.log(this.list,'data');

????//?????????????this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');??//這一步操作相當(dāng)于監(jiān)聽上拉動作改變pageNum的值重新發(fā)送請求

????//?????????????if?(this.list.length===?res.data.result.total)?{??????//如果this.list的長度等于請求接口里面的數(shù)據(jù)的總長度，那么提示已經(jīng)沒有新數(shù)據(jù)了

????//?????????????????this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');

????//?????????????}

????//?????????}

????//??????????else?{

????//?????????????this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');

????//?????????}

????//?????})

????//?????//?this.$ajax.get('/openapi/wc/h5/findByVillage?userId=294259047560044&pageSize=20&pageNum='+params.pageNum,params).then((res)=>{

????//?????//?????console.log(res.data.result.list.length,'res.data.result.list.length');

????//?????//??????if?(res.data.result.list.length)?{

????//?????//?????????this.list?=?this.list.concat(res.data.result.list);

????//?????//?????????console.log(this.list,'data');

????//?????//?????????this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');

????//?????//?????????if?(this.list.length?/?20?===?20)?{

????//?????//?????????????this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');

????//?????//?????????}

????//?????//?????}?else?{

????//?????//?????????this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');

????//?????//?????}

????//?????//?})

????//?????//?this.$ajax.get(api,?params).then((res)?=>?{

????//?????//?????console.log(res.data.hits.length,'res.data.hits.length');

????//?????//?????if?(res.data.hits.length)?{

????//?????//?????????this.list?=?this.list.concat(res.data.hits);

????//?????//?????????console.log(this.list,'this.list');

????//?????//?????????this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');

????//?????//?????????if?(this.list.length?/?20?===?20)?{

????//?????//?????????????this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');

????//?????//?????????}

????//?????//?????}?else?{

????//?????//?????????this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');

????//?????//?????}

????//?????//?})

????//?},

??}

};

</script>

<!--?Add?"scoped"?attribute?to?limit?CSS?to?this?component?only?-->

<style?lang="less"?scoped>

.list?{

??overflow:?hidden;

??margin:?20px?0;

}

span?{

??float:?left;

??margin-right:?5px;

}

p?{

??float:?left;

}

.positionfixd?{

??position:?fixed;

??top:?0;

??left:?0;

??width:?100%;

??ul?{

????padding:?0;

????margin:?0?0?0?8px;

????li?{

??????display:?inline-block;

??????width:?19%;

??????height:?30px;

??????line-height:?30px;

??????text-align:?center;

??????font-size:?14px;

??????background-color:?#ccc;

??????color:?#fff;

??????border:?1.5px?solid?#000;

??????border-right:?none;

????}

??}

}

table?{

??margin-top:?30px;

??tr?{

????td?{

??????width:?20%;

??????height:?30px;

??????line-height:?30px;

??????text-align:?center;

??????font-size:?14px;

????}

????.td1?{

??????width:?15%;

????}

????.td2?{

??????width:?25%;

??????//???span{

??????//???????display:?inline-block;

??????//???????text-align:?center;

??????//???}

????}

????.tdimg?{

??????img?{

????????width:?100%;

????????height:?100%;

??????}

????}

??}

}

</style>