연령제한 표시 추가
This commit is contained in:
		| @@ -41,16 +41,6 @@ | ||||
|           </v-card> | ||||
|         </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-container> | ||||
|     <v-row> | ||||
|       <v-dialog | ||||
| @@ -147,6 +137,50 @@ | ||||
|               </v-col> | ||||
|             </v-row> | ||||
|           </v-card-text> | ||||
|           <v-card-text> | ||||
|             <v-row> | ||||
|               <v-col cols="4"> | ||||
|                 연령제한 | ||||
|               </v-col> | ||||
|               <v-col cols="8"> | ||||
|                 <v-row> | ||||
|                   <v-col> | ||||
|                     <input | ||||
|                       id="no-auth" | ||||
|                       v-model="event.isAdult" | ||||
|                       type="radio" | ||||
|                       value="false" | ||||
|                     > | ||||
|                     <label for="no-auth"> | ||||
|                       본인인증을 하지 않은 유저만 | ||||
|                     </label> | ||||
|                   </v-col> | ||||
|                   <v-col> | ||||
|                     <input | ||||
|                       id="auth" | ||||
|                       v-model="event.isAdult" | ||||
|                       type="radio" | ||||
|                       value="true" | ||||
|                     > | ||||
|                     <label for="auth"> | ||||
|                       본인인증을 한 유저만 | ||||
|                     </label> | ||||
|                   </v-col> | ||||
|                   <v-col> | ||||
|                     <input | ||||
|                       id="both" | ||||
|                       v-model="event.isAdult" | ||||
|                       type="radio" | ||||
|                       value="" | ||||
|                     > | ||||
|                     <label for="both"> | ||||
|                       상관없음 | ||||
|                     </label> | ||||
|                   </v-col> | ||||
|                 </v-row> | ||||
|               </v-col> | ||||
|             </v-row> | ||||
|           </v-card-text> | ||||
|           <v-card-actions v-show="!is_loading"> | ||||
|             <v-btn | ||||
|               v-show="is_modify" | ||||
| @@ -222,274 +256,279 @@ | ||||
| import * as api from '@/api/event' | ||||
|  | ||||
| export default { | ||||
|     name: "EventView", | ||||
|   name: "EventView", | ||||
|  | ||||
|     data() { | ||||
|         return { | ||||
|             is_loading: false, | ||||
|             is_modify: false, | ||||
|             page: 1, | ||||
|             events: [], | ||||
|             event: {}, | ||||
|             show_write_dialog: false, | ||||
|             show_delete_confirm_dialog: false, | ||||
|         } | ||||
|     }, | ||||
|  | ||||
|     async created() { | ||||
|         await this.getEvents() | ||||
|     }, | ||||
|  | ||||
|     methods: { | ||||
|         notifyError(message) { | ||||
|             this.$dialog.notify.error(message) | ||||
|         }, | ||||
|  | ||||
|         notifySuccess(message) { | ||||
|             this.$dialog.notify.success(message) | ||||
|         }, | ||||
|  | ||||
|         thumbnailImageAdd(payload) { | ||||
|             const file = payload; | ||||
|             if (file) { | ||||
|                 this.event.thumbnailImageUrl = URL.createObjectURL(file) | ||||
|                 URL.revokeObjectURL(file) | ||||
|             } else { | ||||
|                 this.event.thumbnailImageUrl = null | ||||
|             } | ||||
|         }, | ||||
|  | ||||
|         detailImageAdd(payload) { | ||||
|             const file = payload; | ||||
|             if (file) { | ||||
|                 this.event.detailImageUrl = URL.createObjectURL(file) | ||||
|                 URL.revokeObjectURL(file) | ||||
|             } else { | ||||
|                 this.event.detailImageUrl = null | ||||
|             } | ||||
|         }, | ||||
|  | ||||
|         popupImageAdd(payload) { | ||||
|             const file = payload; | ||||
|             if (file) { | ||||
|                 this.event.popupImageUrl = URL.createObjectURL(file) | ||||
|                 URL.revokeObjectURL(file) | ||||
|             } else { | ||||
|                 this.event.popupImageUrl = null | ||||
|             } | ||||
|         }, | ||||
|  | ||||
|         async getEvents() { | ||||
|             this.is_loading = true | ||||
|  | ||||
|             try { | ||||
|                 const res = await api.getEvents(this.page) | ||||
|                 if (res.status === 200 && res.data.success === true) { | ||||
|                     this.events = res.data.data.eventList | ||||
|                 } else { | ||||
|                     this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|                 } | ||||
|             } catch (e) { | ||||
|                 this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|             } finally { | ||||
|                 this.is_loading = false | ||||
|             } | ||||
|         }, | ||||
|  | ||||
|         async next() { | ||||
|             await this.getEvents() | ||||
|         }, | ||||
|  | ||||
|         showWriteDialog() { | ||||
|             this.show_write_dialog = true | ||||
|         }, | ||||
|  | ||||
|         clickEvent(item) { | ||||
|             this.is_modify = true | ||||
|             this.event.id = item.id | ||||
|             this.event.thumbnailImageUrl = item.thumbnailImageUrl | ||||
|             this.event.detailImageUrl = item.detailImageUrl | ||||
|             this.event.link = item.link | ||||
|             this.event.title = item.title | ||||
|             this.event.isPopup = item.isPopup | ||||
|             this.event.popupImageUrl = item.popupImageUrl | ||||
|             this.show_write_dialog = true | ||||
|         }, | ||||
|  | ||||
|         cancel() { | ||||
|             this.is_modify = false | ||||
|             this.event = {} | ||||
|             this.show_write_dialog = false | ||||
|         }, | ||||
|  | ||||
|         validate() { | ||||
|             if (this.event.title == null) { | ||||
|                 this.notifyError("제목을 입력하세요") | ||||
|                 return false; | ||||
|             } | ||||
|  | ||||
|             if (this.event.thumbnailImage == null) { | ||||
|                 this.notifyError("썸네일 이미지를 등록하세요") | ||||
|                 return false; | ||||
|             } | ||||
|  | ||||
|             if ((this.event.link == null || this.event.link.trim().length <= 0) && this.event.detailImage == null) { | ||||
|                 this.notifyError("상세이미지 혹은 link 둘 중 하나는 반드시 입력해야 합니다.") | ||||
|                 return false; | ||||
|             } | ||||
|  | ||||
|             return true | ||||
|         }, | ||||
|  | ||||
|         async submit() { | ||||
|             if (!this.validate()) return; | ||||
|             if (this.is_loading) return; | ||||
|  | ||||
|             this.is_loading = true | ||||
|  | ||||
|             try { | ||||
|                 const formData = new FormData() | ||||
|                 formData.append("title", this.event.title) | ||||
|                 formData.append("thumbnail", this.event.thumbnailImage) | ||||
|                 formData.append("isPopup", this.event.isPopup ? this.event.isPopup : false) | ||||
|  | ||||
|                 if (this.event.detailImage != null) { | ||||
|                     formData.append("detail", this.event.detailImage) | ||||
|                 } | ||||
|  | ||||
|                 if (this.event.popupImage != null) { | ||||
|                     formData.append("popup", this.event.popupImage) | ||||
|                 } | ||||
|  | ||||
|                 if (this.event.link != null && this.event.link.trim().length > 0) { | ||||
|                     formData.append("link", this.event.link) | ||||
|                 } | ||||
|  | ||||
|                 const res = await api.save(formData) | ||||
|                 if (res.status === 200 && res.data.success === true) { | ||||
|                     this.show_write_dialog = false | ||||
|                     this.notifySuccess('등록되었습니다.') | ||||
|                     this.page = 1 | ||||
|                     await this.getEvents() | ||||
|                     this.event = {} | ||||
|                 } | ||||
|             } catch (e) { | ||||
|                 this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|             } finally { | ||||
|                 this.is_loading = false | ||||
|             } | ||||
|         }, | ||||
|  | ||||
|         async modify() { | ||||
|             if (this.is_loading) return; | ||||
|  | ||||
|             this.is_loading = true | ||||
|             try { | ||||
|                 const formData = new FormData() | ||||
|                 formData.append("id", this.event.id) | ||||
|  | ||||
|                 if (this.event.title != null && this.event.title.trim().length > 0) { | ||||
|                     formData.append("title", this.event.title) | ||||
|                 } | ||||
|  | ||||
|                 if (this.event.thumbnailImage != null) { | ||||
|                     formData.append("thumbnail", this.event.thumbnailImage) | ||||
|                 } | ||||
|  | ||||
|                 if (this.event.detailImage != null) { | ||||
|                     formData.append("detail", this.event.detailImage) | ||||
|                 } | ||||
|  | ||||
|                 if (this.event.popupImage != null) { | ||||
|                     formData.append("popup", this.event.popupImage) | ||||
|                 } | ||||
|  | ||||
|                 if (this.event.isPopup != null) { | ||||
|                     formData.append("isPopup", this.event.isPopup) | ||||
|                 } | ||||
|  | ||||
|                 if (this.event.link != null && this.event.link.trim().length > 0) { | ||||
|                     formData.append("link", this.event.link) | ||||
|                 } | ||||
|  | ||||
|                 const res = await api.modify(formData) | ||||
|                 if (res.status === 200 && res.data.success === true) { | ||||
|                     this.show_write_dialog = false | ||||
|                     this.notifySuccess('수정되었습니다.') | ||||
|                     this.page = 1 | ||||
|                     await this.getEvents() | ||||
|                     this.event = {} | ||||
|                     this.is_modify = false | ||||
|                 } else { | ||||
|                     this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|                 } | ||||
|             } catch (e) { | ||||
|                 this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|             } finally { | ||||
|                 this.is_loading = false | ||||
|             } | ||||
|         }, | ||||
|  | ||||
|         deleteConfirm() { | ||||
|             this.show_delete_confirm_dialog = true | ||||
|         }, | ||||
|  | ||||
|         deleteCancel() { | ||||
|             this.show_delete_confirm_dialog = false | ||||
|         }, | ||||
|  | ||||
|         async deleteEvent() { | ||||
|             if (this.is_loading) return; | ||||
|             this.is_loading = true | ||||
|  | ||||
|             try { | ||||
|                 const res = await api.deleteEvent(this.event.id) | ||||
|                 if (res.status === 200 && res.data.success === true) { | ||||
|                     this.show_write_dialog = false | ||||
|                     this.show_delete_confirm_dialog = false | ||||
|                     this.notifySuccess('삭제되었습니다.') | ||||
|                     this.page = 1 | ||||
|                     await this.getEvents() | ||||
|                     this.event = {} | ||||
|                     this.is_modify = false | ||||
|                 } else { | ||||
|                     this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|                 } | ||||
|             } catch (e) { | ||||
|                 this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|             } finally { | ||||
|                 this.is_loading = false | ||||
|             } | ||||
|         } | ||||
|   data() { | ||||
|     return { | ||||
|       is_loading: false, | ||||
|       is_modify: false, | ||||
|       events: [], | ||||
|       event: { isAdult: '' }, | ||||
|       show_write_dialog: false, | ||||
|       show_delete_confirm_dialog: false, | ||||
|     } | ||||
|   }, | ||||
|  | ||||
|   async created() { | ||||
|     await this.getEvents() | ||||
|   }, | ||||
|  | ||||
|   methods: { | ||||
|     notifyError(message) { | ||||
|       this.$dialog.notify.error(message) | ||||
|     }, | ||||
|  | ||||
|     notifySuccess(message) { | ||||
|       this.$dialog.notify.success(message) | ||||
|     }, | ||||
|  | ||||
|     thumbnailImageAdd(payload) { | ||||
|       const file = payload; | ||||
|       if (file) { | ||||
|         this.event.thumbnailImageUrl = URL.createObjectURL(file) | ||||
|         URL.revokeObjectURL(file) | ||||
|       } else { | ||||
|         this.event.thumbnailImageUrl = null | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     detailImageAdd(payload) { | ||||
|       const file = payload; | ||||
|       if (file) { | ||||
|         this.event.detailImageUrl = URL.createObjectURL(file) | ||||
|         URL.revokeObjectURL(file) | ||||
|       } else { | ||||
|         this.event.detailImageUrl = null | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     popupImageAdd(payload) { | ||||
|       const file = payload; | ||||
|       if (file) { | ||||
|         this.event.popupImageUrl = URL.createObjectURL(file) | ||||
|         URL.revokeObjectURL(file) | ||||
|       } else { | ||||
|         this.event.popupImageUrl = null | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     async getEvents() { | ||||
|       this.is_loading = true | ||||
|  | ||||
|       try { | ||||
|         const res = await api.getEvents(this.page) | ||||
|         if (res.status === 200 && res.data.success === true) { | ||||
|           this.events = res.data.data.eventList | ||||
|         } else { | ||||
|           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|         } | ||||
|       } catch (e) { | ||||
|         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|       } finally { | ||||
|         this.is_loading = false | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     showWriteDialog() { | ||||
|       this.event.isAdult = '' | ||||
|       this.show_write_dialog = true | ||||
|     }, | ||||
|  | ||||
|     clickEvent(item) { | ||||
|       this.is_modify = true | ||||
|       this.event.id = item.id | ||||
|       this.event.thumbnailImageUrl = item.thumbnailImageUrl | ||||
|       this.event.detailImageUrl = item.detailImageUrl | ||||
|       this.event.link = item.link | ||||
|       this.event.title = item.title | ||||
|       this.event.isPopup = item.isPopup | ||||
|       this.event.isAdult = item.isAdult === null ? '' : item.isAdult | ||||
|       this.event.popupImageUrl = item.popupImageUrl | ||||
|       this.show_write_dialog = true | ||||
|     }, | ||||
|  | ||||
|     cancel() { | ||||
|       this.is_modify = false | ||||
|       this.event = { isAdult: '' } | ||||
|       this.show_write_dialog = false | ||||
|     }, | ||||
|  | ||||
|     validate() { | ||||
|       if (this.event.title == null) { | ||||
|         this.notifyError("제목을 입력하세요") | ||||
|         return false; | ||||
|       } | ||||
|  | ||||
|       if (this.event.thumbnailImage == null) { | ||||
|         this.notifyError("썸네일 이미지를 등록하세요") | ||||
|         return false; | ||||
|       } | ||||
|  | ||||
|       if ((this.event.link == null || this.event.link.trim().length <= 0) && this.event.detailImage == null) { | ||||
|         this.notifyError("상세이미지 혹은 link 둘 중 하나는 반드시 입력해야 합니다.") | ||||
|         return false; | ||||
|       } | ||||
|  | ||||
|       return true | ||||
|     }, | ||||
|  | ||||
|     async submit() { | ||||
|       if (!this.validate()) return; | ||||
|       if (this.is_loading) return; | ||||
|  | ||||
|       this.is_loading = true | ||||
|  | ||||
|       try { | ||||
|         const formData = new FormData() | ||||
|         formData.append("title", this.event.title) | ||||
|         formData.append("thumbnail", this.event.thumbnailImage) | ||||
|         formData.append("isPopup", this.event.isPopup ? this.event.isPopup : false) | ||||
|  | ||||
|         if (this.event.detailImage != null) { | ||||
|           formData.append("detail", this.event.detailImage) | ||||
|         } | ||||
|  | ||||
|         if (this.event.popupImage != null) { | ||||
|           formData.append("popup", this.event.popupImage) | ||||
|         } | ||||
|  | ||||
|         if (this.event.link != null && this.event.link.trim().length > 0) { | ||||
|           formData.append("link", this.event.link) | ||||
|         } | ||||
|  | ||||
|         if (this.event.isAdult !== undefined && this.event.isAdult !== null && this.event.isAdult !== '') { | ||||
|           formData.append("isAdult", JSON.parse(this.event.isAdult)) | ||||
|         } | ||||
|  | ||||
|         const res = await api.save(formData) | ||||
|         if (res.status === 200 && res.data.success === true) { | ||||
|           this.show_write_dialog = false | ||||
|           this.notifySuccess('등록되었습니다.') | ||||
|           this.page = 1 | ||||
|           await this.getEvents() | ||||
|           this.event = { isAdult: '' } | ||||
|         } | ||||
|       } catch (e) { | ||||
|         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|       } finally { | ||||
|         this.is_loading = false | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     async modify() { | ||||
|       if (this.is_loading) return; | ||||
|  | ||||
|       this.is_loading = true | ||||
|       try { | ||||
|         const formData = new FormData() | ||||
|         formData.append("id", this.event.id) | ||||
|  | ||||
|         if (this.event.title != null && this.event.title.trim().length > 0) { | ||||
|           formData.append("title", this.event.title) | ||||
|         } | ||||
|  | ||||
|         if (this.event.thumbnailImage != null) { | ||||
|           formData.append("thumbnail", this.event.thumbnailImage) | ||||
|         } | ||||
|  | ||||
|         if (this.event.detailImage != null) { | ||||
|           formData.append("detail", this.event.detailImage) | ||||
|         } | ||||
|  | ||||
|         if (this.event.popupImage != null) { | ||||
|           formData.append("popup", this.event.popupImage) | ||||
|         } | ||||
|  | ||||
|         if (this.event.isPopup != null) { | ||||
|           formData.append("isPopup", this.event.isPopup) | ||||
|         } | ||||
|  | ||||
|         if (this.event.link != null && this.event.link.trim().length > 0) { | ||||
|           formData.append("link", this.event.link) | ||||
|         } | ||||
|  | ||||
|         if (this.event.isAdult !== undefined && this.event.isAdult !== null && this.event.isAdult !== '') { | ||||
|           formData.append("isAdult", JSON.parse(this.event.isAdult)) | ||||
|         } | ||||
|  | ||||
|         const res = await api.modify(formData) | ||||
|         if (res.status === 200 && res.data.success === true) { | ||||
|           this.show_write_dialog = false | ||||
|           this.notifySuccess('수정되었습니다.') | ||||
|           this.page = 1 | ||||
|           await this.getEvents() | ||||
|           this.event = { isAdult: '' } | ||||
|           this.is_modify = false | ||||
|         } else { | ||||
|           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|         } | ||||
|       } catch (e) { | ||||
|         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|       } finally { | ||||
|         this.is_loading = false | ||||
|       } | ||||
|     }, | ||||
|  | ||||
|     deleteConfirm() { | ||||
|       this.show_delete_confirm_dialog = true | ||||
|     }, | ||||
|  | ||||
|     deleteCancel() { | ||||
|       this.show_delete_confirm_dialog = false | ||||
|     }, | ||||
|  | ||||
|     async deleteEvent() { | ||||
|       if (this.is_loading) return; | ||||
|       this.is_loading = true | ||||
|  | ||||
|       try { | ||||
|         const res = await api.deleteEvent(this.event.id) | ||||
|         if (res.status === 200 && res.data.success === true) { | ||||
|           this.show_write_dialog = false | ||||
|           this.show_delete_confirm_dialog = false | ||||
|           this.notifySuccess('삭제되었습니다.') | ||||
|           this.page = 1 | ||||
|           await this.getEvents() | ||||
|           this.event = {} | ||||
|           this.is_modify = false | ||||
|         } else { | ||||
|           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|         } | ||||
|       } catch (e) { | ||||
|         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|       } finally { | ||||
|         this.is_loading = false | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
| .image-select label { | ||||
|     display: inline-block; | ||||
|     padding: 10px 20px; | ||||
|     background-color: #232d4a; | ||||
|     color: #fff; | ||||
|     vertical-align: middle; | ||||
|     font-size: 15px; | ||||
|     cursor: pointer; | ||||
|     border-radius: 5px; | ||||
|   display: inline-block; | ||||
|   padding: 10px 20px; | ||||
|   background-color: #232d4a; | ||||
|   color: #fff; | ||||
|   vertical-align: middle; | ||||
|   font-size: 15px; | ||||
|   cursor: pointer; | ||||
|   border-radius: 5px; | ||||
| } | ||||
|  | ||||
| .v-file-input { | ||||
|     position: absolute; | ||||
|     width: 0; | ||||
|     height: 0; | ||||
|     padding: 0; | ||||
|     overflow: hidden; | ||||
|     border: 0; | ||||
|   position: absolute; | ||||
|   width: 0; | ||||
|   height: 0; | ||||
|   padding: 0; | ||||
|   overflow: hidden; | ||||
|   border: 0; | ||||
| } | ||||
|  | ||||
| .image-preview { | ||||
|     max-width: 100%; | ||||
|     width: 250px; | ||||
|     object-fit: cover; | ||||
|     margin-top: 10px; | ||||
|   max-width: 100%; | ||||
|   width: 250px; | ||||
|   object-fit: cover; | ||||
|   margin-top: 10px; | ||||
| } | ||||
| </style> | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Yu Sung
					Yu Sung