update 修改添加订阅模态窗口样式
This commit is contained in:
parent
41d16c43b0
commit
02023f95ed
@ -1,55 +1,68 @@
|
||||
<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>{{ i.title }}({{ i.year }})</span>
|
||||
<div class="bottom">
|
||||
<time class="time">类型：{{ i.type }}</time>
|
||||
<el-button text class="button">详情</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<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>{{ i.title }}({{ i.year }})</span>
|
||||
<div class="bottom">
|
||||
<time class="time">类型：{{ i.type }}</time>
|
||||
<el-button text class="button">详情</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="dialogFormVisible" title="详情">
|
||||
<textarea style="width: 95%;height: 400px;" v-model="info"></textarea>
|
||||
<div style="display: flex;align-items: center;padding: 5px">
|
||||
英文名:
|
||||
<el-input style="width: 300px" v-model="enName"></el-input>
|
||||
年份
|
||||
<el-input style="width: 100px" v-model="year"></el-input>
|
||||
第几季
|
||||
<el-input style="width: 100px" v-model="season"></el-input>
|
||||
开始集数
|
||||
<el-input style="width: 100px" v-model="ep"></el-input>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="dialogFormVisible" title="详情">
|
||||
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;padding: 5px">
|
||||
副标题:
|
||||
<el-input style="width: 80%" v-model="subtitle"></el-input>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;padding: 5px">
|
||||
地址:
|
||||
<el-input style="width: 80%" v-model="url"></el-input>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;padding: 5px">
|
||||
检查更新时间:
|
||||
<el-time-picker v-model="time" placeholder="Arbitrary time"/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<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>
|
||||
</div>
|
||||
<el-input
|
||||
: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>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -58,6 +71,7 @@ import {addSubscribe, getImdbName, getVideoInfo, searchVideo} from '../../api/Vi
|
||||
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("")
|
||||
@ -71,15 +85,16 @@ const img = ref("")
|
||||
const time = ref("")
|
||||
const name = ref("")
|
||||
const count = ref(0)
|
||||
|
||||
async function onSubmit(name) {
|
||||
let res = await searchVideo(name)
|
||||
list.value = res.data.data
|
||||
let res = await searchVideo(name)
|
||||
list.value = res.data.data
|
||||
}
|
||||
|
||||
|
||||
onSubmit(route.query.name)
|
||||
onBeforeRouteUpdate(next => {
|
||||
onSubmit(next.query.name)
|
||||
onSubmit(next.query.name)
|
||||
})
|
||||
|
||||
|
||||
@ -88,106 +103,113 @@ const dialogFormVisible = ref(false)
|
||||
|
||||
|
||||
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
|
||||
year.value = res.data.year
|
||||
subtitle.value = 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 loadingInstance = ElLoading.service({fullscreen: true})
|
||||
vid = id
|
||||
img.value = i
|
||||
let res = await getVideoInfo(id)
|
||||
info.value = res.data.format
|
||||
year.value = res.data.year
|
||||
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
|
||||
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:season.value,
|
||||
sid:vid,
|
||||
count:count.value
|
||||
}
|
||||
for(let i in data){
|
||||
if(!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',
|
||||
})
|
||||
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: season.value,
|
||||
sid: vid,
|
||||
count: count.value
|
||||
}
|
||||
for (let i in data) {
|
||||
if (!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;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 200px;
|
||||
margin: 20px;
|
||||
.item {
|
||||
width: 200px;
|
||||
margin: 20px;
|
||||
|
||||
& img {
|
||||
height: 300px;
|
||||
}
|
||||
& img {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 13px;
|
||||
line-height: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
min-width: 40px;
|
||||
padding: 0;
|
||||
min-height: auto;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
display: block;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}</style>
|
||||
Loading…
Reference in New Issue
Block a user