hanyixuanten/HyperBilibili
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

收藏夹列表、收藏夹内容完工

Browse Source
This commit is contained in:
Searchstars
2024-07-19 20:22:48 +08:00
parent 610161d808
commit 1983649691
8 changed files with 319 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/bilibiliclient.ts
+1 -1
View File
@@ -169,7 +169,7 @@ class BilibiliClient {
}
// 获取目标收藏夹内容
async getFavouriteFolderContent(mlid: string, keyword: string = null, ps: number = 10, pn: number): Promise<any>{
async getFavouriteFolderContent(mlid: string, pn: number, ps: number = 10, keyword: string = null): Promise<any>{
let url = `https://api.bilibili.com/x/v3/fav/resource/list?media_id=${mlid}&ps=${ps}&pn=${pn}`;
if(keyword){
url += `&keyword=${keyword}`
src/common/changepage_left.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 223 B

src/common/changepage_right.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 218 B

src/manifest.json
+3
View File
@@ -49,6 +49,9 @@
},
"pages/favfolders": {
"component": "favfolders"
},
"pages/foldervideos": {
"component": "foldervideos"
}
}
}
src/pages/favfolders/favfolders.ux
+65 -23
View File
@@ -1,17 +1,22 @@
<template>
<div class="page">
<div class="titlebar" @click="RouterBack()">
<div style="width: 40px; height: 40px">
<div style="width: 40px; height: 40px; position: absolute; left: 0px">
<image src="/common/icons8-back-100.png" style="width: 40px; height: 40px"></image>
</div>
<div class="titlebar-text">
<text style="font-size: 40px; font-weight: bold">收藏</text>
</div>
<text style="font-size: 40px; font-weight: bold">收藏</text>
</div>
<image style="position: absolute; margin-top: 245px" if="{{show_loading}}" src="{{anims.loading_src.value}}"></image>
<list style="margin-top: 20px; width: 77%; height: 100%" class="folderlist">
<list-item type="folders" class="folder" for="{{folders}}">
<image src="{{$item.cover}}@171w_118h" alt="/common/fullblack.png" class="folderimg"></image>
<text class="foldername">{{$item.title}}</text>
<list-item type="folders" class="folder" for="{{folders}}" onclick="GoFolderVideosPage({{$item.id}}, {{$item.media_count}})">
<image src="{{$item.cover}}@121w_68h" alt="/common/fullblack.png" class="folderimg"></image>
<div style="flex-direction: column">
<div class="foldername">
<text class="foldername_text">{{$item.title}}</text>
</div>
<text class="foldercount">数量：{{$item.media_count}}</text>
</div>
<image src="/common/arrow_right.png" style="margin-left: 30px"></image>
</list-item>
</list>
</div>
@@ -21,7 +26,12 @@
import router from "@system.router"
export default {
private: {
folders: []
folders: [],
show_loading: true,
anims: {
loading: null,
loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
}
},
public: {
user_mid: null
@@ -29,15 +39,40 @@ export default {
RouterBack() {
router.back()
},
GoFolderVideosPage(mlid, vidcount){
router.push({
uri: "pages/foldervideos",
params: {
mlid: mlid,
vidcount: vidcount
}
})
},
async LoadFolders(){
let folderlist = await this.$app.$def.biliclient.getUserFavouriteFolders(this.user_mid);
folderlist.list.forEach(async(folder) => {
console.log(folder)
this.folders.push(await this.$app.$def.biliclient.getFavouriteFolderMetadata(folder.id))
this.show_loading = false
this.anims.loading.stop()
});
},
onInit(){
this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
"favfoldersPage",
this.anims.loading_src,
28,
"/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
1000,
true
)
this.anims.loading.start()
this.LoadFolders()
},
onDestroy(){
this.$app.$def.animengine.clearPageAnims("favfoldersPage")
}
}
</script>
@@ -56,20 +91,15 @@ export default {
width: 55%;
margin-top: 45px;
align-items: center;
}
.titlebar-text {
align-items: center;
justify-content: center;
width: 100%;
}
.folder {
margin-top: 10px;
width: 340px;
height: 190px;
height: 120px;
background-color: #262626;
border-radius: 50px;
border-radius: 40px;
flex-direction: row;
align-items: center;
}
@@ -82,19 +112,31 @@ export default {
.folderimg {
margin-left: 15px;
border-radius: 30px;
max-width: 171px;
max-height: 118px;
min-width: 171px;
min-height: 118px;
max-width: 121px;
max-height: 68px;
min-width: 121px;
min-height: 68px;
object-fit: contain;
}
.foldername {
font-weight: 600;
font-size: 20px;
margin-left: 10px;
height: 110px;
text-overflow: ellipsis;
height: 60px;
width: 130px;
margin-top: 10px;
align-items: flex-start;
}
.foldername_text {
text-overflow: ellipsis;
font-weight: 600;
font-size: 24px;
}
.foldercount {
font-weight: 600;
font-size: 18px;
margin-left: 10px;
margin-bottom: 5px;
}
</style>
src/pages/foldervideos/foldervideos.ux
+244
View File
@@ -0,0 +1,244 @@
<template>
<div class="page">
<div class="titlebar" @click="RouterBack()">
<div style="width: 40px; height: 40px; position: absolute; left: 0px">
<image src="/common/icons8-back-100.png" style="width: 40px; height: 40px"></image>
</div>
<text style="font-size: 40px; font-weight: bold">收藏夹</text>
</div>
<div style="margin-top: 20px; flex-direction: row; align-items: center">
<div @click="BackPN()" style="width: 40px; height: 40px; align-items: center; justify-content: center">
<image src="/common/changepage_left.png"></image>
</div>
<text style="margin-left: 17px; font-size: 25px; font-weight: 600; color: #9e9e9e">
第{{ current_pn }}页
</text>
<div style="
margin-left: 17px;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
" @click="NextPN()">
<image src="/common/changepage_right.png"></image>
</div>
</div>
<div class="foldervid_div">
<list class="foldervid_list">
<list-item type="foldervid_videos" for="{{foldervid_vids}}" class="foldervid_listitem"
style="height: {{calcSpace($item.title, true)}}" onclick="OpenVideo({{$item.bvid}})">
<div class="foldervid_list_vid">
<div class="vidinfo">
<div class="vidpicture">
<image class="vidpicture_img" src="{{$item.pic}}@160w_100h" alt="/common/fullgray.png">
</image>
</div>
<text class="vidtitle">{{ $item.title }}</text>
</div>
<div class="vidstat">
<text class="upinfo">UP：{{ $item.owner.name }}</text>
<text class="stat_view">
{{ this.$app.$def.tools.formatNumber($item.stat.view) }}
</text>
</div>
</div>
<text style="margin-top: {{calcSpace($item.title, false)}}; height: 0px"></text>
</list-item>
</list>
</div>
<image style="position: absolute; margin-top: 265px" if="{{show_loading}}" src="{{anims.loading_src.value}}">
</image>
</div>
</template>
<script>
import router from "@system.router"
export default {
private: {
foldervid_vids: [],
current_pn: 1,
maxpn: 0,
show_loading: true,
anims: {
loading: null,
loading_src: {value: "/common/seqanims/loadingWhite/icons8-loading_颜色反转-1.png"}
}
},
public: {
mlid: "",
vidcount: 0
},
RouterBack() {
router.back()
},
NextPN() {
if (this.current_pn != this.maxpn) {
this.current_pn++
this.LoadVideos()
}
},
BackPN() {
if (this.current_pn != 1) {
this.current_pn--
this.LoadVideos()
}
},
OpenVideo(bvid) {
console.log("openvid: " + bvid)
router.push({
uri: "pages/videodetail",
params: {
bvid: bvid
}
})
},
calcSpace(vid_title, isListItem) {
if (vid_title == this.foldervid_vids[this.foldervid_vids.length - 1].title) {
if (isListItem) {
return "270px"
}
return "80px"
}
if (isListItem) {
return "170px"
}
return "0px"
},
async LoadVideos() {
this.show_loading = true
this.foldervid_vids.length = 0 // Clear Array
this.anims.loading = new this.$app.$def.animengine.SequenceAnim(
"folderVideosPage",
this.anims.loading_src,
28,
"/common/seqanims/loadingWhite/icons8-loading_颜色反转-*.png",
1000,
true
)
this.anims.loading.start()
let medialist = await this.$app.$def.biliclient.getFavouriteFolderContent(
this.mlid,
this.current_pn,
5
)
medialist.medias.forEach(async (media) => {
var mediainfo = await this.$app.$def.biliclient.getVideoInfoByBVID(media.bvid)
this.foldervid_vids.push(mediainfo)
})
this.show_loading = false
this.anims.loading.stop()
},
onInit() {
this.maxpn = Math.ceil(this.vidcount / 5)
console.log("maxpn=" + this.maxpn)
this.LoadVideos()
}
}
</script>
<style>
.page {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
position: absolute;
width: 100%;
}
.titlebar {
width: 55%;
margin-top: 45px;
align-items: center;
justify-content: center;
}
.foldervid_div {
margin-top: 15px;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
width: 100%;
}
.foldervid_list {
width: 77%;
height: 100%;
}
.foldervid_listitem {
height: 170px;
width: 100%;
margin-top: 5px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
}
.foldervid_list_vid {
border-radius: 50px;
background-color: #262626;
height: 100%;
width: 100%;
justify-content: center;
flex-direction: column;
}
.vidinfo {
flex-direction: row;
height: 130px;
width: 100%;
}
.vidpicture {
margin-left: 26px;
margin-top: 20px;
min-width: 160px;
min-height: 100px;
max-width: 160px;
max-height: 100px;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.2);
justify-content: center;
align-items: center;
}
.vidpicture_img {
min-width: 160px;
min-height: 100px;
max-width: 160px;
max-height: 100px;
border-radius: 30px;
}
.vidtitle {
margin-left: 20px;
margin-top: 20px;
font-size: 20px;
font-weight: 600;
width: 145px;
text-overflow: ellipsis;
}
.vidstat {
flex-direction: row;
margin-left: 30px;
}
.upinfo {
font-size: 14px;
font-weight: 600;
}
.stat_view {
font-size: 14px;
font-weight: 600;
position: absolute;
margin-left: 250px;
}
</style>
src/pages/main/main.ux
+4 -1
View File
@@ -13,7 +13,7 @@
<div class="recommend_list_vid">
<div class="vidinfo">
<div class="vidpicture">
<image class="vidpicture_img" src="{{$item.pic}}@160w_100h" alt="/common/icons8-loading-100.png"></image>
<image class="vidpicture_img" src="{{$item.pic}}@160w_100h" alt="/common/fullgray.png"></image>
</div>
<text class="vidtitle">{{ $item.title }}</text>
</div>
@@ -96,6 +96,9 @@ export default {
)
this.anims.loading.start()
},
onDestroy(){
this.$app.$def.animengine.clearPageAnims("mainPage")
}
}
</script>
src/pages/videodetail/videodetail.ux
+2 -9
View File
@@ -1,12 +1,10 @@
<template>
<div class="page">
<div class="titlebar" @click="RouterBack()">
<div style="width: 40px; height: 40px">
<div style="width: 40px; height: 40px; position: absolute; left: 0px">
<image src="/common/icons8-back-100.png" style="width: 40px; height: 40px"></image>
</div>
<div class="titlebar-text">
<text style="font-size: 40px; font-weight: bold">视频</text>
</div>
<text style="font-size: 40px; font-weight: bold">视频</text>
</div>
<div class="maindiv">
<image src="{{vid.pic}}@319w_150h" alt="/common/grayloading_cn.png" class="vidpic"></image>
@@ -113,12 +111,7 @@ export default {
width: 55%;
margin-top: 45px;
align-items: center;
}
.titlebar-text {
align-items: center;
justify-content: center;
width: 100%;
}
.vidpic {