xiaoyu
501 lines
25 KiB
PHP
501 lines
25 KiB
PHP
<body class="bg-fff">
|
|
<div class="height-500 fixed left-0 right-0 top-0 z-index-0 bg-1a1a1a"></div>
|
|
<div class="bg-fff" id="app" ref="app">
|
|
<div class="container pb130 bg-eee-fff">
|
|
<img class='block imgsize-750X340' :src='info.theme' />
|
|
<div id="main"class="inner30">
|
|
<div v-if="tabFixed">
|
|
<div class="height-60"></div>
|
|
<div class="fixed top-0 left-0 right-0 z-index-10 bg-fff pl30 pr30 pt20 pb20">
|
|
<div class="relative height-60 ml50 mr50 fn-flex text-center">
|
|
<div class="fn-flex-item" v-for="(item,index) in info.tab"><a :class="'relative inline-block tab-menu '+ [tabid == item.id?'font-36 active':'font-32']" @click="changeTab(item.id,index)" href="javascript:">{{item.title}}</a></div>
|
|
<div :class="'glider glider-'+tabIndex"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="relative height-60 ml50 mr50 fn-flex text-center">
|
|
<div class="fn-flex-item" v-for="(item,index) in info.tab"><a :class="'relative inline-block tab-menu '+ [tabid == item.id?'font-36 active':'font-32']" @click="changeTab(item.id,index)" href="javascript:">{{item.title}}</a></div>
|
|
<div :class="'glider glider2-'+tabIndex"></div>
|
|
</div>
|
|
<!--预热阶段-->
|
|
<div v-if="tabid==1">
|
|
<div class="mt30 relative bg-fff inner40 pr30 overflowhidden box-shadow-lightGray ulib-r20">
|
|
<div class="pb20 fn-clear">
|
|
<b class="fn-fl font-40 text-italic" v-html="beginBrowse.title"></b>
|
|
<div class="fn-fr">
|
|
<select class="select-more box-shadow-lightGray ulib-r10 font-22" @change="handleChange($event,'beginBrowseGroup')">
|
|
<option :value="key" v-for="(item,key) in info.group">{{item.title}}</option>
|
|
</select>
|
|
<select class="select-more box-shadow-lightGray ulib-r10 font-22" @change="handleChange($event,'beginBrowseDate')">
|
|
<option :value="item" v-for="item in info.date">{{item}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="pr10" v-if="beginBrowse.lists && beginBrowse.lists.length>0">
|
|
<div class="height-500 relative overflowhidden">
|
|
<div id="beginBrowseChart" class="height-500"></div>
|
|
</div>
|
|
<div class="font-32 color-666" v-for="(item,index) in beginBrowse.lists">
|
|
<div class="inner20 fn-clear ulib-r20" :class="index==0?'bg-fff7f1':''">
|
|
<a class="fn-fl block wp70 text-nowrap" :href="item.url">
|
|
<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>
|
|
<!--
|
|
<i class="iconfont icon-gengduo text-middle font-24 color-666"></i>
|
|
-->
|
|
</a>
|
|
<div class="fn-fr">{{item.num}}</div>
|
|
</div>
|
|
</div>
|
|
<a class="gengduo block absolute bottom-0 box-center pl10 text-center font-22 color-fff" :href="beginBrowse.url">查看更多<i class="iconfont icon-gengduo"></i></a>
|
|
</div>
|
|
<div class="pt100 pb100 text-center font-32 color-666" v-else>暂时无数据</div>
|
|
</div>
|
|
|
|
<div class="mt30 relative bg-fff inner40 overflowhidden box-shadow-lightGray ulib-r20">
|
|
<div class="pb20 fn-clear">
|
|
<b class="fn-fl font-40 text-italic" v-html="beginBook.title"></b>
|
|
<div class="fn-fr">
|
|
<select class="select-more box-shadow-lightGray ulib-r10 font-22" @change="handleChange($event,'beginBookGroup')">
|
|
<option :value="key" v-for="(item,key) in info.group">{{item.title}}</option>
|
|
</select>
|
|
<select class="select-more box-shadow-lightGray ulib-r10 font-22" @change="handleChange($event,'beginBookDate')">
|
|
<option :value="item" v-for="item in info.date">{{item}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div v-if="beginBook.lists && beginBook.lists.length>0">
|
|
<div class="height-500 relative overflowhidden">
|
|
<div id="beginBookChart" class="height-500"></div>
|
|
</div>
|
|
<div class="font-32 color-666" v-for="(item,index) in beginBook.lists">
|
|
<div class="inner20 fn-clear ulib-r20" :class="index==0?'bg-fff7f1':''">
|
|
<a class="fn-fl block wp70 text-nowrap" :href="item.url">
|
|
<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>
|
|
<!--
|
|
<i class="iconfont icon-gengduo text-middle font-24 color-666"></i>
|
|
-->
|
|
</a>
|
|
<div class="fn-fr">{{item.num}}</div>
|
|
</div>
|
|
</div>
|
|
<a class="gengduo block absolute bottom-0 box-center pl10 text-center font-22 color-fff" :href="beginBook.url">查看更多<i class="iconfont icon-gengduo"></i></a>
|
|
</div>
|
|
<div class="pt100 pb100 text-center font-32 color-666" v-else>暂时无数据</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- end 预热阶段-->
|
|
<!--直播阶段-->
|
|
<div v-if="tabid==2">
|
|
<div class="mt30 bg-fff7f1 pt15 pb15 overflowhidden text-center font-22 color-ff9d47 ulib-r750">温馨提示：直播结束后6小时同步数据</div>
|
|
<div class="mt30 relative bg-fff inner40 pr30 overflowhidden box-shadow-lightGray ulib-r20">
|
|
<div class="pb20 fn-clear">
|
|
<b class="fn-fl font-40 text-italic" v-html="liveView.title"></b>
|
|
<div class="fn-fr">
|
|
<select class="select-more box-shadow-lightGray ulib-r10 font-22" @change="handleChange($event,'liveViewGroup')">
|
|
<option :value="key" v-for="(item,key) in info.group">{{item.title}}</option>
|
|
</select>
|
|
<select class="select-more box-shadow-lightGray ulib-r10 font-22" @change="handleChange($event,'liveViewDate')">
|
|
<option :value="item" v-for="item in info.date">{{item}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="pr10" v-if="liveView.lists && liveView.lists.length>0">
|
|
<div class="height-500 relative overflowhidden">
|
|
<div id="liveViewChart" class="height-500"></div>
|
|
</div>
|
|
<div class="font-32 color-666" v-for="(item,index) in liveView.lists">
|
|
<div class="inner20 fn-clear ulib-r20" :class="index==0?'bg-fff7f1':''">
|
|
<a class="fn-fl block wp70 text-nowrap" :href="item.url">
|
|
<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>
|
|
<!--
|
|
<i class="iconfont icon-gengduo text-middle font-24 color-666"></i>
|
|
-->
|
|
</a>
|
|
<div class="fn-fr">{{item.num}}</div>
|
|
</div>
|
|
</div>
|
|
<a class="gengduo block absolute bottom-0 box-center pl10 text-center font-22 color-fff" :href="liveView.url">查看更多<i class="iconfont icon-gengduo"></i></a>
|
|
</div>
|
|
<div class="pt100 pb100 text-center font-32 color-666" v-else>暂时无数据</div>
|
|
</div>
|
|
|
|
<div class="mt30 relative bg-fff inner40 overflowhidden box-shadow-lightGray ulib-r20">
|
|
<div class="pb20 fn-clear">
|
|
<b class="fn-fl font-40 text-italic" v-html="liveOrder.title"></b>
|
|
<div class="fn-fr">
|
|
<select class="select-more box-shadow-lightGray ulib-r10 font-22" @change="handleChange($event,'liveOrderGroup')">
|
|
<option :value="key" v-for="(item,key) in info.group">{{item.title}}</option>
|
|
</select>
|
|
<select class="select-more box-shadow-lightGray ulib-r10 font-22" @change="handleChange($event,'liveOrderDate')">
|
|
<option :value="item" v-for="item in info.date">{{item}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div v-if="liveOrder.lists && liveOrder.lists.length>0">
|
|
<div class="height-500 relative overflowhidden">
|
|
<div id="liveOrderChart" class="height-500"></div>
|
|
</div>
|
|
<div class="font-32 color-666" v-for="(item,index) in liveOrder.lists">
|
|
<div class="inner20 fn-clear ulib-r20" :class="index==0?'bg-fff7f1':''">
|
|
<a class="fn-fl block wp70 text-nowrap" :href="item.url">
|
|
<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>
|
|
<!--
|
|
<i class="iconfont icon-gengduo text-middle font-24 color-666"></i>
|
|
-->
|
|
</a>
|
|
<div class="fn-fr">{{item.num}}</div>
|
|
</div>
|
|
</div>
|
|
<a class="gengduo block absolute bottom-0 box-center pl10 text-center font-22 color-fff" :href="liveOrder.url">查看更多<i class="iconfont icon-gengduo"></i></a>
|
|
</div>
|
|
<div class="pt100 pb100 text-center font-32 color-666" v-else>暂时无数据</div>
|
|
</div>
|
|
</div>
|
|
<!-- end 直播阶段-->
|
|
</div>
|
|
|
|
<?$this->load->view('h5/market/sylive2/nav_biz')?>
|
|
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/echarts.min.js?20221213"></script>
|
|
<script>
|
|
let hostUrl = ''
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
tabFixed:false,
|
|
tabIndex:0,
|
|
tabid:'1',//1预热阶段 /2直播阶段
|
|
info:'',
|
|
loading: false,
|
|
beginBrowseDate:0,
|
|
beginBrowseGroup:0,
|
|
beginBookDate:0,
|
|
beginBookGroup:0,
|
|
beginBrowse:{
|
|
title:'',
|
|
url:'',
|
|
list:[],
|
|
},
|
|
beginBook:{
|
|
title:'',
|
|
url:'',
|
|
list:[],
|
|
},
|
|
liveViewDate:0,
|
|
liveViewGroup:0,
|
|
liveOrderDate:0,
|
|
liveOrderGroup:0,
|
|
liveView:{
|
|
title:'',
|
|
url:'',
|
|
list:[],
|
|
},
|
|
liveOrder:{
|
|
title:'',
|
|
url:'',
|
|
list:[],
|
|
},
|
|
time1:''
|
|
},
|
|
mounted() {
|
|
window.addEventListener('scroll', this.handleScroll, true)
|
|
this.getInfo()
|
|
this.getBeginBrowse()
|
|
this.getBeginBook()
|
|
},
|
|
//离开页面时
|
|
destroyed () {
|
|
window.removeEventListener('scroll', this.handleScroll)
|
|
},
|
|
methods: {
|
|
//判断导航是否需要吸顶
|
|
handleScroll () {
|
|
let scrollTop = document.querySelector('#app').scrollTop
|
|
let mainoffsetTop = document.querySelector('#main').offsetTop
|
|
if (scrollTop > mainoffsetTop) {
|
|
this.tabFixed = true
|
|
} else {
|
|
this.tabFixed = false
|
|
}
|
|
},
|
|
|
|
//获取基础信息
|
|
getInfo(){
|
|
this.info = {
|
|
theme:'<?=$info['banner']?>',
|
|
tab:[
|
|
{
|
|
id:'1',
|
|
title:'预热阶段',
|
|
},
|
|
{
|
|
id:'2',
|
|
title:'直播阶段',
|
|
},
|
|
],
|
|
date:<?=json_encode($day_list,JSON_UNESCAPED_UNICODE)?>,
|
|
group:<?=json_encode($groups,JSON_UNESCAPED_UNICODE)?>,
|
|
}
|
|
},
|
|
|
|
//tab切换
|
|
changeTab(id,index){
|
|
if(id != this.tabid&&!this.loading){
|
|
if(this.tabFixed){
|
|
let mainoffsetTop = document.querySelector('#main').offsetTop
|
|
$('html,body').animate({scrollTop: mainoffsetTop+5},500);
|
|
}
|
|
this.tabid = id
|
|
this.tabIndex = index
|
|
$('#beginBrowseChart').hide()
|
|
$('#beginBookChart').hide()
|
|
$('#liveViewChart').hide()
|
|
$('#liveOrderChart').hide()
|
|
if(this.tabid == 1){
|
|
this.beginBrowseDate = 0
|
|
this.beginBrowseGroup = 0
|
|
this.beginBookDate = 0
|
|
this.beginBookGroup = 0
|
|
this.getBeginBrowse()
|
|
this.getBeginBook()
|
|
}else if(this.tabid == 2){
|
|
this.liveViewDate = 0
|
|
this.liveViewGroup = 0
|
|
this.liveOrderDate = 0
|
|
this.liveOrderGroup = 0
|
|
this.getLiveView()
|
|
this.getLiveOrder()
|
|
}
|
|
}
|
|
},
|
|
|
|
//预热阶段浏览数据
|
|
getBeginBrowse(){
|
|
let that=this;
|
|
var type = this.info.group[this.beginBrowseGroup]['type']
|
|
var value = this.info.group[this.beginBrowseGroup]['value']
|
|
//请求接口
|
|
var params = {
|
|
'kpi':'browse',
|
|
'type':type,
|
|
'value':value,
|
|
'index':this.beginBrowseGroup,
|
|
'day':this.beginBrowseDate
|
|
}
|
|
$.get('/h5/market/sylive2/stic/ajax_rank',params,function (res){
|
|
that.beginBrowse = res.data;
|
|
if(res.data.pieChart){
|
|
that.initchart('beginBrowseChart',res.data.pieChart)
|
|
}
|
|
},'json');
|
|
},
|
|
|
|
//预热阶段预约数据
|
|
getBeginBook(){
|
|
let that=this;
|
|
var type = this.info.group[this.beginBookGroup]['type']
|
|
var value = this.info.group[this.beginBookGroup]['value']
|
|
var params = {
|
|
'kpi':'subscribe',
|
|
'type':type,
|
|
'value':value,
|
|
'index':this.beginBookGroup,
|
|
'day':this.beginBookDate
|
|
}
|
|
$.get('/h5/market/sylive2/stic/ajax_rank',params,function (res){
|
|
that.beginBook = res.data;
|
|
if(res.data.pieChart){
|
|
that.initchart('beginBookChart',res.data.pieChart)
|
|
}
|
|
},'json');
|
|
},
|
|
|
|
//直播阶段观看数据
|
|
getLiveView(){
|
|
let that=this;
|
|
var type = this.info.group[this.liveViewGroup]['type']
|
|
var value = this.info.group[this.liveViewGroup]['value']
|
|
var params = {
|
|
'kpi':'watch',
|
|
'type':type,
|
|
'value':value,
|
|
'index':this.liveViewGroup,
|
|
'day':this.liveViewDate
|
|
}
|
|
$.get('/h5/market/sylive2/stic/ajax_rank',params,function (res){
|
|
that.liveView = res.data;
|
|
if(res.data.pieChart){
|
|
that.initchart('liveViewChart',res.data.pieChart)
|
|
}
|
|
},'json');
|
|
},
|
|
|
|
//预热阶段订单数据
|
|
getLiveOrder(){
|
|
let that=this;
|
|
var type = this.info.group[this.liveOrderGroup]['type']
|
|
var value = this.info.group[this.liveOrderGroup]['value']
|
|
var params = {
|
|
'kpi':'order',
|
|
'type':type,
|
|
'value':value,
|
|
'index':this.liveOrderGroup,
|
|
'day':this.liveOrderDate
|
|
}
|
|
$.get('/h5/market/sylive2/stic/ajax_rank',params,function (res){
|
|
that.liveOrder = res.data;
|
|
if(res.data.pieChart){
|
|
that.initchart('liveOrderChart',res.data.pieChart)
|
|
}
|
|
},'json');
|
|
},
|
|
|
|
//选择条件
|
|
handleChange(e,key){
|
|
console.log(e)
|
|
switch (key) {
|
|
case 'beginBrowseDate':
|
|
if(this.beginBrowseDate != e.target.value){
|
|
this.beginBrowseDate = e.target.value
|
|
console.log(key)
|
|
this.getBeginBrowse()
|
|
}
|
|
break;
|
|
case 'beginBrowseGroup':
|
|
if(this.beginBrowseGroup != e.target.value){
|
|
this.beginBrowseGroup = e.target.value
|
|
console.log(key)
|
|
this.getBeginBrowse()
|
|
}
|
|
break;
|
|
case 'beginBookDate':
|
|
if(this.beginBookDate != e.target.value){
|
|
this.beginBookDate = e.target.value
|
|
console.log(key)
|
|
this.getBeginBook()
|
|
}
|
|
break;
|
|
case 'beginBookGroup':
|
|
if(this.beginBookGroup != e.target.value){
|
|
this.beginBookGroup = e.target.value
|
|
console.log(key)
|
|
this.getBeginBook()
|
|
}
|
|
break;
|
|
case 'liveViewDate':
|
|
if(this.liveViewDate != e.target.value){
|
|
this.liveViewDate = e.target.value
|
|
console.log(key)
|
|
this.getLiveView()
|
|
}
|
|
break;
|
|
case 'liveViewGroup':
|
|
if(this.liveViewGroup != e.target.value){
|
|
this.liveViewGroup = e.target.value
|
|
console.log(key)
|
|
this.getLiveView()
|
|
}
|
|
break;
|
|
case 'liveOrderDate':
|
|
if(this.liveOrderDate != e.target.value){
|
|
this.liveOrderDate = e.target.value
|
|
console.log(key)
|
|
this.getLiveOrder()
|
|
}
|
|
break;
|
|
case 'liveOrderGroup':
|
|
if(this.liveOrderGroup != e.target.value){
|
|
this.liveOrderGroup = e.target.value
|
|
console.log(key)
|
|
this.getLiveOrder()
|
|
}
|
|
break;
|
|
}
|
|
},
|
|
|
|
//初始化表格
|
|
initchart(obj,pieChart){
|
|
setTimeout(function () {
|
|
$('#'+obj).show()
|
|
let dom = document.getElementById(obj);
|
|
let myChart = echarts.init(dom, null, {
|
|
renderer: 'canvas',
|
|
useDirtyRect: false
|
|
});
|
|
let option;
|
|
option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
bottom:'12%',
|
|
radius: ['25%', '50%'],
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
labelLine: {
|
|
fontSize:5,
|
|
length:10
|
|
},
|
|
label: {
|
|
formatter: '{b| {b} }{abg|}\n{hr|}\n{c| {c}({d}%) }',
|
|
backgroundColor: '#F6F8FC',
|
|
borderColor: '#8C8D8E',
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
rich: {
|
|
hr: {
|
|
borderColor: '#8C8D8E',
|
|
width: '100%',
|
|
borderWidth: 1,
|
|
height: 0
|
|
},
|
|
b: {
|
|
color: '#4C5058',
|
|
fontSize:10,
|
|
lineHeight:20,
|
|
align: 'center',
|
|
},
|
|
c: {
|
|
color: '#4C5058',
|
|
fontSize:8,
|
|
lineHeight:20,
|
|
align: 'center',
|
|
},
|
|
}
|
|
},
|
|
data:pieChart
|
|
}
|
|
]
|
|
};
|
|
if (option && typeof option === 'object') {
|
|
myChart.setOption(option);
|
|
}
|
|
window.addEventListener('resize', myChart.resize);
|
|
}, 200);
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
<?= $this->load->view('h5/market/sylive2/hidden_wx_share') ?>
|
|
</body>
|