xiaoyu
110 lines
4.5 KiB
PHP
110 lines
4.5 KiB
PHP
<body class="bg-f6">
|
|
<div id="app" ref="app">
|
|
<div class="container relative bg-no-repeat bg-size-fullwidth bg-pos-top pt30 pb50">
|
|
<div class="relative bg-fff ml30 mr30 inner30 ulib-r20 box-shadow-darkGray" style="min-height:90vh;">
|
|
<div class="pt10 pb20 fn-clear <?=$params['show_day'] ? '' : 'text-center '?>">
|
|
<b class="font-40 text-italic <?=$params['show_day'] ? 'fn-fl' : ''?>" v-html="title"></b>
|
|
<?if($params['show_day']){?>
|
|
<select class="fn-fr select-more ulib-r10 font-28" @change="changeCheckDate" v-model="checkDate">
|
|
<option :value="item" v-for="item in day_list">{{item}}</option>
|
|
</select>
|
|
<?}?>
|
|
</div>
|
|
<div class="font-32 color-666" v-for="(item,index) in list">
|
|
<div class="pt20 pb20 fn-clear">
|
|
<div class="fn-fl wp70 text-nowrap">
|
|
<img class="imgsize-42X42 text-middle" v-if="item.ranking<4" :src="'https://qs.liche.cn/web/images/project/H5-ShiYu/icon-ranking-'+item.ranking+'.png'" alt="#" />
|
|
<span class="inline-block w-50 text-center text-middle" v-else>{{item.ranking}}</span>
|
|
<span class="text-middle">{{item.name}}</span>
|
|
<span class="inline-block pl10 pr10 line-height-15 text-middle bg-fe9538 font-22 color-fff ulib-r750" v-if="item.tip">{{item.tip}}</span>
|
|
</div>
|
|
<div class="fn-fr">{{item.num}}</div>
|
|
</div>
|
|
</div>
|
|
<mugen-scroll :handler="fetchData" :should-handle="!loading" scroll-container="app">
|
|
<div class="pt100 pb100 text-center color-ccc" v-if="isNoData"></i><span class="text-middle font-22">暂无数据</span></div>
|
|
<div class="pt20 pb20 text-center color-ccc" v-else-if="loading"><i class="iconfont icon-jiazai text-middle"></i><span class="text-middle font-22">请稍等...</span></div>
|
|
<div class="pt20 pb20 text-center font-22 color-ccc" v-else-if="isDataEnd && list.length>20">我们是有底线的</div>
|
|
</mugen-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let hostUrl = ''
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
loading: false,
|
|
isDataEnd: false,
|
|
isNoData: false,
|
|
page: 1, //页数
|
|
size: 20, //每页取多少个数据
|
|
title:'',
|
|
list:[],
|
|
checkDate:'<?=$params['day']?>',
|
|
day_list : <?=json_encode($day_list,JSON_UNESCAPED_UNICODE)?>,
|
|
},
|
|
created(){
|
|
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
mounted() {
|
|
},
|
|
beforeDestroy() {
|
|
|
|
},
|
|
//离开页面时
|
|
destroyed () {
|
|
},
|
|
methods: {
|
|
|
|
//拉取数据
|
|
fetchData: function() {
|
|
this.getMoreList()
|
|
},
|
|
|
|
//获取大区列表
|
|
getMoreList(){
|
|
let that=this;
|
|
if (!that.isNoData && !that.isDataEnd && !that.loading) {
|
|
that.loading = true;
|
|
var params = {
|
|
'skey':'<?=$params['skey']?>',
|
|
'type':'<?=$params['type']?>',
|
|
'day':that.checkDate,
|
|
'gtype':'<?=$params['gtype']?>',
|
|
'page':that.page
|
|
}
|
|
//请求接口
|
|
$.get('/h5/market/sylive/tstic/ajax_rank',params,function (res){
|
|
that.loading = false;
|
|
that.page = that.page + 1;
|
|
|
|
that.title = res.data.title
|
|
that.list = that.list.concat(res.data.lists);
|
|
if (res.data.total == 0) {
|
|
that.isNoData = true;
|
|
} else if (that.list.length == res.data.total) {
|
|
that.isDataEnd = true;
|
|
}
|
|
},'json');
|
|
}
|
|
},
|
|
//选择日期
|
|
changeCheckDate(e){
|
|
this.checkDate = e.target.value;
|
|
this.loading = false;
|
|
this.isDataEnd = false;
|
|
this.isNoData = false;
|
|
this.page = 1;
|
|
this.list = [];
|
|
this.getMoreList();
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
<?=$this->load->view('h5/market/sylive/share_script')?>
|
|
</body>
|