You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
2.8 KiB
131 lines
2.8 KiB
<template>
|
|
<view>
|
|
<topnav title="视频列表" @tohome='tohome'></topnav>
|
|
<view class="content">
|
|
<view class="videoBox listBox">
|
|
<block v-for="(item,index) in videos">
|
|
<navigator :url="'../videoinfo/videoinfo?id='+item.id">
|
|
<view class="listBoxItem">
|
|
<view class="listBoxItemLeft">
|
|
<view class="listBoxItemLeftVideoBox">
|
|
<video :src="host+item.video" :poster="host+item.poster"
|
|
style="width:100%;height:100%;" object-fit="fill"></video>
|
|
</view>
|
|
</view>
|
|
<view class="listBoxItemRight">
|
|
<text class="listBoxItemRightText">{{item.title}}</text>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
<view class="listBoxline"></view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var util = require("../../../../utils/util.js");
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
videos: [],
|
|
currentPage: 1,
|
|
host: ""
|
|
}
|
|
},
|
|
onLoad: function() {
|
|
this.loadPage(1);
|
|
this.host = util.HOST;
|
|
},
|
|
onReachBottom: function(e) {
|
|
this.loadPage(this.currentPage + 1);
|
|
},
|
|
onPullDownRefresh: function(e) {
|
|
this.loadPage(1);
|
|
},
|
|
methods: {
|
|
tohome:function(){
|
|
uni.navigateTo({
|
|
url:"../../../../pages/index/index"
|
|
})
|
|
},
|
|
loadPage: function(page) {
|
|
var that = this;
|
|
util.request({
|
|
bindThis: that,
|
|
api: 'manager/get-videos',
|
|
customLoading: false,
|
|
data: {
|
|
page: page,
|
|
page_size: 10
|
|
},
|
|
utilSuccess: function(r) {
|
|
var res = r.data;
|
|
uni.stopPullDownRefresh(); // 服务器总条数 < 每页条数, 会将第一页的条数重新返回
|
|
console.log(res);
|
|
var hasNoMore = that.videos.length < 10 && page > 1;
|
|
if (hasNoMore || res.length == 0 && page > 1) {
|
|
// 已加载到最后一页
|
|
uni.showToast({
|
|
title: '已加载到最后一页',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
var videos = that.videos;
|
|
var _res = [];
|
|
|
|
if (page == 1) {
|
|
videos = res;
|
|
} else {
|
|
videos.push(...res);
|
|
}
|
|
|
|
that.currentPage = page;
|
|
that.videos = videos;
|
|
},
|
|
utilFail: function(res) {
|
|
uni.stopPullDownRefresh();
|
|
|
|
if (page == 1) {
|
|
|
|
that.currentPage = page;
|
|
that.videos = [];
|
|
}
|
|
|
|
util.alert(res);
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
padding-top: 160rpx;
|
|
}
|
|
|
|
.listBoxItemLeftVideoBox {
|
|
width: 240rpx;
|
|
height: 133rpx;
|
|
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
.listBoxItemRightText {
|
|
text-align: left;
|
|
}
|
|
|
|
.listBoxItem{
|
|
justify-content: initial !important;
|
|
align-items: initial !important;
|
|
}
|
|
.listBoxItemRight{margin-left: 20rpx;
|
|
align-items: initial !important;}
|
|
</style>
|