gree_leran/components/videoList/VideoList.vue

161 lines
3.1 KiB
Vue
Raw Normal View History

2024-06-20 15:36:19 +00:00
<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>