오디션 상세 페이지 추가
This commit is contained in:
Yu Sung
@@ -197,9 +197,14 @@ const routes = [
|
||||
},
|
||||
{
|
||||
path: '/audition',
|
||||
name: 'AuditionListView',
|
||||
name: 'AuditionView',
|
||||
component: () => import(/* webpackChunkName: "audition" */ '../views/Audition/AuditionView.vue')
|
||||
},
|
||||
{
|
||||
path: '/audition/detail',
|
||||
name: 'AuditionDetailView',
|
||||
component: () => import(/* webpackChunkName: "audition" */ '../views/Audition/AuditionDetailView.vue')
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
219
src/views/Audition/AuditionDetailView.vue
Normal file
219
src/views/Audition/AuditionDetailView.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-toolbar dark>
|
||||
<v-spacer />
|
||||
<v-toolbar-title>{{ audition_title }}</v-toolbar-title>
|
||||
<v-spacer />
|
||||
</v-toolbar>
|
||||
|
||||
<br>
|
||||
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="4">
|
||||
<v-card>
|
||||
<v-img
|
||||
:src="audition_detail.imageUrl"
|
||||
class="audition-image"
|
||||
/>
|
||||
|
||||
<v-card-text
|
||||
v-if="
|
||||
audition_detail.originalWorkUrl !== undefined &&
|
||||
audition_detail.originalWorkUrl.length > 0
|
||||
"
|
||||
>
|
||||
<a
|
||||
:href="audition_detail.originalWorkUrl"
|
||||
class="original-work-link"
|
||||
>
|
||||
원작링크
|
||||
</a>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text>
|
||||
<b>오디션 정보</b>
|
||||
<vue-show-more-text
|
||||
:text="audition_detail.information"
|
||||
:lines="3"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="8">
|
||||
<v-row>
|
||||
<v-col cols="8" />
|
||||
<v-col cols="4">
|
||||
<v-btn
|
||||
block
|
||||
color="#3bb9f1"
|
||||
dark
|
||||
depressed
|
||||
>
|
||||
배역 등록
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row v-if="audition_role_list.length > 0">
|
||||
<v-col
|
||||
v-for="(item, i) in audition_role_list"
|
||||
:key="i"
|
||||
cols="12"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<v-spacer />
|
||||
<v-img
|
||||
:src="item.imageUrl"
|
||||
class="audition-image"
|
||||
/>
|
||||
<v-spacer />
|
||||
</v-card-title>
|
||||
<v-card-text class="audition-title-container">
|
||||
{{ item.name }}
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
상태 : {{ getStatusStr(item.status) }}
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
text
|
||||
>
|
||||
수정
|
||||
</v-btn>
|
||||
<v-btn
|
||||
text
|
||||
>
|
||||
삭제
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-else>
|
||||
<v-col>
|
||||
등록된 배역이 없습니다.
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from '@/api/audition'
|
||||
|
||||
import VueShowMoreText from 'vue-show-more-text'
|
||||
|
||||
export default {
|
||||
name: "AuditionDetailView",
|
||||
|
||||
components: {VueShowMoreText},
|
||||
|
||||
data() {
|
||||
return {
|
||||
is_loading: false,
|
||||
audition_id: 0,
|
||||
audition_title: '',
|
||||
audition_detail: {},
|
||||
audition_role_list: [],
|
||||
|
||||
audition_role: {},
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
this.audition_id = this.$route.params.audition_id
|
||||
this.audition_title = this.$route.params.audition_title
|
||||
|
||||
if (this.audition_id !== undefined && this.audition_id > 0) {
|
||||
await this.getAuditionDetail()
|
||||
} else {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
notifyError(message) {
|
||||
this.$dialog.notify.error(message)
|
||||
},
|
||||
|
||||
notifySuccess(message) {
|
||||
this.$dialog.notify.success(message)
|
||||
},
|
||||
|
||||
getStatusStr(status) {
|
||||
if (status === 'NOT_STARTED') {
|
||||
return "모집전"
|
||||
} else if (status === 'COMPLETED') {
|
||||
return "모집완료"
|
||||
} else {
|
||||
return "모집중"
|
||||
}
|
||||
},
|
||||
|
||||
isValidUrl(string) {
|
||||
try {
|
||||
new URL(string); // URL 생성 시 예외가 발생하면 유효하지 않은 URL
|
||||
return true;
|
||||
} catch (_) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
async getAuditionDetail() {
|
||||
this.is_loading = true
|
||||
|
||||
try {
|
||||
const res = await api.getAuditionDetail(this.audition_id)
|
||||
if (res.status === 200 && res.data.success === true) {
|
||||
const data = res.data.data
|
||||
|
||||
this.audition_title = data.title
|
||||
this.audition_detail.imageUrl = data.imageUrl
|
||||
this.audition_detail.information = data.information
|
||||
this.audition_role_list = data.roleList
|
||||
|
||||
if (this.isValidUrl(data.originalWorkUrl)) {
|
||||
this.audition_detail.originalWorkUrl = data.originalWorkUrl
|
||||
}
|
||||
} else {
|
||||
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||
}
|
||||
} catch (e) {
|
||||
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||
} finally {
|
||||
this.is_loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.original-work-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.audition-image {
|
||||
aspect-ratio: 1000 / 530;
|
||||
}
|
||||
|
||||
.audition-title-container {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
.no-audition_role {
|
||||
height: 50vh;
|
||||
margin-top: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -34,6 +34,7 @@
|
||||
<v-img
|
||||
:src="item.imageUrl"
|
||||
class="cover-image"
|
||||
@click="selectAudition(item)"
|
||||
/>
|
||||
<v-spacer />
|
||||
</v-card-title>
|
||||
@@ -467,6 +468,17 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
selectAudition(audition) {
|
||||
this.$router.push(
|
||||
{
|
||||
name: 'AuditionDetailView',
|
||||
params: {
|
||||
audition_id: audition.id, audition_title: audition.title
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
async next() {
|
||||
await this.getAuditionList()
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user