theluyuan/ptSend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 修改添加订阅模态窗口样式

Browse Source
This commit is contained in:
SummerTail 2023-07-14 10:17:52 +08:00
parent 41d16c43b0
commit 02023f95ed
1 changed files with 140 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
view/src/page/subscribe/addSubscribe.vue
View File

@ -1,55 +1,68 @@
<template> <template>
<el-empty v-if="list.length===0" description="没有搜索到内容"/> <el-empty v-if="list.length===0" description="没有搜索到内容"/>
<div> <div>
<div class="list"> <div class="list">
<div class="item" v-for="i in list"> <div class="item" v-for="i in list">
<el-card @click="getInfo(i.id,i.img)" shadow="hover" :body-style="{ padding: '0px' }"> <el-card @click="getInfo(i.id,i.img)" shadow="hover" :body-style="{ padding: '0px' }">
<img :src="i.img" class="image"/> <img :src="i.img" class="image"/>
<div style="padding: 14px"> <div style="padding: 14px">
<span>{{ i.title }}({{ i.year }})</span> <span>{{ i.title }}({{ i.year }})</span>
<div class="bottom"> <div class="bottom">
<time class="time">类型：{{ i.type }}</time> <time class="time">类型：{{ i.type }}</time>
<el-button text class="button">详情</el-button> <el-button text class="button">详情</el-button>
</div>
</div>
</el-card>
</div> </div>
</div> </div>
<el-dialog v-model="dialogFormVisible" title="详情"> </el-card>
<textarea style="width: 95%;height: 400px;" v-model="info"></textarea> </div>
<div style="display: flex;align-items: center;padding: 5px"> </div>
英文名: <el-dialog v-model="dialogFormVisible" title="详情">
<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> <div style="display: flex;align-items: center;padding: 5px">
<div style="display: flex;align-items: center;padding: 5px"> <el-input style="width: 100%" v-model="enName">
副标题: <template #prepend>英文名</template>
<el-input style="width: 80%" v-model="subtitle"></el-input> </el-input>
</div>
<div style="display: flex;align-items: center;padding: 5px"> </div>
地址: <div style="display: flex;align-items: center;padding: 5px">
<el-input style="width: 80%" v-model="url"></el-input> <el-input style="width: 100%" v-model="subtitle">
</div> <template #prepend>副标题</template>
<div style="display: flex;align-items: center;padding: 5px"> </el-input>
检查更新时间: </div>
<el-time-picker v-model="time" placeholder="Arbitrary time"/> <div style="display: flex;align-items: center;padding: 5px">
</div> <el-input style="width: 100%" v-model="url">
<template #footer> <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"> <span class="dialog-footer">
<el-button @click="dialogFormVisible = false">关闭</el-button> <el-button @click="dialogFormVisible = false">关闭</el-button>
<el-button type="primary" @click="addsubscribe"> <el-button type="primary" @click="addsubscribe">
订阅 订阅
</el-button> </el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script setup> <script setup>
@ -58,6 +71,7 @@ import {addSubscribe, getImdbName, getVideoInfo, searchVideo} from '../../api/Vi
import {onBeforeRouteUpdate, useRoute} from "vue-router"; import {onBeforeRouteUpdate, useRoute} from "vue-router";
import {ElLoading, ElMessage} from "element-plus"; import {ElLoading, ElMessage} from "element-plus";
import dayjs from "dayjs"; import dayjs from "dayjs";
import {Calendar} from "@element-plus/icons-vue";
let list = ref([]) let list = ref([])
const info = ref("") const info = ref("")
@ -71,15 +85,16 @@ const img = ref("")
const time = ref("") const time = ref("")
const name = ref("") const name = ref("")
const count = ref(0) const count = ref(0)
async function onSubmit(name) { async function onSubmit(name) {
let res = await searchVideo(name) let res = await searchVideo(name)
list.value = res.data.data list.value = res.data.data
} }
onSubmit(route.query.name) onSubmit(route.query.name)
onBeforeRouteUpdate(next => { onBeforeRouteUpdate(next => {
onSubmit(next.query.name) onSubmit(next.query.name)
}) })
@ -88,106 +103,113 @@ const dialogFormVisible = ref(false)
async function getInfo(id, i) { async function getInfo(id, i) {
const loadingInstance = ElLoading.service({fullscreen: true}) const loadingInstance = ElLoading.service({fullscreen: true})
vid = id vid = id
img.value = i img.value = i
let res = await getVideoInfo(id) let res = await getVideoInfo(id)
info.value = res.data.format info.value = res.data.format
year.value = res.data.year year.value = res.data.year
subtitle.value = res.data.trans_title.join(" / ") console.info(res.data.trans_title.length)
count.value = res.data.episodes if (res.data.trans_title.length === 0) {
name.value = res.data.chinese_title subtitle.value = res.data.this_title.join(" / ")
enName.value = "" } else {
if(res.data.imdb_link){ subtitle.value = res.data.this_title.join(" / ") + " / " + res.data.trans_title.join(" / ")
await subscribe(res.data.imdb_link) }
}
dialogFormVisible.value = true
loadingInstance.close() 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("") const enName = ref("")
async function subscribe(url) { async function subscribe(url) {
const res = await getImdbName(url) const res = await getImdbName(url)
enName.value = res.data enName.value = res.data
} }
async function addsubscribe() { async function addsubscribe() {
let data = { let data = {
name: name.value, name: name.value,
rename: enName.value, rename: enName.value,
desc: info.value, desc: info.value,
year: year.value, year: year.value,
season: season.value, season: season.value,
ep: ep.value, ep: ep.value,
url: url.value, url: url.value,
img: img.value, img: img.value,
subtitle: subtitle.value, subtitle: subtitle.value,
time: dayjs(time.value).format("HH:mm:ss"), time: dayjs(time.value).format("HH:mm:ss"),
skip:season.value, skip: season.value,
sid:vid, sid: vid,
count:count.value count: count.value
} }
for(let i in data){ for (let i in data) {
if(!data[i]){ if (!data[i]) {
ElMessage({ ElMessage({
message: '请完整填写内容！', message: '请完整填写内容！',
type: 'error', type: 'error',
}) })
return return
}
}
let res = await addSubscribe(data)
if(res.data == "添加成功"){
ElMessage({
message: res.data,
type: 'success',
})
}else{
ElMessage({
message: res.data,
type: 'error',
})
} }
}
let res = await addSubscribe(data)
if (res.data == "添加成功") {
ElMessage({
message: res.data,
type: 'success',
})
} else {
ElMessage({
message: res.data,
type: 'error',
})
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.list { .list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.item { .item {
width: 200px; width: 200px;
margin: 20px; margin: 20px;
& img { & img {
height: 300px; height: 300px;
}
} }
}
} }
.time { .time {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
} }
.bottom { .bottom {
margin-top: 13px; margin-top: 13px;
line-height: 12px; line-height: 12px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.button { .button {
padding: 0; padding: 0;
min-height: auto; min-height: auto;
min-width: 40px; min-width: 40px;
} }
.image { .image {
width: 100%; width: 100%;
display: block; display: block;
}</style> }</style>