크리에이터 기준 라이브 합계 정산 페이지 추가
This commit is contained in:
		| @@ -39,6 +39,12 @@ async function createCreatorSettlementRatio(creatorSettlementRatio) { | ||||
|     return Vue.axios.post("/admin/calculate/ratio", request) | ||||
| } | ||||
|  | ||||
| async function getCalculateLiveByCreator(startDate, endDate, page, size) { | ||||
|     return Vue.axios.get('/admin/calculate/live-by-creator?startDateStr=' + | ||||
|         startDate + '&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size | ||||
|     ) | ||||
| } | ||||
|  | ||||
| export { | ||||
|     getCalculateLive, | ||||
|     getCalculateContent, | ||||
| @@ -46,5 +52,6 @@ export { | ||||
|     getCalculateContentDonation, | ||||
|     getCalculateCommunityPost, | ||||
|     getSettlementRatio, | ||||
|     createCreatorSettlementRatio | ||||
|     createCreatorSettlementRatio, | ||||
|     getCalculateLiveByCreator | ||||
| } | ||||
|   | ||||
| @@ -150,6 +150,11 @@ const routes = [ | ||||
|                 name: 'CalculateCommunityPost', | ||||
|                 component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateCommunityPost.vue') | ||||
|             }, | ||||
|             { | ||||
|                 path: '/calculate/live-by-creator', | ||||
|                 name: 'CalculateLive', | ||||
|                 component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateLiveByCreator.vue') | ||||
|             }, | ||||
|             { | ||||
|                 path: '/notice', | ||||
|                 name: 'NoticeView', | ||||
|   | ||||
							
								
								
									
										301
									
								
								src/views/Calculate/CalculateLiveByCreator.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										301
									
								
								src/views/Calculate/CalculateLiveByCreator.vue
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,301 @@ | ||||
| <template> | ||||
|   <div> | ||||
|     <v-toolbar dark> | ||||
|       <v-spacer /> | ||||
|       <v-toolbar-title>크리에이터별 라이브 정산</v-toolbar-title> | ||||
|       <v-spacer /> | ||||
|     </v-toolbar> | ||||
|  | ||||
|     <br> | ||||
|  | ||||
|     <v-container> | ||||
|       <v-row> | ||||
|         <v-col cols="2"> | ||||
|           <datetime | ||||
|             v-model="start_date" | ||||
|             class="datepicker" | ||||
|             format="YYYY-MM-DD" | ||||
|           /> | ||||
|         </v-col> | ||||
|  | ||||
|         <v-col cols="1"> | ||||
|           ~ | ||||
|         </v-col> | ||||
|  | ||||
|         <v-col cols="2"> | ||||
|           <datetime | ||||
|             v-model="end_date" | ||||
|             class="datepicker" | ||||
|             format="YYYY-MM-DD" | ||||
|           /> | ||||
|         </v-col> | ||||
|  | ||||
|         <v-col cols="1" /> | ||||
|  | ||||
|         <v-col cols="2"> | ||||
|           <v-btn | ||||
|             block | ||||
|             color="#3bb9f1" | ||||
|             dark | ||||
|             depressed | ||||
|             @click="getCalculateLiveByCreator" | ||||
|           > | ||||
|             조회 | ||||
|           </v-btn> | ||||
|         </v-col> | ||||
|  | ||||
|         <v-spacer /> | ||||
|  | ||||
|         <v-col cols="2"> | ||||
|           <vue-excel-xlsx | ||||
|             :data="items" | ||||
|             :columns="columns" | ||||
|             :file-name="'정산'" | ||||
|             :file-type="'xlsx'" | ||||
|             :sheet-name="'정산'" | ||||
|           > | ||||
|             <v-btn | ||||
|               block | ||||
|               color="#3bb9f1" | ||||
|               dark | ||||
|               depressed | ||||
|             > | ||||
|               엑셀 다운로드 | ||||
|             </v-btn> | ||||
|           </vue-excel-xlsx> | ||||
|         </v-col> | ||||
|       </v-row> | ||||
|  | ||||
|       <v-row> | ||||
|         <v-col> | ||||
|           <v-data-table | ||||
|             :headers="headers" | ||||
|             :items="items" | ||||
|             :loading="is_loading" | ||||
|             :items-per-page="-1" | ||||
|             class="elevation-1" | ||||
|             hide-default-footer | ||||
|           > | ||||
|             <template v-slot:item.email="{ item }"> | ||||
|               {{ item.email }} | ||||
|             </template> | ||||
|  | ||||
|             <template v-slot:item.nickname="{ item }"> | ||||
|               {{ item.nickname }} | ||||
|             </template> | ||||
|  | ||||
|             <template v-slot:item.totalCan="{ item }"> | ||||
|               {{ item.totalCan.toLocaleString() }} 캔 | ||||
|             </template> | ||||
|  | ||||
|             <template v-slot:item.totalKrw="{ item }"> | ||||
|               {{ item.totalKrw.toLocaleString() }} 원 | ||||
|             </template> | ||||
|  | ||||
|             <template v-slot:item.paymentFee="{ item }"> | ||||
|               {{ item.paymentFee.toLocaleString() }} 원 | ||||
|             </template> | ||||
|  | ||||
|             <template v-slot:item.settlementAmount="{ item }"> | ||||
|               {{ item.settlementAmount.toLocaleString() }} 원 | ||||
|             </template> | ||||
|  | ||||
|             <template v-slot:item.tax="{ item }"> | ||||
|               {{ item.tax.toLocaleString() }} 원 | ||||
|             </template> | ||||
|  | ||||
|             <template v-slot:item.depositAmount="{ item }"> | ||||
|               {{ item.depositAmount.toLocaleString() }} 원 | ||||
|             </template> | ||||
|           </v-data-table> | ||||
|         </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> | ||||
|   </div> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
|  | ||||
| import datetime from "vuejs-datetimepicker"; | ||||
| import * as api from "@/api/calculate"; | ||||
|  | ||||
| export default { | ||||
|   name: "CalculateLiveByCreator", | ||||
|   components: {datetime}, | ||||
|  | ||||
|   data() { | ||||
|     return { | ||||
|       is_loading: false, | ||||
|       start_date: null, | ||||
|       end_date: null, | ||||
|       page: 1, | ||||
|       page_size: 20, | ||||
|       total_page: 0, | ||||
|       items: [], | ||||
|       columns: [ | ||||
|         { | ||||
|           label: "이메일", | ||||
|           field: "email", | ||||
|         }, | ||||
|         { | ||||
|           label: "크리에이터", | ||||
|           field: "nickname", | ||||
|         }, | ||||
|         { | ||||
|           label: "합계(캔)", | ||||
|           field: "totalCan", | ||||
|         }, | ||||
|         { | ||||
|           label: "원화", | ||||
|           field: "totalKrw", | ||||
|         }, | ||||
|         { | ||||
|           label: "결제수수료(6.6%)", | ||||
|           field: "paymentFee", | ||||
|         }, | ||||
|         { | ||||
|           label: "정산금액", | ||||
|           field: "settlementAmount", | ||||
|         }, | ||||
|         { | ||||
|           label: "원천세(3.3%)", | ||||
|           field: "tax", | ||||
|         }, | ||||
|         { | ||||
|           label: "입금액", | ||||
|           field: "depositAmount", | ||||
|         }, | ||||
|       ], | ||||
|       headers: [ | ||||
|         { | ||||
|           text: '이메일', | ||||
|           align: 'center', | ||||
|           sortable: false, | ||||
|           value: 'email', | ||||
|         }, | ||||
|         { | ||||
|           text: '크리에이터', | ||||
|           align: 'center', | ||||
|           sortable: false, | ||||
|           value: 'nickname', | ||||
|         }, | ||||
|         { | ||||
|           text: '합계(캔)', | ||||
|           align: 'center', | ||||
|           sortable: false, | ||||
|           value: 'totalCan', | ||||
|         }, | ||||
|         { | ||||
|           text: '원화', | ||||
|           align: 'center', | ||||
|           sortable: false, | ||||
|           value: 'totalKrw', | ||||
|         }, | ||||
|         { | ||||
|           text: '수수료\n(6.6%)', | ||||
|           align: 'center', | ||||
|           sortable: false, | ||||
|           value: 'paymentFee', | ||||
|         }, | ||||
|         { | ||||
|           text: '정산금액', | ||||
|           align: 'center', | ||||
|           sortable: false, | ||||
|           value: 'settlementAmount', | ||||
|         }, | ||||
|         { | ||||
|           text: '원천세\n(3.3%)', | ||||
|           align: 'center', | ||||
|           sortable: false, | ||||
|           value: 'tax', | ||||
|         }, | ||||
|         { | ||||
|           text: '입금액', | ||||
|           align: 'center', | ||||
|           sortable: false, | ||||
|           value: 'depositAmount', | ||||
|         } | ||||
|       ], | ||||
|     } | ||||
|   }, | ||||
|  | ||||
|   async created() { | ||||
|     const date = new Date(); | ||||
|     const firstDate = new Date(date.getFullYear(), date.getMonth(), 1); | ||||
|     const lastDate = new Date(date.getFullYear(), date.getMonth() + 1, 0); | ||||
|  | ||||
|     let firstDateMonth = (firstDate.getMonth() + 1).toString() | ||||
|     if (firstDateMonth.length < 2) { | ||||
|       firstDateMonth = '0' + firstDateMonth | ||||
|     } | ||||
|  | ||||
|  | ||||
|     let lastDateMonth = (lastDate.getMonth() + 1).toString() | ||||
|     if (lastDateMonth.length < 2) { | ||||
|       lastDateMonth = '0' + lastDateMonth | ||||
|     } | ||||
|  | ||||
|     this.start_date = firstDate.getFullYear() + '-' + firstDateMonth + '-0' + firstDate.getDate() | ||||
|     this.end_date = lastDate.getFullYear() + '-' + lastDateMonth + '-' + lastDate.getDate() | ||||
|  | ||||
|     await this.getCalculateLiveByCreator(); | ||||
|   }, | ||||
|  | ||||
|   methods: { | ||||
|     notifyError(message) { | ||||
|       this.$dialog.notify.error(message) | ||||
|     }, | ||||
|  | ||||
|     notifySuccess(message) { | ||||
|       this.$dialog.notify.success(message) | ||||
|     }, | ||||
|  | ||||
|     async next() { | ||||
|       await this.getCalculateLiveByCreator() | ||||
|     }, | ||||
|  | ||||
|     async getCalculateLiveByCreator() { | ||||
|       this.is_loading = true | ||||
|  | ||||
|       try { | ||||
|         const res = await api.getCalculateLiveByCreator(this.start_date, this.end_date) | ||||
|  | ||||
|         if (res.status === 200 && res.data.success === true) { | ||||
|           const data = res.data.data | ||||
|  | ||||
|           const totalPage = Math.ceil(data.totalCount / this.page_size) | ||||
|           this.items = data.items | ||||
|  | ||||
|           if (totalPage <= 0) | ||||
|             this.total_page = 1 | ||||
|           else | ||||
|             this.total_page = totalPage | ||||
|         } else { | ||||
|           this.notifyError(res.data.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|         } | ||||
|  | ||||
|         this.is_loading = false | ||||
|       } catch (e) { | ||||
|         this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.') | ||||
|         this.is_loading = false | ||||
|       } finally { | ||||
|         this.is_loading = false | ||||
|       } | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style scoped> | ||||
|  | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user
	 Yu Sung
					Yu Sung