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

用户主页初版

Browse Source
This commit is contained in:
Searchstars
2025-01-30 16:28:39 +08:00
parent aab1c95cc8
commit 852bc848a5
11 changed files with 260 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/bilibiliclient/user/user.ts
+28
View File
@@ -17,6 +17,34 @@ export const BilibiliClientUserMethods = {
return response.data.data
},
// 获取单个用户投稿的视频的代表作
async getUserMasterPieceByUID(this: any, uid: String) {
const url = `https://api.bilibili.com/x/space/masterpiece`;
const response = await this.getRequest(`${url}?vmid=${uid}`);
return response.data.data
},
// 获取用户投稿列表（分页）
async getUserVideosByUID(this: any, uid: String, pn: Number, ps: Number = 5) {
const url = `https://api.bilibili.com/x/space/wbi/arc/search`;
const response = await this.getRequestWbi(url, {
mid: uid,
pn,
ps
});
return response.data.data
},
// 获取用户空间动态列表
async getUserDynamicListByUID(this: any, uid: String) {
const url = `https://api.bilibili.com/x/polymer/web-dynamic/v1/feed/space`;
const response = await this.getRequest(`${url}?host_mid=${uid}`);
return response.data.data
},
// 获取单个用户的导航栏状态数
async getUserNavnumByUID(this: any, uid: String) {
const url = `https://api.bilibili.com/x/space/navnum`;
src/components/User/User.ux
+11 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="user">
<div class="user" onclick="OpenUser(user.mid)">
<div class="userinfo">
<image src="{{user.upic}}@46w_46h" alt="/common/fullgray.png"
style="border-radius: 50%; width: 46px; height: 46px; object-fit: scale-down"></image>
@@ -34,6 +34,8 @@
</template>
<script>
import router from "@system.router"
export default {
props: ["user"],
computed: {
@@ -41,6 +43,14 @@ export default {
return this.$app.$def.tools.formatNumber(this.user.fans)
}
},
OpenUser(id) {
router.push({
uri: "pages/user",
params: {
uid: id
}
})
},
onInit(){
if(!(this.user.upic.includes("http://") || this.user.upic.includes("https://"))){
this.user.upic = "https:" + this.user.upic
src/components/Video/Video.ux
+45 -31
View File
@@ -1,11 +1,13 @@
<import name="online-image" src="@components/BetterOnlineImage/BetterOnlineImage.ux"></import>
<template>
<div>
<div class="vid" @click="OpenVideo(video.bvid)" if="{{loadComp}}">
<div class="vid">
<div class="loadedbox" @click="OpenVideo(video.bvid)" if="{{loadComp}}">
<div style="{{vidinfo_style}}" class="vidinfo">
<div class="vidpicture" style="{{vidpicture_style}}">
<online-image width="{{vidpicture_style['max-width']}}" height="{{vidpicture_style['max-height']}}" lock-size="true" border-radius="30px" object-fit="cover" loading-anim="true" src="{{video.pic}}@{{onlineimg_width}}w_{{onlineimg_height}}h"></online-image>
<online-image width="{{vidpicture_style['max-width']}}" height="{{vidpicture_style['max-height']}}"
lock-size="true" border-radius="30px" object-fit="cover" loading-anim="true"
src="{{video.pic}}@{{onlineimg_width}}w_{{onlineimg_height}}h"></online-image>
</div>
<text class="vidtitle" if="{{!useColumnTitle}}">{{ video.title }}</text>
</div>
@@ -20,6 +22,7 @@
</div>
</div>
</div>
<text else class="compLoadingTip">视频加载中...</text>
</div>
</template>
@@ -41,7 +44,7 @@ export default {
loadComp: false
},
computed: {
stat_view(){
stat_view() {
return this.$app.$def.tools.formatNumber(this.video.stat.view)
}
},
@@ -52,47 +55,47 @@ export default {
})
},
// 在线图片展示大小（UI层）
SetOnlineImageSize(width, height){
this.vidpicture_style["min-width"] = width + "px";
this.vidpicture_style["max-width"] = width + "px";
this.vidpicture_style["min-height"] = height + "px";
this.vidpicture_style["max-height"] = height + "px";
SetOnlineImageSize(width, height) {
this.vidpicture_style["min-width"] = width + "px"
this.vidpicture_style["max-width"] = width + "px"
this.vidpicture_style["min-height"] = height + "px"
this.vidpicture_style["max-height"] = height + "px"
},
// 在线图片加载大小（组件层）
// 使用比展示大小更小的加载大小可以节省设备RAM、降低渲染压力、节省流量等
// 推荐是展示大小的等比例缩放
SetOnlineImageLoadSize(width, height){
this.onlineimg_width = width;
this.onlineimg_height = height;
SetOnlineImageLoadSize(width, height) {
this.onlineimg_width = width
this.onlineimg_height = height
},
doStyleAdjustTask(){
const deviceInfo = global.DEVICE_INFO;
if (deviceInfo.screenShape == "rect" || this.video.title.length > 25){
this.useColumnTitle = true;
doStyleAdjustTask() {
const deviceInfo = global.DEVICE_INFO
if (deviceInfo.screenShape == "rect" || this.video.title.length > 25) {
this.useColumnTitle = true
// 手环Pro 系列
if (deviceInfo.screenWidth <= 380){
this.SetOnlineImageSize(200, 150);
this.SetOnlineImageLoadSize(100, 75);
if (deviceInfo.screenWidth <= 380) {
this.SetOnlineImageSize(200, 150)
this.SetOnlineImageLoadSize(100, 75)
}
// RW系列
else if (deviceInfo.screenShape == "rect"){
this.SetOnlineImageSize(265, 150);
this.SetOnlineImageLoadSize(265, 150);
else if (deviceInfo.screenShape == "rect") {
this.SetOnlineImageSize(265, 150)
this.SetOnlineImageLoadSize(265, 150)
}
// 圆屏系列
else{
this.SetOnlineImageSize(300, 150);
this.SetOnlineImageLoadSize(300, 150);
else {
this.SetOnlineImageSize(300, 150)
this.SetOnlineImageLoadSize(300, 150)
}
}
},
doVidObjectPatch(){
if(!(this.video.pic.includes("http://") || this.video.pic.includes("https://"))){
doVidObjectPatch() {
if (!(this.video.pic.includes("http://") || this.video.pic.includes("https://"))) {
this.video.pic = "https:" + this.video.pic
}
},
async asyncInit(){
if(!this.video){
async asyncInit() {
if (!this.video) {
this.video = await global.biliclient.getVideoInfoByBVID(this.bvid)
}
@@ -101,14 +104,14 @@ export default {
this.doVidObjectPatch()
this.doStyleAdjustTask()
},
onInit(){
onInit() {
this.asyncInit()
}
}
</script>
<style lang="less">
@import '@less/global.less';
@import "@less/global.less";
.vid {
margin-top: 10px;
@@ -120,6 +123,12 @@ export default {
flex-direction: column;
}
.loadedbox {
justify-content: center;
align-items: center;
flex-direction: column;
}
.vidinfo {
width: 100%;
justify-content: center;
@@ -180,4 +189,9 @@ export default {
font-weight: 600;
margin-left: 5px;
}
.compLoadingTip {
font-weight: 600;
font-size: 18px;
}
</style>
src/i18n/en.json
+4 -1
View File
@@ -126,7 +126,10 @@
}
},
"user": {
"title": "User"
"title": "User",
"videos": "Videos",
"dynamices": "Dynamic",
"nocontent": "There is no content to show at present."
},
"sessionood": {
"title": "Some problems have occurred",
src/i18n/zh.json
+7 -1
View File
@@ -131,7 +131,13 @@
}
},
"user": {
"title": "用户主页"
"title": "用户主页",
"videos": "TA的视频",
"dynamices": "TA的动态",
"nocontent": "暂无可展示内容",
"uservideos": {
"title": "用户投稿"
}
},
"sessionood": {
"title": "遇到了一些问题",
src/manifest.json
+6
View File
@@ -163,6 +163,12 @@
},
"pages/error/sessionood": {
"component": "sessionood"
},
"pages/user/userdynamic": {
"component": "userdynamic"
},
"pages/user/uservideos": {
"component": "uservideos"
}
}
}
src/pages/search/search/search.ux
+2
View File
@@ -4,6 +4,7 @@
<template>
<div class="page">
<image style="position: absolute; left: 0px" src="{{getBgImg}}"></image>
<scroll class="scroll" scroll-y="true">
<switch-bar title="search.title" static></switch-bar>
<div class="searchbtn" @click="OpenInput">
<image src="/common/searchpage_search.png" style="margin-left: 25px" static></image>
@@ -18,6 +19,7 @@
<text class="hotword-text">{{ $item.show_name }}</text>
</div>
<text style="margin-top: 25px"></text>
</scroll>
<image style="position: absolute; margin-top: 305px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
<full-screen-input style="position: absolute" if="{{input_mode}}" @send="GoSearch" @exit="ExitInput"></full-screen-input>
</div>
src/pages/user/user.less
+11
View File
@@ -4,10 +4,12 @@
.ctxcard {
.flex-column(15px);
.radius(15px);
width: 300px;
}
.ctxdesc {
.flex-row(0px, #00000000);
width: 100%;
justify-content: space-between;
align-items: center;
}
@@ -21,3 +23,12 @@
font-size: 20px;
color: gray;
}
.mp-scroll {
width: 100%;
}
.mp {
.flex-row(0px, #00000000);
height: 100%;
}
src/pages/user/user.ux
+39 -4
View File
@@ -1,25 +1,43 @@
<import name="title-bar" src="@components/TitleBar/TitleBar.ux"></import>
<import name="user-info" src="@components/UserInfo/UserInfo.ux"></import>
<import name="online-image" src="@components/BetterOnlineImage/BetterOnlineImage.ux"></import>
<template>
<div class="page">
<title-bar title="user.title"></title-bar>
<user-info account-info="{{user}}" if="{{loaded}}"></user-info>
<div class="ctxcard" if="{{loaded}}">
<div class="ctxcard" style="margin-top: 25px" if="{{loaded}}" @click="GoUserVideos">
<div class="ctxdesc">
<div style="width: 280px;">
<text class="desctxt">TA的视频</text>
<div style="width: 290px;">
<text class="desctxt">{{ $t("user.videos") }}</text>
<text class="desctxt gs" style="margin-left: 15px">{{navnum.video}}</text>
</div>
<text class="desctxt gs">></text>
</div>
<scroll class="mp-scroll" scroll-x="true">
<div if="{{masterpiece.length > 0}}" class="mp">
<online-image for="{{masterpiece}}" src="{{$item.pic}}@90h" style="padding-right: 10px"></online-image>
</div>
</scroll>
</div>
<div class="ctxcard" style="margin-top: 10px" if="{{loaded}}" @click="WIPTips">
<div class="ctxdesc">
<div style="width: 290px;">
<text class="desctxt">{{ $t("user.dynamices") }}</text>
<text class="desctxt gs" style="margin-left: 15px">{{dynamiclist.items.length}}+</text>
</div>
<text class="desctxt gs">></text>
</div>
</div>
<text style="margin-top: 30px"></text>
<image style="position: absolute; margin-top: 245px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}"></image>
</div>
</template>
<script>
import router from "@system.router"
import prompt from "@system.prompt"
export default {
public: {
uid: 1
@@ -28,6 +46,8 @@ export default {
user: {},
stat: {},
navnum: {},
masterpiece: {},
dynamiclist: {},
anims: {
show_loading: false
},
@@ -39,11 +59,26 @@ export default {
this.user = await global.biliclient.getUserInfoByUID(this.uid)
this.stat = await global.biliclient.getUserStatByUID(this.uid)
this.navnum = await global.biliclient.getUserNavnumByUID(this.uid)
this.masterpiece = await global.biliclient.getUserMasterPieceByUID(this.uid)
this.dynamiclist = await global.biliclient.getUserDynamicListByUID(this.uid)
this.anims.loading.stop()
this.anims.show_loading = false
this.loaded = true
},
GoUserVideos(){
router.push({
uri: "pages/user/uservideos",
params: {
uid: this.uid
}
})
},
WIPTips(){
prompt.showToast({
message: "该功能仍未开发完毕"
})
},
onInit(){
global.animengine.defaults.loading.CreateLoadingAnimation(this)
this.LoadUserInfo()
src/pages/user/userdynamic/userdynamic.ux
+9
View File
@@ -0,0 +1,9 @@
<template>
<div></div>
</template>
<script>
export default {}
</script>
<style></style>
src/pages/user/uservideos/uservideos.ux
+71
View File
@@ -0,0 +1,71 @@
<import name="title-bar" src="@components/TitleBar/TitleBar.ux"></import>
<import name="videoshow" src="@components/Video/Video.ux"></import>
<import
name="floating-page-changer"
src="@components/FloatingPageChanger/FloatingPageChanger.ux"
></import>
<template>
<div class="page">
<scroll class="scroll" scroll-y="true">
<title-bar title="user.uservideos.title"></title-bar>
<div style="flex-direction: column; width: 77%">
<videoshow if="{{!anims.show_loading}}" for="{{vids.list.vlist}}" bvid="{{$item.bvid}}"></videoshow>
</div>
<text style="margin-top: 30px"></text>
</scroll>
<floating-page-changer style="position: absolute" current_pn="{{current_pn}}" @backpn="BackPN"
@nextpn="NextPN"></floating-page-changer>
<image style="position: absolute; margin-top: 245px" if="{{anims.show_loading}}" src="{{anims.loading_src.value}}">
</image>
</div>
</template>
<script>
export default {
public: {
uid: 1
},
private: {
vids: null,
current_pn: 1,
maxpn: 1,
anims: {
show_loading: false
}
},
BackPN() {
if (this.current_pn > 1) {
this.current_pn--
this.LoadVideos(false)
}
},
NextPN() {
if (this.current_pn < this.maxpn) {
this.current_pn++
this.LoadVideos(false)
}
},
async LoadVideos(init) {
this.anims.show_loading = true
this.anims.loading.start()
this.vids = null
this.vids = await global.biliclient.getUserVideosByUID(this.uid, this.current_pn, 5)
if (init) {
this.maxpn = Math.ceil(this.vids.page.count / 5)
}
this.anims.show_loading = false
this.anims.loading.stop()
},
onInit() {
global.animengine.defaults.loading.CreateLoadingAnimation(this)
this.LoadVideos(true)
}
}
</script>
<style lang="less">
@import "@less/global.less";
</style>