xiaoyu
494 lines
23 KiB
PHP
494 lines
23 KiB
PHP
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/echarts.min.js?20221213"></script>
|
||
<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">
|
||
<div class="bg-eee-fff">
|
||
<div class="inner20">
|
||
<div class="relative pl50 pr200 bg-333 ulib-r750">
|
||
|
||
<?if(!$is_biz && $info['biz_id'] == $info['groupsId']){?>
|
||
<a class="bottom-opt bg-1a1a1a ulib-r750 text-center color-fff" href="/h5/market/sylive2/user?organizationId=<?=$info['organizationId']?>">
|
||
<div class="absolute box-center-middle line-height-13 font-22">
|
||
<div>顾问</div>
|
||
<div>管理</div>
|
||
</div>
|
||
</a>
|
||
<?}?>
|
||
|
||
<img class='block absolute left-0 box-middle ml10 imgsize-32X32 ulib-r750' :src='info.headimg' />
|
||
<div class="pt15 pb15 text-nowrap font-22 color-ddd">
|
||
<span class="color-fff">{{info.nickname}}·</span>
|
||
<span class="color-ddd">{{info.group}}</span>
|
||
</div>
|
||
<a class="block absolute right-0 mr150 box-middle bg-fff imgsize-32X32 ulib-r750" @click="logout">
|
||
<i class="absolute box-center-middle iconfont font-24 icon-tuichu1"></i>
|
||
</a>
|
||
<span class="absolute right-0 box-middle mr128 font-28 color-fff">|</span>
|
||
<a class="block absolute right-0 mr80 box-middle bg-fff imgsize-32X32 ulib-r750" href="/h5/market/sylive2/biz">
|
||
<i class="absolute box-center-middle iconfont font-24 icon-qizi"></i>
|
||
</a>
|
||
<a class="absolute right-0 box-middle mr15 font-28 color-fff" href="/h5/market/sylive2/biz">活动</a>
|
||
</div>
|
||
</div>
|
||
<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 ulib-rt20' :src='info.theme'/>
|
||
</a>
|
||
|
||
<div id="main" class="inner30">
|
||
<?if($info['aId']!=11){?>
|
||
<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 bts-4-333 bbs-4-ff9d47 bg-fff overflowhidden ulib-r20">
|
||
<div class="relative bbs-1-f4f4f4 last-b-none fn-flex text-center" v-if="role==2 && biz_id>0">
|
||
<a class="fn-flex-item pt40 pb40" v-for="item in h_lists" >
|
||
<div class="font-32">{{item.num}}</div>
|
||
<div class="mt10 font-22 color-666">{{item.title}}</div>
|
||
</a>
|
||
</div>
|
||
<div class="relative fn-flex fn-flex-wrap text-center" v-else>
|
||
<a class="wp33 pt40 pb40 bbs-1-f4f4f4" v-for="item in h_lists">
|
||
<div class="font-32">{{item.num}}</div>
|
||
<div class="mt10 font-22 color-666">{{item.title}}</div>
|
||
</a>
|
||
</div>
|
||
<div class="relative bg-f6 bbs-1-fff last-b-none fn-flex text-center" v-for="item in sub_lists">
|
||
<div class="absolute top-0 box-center cell-tt pl5 pr5 font-22 color-fff">{{item.title}}</div>
|
||
<a class="fn-flex-item pt40 pb40" v-for="val in item.lists" :href="val.url">
|
||
<div class="font-32 color-ff9d47">{{val.num}}</div>
|
||
<div class="mt10 font-22 color-666">
|
||
{{val.title}}
|
||
<i v-if="val.url" class="iconfont icon-gengduo"></i>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt30 relative bg-fff inner40 pr30 overflowhidden box-shadow-lightGray ulib-r20 z-index-0" v-if="lineChart && lineChart.title">
|
||
<div class="pb20 fn-clear">
|
||
<b class="fn-fl font-40 text-italic" v-html="lineChart.title"></b>
|
||
</div>
|
||
<div style="overflow-x:auto;"><div id="beginChart" class="height-710" :style="'width:'+ [lineChart.xAxisData.length>5?lineChart.xAxisData.length*20+'%':'100%']"></div></div>
|
||
<div class="mt15 text-center font-22 color-999" v-if="lineChart.xAxisData.length>5">向右拖动图表查看更多</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- end 预热阶段-->
|
||
<!--直播阶段-->
|
||
<div v-if="tabid==2">
|
||
|
||
<div class="mt30 bg-fff inner20 overflowhidden text-center font-24 color-666 ulib-r20">直播结束后6小时同步数据</div>
|
||
|
||
<div class="mt30 bts-4-333 bbs-4-ff9d47 bg-fff overflowhidden ulib-r20">
|
||
<div class="relative fn-flex fn-flex-wrap text-center">
|
||
<a class="wp33 pt40 pb40 bbs-1-f4f4f4" v-for="item in h_lists" :href="item.url">
|
||
<div class="font-32">{{item.num}}</div>
|
||
<div class="mt10 font-22 color-666">{{item.title}}<i v-if="item.url" class="iconfont icon-gengduo"></i></div>
|
||
</a>
|
||
</div>
|
||
<div class="relative bg-f6 bbs-1-fff last-b-none fn-flex text-center" v-for="item in sub_lists">
|
||
<div class="absolute top-0 box-center cell-tt pl5 pr5 font-22 color-fff">{{item.title}}</div>
|
||
<a class="fn-flex-item pt40 pb40" v-for="val in item.lists" :href="val.url">
|
||
<div class="font-32 color-ff9d47">{{val.num}}</div>
|
||
<div class="mt10 font-22 color-666">
|
||
{{val.title}}
|
||
<i v-if="val.url" class="iconfont icon-gengduo"></i>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="mt30 relative bg-fff inner40 pr30 overflowhidden box-shadow-lightGray ulib-r20 z-index-0" v-if="lineChart && lineChart.title">
|
||
<div class="pb20 fn-clear">
|
||
<b class="fn-fl font-40 text-italic" v-html="lineChart.title"></b>
|
||
</div>
|
||
<div style="overflow-x:auto;"><div id="liveChart" class="height-710" :style="'width:'+ [lineChart.xAxisData.length>5?lineChart.xAxisData.length*20+'%':'100%']"></div></div>
|
||
<div class="mt15 text-center font-22 color-999" v-if="lineChart.xAxisData.length>5">向右拖动图表查看更多</div>
|
||
</div>
|
||
|
||
</div>
|
||
<!-- end 直播阶段-->
|
||
</div>
|
||
</div>
|
||
|
||
<!--列表-->
|
||
<div class="inner30 pt10" v-if="role == '1'">
|
||
<div>
|
||
<a class="block relative mb30 bg-f6 inner30 ulib-r20 box-shadow-lightGray" :href="[item.url ? item.url:'javascript:;']" v-for="(item,index) in list">
|
||
<div class="text-nowrap wp60 font-32">{{item.title}}</div>
|
||
<div class="absolute right-0 box-middle font-28">
|
||
<span>{{item.note}}</span>
|
||
<span class="pl15 pr15 color-ff9d47">{{item.num}}</span>
|
||
<i class="iconfont icon-gengduo color-666" v-if="item.url"></i>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<mugen-scroll :handler="fetchData" :should-handle="!loading" scroll-container="app">
|
||
<div class="pt100 pb100 text-center color-ccc" v-if="isNoData"><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>10">我们是有底线的</div>
|
||
</mugen-scroll>
|
||
</div>
|
||
|
||
<!--实时动态-->
|
||
<div class="ml30 mr30 mb20 relative bg-fff inner40 pr30 overflowhidden box-shadow-lightGray ulib-r20" v-else-if="role == '2'">
|
||
<div class="pb20 fn-clear">
|
||
<b class="fn-fl font-40 text-italic" v-html="dynamic.title"></b>
|
||
</div>
|
||
<div class="font-28" v-for="(item,index) in dynamic.list">
|
||
<div class="pt20 pb20 fn-clear">
|
||
<div class="fn-fl wp60 text-nowrap">
|
||
<span class="text-middle">{{item.nickname}}</span>
|
||
<span class="text-middle color-666">{{item.action}}</span>
|
||
</div>
|
||
<div class="fn-fr">{{item.time}}</div>
|
||
</div>
|
||
</div>
|
||
<mugen-scroll :handler="fetchData" :should-handle="!loading" scroll-container="app">
|
||
<div class="pt100 pb100 text-center color-ccc" v-if="isNoData"><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&&dynamic.list.length>10">我们是有底线的</div>
|
||
</mugen-scroll>
|
||
</div>
|
||
<!-- end 实时动态-->
|
||
<!--
|
||
<div class="fixed left-0 bottom-0 right-0 pt20 pb30 bg-fff-op95 text-center font-22 fn-flex" >
|
||
<a class="fn-flex-item" href="/h5/market/sylive2/stic">
|
||
<img class="imgsize-50X50" src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-home-ac.png" alt="#">
|
||
<div class="space-nowrap con-min60 font-22">首页</div>
|
||
</a>
|
||
<a class="fn-flex-item" href="<?=$act_url?>">
|
||
<img class="imgsize-50X50" src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-activity.png" alt="#">
|
||
<div class="space-nowrap con-min60 font-22">活动</div>
|
||
</a>
|
||
<a class="fn-flex-item" href="/h5/market/sylive2/stic/ranking">
|
||
<img class="imgsize-50X50" src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-ranking.png" alt="#">
|
||
<div class="space-nowrap con-min60 font-22">排行</div>
|
||
</a>
|
||
</div>
|
||
-->
|
||
<?$this->load->view('h5/market/sylive2/nav_biz')?>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let hostUrl = ''
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
tabFixed:false,
|
||
tabIndex:0,
|
||
tabid:'<?=$info['tab']?>',//1预热阶段 /2直播阶段
|
||
info:'',
|
||
load: false,
|
||
h_lists : [],
|
||
sub_lists:[],
|
||
// begin:{
|
||
// cell1:[],
|
||
// cell2:[],
|
||
// },
|
||
live:{
|
||
cell1:[],
|
||
cell2:[],
|
||
cell3:[],
|
||
},
|
||
|
||
loading: false,
|
||
isDataEnd: false,
|
||
isNoData: false,
|
||
page: 1, //页数
|
||
size: 20, //每页取多少个数据
|
||
list:[],
|
||
|
||
role:'<?=$info['is_biz'] ? 2 : 1?>', //用户角色 2门店和顾问 1其它角色
|
||
biz_id : <?=$info['biz_id'] ? $info['biz_id'] : 0?>,
|
||
groupsId: '<?=$info['groupsId']?>',
|
||
dynamic:{
|
||
title:'',
|
||
list:[],
|
||
},
|
||
lineChart:{
|
||
// title:'',
|
||
// legendData:['观看数', '订单数'],
|
||
// xAxisData:['9:00-10:00', '10:00-11:00', '11:00-12:00', '12:00-13:00'],
|
||
// seriesData:[
|
||
// {
|
||
// name: '观看数',
|
||
// type: 'line',
|
||
// data: [120, 90, 230, 210]
|
||
// },
|
||
// {
|
||
// name: '订单数',
|
||
// type: 'line',
|
||
// data: [220, 18, 191, 234]
|
||
// },
|
||
// ]
|
||
}
|
||
},
|
||
created(){
|
||
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
mounted() {
|
||
window.addEventListener('scroll', this.handleScroll, true)
|
||
this.getInfo()
|
||
if(this.tabid == 2){
|
||
this.tabIndex = 1
|
||
this.getLive()
|
||
}else{
|
||
this.getBegin()
|
||
}
|
||
// this.getBegin()
|
||
if (window.history && window.history.pushState) {
|
||
$(window).on('popstate', function () {
|
||
// 当点击浏览器的 后退和前进按钮 时才会被触发，
|
||
window.history.pushState('forward', null, '');
|
||
window.history.forward(1);
|
||
});
|
||
}
|
||
window.history.pushState('forward', null, ''); //在IE中必须得有这两行
|
||
window.history.forward(1);
|
||
},
|
||
beforeDestroy() {
|
||
|
||
},
|
||
//离开页面时
|
||
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 = {
|
||
nickname:"<?=$info['nickname']?>",
|
||
headimg:"<?=$info['headimg']?>",
|
||
group:'<?=$info['group_name']?>',
|
||
theme:'<?=$info['banner']?>',
|
||
tab:[
|
||
{
|
||
id:'1',
|
||
title:'预热阶段',
|
||
},
|
||
{
|
||
id:'2',
|
||
title:'直播阶段',
|
||
},
|
||
],
|
||
}
|
||
},
|
||
|
||
//tab切换
|
||
changeTab(id,index){
|
||
if(id != this.tabid&&!this.load){
|
||
if(this.tabFixed){
|
||
let mainoffsetTop = document.querySelector('#main').offsetTop
|
||
$('html,body').animate({scrollTop: mainoffsetTop+5},500);
|
||
}
|
||
$('#liveChart').hide()
|
||
$('#beginChart').hide()
|
||
this.tabid = id
|
||
this.tabIndex = index
|
||
this.isNoData = false
|
||
this.isDataEnd = false
|
||
this.dynamic.list = []
|
||
this.page = 1
|
||
this.h_lists = []
|
||
this.sub_lists = []
|
||
this.list = []
|
||
this.lineChart = {}
|
||
if(this.tabid == 1){
|
||
this.getBegin()
|
||
}else if(this.tabid == 2){
|
||
this.getLive()
|
||
}
|
||
if(this.role == '1'){
|
||
this.getGroupList()
|
||
}else if (this.role == '2'){
|
||
this.getDynamicList() //动态
|
||
}
|
||
}
|
||
},
|
||
|
||
//预热阶段数据
|
||
getBegin(){
|
||
let that=this;
|
||
$.get('/h5/market/sylive2/stic/lists_ready',{'groupsId':that.groupsId},function (result) {
|
||
that.h_lists = result.data.h_lists
|
||
that.sub_lists = result.data.sub_lists
|
||
},'json')
|
||
this.lineData()
|
||
},
|
||
|
||
//拉取数据
|
||
fetchData: function() {
|
||
if(this.role == '1'){
|
||
//门店列表
|
||
this.getGroupList()
|
||
}else if(this.role == '2'){
|
||
//动态
|
||
this.getDynamicList()
|
||
}
|
||
},
|
||
|
||
//直播阶段数据
|
||
getLive(){
|
||
let that=this;
|
||
$.get('/h5/market/sylive2/stic/lists_live',{'groupsId':that.groupsId},function (result) {
|
||
that.h_lists = result.data.h_lists
|
||
that.sub_lists = result.data.sub_lists
|
||
},'json')
|
||
this.lineData()
|
||
},
|
||
|
||
//获取大区列表
|
||
getGroupList(){
|
||
let that=this;
|
||
if (!that.isNoData && !that.isDataEnd && !that.loading) {
|
||
that.loading = true;
|
||
//请求接口
|
||
$.get('/h5/market/sylive2/stic/group_lists',{'page':that.page,'groupsId':that.groupsId},function (res){
|
||
that.loading = false;
|
||
that.page = that.page + 1;
|
||
that.list = that.list.concat(res.data.list);
|
||
if (res.data.total == 0) {
|
||
that.isNoData = true;
|
||
} else if (that.list.length == res.data.total) {
|
||
that.isDataEnd = true;
|
||
}
|
||
},'json');
|
||
}
|
||
},
|
||
|
||
//获取实时动态
|
||
getDynamicList(){
|
||
let that=this;
|
||
if (!that.isNoData && !that.isDataEnd && !that.loading) {
|
||
that.loading = true;
|
||
//请求接口
|
||
$.get('/h5/market/sylive2/stic/event',{'page':that.page,'type':that.tabid},function (res){
|
||
that.loading = false;
|
||
that.page = that.page + 1;
|
||
that.dynamic.title = '实时<span class="color-00a2ff">动态</span>';
|
||
that.dynamic.list = that.dynamic.list.concat(res.data.lists);
|
||
if (res.data.total == 0) {
|
||
that.isNoData = true;
|
||
} else if (that.dynamic.list.length == res.data.total) {
|
||
that.isDataEnd = true;
|
||
}
|
||
},'json');
|
||
}
|
||
},
|
||
logout() {
|
||
$.get('/h5/market/sylive2/login/logout', function (response) {
|
||
if (response.code == 200) {
|
||
mDialog.msg({
|
||
duration: 250,
|
||
pause: 2000,
|
||
content: response.msg,
|
||
onClose: function () {
|
||
window.location = '/h5/market/sylive2/login'
|
||
}
|
||
});
|
||
} else {
|
||
mDialog.msg({
|
||
duration: 250,
|
||
pause: 2000,
|
||
content: response.msg
|
||
});
|
||
}
|
||
}, 'json')
|
||
},
|
||
lineData(){
|
||
if(!this.biz_id){
|
||
return '';
|
||
}
|
||
var that = this
|
||
$.get('/h5/market/sylive2/stic/ajax_line',{'type':that.tabid,'biz_id':that.biz_id}, function (response) {
|
||
console.dir(response)
|
||
that.lineChart = response.data
|
||
var dom;
|
||
setTimeout(function () {
|
||
if(that.tabid==2){
|
||
$('#liveChart').show()
|
||
dom = document.getElementById('liveChart');
|
||
}else{
|
||
$('#beginChart').show()
|
||
dom = document.getElementById('beginChart');
|
||
}
|
||
let myChart = echarts.init(dom, null, {
|
||
renderer: 'canvas',
|
||
useDirtyRect: false
|
||
});
|
||
let option;
|
||
option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
x:'left',
|
||
top: 'bottom',
|
||
data: that.lineChart.legendData,
|
||
},
|
||
grid: {
|
||
top: '4%',
|
||
left: '2%',
|
||
right: '5%',
|
||
bottom: '11%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: that.lineChart.xAxisData,
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: that.lineChart.seriesData,
|
||
};
|
||
if (option && typeof option === 'object') {
|
||
myChart.setOption(option);
|
||
}
|
||
window.addEventListener('resize', myChart.resize);
|
||
}, 100);
|
||
},'json')
|
||
|
||
},
|
||
//跳转活动页
|
||
goAct(){
|
||
window.location.replace('<?=$act_url?>')
|
||
}
|
||
},
|
||
})
|
||
</script>
|
||
<?= $this->load->view('h5/market/sylive2/hidden_wx_share') ?>
|
||
</body>
|