오디션 배역 상세 페이지 추가
This commit is contained in:
Yu Sung
parent
4b9259c525
commit
a0a80bf626
|
|
@ -205,6 +205,11 @@ const routes = [
|
|||
name: 'AuditionDetailView',
|
||||
component: () => import(/* webpackChunkName: "audition" */ '../views/Audition/AuditionDetailView.vue')
|
||||
},
|
||||
{
|
||||
path: '/audition/role/detail',
|
||||
name: 'AuditionRoleDetailView',
|
||||
component: () => import(/* webpackChunkName: "audition" */ '../views/Audition/AuditionRoleDetailView.vue')
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -540,6 +540,15 @@ export default {
|
|||
},
|
||||
|
||||
selectAuditionRole(auditionRole) {
|
||||
this.$router.push(
|
||||
{
|
||||
name: 'AuditionRoleDetailView',
|
||||
params: {
|
||||
audition_role_id: auditionRole.id,
|
||||
audition_title: this.audition_title
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-toolbar dark>
|
||||
<v-spacer />
|
||||
<v-toolbar-title>{{ audition_title }} - {{ audition_role_name }}</v-toolbar-title>
|
||||
<v-spacer />
|
||||
</v-toolbar>
|
||||
|
||||
<br>
|
||||
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="4">
|
||||
<v-card>
|
||||
<v-img
|
||||
:src="audition_role_detail.imageUrl"
|
||||
class="audition-image"
|
||||
/>
|
||||
|
||||
<v-card-text
|
||||
v-if="
|
||||
audition_role_detail.auditionScriptUrl !== undefined &&
|
||||
audition_role_detail.auditionScriptUrl.length > 0
|
||||
"
|
||||
>
|
||||
<a
|
||||
:href="audition_role_detail.auditionScriptUrl"
|
||||
class="audition-script-link"
|
||||
>
|
||||
오디션 대본 링크
|
||||
</a>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-text>
|
||||
<b>오디션 배역 정보</b>
|
||||
<vue-show-more-text
|
||||
:text="audition_role_detail.information"
|
||||
:lines="3"
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="8">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-simple-table class="elevation-10">
|
||||
<template>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">
|
||||
지원 번호
|
||||
</th>
|
||||
<th class="text-center">
|
||||
프로필
|
||||
</th>
|
||||
<th class="text-center">
|
||||
닉네임
|
||||
</th>
|
||||
<th class="text-center">
|
||||
듣기
|
||||
</th>
|
||||
<th class="text-center">
|
||||
추천수
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="item in audition_role_applicant_list"
|
||||
:key="item.applicantId"
|
||||
>
|
||||
<td>{{ item.applicantId }}</td>
|
||||
<td align="center">
|
||||
<v-img
|
||||
max-width="70"
|
||||
max-height="70"
|
||||
:src="item.profileImageUrl"
|
||||
class="rounded-circle"
|
||||
/>
|
||||
<br>
|
||||
<a
|
||||
:href="item.profileImageUrl"
|
||||
class="v-btn v-btn--outlined"
|
||||
>
|
||||
다운로드
|
||||
</a>
|
||||
</td>
|
||||
<td>{{ item.nickname }}</td>
|
||||
<td>
|
||||
<vuetify-audio
|
||||
:file="item.voiceUrl"
|
||||
:downloadable="true"
|
||||
:auto-play="false"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ item.voteCount }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-simple-table>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row class="text-center">
|
||||
<v-col>
|
||||
<v-pagination
|
||||
v-model="page"
|
||||
:length="total_page"
|
||||
circle
|
||||
@input="next"
|
||||
/>
|
||||
</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'
|
||||
import VuetifyAudio from "vuetify-audio";
|
||||
|
||||
export default {
|
||||
name: "AuditionDetailView",
|
||||
|
||||
components: {VuetifyAudio, VueShowMoreText},
|
||||
|
||||
data() {
|
||||
return {
|
||||
is_loading: false,
|
||||
audition_role_id: 0,
|
||||
audition_title: '',
|
||||
audition_role_name: '',
|
||||
|
||||
audition_role_detail: {},
|
||||
audition_role_applicant_list: [],
|
||||
|
||||
page: 1,
|
||||
total_page: 0,
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
this.audition_role_id = this.$route.params.audition_role_id
|
||||
this.audition_title = this.$route.params.audition_title
|
||||
|
||||
if (this.audition_role_id !== undefined && this.audition_role_id > 0) {
|
||||
await this.getAuditionRoleDetail()
|
||||
await this.getAuditionRoleApplicant()
|
||||
} else {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
notifyError(message) {
|
||||
this.$dialog.notify.error(message)
|
||||
},
|
||||
|
||||
notifySuccess(message) {
|
||||
this.$dialog.notify.success(message)
|
||||
},
|
||||
|
||||
isValidUrl(string) {
|
||||
try {
|
||||
new URL(string); // URL 생성 시 예외가 발생하면 유효하지 않은 URL
|
||||
return true;
|
||||
} catch (_) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
async getAuditionRoleDetail() {
|
||||
try {
|
||||
const res = await api.getAuditionRoleDetail(this.audition_role_id)
|
||||
if (res.status === 200 && res.data.success === true) {
|
||||
const data = res.data.data
|
||||
|
||||
this.audition_role_name = data.name
|
||||
this.audition_role_detail.imageUrl = data.imageUrl
|
||||
this.audition_role_detail.information = data.information
|
||||
|
||||
if (this.isValidUrl(data.auditionScriptUrl)) {
|
||||
this.audition_role_detail.auditionScriptUrl = data.auditionScriptUrl
|
||||
}
|
||||
} else {
|
||||
this.is_loading = false
|
||||
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||
}
|
||||
} catch (e) {
|
||||
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||
} finally {
|
||||
this.is_loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async getAuditionRoleApplicant() {
|
||||
this.is_loading = true
|
||||
|
||||
try {
|
||||
const res = await api.getAuditionApplicantList(this.audition_role_id, this.page)
|
||||
if (res.status === 200 && res.data.success === true) {
|
||||
const data = res.data.data
|
||||
const total_page = Math.ceil(data.totalCount / 20)
|
||||
this.audition_role_applicant_list = data.items
|
||||
|
||||
if (total_page <= 0) {
|
||||
this.total_page = 1
|
||||
} else {
|
||||
this.total_page = total_page
|
||||
}
|
||||
} else {
|
||||
this.is_loading = false
|
||||
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||
}
|
||||
} catch (e) {
|
||||
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||
} finally {
|
||||
this.is_loading = false
|
||||
}
|
||||
},
|
||||
|
||||
async next() {
|
||||
await this.getAuditionRoleApplicant()
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Loading…
Reference in New Issue