replace vue with builtin toast

This commit is contained in:
aiden 2022-12-19 16:30:17 +08:00
parent 76d53cdaac
commit 8e3fe7cae3
2 changed files with 16 additions and 140 deletions

View File

@ -1,10 +1,9 @@
import Progress from './Progress.vue'
import { mountVueComponent, getCsrf, delay } from '@/core/utils'
import { getCsrf, delay } from '@/core/utils'
import { sq } from '@/core/spin-query'
import { urlChange } from '@/core/observer'
import { Toast } from '@/core/toast'
const addSeries = async (sid, uid, csrf) => {
const importSeries = async (sid, uid, csrf) => {
// 获取合集所有视频
const seriesVideos = (
await fetch(
@ -18,17 +17,6 @@ const addSeries = async (sid, uid, csrf) => {
t => t !== '',
)
// 挂载弹出框
const mountPoint = document.createElement('div')
document.getElementsByTagName('body')[0].appendChild(mountPoint)
type ProgressSetting = Vue & {
isDisabled: boolean
all: number
handled: number
}
const p: ProgressSetting = mountVueComponent(Progress, mountPoint)
p.all = seriesVideos.length
// 创建收藏夹获取新收藏夹id
let favId = 0
while (true) {
@ -49,6 +37,8 @@ const addSeries = async (sid, uid, csrf) => {
}
}
const prompt = ' 过久未动即触发风控,等待一段时间自动继续'
const toast = Toast.info(`0 / ${seriesVideos.length}${prompt}`, '收藏系列')
// 添加每一个视频至收藏夹
for (let i = 0; i < seriesVideos.length; i++) {
// 做个延迟,防止太快而遭服务器拒绝
@ -64,21 +54,24 @@ const addSeries = async (sid, uid, csrf) => {
}).then(r => r.json())
if (response.code === 0) {
// 如果请求成功,更新progress组件
p.handled = i + 1
// 如果请求成功,更新toast
toast.message = `${i + 1} / ${seriesVideos.length}${prompt}`
break
} else {
// 如果请求失败等待2s后重试
await delay(2000)
// 如果请求失败,等待若干秒后重试
const delayTime = Math.random() * 2000 + 2000
console.log(`请求失败,等待${(delayTime / 1000).toFixed(1)}s后重试`)
await delay(delayTime)
}
}
}
// 添加收藏夹任务完成,更改按钮为可点击
p.isDisabled = false
// 添加收藏夹任务完成
toast.duration = 1000
Toast.success('完成', '收藏系列', 2000)
}
const addCollection = async (sid, csrf) => {
const importCollection = async (sid, csrf) => {
while (true) {
const response = await fetch('https://api.bilibili.com/x/v3/fav/season/fav', {
method: 'POST',
@ -144,9 +137,9 @@ const addButton = () => {
button.onclick = async () => {
if (pageType === PageType.Series) {
await addSeries(sid, uid, csrf)
await importSeries(sid, uid, csrf)
} else {
await addCollection(sid, csrf)
await importCollection(sid, csrf)
}
}
}

View File

@ -1,117 +0,0 @@
<template>
<div class="mask" :class="{ visible: isVisible }">
<div class="container">
<p class="title">收藏进度</p>
<div class="progress-wrapper">
<span class="progress">{{ handled }} / {{ all }}</span>
</div>
<button
:disabled="isDisabled"
:class="{ disabled: isDisabled }"
class="sure_button"
@click="sure"
>
确定
</button>
</div>
</div>
</template>
<script lang="ts">
export default Vue.extend({
props: {
isDisabled: {
type: Boolean,
default: true,
},
all: {
type: Number,
default: 0,
},
handled: {
type: Number,
default: 0,
},
},
data() {
return {
isVisible: false,
}
},
mounted() {
setTimeout(() => {
this.isVisible = true
})
},
methods: {
sure() {
this.isVisible = false
this.$el.ontransitionend = () => {
this.$destroy()
this.$el.parentNode.removeChild(this.$el)
}
},
},
})
</script>
<style scoped>
.mask {
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.65);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10102;
opacity: 0;
transition: opacity 0.5s linear;
}
.mask.visible {
opacity: 1;
}
.container {
width: 420px;
background-color: white;
border-radius: 4px;
padding: 40px;
}
.title {
height: 50px;
line-height: 50px;
font-size: 40px;
text-align: center;
margin-bottom: 30px;
}
.progress-wrapper {
text-align: center;
font-size: 30px;
margin-bottom: 30px;
height: 50px;
line-height: 50px;
}
.sure_button {
cursor: pointer;
background: #00aeec;
color: white;
border: none;
border-radius: 4px;
font-size: 14px;
width: 160px;
height: 40px;
margin: 0 auto;
display: block;
}
.sure_button.disabled {
background-color: #a0cfff;
cursor: not-allowed;
}
</style>