오디션 배역 상세 페이지 추가
This commit is contained in:
Yu Sung
@@ -205,6 +205,11 @@ const routes = [
|
|||||||
name: 'AuditionDetailView',
|
name: 'AuditionDetailView',
|
||||||
component: () => import(/* webpackChunkName: "audition" */ '../views/Audition/AuditionDetailView.vue')
|
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) {
|
selectAuditionRole(auditionRole) {
|
||||||
|
this.$router.push(
|
||||||
|
{
|
||||||
|
name: 'AuditionRoleDetailView',
|
||||||
|
params: {
|
||||||
|
audition_role_id: auditionRole.id,
|
||||||
|
audition_title: this.audition_title
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
234
src/views/Audition/AuditionRoleDetailView.vue
Normal file
234
src/views/Audition/AuditionRoleDetailView.vue
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user