326 lines
8.5 KiB
Vue
326 lines
8.5 KiB
Vue
<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 class="align-center mb-4">
|
|
<v-col
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<div class="subtitle-1">
|
|
캐릭터: {{ characterName || characterId }}
|
|
</div>
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
md="6"
|
|
class="text-right"
|
|
>
|
|
<v-btn
|
|
color="primary"
|
|
dark
|
|
@click="goToAdd"
|
|
>
|
|
이미지 추가
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- 로딩 -->
|
|
<v-row v-if="isLoading && images.length === 0">
|
|
<v-col class="text-center">
|
|
<v-progress-circular
|
|
indeterminate
|
|
color="primary"
|
|
size="48"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- 목록 -->
|
|
<draggable
|
|
v-if="images.length > 0"
|
|
v-model="images"
|
|
class="image-grid"
|
|
:options="{ animation: 150 }"
|
|
@end="onDragEnd"
|
|
>
|
|
<div
|
|
v-for="img in images"
|
|
:key="img.id"
|
|
class="image-card"
|
|
>
|
|
<v-card>
|
|
<div class="image-wrapper">
|
|
<v-img
|
|
:src="img.imageUrl"
|
|
:aspect-ratio="0.8"
|
|
contain
|
|
/>
|
|
<div
|
|
v-if="img.isAdult"
|
|
class="ribbon"
|
|
>
|
|
성인
|
|
</div>
|
|
</div>
|
|
<v-card-text class="pt-2">
|
|
<div class="price-row d-flex align-center">
|
|
<div class="price-label">
|
|
단독 :
|
|
</div>
|
|
<div class="price-value">
|
|
{{ img.imagePriceCan }} 캔
|
|
</div>
|
|
</div>
|
|
<div class="price-row d-flex align-center">
|
|
<div class="price-label">
|
|
메시지 :
|
|
</div>
|
|
<div class="price-value">
|
|
{{ img.messagePriceCan }} 캔
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<v-chip
|
|
v-for="(t, i) in (img.triggers || [])"
|
|
:key="i"
|
|
small
|
|
class="ma-1"
|
|
color="primary"
|
|
text-color="white"
|
|
>
|
|
{{ t }}
|
|
</v-chip>
|
|
</div>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
small
|
|
color="primary"
|
|
@click="goToEdit(img)"
|
|
>
|
|
수정
|
|
</v-btn>
|
|
<v-btn
|
|
small
|
|
color="error"
|
|
@click="confirmDelete(img)"
|
|
>
|
|
삭제
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</div>
|
|
</draggable>
|
|
|
|
<!-- 데이터 없음 -->
|
|
<v-row v-if="!isLoading && images.length === 0">
|
|
<v-col class="text-center grey--text">
|
|
등록된 이미지가 없습니다.
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- 삭제 확인 다이얼로그 -->
|
|
<v-dialog
|
|
v-model="showDeleteDialog"
|
|
max-width="400"
|
|
>
|
|
<v-card>
|
|
<v-card-title class="headline">
|
|
이미지 삭제
|
|
</v-card-title>
|
|
<v-card-text>삭제하시겠습니까?</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn
|
|
text
|
|
color="blue darken-1"
|
|
@click="showDeleteDialog = false"
|
|
>
|
|
취소
|
|
</v-btn>
|
|
<v-btn
|
|
text
|
|
color="red darken-1"
|
|
:loading="isSubmitting"
|
|
@click="deleteImage"
|
|
>
|
|
삭제
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getCharacterImageList, deleteCharacterImage, updateCharacterImageOrder } from '@/api/character'
|
|
import draggable from 'vuedraggable'
|
|
|
|
export default {
|
|
name: 'CharacterImageList',
|
|
components: { draggable },
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
isSubmitting: false,
|
|
images: [],
|
|
characterId: null,
|
|
characterName: this.$route.query.name || '',
|
|
showDeleteDialog: false,
|
|
selectedImage: null
|
|
}
|
|
},
|
|
created() {
|
|
this.characterId = Number(this.$route.query.characterId)
|
|
if (!this.characterId) {
|
|
this.notifyError('캐릭터 ID가 없습니다.');
|
|
this.goBack()
|
|
return
|
|
}
|
|
this.loadImages()
|
|
},
|
|
methods: {
|
|
notifyError(message) { this.$dialog.notify.error(message) },
|
|
notifySuccess(message) { this.$dialog.notify.success(message) },
|
|
goBack() { this.$router.push('/character') },
|
|
async loadImages() {
|
|
this.isLoading = true
|
|
try {
|
|
const resp = await getCharacterImageList(this.characterId, 1, 20)
|
|
if (resp && resp.status === 200 && resp.data && resp.data.success === true) {
|
|
const data = resp.data.data
|
|
this.images = (data.content || data || [])
|
|
} else {
|
|
this.notifyError('이미지 목록을 불러오지 못했습니다.')
|
|
}
|
|
} catch (e) {
|
|
console.error('이미지 목록 오류:', e)
|
|
this.notifyError('이미지 목록 조회 중 오류가 발생했습니다.')
|
|
} finally {
|
|
this.isLoading = false
|
|
}
|
|
},
|
|
goToAdd() {
|
|
this.$router.push({ path: '/character/images/form', query: { characterId: this.characterId, name: this.characterName } })
|
|
},
|
|
goToEdit(img) {
|
|
this.$router.push({ path: '/character/images/form', query: { characterId: this.characterId, imageId: img.id, name: this.characterName } })
|
|
},
|
|
confirmDelete(img) {
|
|
this.selectedImage = img
|
|
this.showDeleteDialog = true
|
|
},
|
|
async deleteImage() {
|
|
if (!this.selectedImage || this.isSubmitting) return
|
|
this.isSubmitting = true
|
|
try {
|
|
const resp = await deleteCharacterImage(this.selectedImage.id)
|
|
if (resp && resp.status === 200 && resp.data && resp.data.success === true) {
|
|
this.notifySuccess('삭제되었습니다.')
|
|
this.showDeleteDialog = false
|
|
await this.loadImages()
|
|
} else {
|
|
this.notifyError('삭제에 실패했습니다.')
|
|
}
|
|
} catch (e) {
|
|
console.error('이미지 삭제 오류:', e)
|
|
this.notifyError('삭제 중 오류가 발생했습니다.')
|
|
} finally {
|
|
this.isSubmitting = false
|
|
}
|
|
},
|
|
async onDragEnd() {
|
|
try {
|
|
const ids = this.images.map(img => img.id)
|
|
const resp = await updateCharacterImageOrder(this.characterId, ids)
|
|
if (resp && resp.status === 200 && resp.data && resp.data.success === true) {
|
|
this.notifySuccess('이미지 순서가 변경되었습니다.')
|
|
} else {
|
|
this.notifyError('이미지 순서 변경에 실패했습니다.')
|
|
await this.loadImages()
|
|
}
|
|
} catch (e) {
|
|
console.error('이미지 순서 변경 오류:', e)
|
|
this.notifyError('이미지 순서 변경에 실패했습니다.')
|
|
await this.loadImages()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.image-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 16px;
|
|
}
|
|
.image-card {
|
|
width: 100%;
|
|
}
|
|
@media (max-width: 1264px) {
|
|
.image-grid { grid-template-columns: repeat(4, 1fr); }
|
|
}
|
|
@media (max-width: 960px) {
|
|
.image-grid { grid-template-columns: repeat(3, 1fr); }
|
|
}
|
|
@media (max-width: 600px) {
|
|
.image-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
|
|
/* Image wrapper for overlays */
|
|
.image-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
/* Ribbon style for adult indicator */
|
|
.ribbon {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
background: #e53935; /* red darken-1 */
|
|
color: #fff;
|
|
padding: 6px 20px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
text-transform: none;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Price rows styling */
|
|
.price-row {
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
margin-bottom: 4px;
|
|
}
|
|
.price-label {
|
|
width: 72px; /* 긴 쪽 기준으로 라벨 고정폭 */
|
|
text-align: left;
|
|
color: rgba(0,0,0,0.6);
|
|
font-weight: 700;
|
|
}
|
|
.price-value {
|
|
flex: 1;
|
|
font-weight: 700;
|
|
color: rgba(0,0,0,0.87);
|
|
text-align: left;
|
|
}
|
|
</style>
|