Add notify count

This commit is contained in:
the1812 2019-08-10 12:00:44 +08:00
parent 271fa78c9d
commit 44d7731fa3
6 changed files with 78 additions and 19 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1112,15 +1112,34 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
background-color: #8884; background-color: #8884;
} }
.custom-navbar .activity-tab { .custom-navbar .activity-tab {
opacity: 0.5;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
} }
.custom-navbar .activity-tab.selected { .custom-navbar .activity-tab.selected {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
}
.custom-navbar .activity-tab .tab-name {
opacity: 0.5;
}
.custom-navbar .activity-tab.selected .tab-name {
opacity: 1;
font-weight: bold; font-weight: bold;
} }
.custom-navbar .activity-tab[data-count]::before {
content: attr(data-count);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-100%);
font-size: 10px;
font-weight: normal;
line-height: 1;
background-color: #8884;
padding: 2px 4px;
border-radius: 10px;
white-space: nowrap;
}
.custom-navbar .activity-tab::after { .custom-navbar .activity-tab::after {
content: ""; content: "";
width: calc(80%); width: calc(80%);
@ -1262,6 +1281,19 @@ li.nav-item[report-id='playpage_dynamic'] .i-frame,
box-sizing: border-box; box-sizing: border-box;
opacity: 0; opacity: 0;
} }
.custom-navbar .video-activity-card.new .cover-container::before {
content: "NEW";
position: absolute;
top: 4px;
left: 4px;
background-color: var(--theme-color);
padding: 0 6px;
height: 18px;
border-radius: 9px;
font-weight: 700;
font-size: 11px;
line-height: 18px;
}
.custom-navbar .video-activity-card:hover .time, .custom-navbar .video-activity-card:hover .time,
.custom-navbar .video-activity-card:hover .watchlater { .custom-navbar .video-activity-card:hover .watchlater {
opacity: 1; opacity: 1;

View File

@ -894,7 +894,7 @@ class Activities extends NavbarComponent {
this.html = "动态"; this.html = "动态";
this.popupHtml = /*html*/` this.popupHtml = /*html*/`
<div class="activity-popup"> <div class="activity-popup">
<activity-tabs :tab.sync="selectedTab" :items="tabs.map(it => it.name)"></activity-tabs> <activity-tabs :tab.sync="selectedTab" :items="tabs"></activity-tabs>
<div class="activity-popup-content"> <div class="activity-popup-content">
<transition name="activity-content" mode="out-in"> <transition name="activity-content" mode="out-in">
<component :is="content"></component> <component :is="content"></component>
@ -908,9 +908,10 @@ class Activities extends NavbarComponent {
this.init() this.init()
this.setNotifyCount(0) this.setNotifyCount(0)
} }
this.getNotifyCount()
} }
static get latestID () { static get latestID () {
return document.cookie.replace(new RegExp(`?:(?:^|.*;\\s*)bp_t_offset_${userInfo.mid}\\s*\\=\\s*([^;]*).*$)|^.*$`, '$1')) return document.cookie.replace(new RegExp(`(?:(?:^|.*;\\s*)bp_t_offset_${userInfo.mid}\\s*\\=\\s*([^;]*).*$)|^.*$`), '$1')
} }
static set latestID (id) { static set latestID (id) {
if (Activities.compareID(Activities.latestID, id) < 0) { if (Activities.compareID(Activities.latestID, id) < 0) {
@ -930,10 +931,13 @@ class Activities extends NavbarComponent {
} }
return a > b === true ? 1 : -1 return a > b === true ? 1 : -1
} }
static isNewID (id) {
return Activities.compareID(id, Activities.latestID) > 0
}
async getNotifyCount () { async getNotifyCount () {
const api = `https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_num?rsp_type=1&uid=${userInfo.mid}&update_num_dy_id=${Activities.latestID}&type_list=8,64,512` const api = `https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_num?rsp_type=1&uid=${userInfo.mid}&update_num_dy_id=${Activities.latestID}&type_list=8,64,512`
const json = await Ajax.getJsonWithCredentials(api) const json = await Ajax.getJsonWithCredentials(api)
if (json.code !== 0) { if (json.code !== 0 || this.requestedPopup) {
return return
} }
this.setNotifyCount(json.data.update_num) this.setNotifyCount(json.data.update_num)
@ -978,25 +982,28 @@ class Activities extends NavbarComponent {
name: '视频', name: '视频',
component: 'video-activity', component: 'video-activity',
moreUrl: 'https://t.bilibili.com/?tab=8', moreUrl: 'https://t.bilibili.com/?tab=8',
notifyCount: 0, notifyApi: `https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_num?rsp_type=1&uid=${userInfo.mid}&update_num_dy_id=${Activities.latestID}&type_list=8`,
notifyCount: null,
}, },
{ {
name: '番剧', name: '番剧',
component: 'bangumi-activity', component: 'bangumi-activity',
moreUrl: 'https://t.bilibili.com/?tab=512', moreUrl: 'https://t.bilibili.com/?tab=512',
notifyCount: 0, notifyApi: `https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_num?rsp_type=1&uid=${userInfo.mid}&update_num_dy_id=${Activities.latestID}&type_list=512`,
notifyCount: null,
}, },
{ {
name: '专栏', name: '专栏',
component: 'column-activity', component: 'column-activity',
moreUrl: 'https://t.bilibili.com/?tab=64', moreUrl: 'https://t.bilibili.com/?tab=64',
notifyCount: 0, notifyApi: `https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/dynamic_num?rsp_type=1&uid=${userInfo.mid}&update_num_dy_id=${Activities.latestID}&type_list=64`,
notifyCount: null,
}, },
{ {
name: '直播', name: '直播',
component: 'live-activity', component: 'live-activity',
moreUrl: 'https://link.bilibili.com/p/center/index#/user-center/follow/1', moreUrl: 'https://link.bilibili.com/p/center/index#/user-center/follow/1',
notifyCount: 0, notifyCount: null,
}, },
], ],
selectedTab: '视频', selectedTab: '视频',
@ -1006,13 +1013,15 @@ class Activities extends NavbarComponent {
props: ['items', 'tab'], props: ['items', 'tab'],
template: /*html*/` template: /*html*/`
<ul class="activity-tabs"> <ul class="activity-tabs">
<li v-for="item of items" class="activity-tab" :class="{selected: item === tab}" @click="changeTab(item)">{{item}}</li> <li v-for="item of items" class="activity-tab" :data-count="item.notifyCount" :class="{selected: item.name === tab}" @click="changeTab(item)">
<div class="tab-name">{{item.name}}</div>
</li>
<a class="view-all" target="_blank" href="https://t.bilibili.com/">全部动态</a> <a class="view-all" target="_blank" href="https://t.bilibili.com/">全部动态</a>
</ul> </ul>
`, `,
methods: { methods: {
changeTab (item) { changeTab (item) {
this.$emit('update:tab', item) this.$emit('update:tab', item.name)
} }
}, },
}, },
@ -1041,7 +1050,7 @@ class Activities extends NavbarComponent {
}, },
}, },
template: /*html*/` template: /*html*/`
<a class="video-activity-card" target="_blank" :href="card.videoUrl"> <a class="video-activity-card" :class="{new: card.new}" target="_blank" :href="card.videoUrl">
<div class="cover-container"> <div class="cover-container">
<dpi-img class="cover" :size="{width: 172}" :src="card.coverUrl"></dpi-img> <dpi-img class="cover" :size="{width: 172}" :src="card.coverUrl"></dpi-img>
<div class="time">{{card.time}}</div> <div class="time">{{card.time}}</div>
@ -1104,6 +1113,7 @@ class Activities extends NavbarComponent {
id: card.desc.dynamic_id_str, id: card.desc.dynamic_id_str,
topics, topics,
watchlater: watchlaterList.includes(cardJson.aid), watchlater: watchlaterList.includes(cardJson.aid),
get new() { return Activities.isNewID(this.id) },
} }
}) })
this.leftCards = cards.filter((_, index) => index % 2 === 0) this.leftCards = cards.filter((_, index) => index % 2 === 0)
@ -1261,6 +1271,23 @@ class Activities extends NavbarComponent {
return this.tabs.find(tab => tab.name === this.selectedTab).moreUrl return this.tabs.find(tab => tab.name === this.selectedTab).moreUrl
}, },
}, },
mounted () {
for (const tab of this.tabs) {
if (tab.notifyApi) {
Ajax.getJsonWithCredentials(tab.notifyApi).then(json => {
if (json.code !== 0 || !json.data.update_num || this.selectedTab === tab.name) {
return
}
tab.notifyCount = json.data.update_num
})
}
}
},
watch: {
selectedTab (name) {
this.tabs.find(t => t.name === name).notifyCount = null
}
},
}) })
} }
get name () { get name () {