xiaoyu
148 lines
6.3 KiB
PHP
148 lines
6.3 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>
|
|
<?}?>
|
|
<select class="fn-fr select-more ulib-r10 font-28" @change="changeGroup" v-model="index">
|
|
<option :value="key" v-for="(item,key) in groups">{{item.title}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="pt30" v-if="kpi=='order' && goodsList">
|
|
<select class="wp100 select-more ulib-r10 font-28" style="width: 100%" @change="changegoods" v-model="goodsId">
|
|
<option :value="item.itemId" v-for="item in goodsList">{{item.title}}</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="#" />
|
|
<div class="inline-block relative imgsize-32X32 ml5 mr5 mb5 bg-ccc text-middle ulib-r750" v-else>
|
|
<span class="absolute box-center-middle text-bold font-18 color-fff">{{item.ranking}}</span>
|
|
</div>
|
|
<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)?>,
|
|
groups:<?=json_encode($groups,JSON_UNESCAPED_UNICODE)?>,
|
|
index:<?=$params['index'] ? $params['index'] : 0?>,
|
|
kpi:'<?=$params['kpi']?>',
|
|
goodsId:'<?=$params['itemId'] ? $params['itemId'] : 0?>',
|
|
goodsList: <?=json_encode($goods,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 type = this.groups[this.index]['type']
|
|
var value = this.groups[this.index]['value']
|
|
var params = {
|
|
'kpi':'<?=$params['kpi']?>',
|
|
'day':that.checkDate,
|
|
'type':type,
|
|
'value':value,
|
|
'itemId':that.goodsId,
|
|
'page':that.page
|
|
}
|
|
//请求接口
|
|
$.get('/h5/market/sylive2/stic/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();
|
|
},
|
|
changeGroup(e){
|
|
this.index = e.target.value;
|
|
this.loading = false;
|
|
this.isDataEnd = false;
|
|
this.isNoData = false;
|
|
this.page = 1;
|
|
this.list = [];
|
|
this.getMoreList();
|
|
},
|
|
changegoods(e){
|
|
if(this.goodsId != e.target.value){;
|
|
this.goodsId = 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/sylive2/hidden_wx_share') ?>
|
|
</body>
|