콘텐츠 배너 등록/수정

- 크리에이터 배너 등록시 크리에이터를 검색해서 등록할 수 있도록 수정
This commit is contained in:
Yu Sung 2025-01-16 14:54:15 +09:00
parent c2a4a64417
commit f558c9260e
3 changed files with 70 additions and 20 deletions

7
package-lock.json generated
View File

@ -10,6 +10,7 @@
"dependencies": {
"core-js": "^3.6.5",
"file-saver": "^2.0.5",
"lodash": "^4.17.21",
"vue": "^2.6.11",
"vue-excel-xlsx": "^1.2.2",
"vue-router": "^3.2.0",
@ -9025,8 +9026,7 @@
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
@ -22908,8 +22908,7 @@
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash.debounce": {
"version": "4.0.8",

View File

@ -12,6 +12,7 @@
"dependencies": {
"core-js": "^3.6.5",
"file-saver": "^2.0.5",
"lodash": "^4.17.21",
"vue": "^2.6.11",
"vue-excel-xlsx": "^1.2.2",
"vue-router": "^3.2.0",

View File

@ -69,7 +69,12 @@
</template>
<v-card>
<v-card-title>배너 등록</v-card-title>
<v-card-title v-if="is_modify === true">
배너 수정
</v-card-title>
<v-card-title v-else>
배너 등록
</v-card-title>
<v-card-text>
<v-row align="center">
<v-col cols="4">
@ -102,12 +107,19 @@
크리에이터
</v-col>
<v-col cols="8">
<v-select
v-model="banner.creator_id"
<v-combobox
v-model="banner.creator_nickname"
:items="creators"
:loading="is_loading"
:search-input.sync="search_query_creator"
label="크리에이터를 검색하세요"
item-text="name"
item-value="value"
label="크리에이터 선택"
no-data-text="No results found"
hide-selected
clearable
@change="onSelect"
@update:search-input="onSearchUpdate"
/>
</v-col>
</v-row>
@ -234,6 +246,7 @@
<script>
import Draggable from "vuedraggable";
import debounce from "lodash/debounce";
import * as memberApi from "@/api/member";
import * as eventApi from "@/api/event";
@ -246,6 +259,7 @@ export default {
data() {
return {
is_selecting: false,
is_loading: false,
is_modify: false,
show_write_dialog: false,
@ -255,15 +269,27 @@ export default {
banners: [],
events: [],
creators: [],
search_query_creator: '',
}
},
watch: {
search_query_creator() {
if (!this.is_selecting) {
this.debouncedSearch();
}
}
},
async created() {
await this.getCreatorAllList()
await this.getEvents()
await this.getBanners()
},
mounted() {
this.debouncedSearch = debounce(this.searchCreator, 500);
},
methods: {
imageAdd(payload) {
const file = payload;
@ -294,6 +320,8 @@ export default {
this.is_modify = true
this.selected_banner = banner
this.is_selecting = true; //
this.banner.id = banner.id
this.banner.type = banner.type
this.banner.thumbnail_image_url = banner.thumbnailImageUrl
@ -304,6 +332,10 @@ export default {
this.banner.link = banner.link
this.banner.is_adult = banner.isAdult
setTimeout(() => {
this.is_selecting = false; //
}, 1000);
this.show_write_dialog = true
},
@ -485,25 +517,43 @@ export default {
}
},
async getCreatorAllList() {
this.is_loading = true
async searchCreator() {
if (this.search_query_creator === null || this.search_query_creator.length < 3) {
this.creators = [];
return;
}
this.is_loading = true;
try {
const res = await memberApi.getCreatorAllList()
const res = await memberApi.searchCreator(this.search_query_creator, 1);
if (res.status === 200 && res.data.success === true) {
this.creators = res.data.data.map((item) => {
return {name: item.nickname, value: item.id}
this.creators = res.data.data.items.map((item) => {
return {name: item.nickname, value: item.id}
})
} else {
this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
this.is_loading = false
this.creators = []
}
} catch (e) {
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
this.is_loading = false
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
this.is_loading = false
} finally {
this.is_loading = false
this.is_loading = false
}
},
onSelect(value) {
this.banner.creator_id = value.value
this.is_selecting = true; //
setTimeout(() => {
this.is_selecting = false; //
}, 0);
},
onSearchUpdate(value) {
if (!this.is_selecting) {
this.search_query_creator = value
}
},
@ -512,7 +562,7 @@ export default {
try {
const res = await eventApi.getEvents(1)
if (res.status === 200 && res.data.success === true) {
this.events = res.data.data.eventList.map((item) => {
this.events = res.data.data.map((item) => {
return {title: item.title, value: item.id}
})
} else {