182 lines
4.1 KiB
Vue
182 lines
4.1 KiB
Vue
<template>
|
|
<div>
|
|
<v-toolbar dark>
|
|
<v-spacer />
|
|
<v-toolbar-title>라이브 관리 (진행예정 / 진행중)</v-toolbar-title>
|
|
<v-spacer />
|
|
</v-toolbar>
|
|
|
|
<br>
|
|
|
|
<v-container>
|
|
<v-row>
|
|
<v-col>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="liveList"
|
|
:loading="isLoading"
|
|
:items-per-page="-1"
|
|
class="elevation-1"
|
|
hide-default-footer
|
|
>
|
|
<template v-slot:item.id="{ item }">
|
|
{{ item.id }}
|
|
</template>
|
|
|
|
<template v-slot:item.title="{ item }">
|
|
{{ item.title }}
|
|
</template>
|
|
|
|
<template v-slot:item.content="{ item }">
|
|
{{ item.content }}
|
|
</template>
|
|
|
|
<template v-slot:item.nickname="{ item }">
|
|
{{ item.managerNickname }}
|
|
</template>
|
|
|
|
<template v-slot:item.cover="{ item }">
|
|
<img
|
|
:src="item.coverImageUrl"
|
|
alt=""
|
|
height="100"
|
|
width="100"
|
|
>
|
|
</template>
|
|
|
|
<template v-slot:item.ing="{ item }">
|
|
<span v-if="item.channelName.length > 0">진행중</span>
|
|
<span v-else>진행예정</span>
|
|
</template>
|
|
|
|
<template v-slot:item.type="{ item }">
|
|
<span v-if="item.type === 'SECRET'">비밀</span>
|
|
<span v-else-if="item.type === 'PRIVATE'">비공개</span>
|
|
<span v-else>공개</span>
|
|
</template>
|
|
|
|
<template v-slot:item.nickname="{ item }">
|
|
{{ item.password }}
|
|
</template>
|
|
|
|
<template v-slot:item.isAdult="{ item }">
|
|
<span v-if="item.isAdult">O</span>
|
|
<span v-else>X</span>
|
|
</template>
|
|
</v-data-table>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as api from "@/api/live"
|
|
|
|
export default {
|
|
name: "LiveRoom",
|
|
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
liveList: [],
|
|
headers: [
|
|
{
|
|
text: '방번호',
|
|
align: 'center',
|
|
sortable: false,
|
|
value: 'id',
|
|
},
|
|
{
|
|
text: '타이틀',
|
|
align: 'center',
|
|
sortable: false,
|
|
value: 'title',
|
|
},
|
|
{
|
|
text: '공지',
|
|
align: 'center',
|
|
sortable: false,
|
|
value: 'content',
|
|
},
|
|
{
|
|
text: '방장',
|
|
align: 'center',
|
|
sortable: false,
|
|
value: 'managerNickname',
|
|
},
|
|
{
|
|
text: '커버이미지',
|
|
align: 'center',
|
|
sortable: false,
|
|
value: 'cover',
|
|
},
|
|
{
|
|
text: '진행여부',
|
|
align: 'center',
|
|
sortable: false,
|
|
value: 'ing',
|
|
},
|
|
{
|
|
text: '공개여부',
|
|
align: 'center',
|
|
sortable: false,
|
|
value: 'type',
|
|
},
|
|
{
|
|
text: '비밀번호',
|
|
align: 'center',
|
|
sortable: false,
|
|
value: 'password',
|
|
},
|
|
{
|
|
text: '19금',
|
|
align: 'center',
|
|
sortable: false,
|
|
value: 'isAdult',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
|
|
async created() {
|
|
await this.getLive()
|
|
},
|
|
|
|
methods: {
|
|
notifyError(message) {
|
|
this.$dialog.notify.error(message)
|
|
},
|
|
|
|
notifySuccess(message) {
|
|
this.$dialog.notify.success(message)
|
|
},
|
|
|
|
async getLive() {
|
|
this.isLoading = true
|
|
|
|
try {
|
|
this.isLoading = false
|
|
|
|
const res = await api.getLive()
|
|
|
|
if (res.status === 200 && res.data.success === true) {
|
|
this.liveList = res.data.data.liveList
|
|
} else {
|
|
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
|
}
|
|
|
|
this.isLoading = false
|
|
} catch (e) {
|
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
|
this.isLoading = false
|
|
}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|