크리에이터 기준 라이브 합계 정산 페이지 추가
This commit is contained in:
		| @@ -39,6 +39,12 @@ async function createCreatorSettlementRatio(creatorSettlementRatio) { | |||||||
|     return Vue.axios.post("/admin/calculate/ratio", request) |     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 { | export { | ||||||
|     getCalculateLive, |     getCalculateLive, | ||||||
|     getCalculateContent, |     getCalculateContent, | ||||||
| @@ -46,5 +52,6 @@ export { | |||||||
|     getCalculateContentDonation, |     getCalculateContentDonation, | ||||||
|     getCalculateCommunityPost, |     getCalculateCommunityPost, | ||||||
|     getSettlementRatio, |     getSettlementRatio, | ||||||
|     createCreatorSettlementRatio |     createCreatorSettlementRatio, | ||||||
|  |     getCalculateLiveByCreator | ||||||
| } | } | ||||||
|   | |||||||
| @@ -150,6 +150,11 @@ const routes = [ | |||||||
|                 name: 'CalculateCommunityPost', |                 name: 'CalculateCommunityPost', | ||||||
|                 component: () => import(/* webpackChunkName: "calculate" */ '../views/Calculate/CalculateCommunityPost.vue') |                 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', |                 path: '/notice', | ||||||
|                 name: 'NoticeView', |                 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