시리즈 상세페이지 추가
This commit is contained in:
Yu Sung
parent
1082c9334f
commit
d9aaca3827
|
|
@ -30,6 +30,11 @@ const routes = [
|
|||
name: 'ContentSeriesList',
|
||||
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentSeriesList.vue')
|
||||
},
|
||||
{
|
||||
path: '/content/series/detail',
|
||||
name: 'ContentSeriesDetail',
|
||||
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentSeriesDetail.vue')
|
||||
},
|
||||
{
|
||||
path: '/calculate/live',
|
||||
name: 'CalculateLive',
|
||||
|
|
|
|||
|
|
@ -617,20 +617,6 @@
|
|||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog
|
||||
v-model="is_loading"
|
||||
max-width="400px"
|
||||
persistent
|
||||
>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="4">
|
||||
<v-card>
|
||||
<v-img
|
||||
:src="series_detail.coverImageUrl"
|
||||
class="cover-image"
|
||||
/>
|
||||
<v-card-text>
|
||||
제목 : {{ series_detail.title }}
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
소개 : <vue-show-more-text
|
||||
:text="series_detail.introduction"
|
||||
:lines="2"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
연재요일 : {{ series_detail.publishedDaysOfWeek }}
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
장르 : {{ series_detail.genre }}
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
키워드 : {{ series_detail.keywords }}
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
연령제한 : <span v-if="series_detail.isAdult">19세이상</span><span v-else>전체이용가</span>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
완결여부 : {{ series_detail.state }}
|
||||
</v-card-text>
|
||||
<v-card-text v-show="series_detail.writer !== undefined && series_detail.writer !== null">
|
||||
작가 : {{ series_detail.writer }}
|
||||
</v-card-text>
|
||||
<v-card-text v-show="series_detail.studio !== undefined && series_detail.studio !== null">
|
||||
제작사 : {{ series_detail.studio }}
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
콘텐츠
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-dialog
|
||||
v-model="is_loading"
|
||||
max-width="400px"
|
||||
persistent
|
||||
>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from '@/api/audio_content_series';
|
||||
|
||||
import VueShowMoreText from 'vue-show-more-text'
|
||||
|
||||
export default {
|
||||
name: "ContentSeriesDetail",
|
||||
|
||||
components: {VueShowMoreText},
|
||||
|
||||
data() {
|
||||
return {
|
||||
is_loading: false,
|
||||
series_detail: {},
|
||||
}
|
||||
},
|
||||
|
||||
async created() {
|
||||
await this.getSeriesDetail()
|
||||
},
|
||||
|
||||
methods: {
|
||||
notifyError(message) {
|
||||
this.$dialog.notify.error(message)
|
||||
},
|
||||
|
||||
notifySuccess(message) {
|
||||
this.$dialog.notify.success(message)
|
||||
},
|
||||
|
||||
async getSeriesDetail() {
|
||||
this.is_loading = true
|
||||
|
||||
try {
|
||||
const res = await api.getSeriesDetail(this.$route.params.seriesId)
|
||||
if (res.status === 200 && res.data.success === true) {
|
||||
this.series_detail = res.data.data
|
||||
} else {
|
||||
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||
}
|
||||
} catch (e) {
|
||||
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||
} finally {
|
||||
this.is_loading = false
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-card__text {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
aspect-ratio: 1/1.4;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -31,7 +31,11 @@
|
|||
<v-card>
|
||||
<v-card-title>
|
||||
<v-spacer />
|
||||
<v-img :src="item.coverImageUrl" />
|
||||
<v-img
|
||||
:src="item.coverImageUrl"
|
||||
class="cover-image"
|
||||
@click="selectSeries(item)"
|
||||
/>
|
||||
<v-spacer />
|
||||
</v-card-title>
|
||||
<v-card-text class="series-title-container">
|
||||
|
|
@ -322,6 +326,20 @@
|
|||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-dialog
|
||||
v-model="is_loading"
|
||||
max-width="400px"
|
||||
persistent
|
||||
>
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
/>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -334,7 +352,6 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
is_loading: false,
|
||||
is_modify: false,
|
||||
show_write_dialog: false,
|
||||
show_delete_confirm_dialog: false,
|
||||
series: {is_adult: false, published_days_of_week: []},
|
||||
|
|
@ -348,7 +365,7 @@ export default {
|
|||
{value: 'MON', str: '월'},
|
||||
{value: 'TUE', str: '화'},
|
||||
{value: 'WED', str: '수'},
|
||||
{value: 'THR', str: '목'},
|
||||
{value: 'THU', str: '목'},
|
||||
{value: 'FRI', str: '금'},
|
||||
{value: 'SAT', str: '토'},
|
||||
],
|
||||
|
|
@ -464,6 +481,10 @@ export default {
|
|||
this.submit();
|
||||
},
|
||||
|
||||
selectSeries(series) {
|
||||
this.$router.push({name: 'ContentSeriesDetail', params: {seriesId: series.seriesId}})
|
||||
},
|
||||
|
||||
async getSeriesGenreList() {
|
||||
this.is_loading = true
|
||||
try {
|
||||
|
|
@ -588,8 +609,6 @@ export default {
|
|||
request.studio = this.series.studio
|
||||
}
|
||||
|
||||
console.log(request)
|
||||
|
||||
const formData = new FormData()
|
||||
formData.append("request", JSON.stringify(request))
|
||||
|
||||
|
|
@ -681,4 +700,8 @@ export default {
|
|||
-webkit-line-clamp: 2;
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
aspect-ratio: 1/1.4;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue