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

<template>
	<view>
		<status-container :ifReturn="false" :titlet="pageTitle">
			<view slot="content" style="margin-top: -20rpx;" v-if="loading && parseInt(show_video)!==0">
				<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 v-if="item.src.includes('.mp4')" @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>
					<pitera :textStr="`${noMore && total > dataList.length?'上滑加载更多':'到底了'}~~`" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
				</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,
				pageTitle:'',
				dataList:[],
				page:1,
				size:20,
				total:0,
				keyword:'',
				noMore:false,
				loading:false,
				show_video:'', //是否隐藏视频
			}
		},
		onReachBottom() {
			if(this.total!=this.dataList.length){
				this.page++;
				this.getVideoList();
			}
		},
		onLoad() {
			this.getVideoList();
		},
		onShow() {
			// 判断视频是否隐藏
			this.isVideoEv();
		},
		methods: {
			// 判断视频是否隐藏
			isVideoEv(){
				this.$requst.get('/api/index/base-config').then(res=>{
					if(res.code==0){
						this.show_video = res.data.show_video;
						if(parseInt(this.show_video)!==0){
							this.pageTitle = '视频列表'
						}else{
							this.pageTitle = '待定'
						}
					}
				})
			},
			// 获取视频列表
			getVideoList(){
				this.loading = false;
				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;
						}
						this.loading = true;
					}
				})
			},
			// 播放视频
			palyVideo(index){
				if(this.$toolAll.tools.judgeAuth()) {
					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>