132 lines
3.2 KiB
Vue
132 lines
3.2 KiB
Vue
<template>
|
|
<view id="video-list">
|
|
<!-- <scroll-view scroll-y class="right-box"> -->
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
|
|
<view class="page-view">
|
|
<u-collapse :accordion="false">
|
|
<u-collapse-item v-for="(item, index) in dataList"
|
|
:key="item.id" :open="true">
|
|
<template slot="title">
|
|
<view class="box-title">
|
|
<text>{{item.name}}</text>
|
|
<text>{{item.children?`(${item.children.length})`:''}}</text>
|
|
</view>
|
|
</template>
|
|
<view class="collapse-item">
|
|
<view class="box-item" v-for="(val,i) in item.children" :key="val.id"
|
|
@click="goDetail(val)">
|
|
{{val.label}}
|
|
</view>
|
|
</view>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</view>
|
|
</mescroll-body>
|
|
<!-- </scroll-view> -->
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
|
|
|
|
let liveList = [{
|
|
name:'区域1',
|
|
children:[
|
|
{
|
|
name:'监控1',
|
|
url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
|
|
},
|
|
{
|
|
name:'监控2',
|
|
url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
|
|
}
|
|
]
|
|
},{
|
|
name:'区域2',
|
|
children:[
|
|
{
|
|
name:'监控3',
|
|
url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
|
|
},
|
|
{
|
|
name:'监控4',
|
|
url:'https://gbs.gkiiot.com:8082/hdl/34020000001110000000/34020000001320000047.flv'
|
|
}
|
|
]
|
|
}]
|
|
export default{
|
|
mixins: [MescrollMixin],
|
|
data(){
|
|
return {
|
|
upOption:{
|
|
noMoreSize: 4,
|
|
textNoMore: '---- 已经到底啦 ----',
|
|
empty:{
|
|
tip: '~ 搜索无数据 ~' // 提示
|
|
}
|
|
},
|
|
dataList:[],
|
|
}
|
|
},
|
|
onLoad() {
|
|
// this.getVideoList();
|
|
},
|
|
methods:{
|
|
upCallback(page){
|
|
let params = {
|
|
page: page.num,
|
|
pageSize: page.size,
|
|
}
|
|
this.$api.videoApi.getVideoList(params).then(res => {
|
|
console.log("getVideoList",res);
|
|
if(res.code === 0){
|
|
let curPageData = res.data && res.data.list;
|
|
let curPageLen = curPageData && curPageData.length || 0;
|
|
let totalSize = res.data.totalCount;
|
|
this.$nextTick(()=>{
|
|
// 隐藏下拉刷新和上拉加载的状态;
|
|
this.mescroll.endBySize(curPageLen, totalSize);
|
|
})
|
|
//设置列表数据
|
|
if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
|
|
this.dataList = curPageLen > 0 && this.dataList.concat(curPageData); //追加新数据
|
|
this.total = totalSize;
|
|
}else{
|
|
this.$u.toast(res.msg);
|
|
this.mescroll.endErr();
|
|
}
|
|
|
|
}, error => {
|
|
this.$u.toast('服务器开小差了呢，请您稍后再试')
|
|
})
|
|
},
|
|
goDetail(item){
|
|
console.log("跳转详情",item);
|
|
let obj = {
|
|
url:encodeURIComponent(item.url),
|
|
name:item.label
|
|
}
|
|
uni.navigateTo({
|
|
url:'./video-detail?obj='+encodeURIComponent(JSON.stringify(item))
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.box-title{
|
|
padding: 10rpx 24rpx;
|
|
}
|
|
/deep/ .u-collapse-head{
|
|
border: 1px solid #f5f5f5;
|
|
}
|
|
/deep/ .u-collapse-content{
|
|
// padding: 20rpx;
|
|
}
|
|
.box-item{
|
|
padding: 20rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
</style> |