xiaoyu
233 lines
11 KiB
PHP
233 lines
11 KiB
PHP
<body class="bg-f6">
|
|
<div id="app" ref="app">
|
|
<div class="container relative bg-no-repeat bg-size-fullwidth bg-pos-top"
|
|
style="background-image:url(https://qs.liche.cn/web/images/project/H5-ShiYu/theme-bg.png?v=221008)">
|
|
<div class="pt30 pb30">
|
|
<div class="pl30 pr30">
|
|
<img class="text-middle imgsize-60X60 ulib-r750" :src="info.headimg" alt="#"/>
|
|
<span class="text-middle font-28 color-fff">{{info.nickname}}</span>
|
|
<a class="fn-fr font-22 bg-fff ulib-r750 pt5 pb5 pl15 pr15" href="javascript:void(0);"
|
|
@click="logout()"><i class="iconfont icon-tuichu text-middle"></i><span
|
|
class="text-middle ml10">退出</span></a>
|
|
</div>
|
|
<div class="fn-flex mt40 text-center color-fff">
|
|
<div class="fn-flex-item" v-for="item in info.count">
|
|
<div class="font-40">{{item.num}}</div>
|
|
<div class="mt15 font-28">
|
|
<i :class="'iconfont font-24 text-middle ' + item.icon"></i><span class="ml5 text-middle">{{item.title}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="main" class="bg-fff mt10 ml30 mr30 inner30 ulib-r20 box-shadow-darkGray" style="min-height:75vh;">
|
|
<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 glider-'+tabIndex"></div>
|
|
</div>
|
|
<div class="pt30">
|
|
<!--大区列表-->
|
|
<div v-if="tabid==1">
|
|
<a class="block relative mb30 bg-f9 pt20 pb20 pl30 pr200 ulib-r20" v-for="(item,index) in list"
|
|
:href="item.url">
|
|
<div class="font-32">{{item.title}}</div>
|
|
<div class="mt20 font-22 color-999">
|
|
<span><i class="iconfont icon-mendian text-middle"></i><span
|
|
class="text-middle ml10 font-22">团员</span><span
|
|
class="text-middle ml10 font-22">{{item.storenum}}</span></span>
|
|
<span class="ml20"><i class="iconfont icon-huodong text-middle"></i><span
|
|
class="text-middle ml10 font-22">活动</span><span
|
|
class="text-middle ml10 font-22">{{item.activitynum}}</span></span>
|
|
</div>
|
|
<div class="absolute right-0 box-middle pr30">
|
|
<span :class="'inline-block pl10 pr10 line-height-15 text-middle ulib-r750 font-22 color-fff '+item.state.class"
|
|
v-if="item.state.title">{{item.state.title}}</span>
|
|
<i class="text-middle iconfont icon-gengduo text-middle font-28 color-666"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!--end大区列表-->
|
|
<!--活动列表列表-->
|
|
<div v-if="tabid==2">
|
|
<div class="relative mb30 bg-f9 pt20 pb20 pl30 pr80 ulib-r20" v-for="(item,index) in list">
|
|
<div class="space-nowrap">
|
|
<a class="inline-block actitle font-32" :href="item.url">{{item.title}}</a>
|
|
<a class="inline-block vertical10" :href="item.stat_url">
|
|
<div class="inline-block pl20 pr20 line-height-15 text-middle ulib-r750 font-22 color-fff bg-fe9538">
|
|
<i class="iconfont icon-shuju text-middle"></i><span
|
|
class="text-middle ml5">数据</span></div>
|
|
</a>
|
|
</div>
|
|
<a class="block mt10 font-22 color-999" :href="item.url">
|
|
{{item.time}}
|
|
<i class="absolute right-0 mr20 box-middle iconfont icon-gengduo font-26 color-666"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!--end活动列表-->
|
|
</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>10">我们是有底线的
|
|
</div>
|
|
</mugen-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let hostUrl = ''
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
tabFixed: false,
|
|
tabIndex: 0,
|
|
tabid: '1',//1大区列表 /2活动列表
|
|
info: '',//基础信息
|
|
loading: false,
|
|
isDataEnd: false,
|
|
isNoData: false,
|
|
page: 1, //页数
|
|
size: 20, //每页取多少个数据
|
|
list: [],
|
|
},
|
|
created() {
|
|
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
window.addEventListener('scroll', this.handleScroll, true)
|
|
this.getInfo()
|
|
},
|
|
beforeDestroy() {
|
|
|
|
},
|
|
//离开页面时
|
|
destroyed() {
|
|
window.removeEventListener('scroll', this.handleScroll)
|
|
},
|
|
methods: {
|
|
|
|
//获取基础信息
|
|
getInfo() {
|
|
var that = this;
|
|
that.info = <?=json_encode($info, 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
|
|
this.isDataEnd = false
|
|
this.isNoData = false
|
|
this.page = 1
|
|
this.list = []
|
|
if (this.tabid == 1) {
|
|
this.getRegionList()
|
|
} else if (this.tabid == 2) {
|
|
this.getActivityList()
|
|
}
|
|
}
|
|
},
|
|
|
|
//判断导航是否需要吸顶
|
|
handleScroll() {
|
|
let scrollTop = document.querySelector('#app').scrollTop
|
|
let mainoffsetTop = document.querySelector('#main').offsetTop
|
|
if (scrollTop > mainoffsetTop) {
|
|
this.tabFixed = true
|
|
} else {
|
|
this.tabFixed = false
|
|
}
|
|
},
|
|
|
|
//拉取数据
|
|
fetchData: function () {
|
|
if (this.tabid == 1) {
|
|
this.getRegionList()
|
|
} else if (this.tabid == 2) {
|
|
this.getActivityList()
|
|
}
|
|
},
|
|
|
|
//获取大区列表
|
|
getRegionList() {
|
|
let that = this;
|
|
if (!that.isNoData && !that.isDataEnd && !that.loading) {
|
|
that.loading = true;
|
|
$.get('/h5/market/sylive/team/team_list', {'page': that.page}, function (result) {
|
|
that.loading = false;
|
|
that.page = that.page + 1;
|
|
that.list = that.list.concat(result.data.list);
|
|
if (result.data.total == 0) {
|
|
that.isNoData = true;
|
|
} else if (that.list.length == result.data.total) {
|
|
that.isDataEnd = true;
|
|
}
|
|
}, 'json')
|
|
}
|
|
},
|
|
//获取活动列表
|
|
getActivityList() {
|
|
let that = this;
|
|
if (!that.isNoData && !that.isDataEnd && !that.loading) {
|
|
that.loading = true;
|
|
//请求接口
|
|
$.get('/h5/market/sylive/team/act_list', {'page': that.page}, function (result) {
|
|
that.loading = false;
|
|
that.page = that.page + 1;
|
|
that.list = that.list.concat(result.data.list);
|
|
if (result.data.total == 0) {
|
|
that.isNoData = true;
|
|
} else if (that.list.length == result.data.total) {
|
|
that.isDataEnd = true;
|
|
}
|
|
}, 'json')
|
|
}
|
|
},
|
|
logout() {
|
|
$.get('/h5/market/sylive/login/logout', function (response) {
|
|
if (response.code == 200) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: response.msg,
|
|
onClose: function () {
|
|
window.location = '/h5/market/sylive/login'
|
|
}
|
|
});
|
|
} else {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: response.msg
|
|
});
|
|
}
|
|
}, 'json')
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
<?= $this->load->view('h5/market/sylive/hidden_wx_share') ?>
|
|
</body>
|