161 lines
3.1 KiB
Vue
161 lines
3.1 KiB
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> |