Add pubTime (#628)

This commit is contained in:
the1812 2021-02-07 10:51:58 +08:00
parent deb71163a4
commit fe2101d526
4 changed files with 40 additions and 4 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -227,6 +227,8 @@
.cover-container { .cover-container {
position: relative; position: relative;
} }
.pub-time,
.pub-time-text,
.time, .time,
.watchlater { .watchlater {
position: absolute; position: absolute;
@ -240,10 +242,19 @@
border-radius: 10px; border-radius: 10px;
box-sizing: border-box; box-sizing: border-box;
opacity: 0; opacity: 0;
white-space: nowrap;
overflow: hidden;
max-width: calc(100% - 8px);
} }
.time { .time {
left: 4px; left: 4px;
} }
.pub-time,
.pub-time-text {
left: 4px;
top: 4px;
bottom: unset;
}
.watchlater { .watchlater {
padding: 0 8px 0 3px; padding: 0 8px 0 3px;
right: 4px; right: 4px;
@ -258,11 +269,21 @@
opacity: 1; opacity: 1;
} }
&:hover { &:hover {
.pub-time-text:not(:hover),
.time, .time,
.watchlater { .watchlater {
opacity: 1; opacity: 1;
} }
} }
.pub-time-text {
z-index: 1;
&:hover {
opacity: 0;
~ .pub-time {
opacity: 1;
}
}
}
} }
} }
&.dark .video-activity-card, &.dark .video-activity-card,

View File

@ -260,6 +260,19 @@ export class Activities extends NavbarComponent {
async handleJson(json) { async handleJson(json) {
// const { getWatchlaterList } = await import('../../video/watchlater-api') // const { getWatchlaterList } = await import('../../video/watchlater-api')
// const watchlaterList = await getWatchlaterList() // const watchlaterList = await getWatchlaterList()
const now = Number(new Date())
const oneDayBefore = now - 1000 * 3600 * 24
const formatPubTime = (pubTime: number) => {
if (oneDayBefore < pubTime) {
const diffHours = Math.round((now - pubTime) / 1000 / 3600)
return `${diffHours}小时前`
}
const pubDate = new Date(pubTime)
if (new Date(now).getFullYear() !== pubDate.getFullYear()) {
return `${pubDate.getFullYear()}-${pubDate.getMonth() + 1}-${pubDate.getDate()}`
}
return `${pubDate.getMonth() + 1}-${pubDate.getDate()}`
}
const jsonCards = _.get(json, 'data.cards', []).map((card: any) => { const jsonCards = _.get(json, 'data.cards', []).map((card: any) => {
const cardJson = JSON.parse(card.card) const cardJson = JSON.parse(card.card)
return { return {
@ -274,8 +287,8 @@ export class Activities extends NavbarComponent {
upName: card.desc.user_profile.info.uname, upName: card.desc.user_profile.info.uname,
upUrl: `https://space.bilibili.com/${card.desc.user_profile.info.uid}`, upUrl: `https://space.bilibili.com/${card.desc.user_profile.info.uid}`,
id: card.desc.dynamic_id_str, id: card.desc.dynamic_id_str,
// pubTimestamp: cardJson.pubdate, pubTime: new Date(cardJson.pubdate * 1000).toLocaleString(),
// pubTime: format??? cardJson.pubdate, pubTimeText: formatPubTime(cardJson.pubdate * 1000),
watchlater: true, watchlater: true,
get new() { return Activities.isNewID(this.id) }, get new() { return Activities.isNewID(this.id) },
} }
@ -346,6 +359,8 @@ export class Activities extends NavbarComponent {
<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>
<div class="pub-time-text">{{card.pubTimeText}}</div>
<div class="pub-time">{{card.pubTime}}</div>
<div @click.stop.prevent="toggleWatchlater(card.aid)" class="watchlater"><i class="mdi" :class="{'mdi-clock-outline': !watchlater, 'mdi-check-circle': watchlater}"></i>{{watchlater ? '已添加' : '稍后再看'}}</div> <div @click.stop.prevent="toggleWatchlater(card.aid)" class="watchlater"><i class="mdi" :class="{'mdi-clock-outline': !watchlater, 'mdi-check-circle': watchlater}"></i>{{watchlater ? '已添加' : '稍后再看'}}</div>
</div> </div>
<h1 class="title" :title="card.title">{{card.title}}</h1> <h1 class="title" :title="card.title">{{card.title}}</h1>