246 lines
6.6 KiB
Vue
246 lines
6.6 KiB
Vue
<template>
|
||
<el-empty v-if="list.length===0" description="没有搜索到内容"/>
|
||
<div>
|
||
<div class="list">
|
||
<div class="item" v-for="i in list">
|
||
<el-card @click="getInfo(i.id,i.img)" shadow="hover" :body-style="{ padding: '0px' }">
|
||
<img :src="i.img" class="image"/>
|
||
<div style="padding: 14px">
|
||
<span style="width: 100%;white-space: nowrap;text-overflow:ellipsis;">{{ i.title }}</span>
|
||
<div class="bottom">
|
||
<time class="time">上映时间：{{ i.year }}</time>
|
||
<el-button text class="button">详情</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
<el-dialog v-model="dialogFormVisible" title="添加订阅">
|
||
<div style="display: flex;align-items: center;padding: 5px">
|
||
<el-input style="width: 100%" v-model="enName">
|
||
<template #prepend>英文名</template>
|
||
</el-input>
|
||
|
||
</div>
|
||
<div style="display: flex;align-items: center;padding: 5px">
|
||
<el-input style="width: 100%" v-model="subtitle">
|
||
<template #prepend>副标题</template>
|
||
</el-input>
|
||
</div>
|
||
<div style="display: flex;align-items: center;padding: 5px">
|
||
<el-input style="width: 100%" v-model="url">
|
||
<template #prepend>播放地址</template>
|
||
</el-input>
|
||
</div>
|
||
<div style="display: flex;align-items: center;padding: 5px">
|
||
<el-time-picker v-model="time" placeholder="Arbitrary time"/>
|
||
<el-input style="width: 20%;left:10px" v-model="year">
|
||
<template #prepend>年份</template>
|
||
</el-input>
|
||
<el-input style="width:15%;left:20px" v-model="season">
|
||
<template #prepend>季</template>
|
||
</el-input>
|
||
<el-input style="width: 30%;left:30px" v-model="ep">
|
||
<template #prepend>订阅位置(集)</template>
|
||
</el-input>
|
||
<el-input style="width: 30%;left:30px" v-model="count">
|
||
<template #prepend>总集数</template>
|
||
</el-input>
|
||
</div>
|
||
<div style="display: flex;align-items: center;padding: 5px">
|
||
<el-select v-model="type" value-key="browsecat">
|
||
<el-option :value="418" label="日漫">日漫</el-option>
|
||
<el-option :value="417" label="国漫">国漫</el-option>
|
||
<el-option :value="403" label="综艺">综艺</el-option>
|
||
<el-option :value="402" label="电视剧">电视剧</el-option>
|
||
<el-option :value="422" label="纪录片">纪录片</el-option>
|
||
</el-select>
|
||
<div style="padding: 12px">
|
||
<el-checkbox-group v-model="tags" size="large">
|
||
<el-checkbox-button label="1">禁转</el-checkbox-button>
|
||
<el-checkbox-button label="3">官方</el-checkbox-button>
|
||
<el-checkbox-button label="5">国语</el-checkbox-button>
|
||
<el-checkbox-button label="6">中字</el-checkbox-button>
|
||
<el-checkbox-button label="7">HDR</el-checkbox-button>
|
||
</el-checkbox-group>
|
||
</div>
|
||
|
||
</div>
|
||
<el-input
|
||
style="display: flex;align-items: center;padding: 5px"
|
||
:autosize="{ minRows: 10 ,maxRows:10}"
|
||
v-model="info"
|
||
:rows="2"
|
||
type="textarea"
|
||
placeholder="Please input"
|
||
/>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">关闭</el-button>
|
||
<el-button type="primary" @click="addsubscribe">
|
||
订阅
|
||
</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ref} from 'vue';
|
||
import {addSubscribe, getImdbName, getVideoInfo, searchVideo} from '../../api/Video.js'
|
||
import {onBeforeRouteUpdate, useRoute} from "vue-router";
|
||
import {ElLoading, ElMessage} from "element-plus";
|
||
import dayjs from "dayjs";
|
||
import {Calendar} from "@element-plus/icons-vue";
|
||
|
||
let list = ref([])
|
||
const info = ref("")
|
||
const route = useRoute()
|
||
const year = ref("")
|
||
const ep = ref(1)
|
||
const season = ref(1)
|
||
const url = ref("")
|
||
const subtitle = ref("")
|
||
const img = ref("")
|
||
const time = ref("")
|
||
const name = ref("")
|
||
const count = ref(0)
|
||
const type = ref()
|
||
const tags = ref([])
|
||
|
||
async function onSubmit(name) {
|
||
let res = await searchVideo(name)
|
||
list.value = res.data.data
|
||
}
|
||
|
||
|
||
onSubmit(route.query.name)
|
||
onBeforeRouteUpdate(next => {
|
||
onSubmit(next.query.name)
|
||
})
|
||
|
||
|
||
let vid = "";
|
||
const dialogFormVisible = ref(false)
|
||
let imdb = "";
|
||
|
||
async function getInfo(id, i) {
|
||
const loadingInstance = ElLoading.service({fullscreen: true})
|
||
vid = id
|
||
img.value = i
|
||
let res = await getVideoInfo(id)
|
||
info.value = res.data.format.replace('img1.doubanio','img9.doubanio')
|
||
year.value = res.data.year
|
||
imdb = res.data.imdb_link || ""
|
||
console.info(res.data.trans_title.length)
|
||
if (res.data.trans_title.length === 0) {
|
||
subtitle.value = res.data.this_title.join(" / ")
|
||
} else {
|
||
subtitle.value = res.data.this_title.join(" / ") + " / " + res.data.trans_title.join(" / ")
|
||
}
|
||
|
||
|
||
count.value = res.data.episodes
|
||
name.value = res.data.chinese_title
|
||
enName.value = ""
|
||
if (res.data.imdb_link) {
|
||
await subscribe(res.data.imdb_link)
|
||
}
|
||
dialogFormVisible.value = true
|
||
loadingInstance.close()
|
||
}
|
||
|
||
const enName = ref("")
|
||
|
||
async function subscribe(url) {
|
||
const res = await getImdbName(url)
|
||
enName.value = res.data
|
||
}
|
||
|
||
async function addsubscribe() {
|
||
let data = {
|
||
name: name.value,
|
||
rename: enName.value,
|
||
desc: info.value,
|
||
year: year.value,
|
||
season: season.value,
|
||
ep: ep.value,
|
||
url: url.value,
|
||
img: img.value,
|
||
subtitle: subtitle.value,
|
||
time: dayjs(time.value).format("HH:mm:ss"),
|
||
skip: ep.value,
|
||
sid: vid,
|
||
count: count.value,
|
||
imdb: imdb,
|
||
type:type.value,
|
||
tags: tags.value.join(",")
|
||
}
|
||
let ignore = ["imdb"]
|
||
for (let i in data) {
|
||
if (!data[i] && !ignore.includes(i)) {
|
||
console.log(i,data[i])
|
||
ElMessage({
|
||
message: '请完整填写内容！',
|
||
type: 'error',
|
||
})
|
||
return
|
||
}
|
||
}
|
||
let res = await addSubscribe(data)
|
||
if (res.data == "添加成功") {
|
||
ElMessage({
|
||
message: res.data,
|
||
type: 'success',
|
||
})
|
||
} else {
|
||
ElMessage({
|
||
message: res.data,
|
||
type: 'error',
|
||
})
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.item {
|
||
width: 200px;
|
||
margin: 20px;
|
||
|
||
& img {
|
||
height: 300px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.time {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.bottom {
|
||
margin-top: 13px;
|
||
line-height: 12px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.button {
|
||
padding: 0;
|
||
min-height: auto;
|
||
min-width: 40px;
|
||
}
|
||
|
||
.image {
|
||
width: 100%;
|
||
display: block;
|
||
}</style>
|