xiaoyu
318 lines
15 KiB
PHP
318 lines
15 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">
|
|
<a class="block relative" href="javascript:;" @click="goAct">
|
|
<div class="absolute box-center-middle pt15 pb15 pl30 pr20 bg-000-op80 font-30 color-fff ulib-r750">进入活动<i class="iconfont icon-gengduo font-22"></i></div>
|
|
<img class='block imgsize-750X340' :src='info.theme' />
|
|
</a>
|
|
<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-70 ml50 mr50 fn-flex text-center" v-if="info.tab.length<5">
|
|
<div class="fn-flex-item relative tab-menu2 pt10 pb10" :class="[tabid == item.id?'font-36 active':'font-28']" v-for="(item,index) in info.tab"><a class="relative inline-block" :class="[tabid == item.id?'':'pt10']" @click="changeTab(item.id,index)" href="javascript:">{{item.title}}</a></div>
|
|
</div>
|
|
<div class="relative height-70 space-nowrap text-center scroll-x" v-else>
|
|
<div class="inline-block relative tab-menu2 pt10 pb10 pl25 pr25" :class="[tabid == item.id?'font-36 active':'font-28']" v-for="(item,index) in info.tab"><a class="relative inline-block" :class="[tabid == item.id?'':'pt10']" @click="changeTab(item.id,index)" href="javascript:">{{item.title}}</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="relative height-70 ml50 mr50 fn-flex text-center" v-if="info.tab.length<5">
|
|
<div class="fn-flex-item relative tab-menu2 pt10 pb10" :class="[tabid == item.id?'font-36 active':'font-28']" v-for="(item,index) in info.tab"><a class="relative inline-block" :class="[tabid == item.id?'':'pt10']" @click="changeTab(item.id,index)" href="javascript:">{{item.title}}</a></div>
|
|
</div>
|
|
<div class="relative height-70 space-nowrap text-center scroll-x" v-else>
|
|
<div class="inline-block relative tab-menu2 pt10 pb10 pl25 pr25" :class="[tabid == item.id?'font-36 active':'font-28']" v-for="(item,index) in info.tab"><a class="relative inline-block" :class="[tabid == item.id?'':'pt10']" @click="changeTab(item.id,index)" href="javascript:">{{item.title}}</a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt30 bg-fff7f1 pt15 pb15 overflowhidden text-center font-22 color-ff9d47 ulib-r750" v-if="tabid==3">温馨提示：直播结束后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="statistical.title"></b>
|
|
<div class="fn-fr">
|
|
<select class="select-more box-shadow-lightGray ulib-r10 font-22" @change="handleChange($event,'group')">
|
|
<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,'date')">
|
|
<option :value="item" v-for="item in info.date">{{item}}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div v-if="tabid==4">
|
|
<select class="select-more box-shadow-lightGray ulib-r10 font-22" @change="handleChange($event,'goods')" style="width: 100%">
|
|
<option :value="item.itemId" v-for="item in info.goods">{{item.title}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="pr10" v-if="statistical.lists && statistical.lists.length>0">
|
|
<div class="height-500 relative overflowhidden">
|
|
<div id="pieChartBox" class="height-500"></div>
|
|
</div>
|
|
<div class="font-32 color-666" v-for="(item,index) in statistical.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="#" />
|
|
<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>
|
|
<!--
|
|
<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="statistical.url">查看更多<i class="iconfont icon-gengduo"></i></a>
|
|
</div>
|
|
<div class="pt100 pb100 text-center font-32 color-666" v-else>暂时无数据</div>
|
|
</div>
|
|
|
|
</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,
|
|
tabid:'1',//1预热阶段 /2直播阶段
|
|
info:{
|
|
tab:[],
|
|
},
|
|
loading: false,
|
|
date:0,
|
|
group:0,
|
|
statistical:{
|
|
title:'',
|
|
url:'',
|
|
list:[],
|
|
},
|
|
kpi: 'browse',
|
|
itemId:<?=$info['itemId']?>,
|
|
},
|
|
mounted() {
|
|
window.addEventListener('scroll', this.handleScroll, true)
|
|
this.getInfo()
|
|
},
|
|
//离开页面时
|
|
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']?>',
|
|
<?if($info['aId']==11){?>
|
|
tab:[
|
|
{
|
|
id:'1',
|
|
kpi:'browse',
|
|
title:'浏览',
|
|
},
|
|
{
|
|
id:'2',
|
|
kpi:'beforeOrder',
|
|
title:'留资',
|
|
},
|
|
{
|
|
id:'4',
|
|
kpi:'order',
|
|
title:'订单',
|
|
},
|
|
],
|
|
<?}else{?>
|
|
tab:[
|
|
{
|
|
id:'1',
|
|
kpi:'browse',
|
|
title:'浏览',
|
|
},
|
|
{
|
|
id:'2',
|
|
kpi:'subscribe',
|
|
title:'预约',
|
|
},
|
|
{
|
|
id:'3',
|
|
kpi:'watch',
|
|
title:'观看',
|
|
},
|
|
{
|
|
id:'4',
|
|
kpi:'order',
|
|
title:'订单',
|
|
},
|
|
],
|
|
<?}?>
|
|
date:<?=json_encode($day_list,JSON_UNESCAPED_UNICODE)?>,
|
|
group:<?=json_encode($groups,JSON_UNESCAPED_UNICODE)?>,
|
|
goods:<?=json_encode($goods,JSON_UNESCAPED_UNICODE)?>
|
|
}
|
|
this.getStatisticalData()
|
|
},
|
|
|
|
//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.kpi = this.info.tab[index]['kpi']
|
|
$('#pieChartBox').hide()
|
|
this.getStatisticalData()
|
|
}
|
|
},
|
|
|
|
//预热阶段浏览数据
|
|
getStatisticalData(){
|
|
let that=this;
|
|
if (!that.loading) {
|
|
that.loading = true;
|
|
//请求接口
|
|
var type = this.info.group[this.group]['type']
|
|
var value = this.info.group[this.group]['value']
|
|
var params = {
|
|
'kpi':this.kpi,
|
|
'type':type,
|
|
'value':value,
|
|
'index':this.group,
|
|
'day':this.date
|
|
}
|
|
if(that.tabid==4){
|
|
params['itemId'] = this.itemId
|
|
}
|
|
$.get('/h5/market/sylive2/stic/ajax_rank',params,function (res){
|
|
that.loading = false;
|
|
that.statistical = res.data;
|
|
if(res.data.pieChart){
|
|
that.initchart('pieChartBox',res.data.pieChart)
|
|
}
|
|
},'json');
|
|
}
|
|
},
|
|
|
|
//选择条件
|
|
handleChange(e,key){
|
|
switch (key) {
|
|
case 'date':
|
|
if(this.date != e.target.value){
|
|
this.date = e.target.value
|
|
$('#pieChartBox').hide()
|
|
this.getStatisticalData()
|
|
}
|
|
break;
|
|
case 'group':
|
|
if(this.group != e.target.value){
|
|
this.group = e.target.value
|
|
$('#pieChartBox').hide()
|
|
this.getStatisticalData()
|
|
}
|
|
break;
|
|
case 'goods':
|
|
if(this.itemId != e.target.value){
|
|
this.itemId = e.target.value
|
|
$('#pieChartBox').hide()
|
|
this.getStatisticalData()
|
|
}
|
|
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);
|
|
},
|
|
goAct(){
|
|
window.location.replace('<?=$act_url?>')
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
<?= $this->load->view('h5/market/sylive2/hidden_wx_share') ?>
|
|
</body>
|