test #84
@@ -1,40 +1,89 @@
|
|||||||
import Vue from 'vue';
|
import Vue from "vue";
|
||||||
|
|
||||||
async function getAudioContentSeriesList(page) {
|
async function getAudioContentSeriesList(page) {
|
||||||
return Vue.axios.get("/admin/audio-content/series?page=" + (page - 1) + "&size=10");
|
return Vue.axios.get("/admin/audio-content/series?page=" + (page - 1) + "&size=10");
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getAudioContentSeriesGenreList() {
|
async function getAudioContentSeriesGenreList() {
|
||||||
return Vue.axios.get('/admin/audio-content/series/genre');
|
return Vue.axios.get("/admin/audio-content/series/genre");
|
||||||
}
|
}
|
||||||
|
|
||||||
async function createAudioContentSeriesGenre(genre, is_adult) {
|
async function createAudioContentSeriesGenre(genre, is_adult) {
|
||||||
return Vue.axios.post('/admin/audio-content/series/genre', {genre: genre, isAdult: is_adult})
|
return Vue.axios.post("/admin/audio-content/series/genre", { genre: genre, isAdult: is_adult });
|
||||||
}
|
}
|
||||||
|
|
||||||
async function updateAudioContentSeriesGenre(request) {
|
async function updateAudioContentSeriesGenre(request) {
|
||||||
return Vue.axios.put('/admin/audio-content/series/genre', request)
|
return Vue.axios.put("/admin/audio-content/series/genre", request);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function updateAudioContentSeriesGenreOrders(ids) {
|
async function updateAudioContentSeriesGenreOrders(ids) {
|
||||||
return Vue.axios.put('/admin/audio-content/series/genre/orders', {ids: ids})
|
return Vue.axios.put("/admin/audio-content/series/genre/orders", { ids: ids });
|
||||||
}
|
}
|
||||||
|
|
||||||
async function searchSeriesList(searchWord) {
|
async function searchSeriesList(searchWord) {
|
||||||
return Vue.axios.get("/admin/audio-content/series/search?search_word=" + searchWord)
|
return Vue.axios.get("/admin/audio-content/series/search?search_word=" + searchWord);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 시리즈 수정
|
// 시리즈 수정
|
||||||
async function updateAudioContentSeries(request) {
|
async function updateAudioContentSeries(request) {
|
||||||
return Vue.axios.put('/admin/audio-content/series', request);
|
return Vue.axios.put("/admin/audio-content/series", request);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========================
|
||||||
|
// 시리즈 배너 API
|
||||||
|
// ========================
|
||||||
|
// 배너 리스트 조회
|
||||||
|
async function getSeriesBannerList(page = 1, size = 20) {
|
||||||
|
return Vue.axios.get("/admin/audio-content/series/banner/list", {
|
||||||
|
params: { page: page - 1, size }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 배너 등록
|
||||||
|
async function createSeriesBanner(bannerData) {
|
||||||
|
const formData = new FormData();
|
||||||
|
if (bannerData.image) formData.append("image", bannerData.image);
|
||||||
|
const requestData = { seriesId: bannerData.seriesId };
|
||||||
|
formData.append("request", JSON.stringify(requestData));
|
||||||
|
return Vue.axios.post("/admin/audio-content/series/banner/register", formData, {
|
||||||
|
headers: { "Content-Type": "multipart/form-data" }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 배너 수정
|
||||||
|
async function updateSeriesBanner(bannerData) {
|
||||||
|
const formData = new FormData();
|
||||||
|
if (bannerData.image) formData.append("image", bannerData.image);
|
||||||
|
const requestData = { seriesId: bannerData.seriesId, bannerId: bannerData.bannerId };
|
||||||
|
formData.append("request", JSON.stringify(requestData));
|
||||||
|
return Vue.axios.put("/admin/audio-content/series/banner/update", formData, {
|
||||||
|
headers: { "Content-Type": "multipart/form-data" }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 배너 삭제
|
||||||
|
async function deleteSeriesBanner(bannerId) {
|
||||||
|
// 백엔드 사양이 불명확하여 쿼리 파라미터로 전송
|
||||||
|
return Vue.axios.delete("/admin/audio-content/series/banner/" + bannerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 배너 순서 변경
|
||||||
|
async function updateSeriesBannerOrder(ids) {
|
||||||
|
return Vue.axios.put("/admin/audio-content/series/banner/orders", { ids });
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
getAudioContentSeriesList,
|
getAudioContentSeriesList,
|
||||||
getAudioContentSeriesGenreList,
|
getAudioContentSeriesGenreList,
|
||||||
createAudioContentSeriesGenre,
|
createAudioContentSeriesGenre,
|
||||||
updateAudioContentSeriesGenre,
|
updateAudioContentSeriesGenre,
|
||||||
updateAudioContentSeriesGenreOrders,
|
updateAudioContentSeriesGenreOrders,
|
||||||
searchSeriesList,
|
searchSeriesList,
|
||||||
updateAudioContentSeries
|
updateAudioContentSeries,
|
||||||
}
|
// series banner
|
||||||
|
getSeriesBannerList,
|
||||||
|
createSeriesBanner,
|
||||||
|
updateSeriesBanner,
|
||||||
|
deleteSeriesBanner,
|
||||||
|
updateSeriesBannerOrder
|
||||||
|
};
|
||||||
|
|||||||
@@ -97,6 +97,26 @@ export default {
|
|||||||
if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
|
if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
|
||||||
this.items = res.data.data
|
this.items = res.data.data
|
||||||
|
|
||||||
|
// '시리즈 관리' 메뉴에 '배너 등록' 하위 메뉴 추가
|
||||||
|
try {
|
||||||
|
const seriesMenu = this.items.find(m => m && m.title === '시리즈 관리')
|
||||||
|
if (seriesMenu) {
|
||||||
|
if (!Array.isArray(seriesMenu.items)) {
|
||||||
|
seriesMenu.items = seriesMenu.items ? [].concat(seriesMenu.items) : []
|
||||||
|
}
|
||||||
|
const exists = seriesMenu.items.some(ci => ci && ci.route === '/content/series/banner')
|
||||||
|
if (!exists) {
|
||||||
|
seriesMenu.items.push({
|
||||||
|
title: '배너 등록',
|
||||||
|
route: '/content/series/banner',
|
||||||
|
items: null
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
|
||||||
// 캐릭터 챗봇 메뉴 추가
|
// 캐릭터 챗봇 메뉴 추가
|
||||||
this.items.push({
|
this.items.push({
|
||||||
title: '캐릭터 챗봇',
|
title: '캐릭터 챗봇',
|
||||||
|
|||||||
@@ -120,6 +120,11 @@ const routes = [
|
|||||||
name: 'ContentSeriesRecommendFree',
|
name: 'ContentSeriesRecommendFree',
|
||||||
component: () => import(/* webpackChunkName: "series" */ '../views/Series/ContentSeriesRecommendFree.vue')
|
component: () => import(/* webpackChunkName: "series" */ '../views/Series/ContentSeriesRecommendFree.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/content/series/banner',
|
||||||
|
name: 'ContentSeriesBanner',
|
||||||
|
component: () => import(/* webpackChunkName: "series" */ '../views/Series/ContentSeriesBanner.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/promotion/event',
|
path: '/promotion/event',
|
||||||
name: 'EventView',
|
name: 'EventView',
|
||||||
|
|||||||
529
src/views/Series/ContentSeriesBanner.vue
Normal file
529
src/views/Series/ContentSeriesBanner.vue
Normal file
@@ -0,0 +1,529 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-btn
|
||||||
|
icon
|
||||||
|
@click="goBack"
|
||||||
|
>
|
||||||
|
<v-icon>mdi-arrow-left</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>시리즈 배너 관리</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="4">
|
||||||
|
<v-btn
|
||||||
|
color="primary"
|
||||||
|
dark
|
||||||
|
@click="showAddDialog"
|
||||||
|
>
|
||||||
|
배너 추가
|
||||||
|
</v-btn>
|
||||||
|
</v-col>
|
||||||
|
<v-spacer />
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<!-- 로딩 표시 -->
|
||||||
|
<v-row v-if="isLoading && banners.length === 0">
|
||||||
|
<v-col class="text-center">
|
||||||
|
<v-progress-circular
|
||||||
|
indeterminate
|
||||||
|
color="primary"
|
||||||
|
size="64"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<!-- 배너 그리드 -->
|
||||||
|
<v-row>
|
||||||
|
<draggable
|
||||||
|
v-model="banners"
|
||||||
|
class="row"
|
||||||
|
style="width: 100%"
|
||||||
|
:options="{ animation: 150 }"
|
||||||
|
@end="onDragEnd"
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
v-for="banner in banners"
|
||||||
|
:key="banner.id"
|
||||||
|
cols="12"
|
||||||
|
sm="6"
|
||||||
|
md="4"
|
||||||
|
lg="3"
|
||||||
|
class="banner-item"
|
||||||
|
>
|
||||||
|
<v-card
|
||||||
|
class="mx-auto"
|
||||||
|
max-width="300"
|
||||||
|
>
|
||||||
|
<v-img
|
||||||
|
:src="banner.imagePath || banner.imageUrl"
|
||||||
|
height="200"
|
||||||
|
contain
|
||||||
|
/>
|
||||||
|
<v-card-text class="text-center">
|
||||||
|
<div>{{ resolveSeriesTitle(banner) }}</div>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
small
|
||||||
|
color="primary"
|
||||||
|
@click="showEditDialog(banner)"
|
||||||
|
>
|
||||||
|
수정
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
small
|
||||||
|
color="error"
|
||||||
|
@click="confirmDelete(banner)"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
<v-spacer />
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</draggable>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<!-- 데이터가 없을 때 표시 -->
|
||||||
|
<v-row v-if="!isLoading && banners.length === 0">
|
||||||
|
<v-col class="text-center">
|
||||||
|
<p>등록된 배너가 없습니다.</p>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<!-- 무한 스크롤 로딩 -->
|
||||||
|
<v-row v-if="isLoading && banners.length > 0">
|
||||||
|
<v-col class="text-center">
|
||||||
|
<v-progress-circular
|
||||||
|
indeterminate
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
<!-- 배너 추가/수정 다이얼로그 -->
|
||||||
|
<v-dialog
|
||||||
|
v-model="showDialog"
|
||||||
|
max-width="600px"
|
||||||
|
persistent
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title>
|
||||||
|
<span class="headline">{{ isEdit ? '배너 수정' : '배너 추가' }}</span>
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
<v-container>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-file-input
|
||||||
|
v-model="bannerForm.image"
|
||||||
|
label="배너 이미지"
|
||||||
|
accept="image/*"
|
||||||
|
prepend-icon="mdi-camera"
|
||||||
|
show-size
|
||||||
|
truncate-length="15"
|
||||||
|
:rules="imageRules"
|
||||||
|
outlined
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row v-if="previewImage || (isEdit && bannerForm.imageUrl)">
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
class="text-center"
|
||||||
|
>
|
||||||
|
<v-img
|
||||||
|
:src="previewImage || bannerForm.imageUrl"
|
||||||
|
max-height="200"
|
||||||
|
contain
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-text-field
|
||||||
|
v-model="searchKeyword"
|
||||||
|
label="시리즈 검색"
|
||||||
|
outlined
|
||||||
|
@keyup.enter="searchSeries"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row v-if="searchResults.length > 0">
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-list>
|
||||||
|
<v-list-item
|
||||||
|
v-for="series in searchResults"
|
||||||
|
:key="series.id"
|
||||||
|
@click="selectSeries(series)"
|
||||||
|
>
|
||||||
|
<v-list-item-avatar>
|
||||||
|
<v-img :src="series.imageUrl" />
|
||||||
|
</v-list-item-avatar>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>{{ series.title || series.name }}</v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row v-if="searchPerformed && searchResults.length === 0">
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-alert
|
||||||
|
type="info"
|
||||||
|
outlined
|
||||||
|
>
|
||||||
|
검색결과가 없습니다.
|
||||||
|
</v-alert>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
<v-row v-if="selectedSeries">
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-alert
|
||||||
|
type="info"
|
||||||
|
outlined
|
||||||
|
>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col cols="auto">
|
||||||
|
<v-avatar size="50">
|
||||||
|
<v-img :src="selectedSeries.imageUrl" />
|
||||||
|
</v-avatar>
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<div class="font-weight-medium">
|
||||||
|
선택된 시리즈: {{ selectedSeries.title || selectedSeries.name }}
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-alert>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="closeDialog"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
:disabled="!isFormValid || isSubmitting"
|
||||||
|
@click="saveBanner"
|
||||||
|
>
|
||||||
|
{{ isSubmitting ? '저장중...' : (isEdit ? '수정' : '추가') }}
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
|
||||||
|
<!-- 삭제 확인 다이얼로그 -->
|
||||||
|
<v-dialog
|
||||||
|
v-model="showDeleteDialog"
|
||||||
|
max-width="400px"
|
||||||
|
>
|
||||||
|
<v-card>
|
||||||
|
<v-card-title class="headline">
|
||||||
|
삭제 확인
|
||||||
|
</v-card-title>
|
||||||
|
<v-card-text>
|
||||||
|
이 배너를 삭제하시겠습니까?
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer />
|
||||||
|
<v-btn
|
||||||
|
color="blue darken-1"
|
||||||
|
text
|
||||||
|
@click="showDeleteDialog = false"
|
||||||
|
>
|
||||||
|
취소
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
color="red darken-1"
|
||||||
|
text
|
||||||
|
:disabled="isSubmitting"
|
||||||
|
@click="deleteBanner"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</v-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import draggable from 'vuedraggable'
|
||||||
|
import {
|
||||||
|
getSeriesBannerList,
|
||||||
|
createSeriesBanner,
|
||||||
|
updateSeriesBanner,
|
||||||
|
deleteSeriesBanner,
|
||||||
|
updateSeriesBannerOrder,
|
||||||
|
searchSeriesList
|
||||||
|
} from '@/api/audio_content_series'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ContentSeriesBanner',
|
||||||
|
components: { draggable },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isLoading: false,
|
||||||
|
isSubmitting: false,
|
||||||
|
banners: [],
|
||||||
|
page: 1,
|
||||||
|
hasMoreItems: true,
|
||||||
|
showDialog: false,
|
||||||
|
showDeleteDialog: false,
|
||||||
|
isEdit: false,
|
||||||
|
selectedBanner: null,
|
||||||
|
selectedSeries: null,
|
||||||
|
searchKeyword: '',
|
||||||
|
searchResults: [],
|
||||||
|
searchPerformed: false,
|
||||||
|
previewImage: null,
|
||||||
|
bannerForm: {
|
||||||
|
image: null,
|
||||||
|
imageUrl: '',
|
||||||
|
seriesId: null,
|
||||||
|
bannerId: null
|
||||||
|
},
|
||||||
|
imageRules: [
|
||||||
|
v => !!v || this.isEdit || '이미지를 선택하세요'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isFormValid() {
|
||||||
|
return (this.bannerForm.image || (this.isEdit && this.bannerForm.imageUrl)) && this.selectedSeries
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
'bannerForm.image'(newImage) {
|
||||||
|
if (newImage) {
|
||||||
|
this.createImagePreview(newImage)
|
||||||
|
} else {
|
||||||
|
this.previewImage = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.loadBanners()
|
||||||
|
window.addEventListener('scroll', this.handleScroll)
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('scroll', this.handleScroll)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog && this.$dialog.notify && this.$dialog.notify.error ? this.$dialog.notify.error(message) : console.error(message)
|
||||||
|
},
|
||||||
|
notifySuccess(message) {
|
||||||
|
this.$dialog && this.$dialog.notify && this.$dialog.notify.success ? this.$dialog.notify.success(message) : console.log(message)
|
||||||
|
},
|
||||||
|
goBack() {
|
||||||
|
this.$router.push('/content/series/list')
|
||||||
|
},
|
||||||
|
resolveSeriesTitle(banner) {
|
||||||
|
return banner.seriesTitle || banner.seriesName || banner.title || banner.name || '시리즈'
|
||||||
|
},
|
||||||
|
async loadBanners() {
|
||||||
|
if (this.isLoading || !this.hasMoreItems) return
|
||||||
|
this.isLoading = true
|
||||||
|
try {
|
||||||
|
const response = await getSeriesBannerList(this.page)
|
||||||
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
||||||
|
const data = response.data.data
|
||||||
|
const newBanners = (data && (data.content || data.items || data)) || []
|
||||||
|
this.banners = [...this.banners, ...newBanners]
|
||||||
|
this.hasMoreItems = newBanners.length > 0
|
||||||
|
this.page++
|
||||||
|
} else {
|
||||||
|
this.notifyError('배너 목록을 불러오는데 실패했습니다.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('배너 목록을 불러오는데 실패했습니다.')
|
||||||
|
} finally {
|
||||||
|
this.isLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleScroll() {
|
||||||
|
const scrollPosition = window.innerHeight + window.scrollY
|
||||||
|
const documentHeight = document.documentElement.offsetHeight
|
||||||
|
if (scrollPosition >= documentHeight - 200 && !this.isLoading && this.hasMoreItems) {
|
||||||
|
this.loadBanners()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showAddDialog() {
|
||||||
|
this.isEdit = false
|
||||||
|
this.selectedSeries = null
|
||||||
|
this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null }
|
||||||
|
this.previewImage = null
|
||||||
|
this.searchKeyword = ''
|
||||||
|
this.searchResults = []
|
||||||
|
this.searchPerformed = false
|
||||||
|
this.showDialog = true
|
||||||
|
},
|
||||||
|
showEditDialog(banner) {
|
||||||
|
this.isEdit = true
|
||||||
|
this.selectedBanner = banner
|
||||||
|
this.selectedSeries = {
|
||||||
|
id: banner.seriesId,
|
||||||
|
title: banner.seriesTitle || banner.seriesName || banner.title || banner.name,
|
||||||
|
imageUrl: banner.seriesImageUrl
|
||||||
|
}
|
||||||
|
this.bannerForm = {
|
||||||
|
image: null,
|
||||||
|
imageUrl: banner.imageUrl || banner.imagePath,
|
||||||
|
seriesId: banner.seriesId,
|
||||||
|
bannerId: banner.id
|
||||||
|
}
|
||||||
|
this.previewImage = null
|
||||||
|
this.searchKeyword = ''
|
||||||
|
this.searchResults = []
|
||||||
|
this.searchPerformed = false
|
||||||
|
this.showDialog = true
|
||||||
|
},
|
||||||
|
closeDialog() {
|
||||||
|
this.showDialog = false
|
||||||
|
this.selectedSeries = null
|
||||||
|
this.bannerForm = { image: null, imageUrl: '', seriesId: null, bannerId: null }
|
||||||
|
this.previewImage = null
|
||||||
|
this.searchKeyword = ''
|
||||||
|
this.searchResults = []
|
||||||
|
this.searchPerformed = false
|
||||||
|
},
|
||||||
|
confirmDelete(banner) {
|
||||||
|
this.selectedBanner = banner
|
||||||
|
this.showDeleteDialog = true
|
||||||
|
},
|
||||||
|
createImagePreview(file) {
|
||||||
|
if (!file) return
|
||||||
|
const reader = new FileReader()
|
||||||
|
reader.onload = (e) => {
|
||||||
|
this.previewImage = e.target.result
|
||||||
|
}
|
||||||
|
reader.readAsDataURL(file)
|
||||||
|
},
|
||||||
|
async searchSeries() {
|
||||||
|
if (!this.searchKeyword || this.searchKeyword.length < 2) {
|
||||||
|
this.notifyError('검색어를 2글자 이상 입력하세요.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const response = await searchSeriesList(this.searchKeyword)
|
||||||
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
||||||
|
const data = response.data.data
|
||||||
|
this.searchResults = Array.isArray(data) ? data : (data && (data.content || data.items)) || []
|
||||||
|
this.searchPerformed = true
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('시리즈 검색 오류:', error)
|
||||||
|
this.notifyError('시리즈 검색에 실패했습니다.')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectSeries(series) {
|
||||||
|
this.selectedSeries = series
|
||||||
|
this.bannerForm.seriesId = series.id
|
||||||
|
this.searchResults = []
|
||||||
|
},
|
||||||
|
async saveBanner() {
|
||||||
|
if (!this.isFormValid || this.isSubmitting) return
|
||||||
|
this.isSubmitting = true
|
||||||
|
try {
|
||||||
|
if (this.isEdit) {
|
||||||
|
const response = await updateSeriesBanner({
|
||||||
|
image: this.bannerForm.image,
|
||||||
|
seriesId: this.selectedSeries.id,
|
||||||
|
bannerId: this.bannerForm.bannerId
|
||||||
|
})
|
||||||
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
||||||
|
this.notifySuccess('배너가 수정되었습니다.')
|
||||||
|
} else {
|
||||||
|
this.notifyError('배너 수정을 실패했습니다.')
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const response = await createSeriesBanner({
|
||||||
|
image: this.bannerForm.image,
|
||||||
|
seriesId: this.selectedSeries.id
|
||||||
|
})
|
||||||
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
||||||
|
this.notifySuccess('배너가 추가되었습니다.')
|
||||||
|
this.closeDialog()
|
||||||
|
this.refreshBanners()
|
||||||
|
} else {
|
||||||
|
this.notifyError('배너 추가를 실패했습니다.')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('배너 저장 오류:', error)
|
||||||
|
this.notifyError('배너 저장에 실패했습니다.')
|
||||||
|
} finally {
|
||||||
|
this.isSubmitting = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async deleteBanner() {
|
||||||
|
if (!this.selectedBanner || this.isSubmitting) return
|
||||||
|
this.isSubmitting = true
|
||||||
|
try {
|
||||||
|
const response = await deleteSeriesBanner(this.selectedBanner.id)
|
||||||
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
||||||
|
this.notifySuccess('배너가 삭제되었습니다.')
|
||||||
|
this.showDeleteDialog = false
|
||||||
|
this.refreshBanners()
|
||||||
|
} else {
|
||||||
|
this.notifyError('배너 삭제에 실패했습니다.')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('배너 삭제 오류:', error)
|
||||||
|
this.notifyError('배너 삭제에 실패했습니다.')
|
||||||
|
} finally {
|
||||||
|
this.isSubmitting = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
refreshBanners() {
|
||||||
|
this.banners = []
|
||||||
|
this.page = 1
|
||||||
|
this.hasMoreItems = true
|
||||||
|
this.loadBanners()
|
||||||
|
},
|
||||||
|
async onDragEnd() {
|
||||||
|
try {
|
||||||
|
const bannerIds = this.banners.map(banner => banner.id)
|
||||||
|
const response = await updateSeriesBannerOrder(bannerIds)
|
||||||
|
if (response && response.status === 200 && response.data && response.data.success === true) {
|
||||||
|
this.notifySuccess('배너 순서가 변경되었습니다.')
|
||||||
|
} else {
|
||||||
|
this.notifyError('배너 순서 변경에 실패했습니다.')
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('배너 순서 변경 오류:', error)
|
||||||
|
this.notifyError('배너 순서 변경에 실패했습니다.')
|
||||||
|
this.refreshBanners()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.banner-item {
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-item:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user