gree_leran/components/videoList/VideoList.vue

<template>
	<view class="content">
		<view class="swiper-item">
			<VideoView @ClickCollection="ClickCollection"  @ClickLike="ClickLike" style="margin-bottom: 20px;" @onplay="getVideo" :VideoId="index" :key="index"
				v-for="(item,index) in videoList" :Videos="item"></VideoView>
		</view>
	</view>
	
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import VideoView from "@/components/VideoView/VideoView.vue";
import potoInfo from "@/components/photosInfo.vue";
import { getVideosList } from "@/apis/videos.js";
import {resDataToList} from './ut/dataTo.js'
//点赞列表
import {getLikesList,addLike} from '@/apis/likes.js'
//收藏列表
import {getCollectionsList,addCollections} from "@/apis/collections.js"

// Define reactive state
const status = ref("loadmore");
const list = ref([
  { name: '视频' },
  { name: '图片' }
]);
const current = ref(0);
const imageList = ref([]);
const swpper = reactive({
  index: 0
});
const page = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0
});
const videoList = ref([]);

let videoContext = ref(null);
const getData = async ()=>{
	let res=await getVideosList();
	let likre=await getLikesList();
	let cols=await getCollectionsList();	
	if(res.code==200){
		res=res.data;
		likre=likre.code==200?likre.data.videosLikesList:null;
		cols=cols.code==200?cols.data.videosCollectionsList:null
		console.log("点赞列表",likre,cols);
		let a=resDataToList(res,likre,cols);
		videoList.value=a;
	}
	console.log("视频列表",videoList.value);
}
//  'ClickCollection', 'ClickLike'
const ClickLike=(id,is)=>{
	let bo="0";
	if(is){
		bo="1";
	}
	console.log("接受的id",id)
	addLike({
		contentType:1,
		contentId:id,
		extField1:bo,
	})
}
const ClickCollection=(id,is)=>{
	let bo="0";
	if(is){
		bo="1";
	}
	addCollections({
		contentType:1,
		contentId:id,
		extField1:bo,
	})
}
// Methods
const getVideo = (e) => {
  console.log("视频",e);
  if (videoContext.value) {
    console.log("test");
    videoContext.value.pause();
  }
  videoContext.value = e.videoContext;
};
const ISstatusInit = () => {
  switch (swpper.index) {
    case 0:
      getVideoList();
      break;
    case 1:
      getImageList();
      break;
  }
};

const onReachLoad = () => {
  status.value = 'loading';
  page.pageSize += 10;
  ISstatusInit();
  console.log(swpper.index);
  if (list.value.length >= page.total) {
    console.log(list.value.length);
    status.value = 'nomore';
  } else {
    status.value = "loadmore";
  }
};

const getVideoList = async () => {
};

const change = (e) => {
  console.log(e);
  swpper.index = e.index;
  page.pageNum = 1;
  page.pageSize = 10;
  page.total = 0;
  ISstatusInit();
};

// Lifecycle hooks
onMounted(() => {
  // Initialize your component here
  // ISstatusInit();
  getData();
});
</script>

<style lang="scss">
	.content {
		background-color: #e8e8e8;
		.nav {
			display: flex;
			width: 100%;
			position: fixed;
			top: 0%;
			justify-content: center;
			z-index: 2;
			
		}

		// background-color: $w-BgColor;
		position: relative;

		swiper {
			position: relative;
			top: 90rpx;

			swiper-item {
				overflow: scroll;
			}
		}

		width: 100%;
		// height: 100vh;
		padding-bottom: 10%;
	}
</style>