martial-arts/pages/tabbar/video/video.vue

<template>
	<view>
		<status-container :ifReturn="false" titlet="视频列表">
			<view slot="content" style="margin-top: -20rpx;">
				<view class="posi-sticky" :style="{top:newtop+'px'}">
					<view class="pad-sx26 pad-zy20" style="box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, 0.1);">
						<view class="radius40 pad-sx2 disjbac pad-zy20" style="background-color: #fff6f5;border: 2rpx solid #ece6e6;">
							<input v-model="keyword" @confirm="getVideoList" type="text" class="fon24 width100 pad-sx6" placeholder="关键字搜索" placeholder-style="color:#aaa4a3">
							<view class="pad-sx6 pad-zy10 disjcac" @tap="getVideoList">
								<image class="flexs" src="/static/tabbar/icon-search.png" mode="" style="width: 28rpx;height: 28rpx;" lazy-load></image>
							</view>
						</view>
					</view>
				</view>
				<view class="pad-zy20">
					<view class="radius8 bacf pad10 boxshow1 mar-s30" v-for="(item,index) in dataList" :key="index">
						<view class="posir disjcac">
							<image :src="item.cover" style="height: 388rpx;" mode="aspectFill" class="width100 animated fadeIn" lazy-load></image>
							<image @tap="palyVideo(index)" class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
						</view>
						<view class="pad-zy10">
							<view class="fon24 pad-sx16 clips2" style="color: #262626;">{{item.title}}</view>
							<view class="disjbac fon20">
								<view class="disac" style="color: #aaaaaa;">
									<image class="mar-y10" src="/static/tabbar/icon-look.png" mode="" style="width: 33rpx;height: 25rpx;" lazy-load></image>{{item.view}}
								</view>
								<view class="" style="color: #7f7f7f;">{{item.created_at.slice(0,10).split('-').join('.')}}</view>
							</view>
						</view>
					</view>
					<view class="" v-if="noMore">
						<pitera textStr="上滑加载更多/到底了~~" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
					</view>
				</view>
			</view>
		</status-container>
		<!-- 底部tab -->
		<foot-tab current="3"></foot-tab> 
	</view>
</template>

<script>
	// 底部组件
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	import pitera from '@/components/nothing/pitera.vue';
	import {reportRecord} from '@/jsFile/public-api.js';
	export default {
		components:{
			'foot-tab' :footTab,
			pitera
		},
		data() {
			return {
				newtop:uni.getSystemInfoSync().statusBarHeight + 42,
				dataList:[],
				page:1,
				size:20,
				total:0,
				keyword:'',
				noMore:false
			}
		},
		onReachBottom() {
			if(this.total!=this.dataList.length){
				this.page++;
				this.getVideoList();
			}
		},
		onLoad() {
			this.getVideoList();
		},
		methods: {
			// 获取视频列表
			getVideoList(){
				let params = {
					keyword:this.keyword,
					page:this.page,
					size:this.size
				}
				this.$requst.post('/api/spu/video',params).then(res=>{
					if(res.code==0){
						this.total = res.data.total;
						if(this.page==1){this.dataList=[];}
						// 设置视频列表
						this.dataList = [...this.dataList,...res.data.list];
						if(this.total==this.dataList.length && this.page!=1){
							this.noMore = true;
						}
					}
				})
			},
			// 播放视频
			palyVideo(index){
				if(this.dataList[index].type=="video_number"){
					// #ifdef MP-WEIXIN
					wx.openChannelsActivity({
						finderUserName:this.dataList[index].video_number,
						feedId:this.dataList[index].video_id,
						success:(res)=>{
							reportRecord({id:this.dataList[index].id}).then(result=>{
								if(result.code==0){
									this.dataList[index].view++;
								}
							})
						},fail:()=>{
							// this.$toolAll.tools.showToast('视频已丢失或已删除')
						}
					})
					// #endif
				} else {
					let newArr = [];
					newArr.push(this.dataList[index])
					uni.setStorageSync('videoList',newArr);
					uni.navigateTo({
						url:`/pagesB/play-video/play-video?current=${index}`
					})
					reportRecord({id:this.dataList[index].id}).then(result=>{
						if(result.code==0){
							this.dataList[index].view++;
						}
					})
				}
			},
		}
	}
</script>

<style>

</style>