104 lines
1.9 KiB
Vue
104 lines
1.9 KiB
Vue
<template>
|
||
<div class="list">
|
||
<div class="item" v-for="i in list">
|
||
<el-card :body-style="{ padding: '0px' }">
|
||
<img :src="i.img" class="image" />
|
||
<div style="padding: 14px">
|
||
<span>{{i.name}}</span>
|
||
<div class="bottom">
|
||
<time class="time">正在订阅：{{i.skip}}/{{i.count}}</time>
|
||
<el-button text class="button" @click="del(i.id)">删除</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {onMounted, ref} from "vue";
|
||
import {delSubscribe, getSubscribe} from '../../api/Video.js'
|
||
import {ElMessage, ElMessageBox} from "element-plus";
|
||
|
||
const list = ref([])
|
||
onMounted(async ()=>{
|
||
const res = await getSubscribe()
|
||
list.value = res.data
|
||
})
|
||
function del(id){
|
||
ElMessageBox.confirm(
|
||
'确认删除?',
|
||
'Warning',
|
||
{
|
||
confirmButtonText: '确认',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
}
|
||
)
|
||
.then(() => {
|
||
del2(id)
|
||
})
|
||
.catch(() => {
|
||
|
||
})
|
||
}
|
||
async function del2(id){
|
||
let res = await delSubscribe(id)
|
||
if(res.data == "删除成功"){
|
||
ElMessage({
|
||
message: '删除成功',
|
||
type: 'success',
|
||
})
|
||
}else{
|
||
ElMessage({
|
||
message:"删除失败",
|
||
type:"error"
|
||
})
|
||
}
|
||
const res2 = await getSubscribe()
|
||
list.value = res2.data
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.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>
|