feat(agent-calculate): 에이전트 정산 화면 구현 및 API 연동
This commit is contained in:
Yu Sung
41
docs/20260413_에이전트정산페이지구현.md
Normal file
41
docs/20260413_에이전트정산페이지구현.md
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# 에이전트 전용 정산 페이지 구현 계획
|
||||||
|
|
||||||
|
## 목적
|
||||||
|
- 에이전트 전용 크리에이터별 정산 페이지 5종을 구현한다.
|
||||||
|
- 날짜 범위 지정 UI 제공, 합계를 테이블 최상단에 노출, 서버 페이징 대응.
|
||||||
|
|
||||||
|
## 대상 페이지
|
||||||
|
- 라이브 정산: `/agent/calculate/live`
|
||||||
|
- 콘텐츠 정산: `/agent/calculate/content-by-date`
|
||||||
|
- 콘텐츠 후원 정산: `/agent/calculate/content-donation-by-date`
|
||||||
|
- 커뮤니티 정산: `/agent/calculate/community-post`
|
||||||
|
- 채널 후원 정산: `/agent/calculate/channel-donation`
|
||||||
|
|
||||||
|
## API
|
||||||
|
- Method: GET
|
||||||
|
- Base URL prefix: `/agent/calculate/*`
|
||||||
|
- 공통 쿼리: `startDateStr`, `endDateStr`, `page`, `size`
|
||||||
|
- 응답 스키마(공통):
|
||||||
|
- `totalCount: number`
|
||||||
|
- `total: { count, totalCan, krw, fee, settlementAmount, tax, depositAmount, agentSettlementAmount }`
|
||||||
|
- `items: Array<{ creatorId, creatorNickname, count, totalCan, krw, fee, settlementAmount, tax, depositAmount, agentSettlementAmount }>`
|
||||||
|
|
||||||
|
## 체크리스트
|
||||||
|
- [x] API 모듈 `src/api/agent_calculate.js` 생성 및 5개 함수 구현
|
||||||
|
- [x] 날짜 범위 선택 UI 및 조회 버튼 구현(공통 패턴 사용: vuejs-datetimepicker)
|
||||||
|
- [x] 데이터 테이블 구현(헤더: 닉네임, 건수, 총 CAN, 원화, 수수료, 정산금액, 세금, 입금액, 에이전트 정산금액)
|
||||||
|
- [x] 합계(total)를 테이블 최상단 body.prepend로 표시
|
||||||
|
- [x] 서버 페이징(v-pagination) 연동 및 총 페이지 계산
|
||||||
|
- [x] 로딩 인디케이터/에러 노티 추가
|
||||||
|
- [x] 각 페이지 초기 로드 시 당월 1일 ~ 말일 기본 조회
|
||||||
|
|
||||||
|
## 검증 기록
|
||||||
|
### 1차 구현
|
||||||
|
- 무엇을: 에이전트 전용 정산 5개 화면(API 연동 훅/합계/페이징/숫자 포맷) 구현
|
||||||
|
- 왜: 에이전트가 기간별 크리에이터 정산 현황을 통합 조회하기 위함
|
||||||
|
- 어떻게:
|
||||||
|
- 명령/절차: 로컬 서버 실행 후 각 경로 진입 → 기본 기간(당월) 자동 조회 → 날짜 변경 후 조회 → 합계/목록/페이징 확인
|
||||||
|
- 결과: UI 및 파라미터 구성 확인 완료. 백엔드 연결 환경에서 200 응답 시 데이터 표시 예상(수동 점검 예정)
|
||||||
|
|
||||||
|
## 정정
|
||||||
|
- 현재 없음. 추후 백엔드 스펙 변경 시 쿼리/필드명 반영 예정.
|
||||||
46
src/api/agent_calculate.js
Normal file
46
src/api/agent_calculate.js
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
// 에이전트 전용 정산 API
|
||||||
|
|
||||||
|
async function getLiveByCreator(startDate, endDate, page, size) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
'/agent/calculate/live-by-creator?startDateStr=' + startDate +
|
||||||
|
'&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getContentByCreator(startDate, endDate, page, size) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
'/agent/calculate/content-by-creator?startDateStr=' + startDate +
|
||||||
|
'&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getContentDonationByCreator(startDate, endDate, page, size) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
'/agent/calculate/content-donation-by-creator?startDateStr=' + startDate +
|
||||||
|
'&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getCommunityByCreator(startDate, endDate, page, size) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
'/agent/calculate/community-by-creator?startDateStr=' + startDate +
|
||||||
|
'&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getChannelDonationByCreator(startDate, endDate, page, size) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
'/agent/calculate/channel-donation-by-creator?startDateStr=' + startDate +
|
||||||
|
'&endDateStr=' + endDate + '&page=' + (page - 1) + '&size=' + size
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
getLiveByCreator,
|
||||||
|
getContentByCreator,
|
||||||
|
getContentDonationByCreator,
|
||||||
|
getCommunityByCreator,
|
||||||
|
getChannelDonationByCreator
|
||||||
|
}
|
||||||
@@ -1,13 +1,241 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container>
|
<div>
|
||||||
<h2>에이전트 전용 - 크리에이터별 채널 후원 정산</h2>
|
<v-toolbar dark>
|
||||||
<p>이 페이지는 추후 구현 예정입니다.</p>
|
<v-spacer />
|
||||||
</v-container>
|
<v-toolbar-title>에이전트 전용 - 크리에이터별 채널 후원 정산</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<!-- 필터 영역 -->
|
||||||
|
<v-row
|
||||||
|
class="mt-2 mb-2"
|
||||||
|
align="center"
|
||||||
|
justify="end"
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="3"
|
||||||
|
>
|
||||||
|
<v-menu
|
||||||
|
v-model="menuStart"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
transition="scale-transition"
|
||||||
|
offset-y
|
||||||
|
min-width="auto"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-text-field
|
||||||
|
v-bind="attrs"
|
||||||
|
label="시작일"
|
||||||
|
readonly
|
||||||
|
dense
|
||||||
|
:value="start_date"
|
||||||
|
v-on="on"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<v-date-picker
|
||||||
|
v-model="start_date"
|
||||||
|
scrollable
|
||||||
|
@input="menuStart = false"
|
||||||
|
/>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="3"
|
||||||
|
>
|
||||||
|
<v-menu
|
||||||
|
v-model="menuEnd"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
transition="scale-transition"
|
||||||
|
offset-y
|
||||||
|
min-width="auto"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-text-field
|
||||||
|
v-bind="attrs"
|
||||||
|
label="종료일"
|
||||||
|
readonly
|
||||||
|
dense
|
||||||
|
:value="end_date"
|
||||||
|
v-on="on"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<v-date-picker
|
||||||
|
v-model="end_date"
|
||||||
|
scrollable
|
||||||
|
@input="menuEnd = false"
|
||||||
|
/>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="2"
|
||||||
|
>
|
||||||
|
<v-btn
|
||||||
|
color="#3bb9f1"
|
||||||
|
:loading="is_loading"
|
||||||
|
@click="fetchItems"
|
||||||
|
>
|
||||||
|
조회
|
||||||
|
</v-btn>
|
||||||
|
</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 slot="body.prepend">
|
||||||
|
<tr>
|
||||||
|
<td>합계</td>
|
||||||
|
<td>{{ (total.count || 0).toLocaleString() }}</td>
|
||||||
|
<td>{{ (total.totalCan || 0).toLocaleString() }} 캔</td>
|
||||||
|
<td>{{ (total.krw || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.fee || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.settlementAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.tax || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.depositAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.agentSettlementAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.totalCan="{ item }">
|
||||||
|
{{ (item.totalCan || 0).toLocaleString() }} 캔
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.krw="{ item }">
|
||||||
|
{{ (item.krw || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.fee="{ item }">
|
||||||
|
{{ (item.fee || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.settlementAmount="{ item }">
|
||||||
|
{{ (item.settlementAmount || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.tax="{ item }">
|
||||||
|
{{ (item.tax || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.depositAmount="{ item }">
|
||||||
|
{{ (item.depositAmount || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.agentSettlementAmount="{ item }">
|
||||||
|
{{ (item.agentSettlementAmount || 0).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="onPage"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as api from '@/api/agent_calculate';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AgentCalculateChannelDonation'
|
name: 'AgentCalculateChannelDonation',
|
||||||
|
components: { },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
menuStart: false,
|
||||||
|
menuEnd: false,
|
||||||
|
start_date: null,
|
||||||
|
end_date: null,
|
||||||
|
page: 1,
|
||||||
|
page_size: 20,
|
||||||
|
total_page: 0,
|
||||||
|
items: [],
|
||||||
|
total: {
|
||||||
|
count: 0,
|
||||||
|
totalCan: 0,
|
||||||
|
krw: 0,
|
||||||
|
fee: 0,
|
||||||
|
settlementAmount: 0,
|
||||||
|
tax: 0,
|
||||||
|
depositAmount: 0,
|
||||||
|
agentSettlementAmount: 0
|
||||||
|
},
|
||||||
|
headers: [
|
||||||
|
{ text: '닉네임', value: 'creatorNickname', align: 'center', sortable: false },
|
||||||
|
{ text: '건수', value: 'count', align: 'center', sortable: false },
|
||||||
|
{ text: '총 CAN', value: 'totalCan', align: 'center', sortable: false },
|
||||||
|
{ text: '원화', value: 'krw', align: 'center', sortable: false },
|
||||||
|
{ text: '수수료', value: 'fee', align: 'center', sortable: false },
|
||||||
|
{ text: '정산금액', value: 'settlementAmount', align: 'center', sortable: false },
|
||||||
|
{ text: '세금', value: 'tax', align: 'center', sortable: false },
|
||||||
|
{ text: '입금액', value: 'depositAmount', align: 'center', sortable: false },
|
||||||
|
{ text: '에이전트 정산금액', value: 'agentSettlementAmount', align: 'center', sortable: false },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
|
||||||
|
const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
|
||||||
|
this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
|
||||||
|
this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
|
||||||
|
|
||||||
|
await this.fetchItems();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
async onPage() {
|
||||||
|
await this.fetchItems();
|
||||||
|
},
|
||||||
|
async fetchItems() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.getChannelDonationByCreator(this.start_date, this.end_date, this.page, this.page_size)
|
||||||
|
if (res.status === 200 && res.data && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
this.items = data.items || []
|
||||||
|
this.total = data.total || this.total
|
||||||
|
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
||||||
|
this.total_page = totalPage > 0 ? totalPage : 1
|
||||||
|
} else if (res.data && res.data.data) {
|
||||||
|
const data = res.data.data
|
||||||
|
this.items = data.items || []
|
||||||
|
this.total = data.total || this.total
|
||||||
|
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
||||||
|
this.total_page = totalPage > 0 ? totalPage : 1
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data?.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,241 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container>
|
<div>
|
||||||
<h2>에이전트 전용 - 크리에이터별 커뮤니티 정산</h2>
|
<v-toolbar dark>
|
||||||
<p>이 페이지는 추후 구현 예정입니다.</p>
|
<v-spacer />
|
||||||
</v-container>
|
<v-toolbar-title>에이전트 전용 - 크리에이터별 커뮤니티 정산</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<!-- 필터 영역 -->
|
||||||
|
<v-row
|
||||||
|
class="mt-2 mb-2"
|
||||||
|
align="center"
|
||||||
|
justify="end"
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="3"
|
||||||
|
>
|
||||||
|
<v-menu
|
||||||
|
v-model="menuStart"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
transition="scale-transition"
|
||||||
|
offset-y
|
||||||
|
min-width="auto"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-text-field
|
||||||
|
v-bind="attrs"
|
||||||
|
label="시작일"
|
||||||
|
readonly
|
||||||
|
dense
|
||||||
|
:value="start_date"
|
||||||
|
v-on="on"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<v-date-picker
|
||||||
|
v-model="start_date"
|
||||||
|
scrollable
|
||||||
|
@input="menuStart = false"
|
||||||
|
/>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="3"
|
||||||
|
>
|
||||||
|
<v-menu
|
||||||
|
v-model="menuEnd"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
transition="scale-transition"
|
||||||
|
offset-y
|
||||||
|
min-width="auto"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-text-field
|
||||||
|
v-bind="attrs"
|
||||||
|
label="종료일"
|
||||||
|
readonly
|
||||||
|
dense
|
||||||
|
:value="end_date"
|
||||||
|
v-on="on"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<v-date-picker
|
||||||
|
v-model="end_date"
|
||||||
|
scrollable
|
||||||
|
@input="menuEnd = false"
|
||||||
|
/>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="2"
|
||||||
|
>
|
||||||
|
<v-btn
|
||||||
|
color="#3bb9f1"
|
||||||
|
:loading="is_loading"
|
||||||
|
@click="fetchItems"
|
||||||
|
>
|
||||||
|
조회
|
||||||
|
</v-btn>
|
||||||
|
</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 slot="body.prepend">
|
||||||
|
<tr>
|
||||||
|
<td>합계</td>
|
||||||
|
<td>{{ (total.count || 0).toLocaleString() }}</td>
|
||||||
|
<td>{{ (total.totalCan || 0).toLocaleString() }} 캔</td>
|
||||||
|
<td>{{ (total.krw || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.fee || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.settlementAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.tax || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.depositAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.agentSettlementAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.totalCan="{ item }">
|
||||||
|
{{ (item.totalCan || 0).toLocaleString() }} 캔
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.krw="{ item }">
|
||||||
|
{{ (item.krw || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.fee="{ item }">
|
||||||
|
{{ (item.fee || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.settlementAmount="{ item }">
|
||||||
|
{{ (item.settlementAmount || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.tax="{ item }">
|
||||||
|
{{ (item.tax || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.depositAmount="{ item }">
|
||||||
|
{{ (item.depositAmount || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.agentSettlementAmount="{ item }">
|
||||||
|
{{ (item.agentSettlementAmount || 0).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="onPage"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as api from '@/api/agent_calculate';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AgentCalculateCommunityPost'
|
name: 'AgentCalculateCommunityPost',
|
||||||
|
components: { },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
menuStart: false,
|
||||||
|
menuEnd: false,
|
||||||
|
start_date: null,
|
||||||
|
end_date: null,
|
||||||
|
page: 1,
|
||||||
|
page_size: 20,
|
||||||
|
total_page: 0,
|
||||||
|
items: [],
|
||||||
|
total: {
|
||||||
|
count: 0,
|
||||||
|
totalCan: 0,
|
||||||
|
krw: 0,
|
||||||
|
fee: 0,
|
||||||
|
settlementAmount: 0,
|
||||||
|
tax: 0,
|
||||||
|
depositAmount: 0,
|
||||||
|
agentSettlementAmount: 0
|
||||||
|
},
|
||||||
|
headers: [
|
||||||
|
{ text: '닉네임', value: 'creatorNickname', align: 'center', sortable: false },
|
||||||
|
{ text: '건수', value: 'count', align: 'center', sortable: false },
|
||||||
|
{ text: '총 CAN', value: 'totalCan', align: 'center', sortable: false },
|
||||||
|
{ text: '원화', value: 'krw', align: 'center', sortable: false },
|
||||||
|
{ text: '수수료', value: 'fee', align: 'center', sortable: false },
|
||||||
|
{ text: '정산금액', value: 'settlementAmount', align: 'center', sortable: false },
|
||||||
|
{ text: '세금', value: 'tax', align: 'center', sortable: false },
|
||||||
|
{ text: '입금액', value: 'depositAmount', align: 'center', sortable: false },
|
||||||
|
{ text: '에이전트 정산금액', value: 'agentSettlementAmount', align: 'center', sortable: false },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
|
||||||
|
const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
|
||||||
|
this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
|
||||||
|
this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
|
||||||
|
|
||||||
|
await this.fetchItems();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
async onPage() {
|
||||||
|
await this.fetchItems();
|
||||||
|
},
|
||||||
|
async fetchItems() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.getCommunityByCreator(this.start_date, this.end_date, this.page, this.page_size)
|
||||||
|
if (res.status === 200 && res.data && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
this.items = data.items || []
|
||||||
|
this.total = data.total || this.total
|
||||||
|
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
||||||
|
this.total_page = totalPage > 0 ? totalPage : 1
|
||||||
|
} else if (res.data && res.data.data) {
|
||||||
|
const data = res.data.data
|
||||||
|
this.items = data.items || []
|
||||||
|
this.total = data.total || this.total
|
||||||
|
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
||||||
|
this.total_page = totalPage > 0 ? totalPage : 1
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data?.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,241 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container>
|
<div>
|
||||||
<h2>에이전트 전용 - 크리에이터별 콘텐츠 정산</h2>
|
<v-toolbar dark>
|
||||||
<p>이 페이지는 추후 구현 예정입니다.</p>
|
<v-spacer />
|
||||||
</v-container>
|
<v-toolbar-title>에이전트 전용 - 크리에이터별 콘텐츠 정산</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<!-- 필터 영역 -->
|
||||||
|
<v-row
|
||||||
|
class="mt-2 mb-2"
|
||||||
|
align="center"
|
||||||
|
justify="end"
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="3"
|
||||||
|
>
|
||||||
|
<v-menu
|
||||||
|
v-model="menuStart"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
transition="scale-transition"
|
||||||
|
offset-y
|
||||||
|
min-width="auto"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-text-field
|
||||||
|
v-bind="attrs"
|
||||||
|
label="시작일"
|
||||||
|
readonly
|
||||||
|
dense
|
||||||
|
:value="start_date"
|
||||||
|
v-on="on"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<v-date-picker
|
||||||
|
v-model="start_date"
|
||||||
|
scrollable
|
||||||
|
@input="menuStart = false"
|
||||||
|
/>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="3"
|
||||||
|
>
|
||||||
|
<v-menu
|
||||||
|
v-model="menuEnd"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
transition="scale-transition"
|
||||||
|
offset-y
|
||||||
|
min-width="auto"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-text-field
|
||||||
|
v-bind="attrs"
|
||||||
|
label="종료일"
|
||||||
|
readonly
|
||||||
|
dense
|
||||||
|
:value="end_date"
|
||||||
|
v-on="on"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<v-date-picker
|
||||||
|
v-model="end_date"
|
||||||
|
scrollable
|
||||||
|
@input="menuEnd = false"
|
||||||
|
/>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="2"
|
||||||
|
>
|
||||||
|
<v-btn
|
||||||
|
color="#3bb9f1"
|
||||||
|
:loading="is_loading"
|
||||||
|
@click="fetchItems"
|
||||||
|
>
|
||||||
|
조회
|
||||||
|
</v-btn>
|
||||||
|
</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 slot="body.prepend">
|
||||||
|
<tr>
|
||||||
|
<td>합계</td>
|
||||||
|
<td>{{ (total.count || 0).toLocaleString() }}</td>
|
||||||
|
<td>{{ (total.totalCan || 0).toLocaleString() }} 캔</td>
|
||||||
|
<td>{{ (total.krw || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.fee || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.settlementAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.tax || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.depositAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.agentSettlementAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.totalCan="{ item }">
|
||||||
|
{{ (item.totalCan || 0).toLocaleString() }} 캔
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.krw="{ item }">
|
||||||
|
{{ (item.krw || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.fee="{ item }">
|
||||||
|
{{ (item.fee || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.settlementAmount="{ item }">
|
||||||
|
{{ (item.settlementAmount || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.tax="{ item }">
|
||||||
|
{{ (item.tax || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.depositAmount="{ item }">
|
||||||
|
{{ (item.depositAmount || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.agentSettlementAmount="{ item }">
|
||||||
|
{{ (item.agentSettlementAmount || 0).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="onPage"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as api from '@/api/agent_calculate';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AgentCalculateContent'
|
name: 'AgentCalculateContent',
|
||||||
|
components: { },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
menuStart: false,
|
||||||
|
menuEnd: false,
|
||||||
|
start_date: null,
|
||||||
|
end_date: null,
|
||||||
|
page: 1,
|
||||||
|
page_size: 20,
|
||||||
|
total_page: 0,
|
||||||
|
items: [],
|
||||||
|
total: {
|
||||||
|
count: 0,
|
||||||
|
totalCan: 0,
|
||||||
|
krw: 0,
|
||||||
|
fee: 0,
|
||||||
|
settlementAmount: 0,
|
||||||
|
tax: 0,
|
||||||
|
depositAmount: 0,
|
||||||
|
agentSettlementAmount: 0
|
||||||
|
},
|
||||||
|
headers: [
|
||||||
|
{ text: '닉네임', value: 'creatorNickname', align: 'center', sortable: false },
|
||||||
|
{ text: '건수', value: 'count', align: 'center', sortable: false },
|
||||||
|
{ text: '총 CAN', value: 'totalCan', align: 'center', sortable: false },
|
||||||
|
{ text: '원화', value: 'krw', align: 'center', sortable: false },
|
||||||
|
{ text: '수수료', value: 'fee', align: 'center', sortable: false },
|
||||||
|
{ text: '정산금액', value: 'settlementAmount', align: 'center', sortable: false },
|
||||||
|
{ text: '세금', value: 'tax', align: 'center', sortable: false },
|
||||||
|
{ text: '입금액', value: 'depositAmount', align: 'center', sortable: false },
|
||||||
|
{ text: '에이전트 정산금액', value: 'agentSettlementAmount', align: 'center', sortable: false },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
|
||||||
|
const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
|
||||||
|
this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
|
||||||
|
this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
|
||||||
|
|
||||||
|
await this.fetchItems();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
async onPage() {
|
||||||
|
await this.fetchItems();
|
||||||
|
},
|
||||||
|
async fetchItems() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.getContentByCreator(this.start_date, this.end_date, this.page, this.page_size)
|
||||||
|
if (res.status === 200 && res.data && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
this.items = data.items || []
|
||||||
|
this.total = data.total || this.total
|
||||||
|
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
||||||
|
this.total_page = totalPage > 0 ? totalPage : 1
|
||||||
|
} else if (res.data && res.data.data) {
|
||||||
|
const data = res.data.data
|
||||||
|
this.items = data.items || []
|
||||||
|
this.total = data.total || this.total
|
||||||
|
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
||||||
|
this.total_page = totalPage > 0 ? totalPage : 1
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data?.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,241 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container>
|
<div>
|
||||||
<h2>에이전트 전용 - 크리에이터별 콘텐츠 후원 정산</h2>
|
<v-toolbar dark>
|
||||||
<p>이 페이지는 추후 구현 예정입니다.</p>
|
<v-spacer />
|
||||||
</v-container>
|
<v-toolbar-title>에이전트 전용 - 크리에이터별 콘텐츠 후원 정산</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<!-- 필터 영역 -->
|
||||||
|
<v-row
|
||||||
|
class="mt-2 mb-2"
|
||||||
|
align="center"
|
||||||
|
justify="end"
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="3"
|
||||||
|
>
|
||||||
|
<v-menu
|
||||||
|
v-model="menuStart"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
transition="scale-transition"
|
||||||
|
offset-y
|
||||||
|
min-width="auto"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-text-field
|
||||||
|
v-bind="attrs"
|
||||||
|
label="시작일"
|
||||||
|
readonly
|
||||||
|
dense
|
||||||
|
:value="start_date"
|
||||||
|
v-on="on"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<v-date-picker
|
||||||
|
v-model="start_date"
|
||||||
|
scrollable
|
||||||
|
@input="menuStart = false"
|
||||||
|
/>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="3"
|
||||||
|
>
|
||||||
|
<v-menu
|
||||||
|
v-model="menuEnd"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
transition="scale-transition"
|
||||||
|
offset-y
|
||||||
|
min-width="auto"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-text-field
|
||||||
|
v-bind="attrs"
|
||||||
|
label="종료일"
|
||||||
|
readonly
|
||||||
|
dense
|
||||||
|
:value="end_date"
|
||||||
|
v-on="on"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<v-date-picker
|
||||||
|
v-model="end_date"
|
||||||
|
scrollable
|
||||||
|
@input="menuEnd = false"
|
||||||
|
/>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="2"
|
||||||
|
>
|
||||||
|
<v-btn
|
||||||
|
color="#3bb9f1"
|
||||||
|
:loading="is_loading"
|
||||||
|
@click="fetchItems"
|
||||||
|
>
|
||||||
|
조회
|
||||||
|
</v-btn>
|
||||||
|
</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 slot="body.prepend">
|
||||||
|
<tr>
|
||||||
|
<td>합계</td>
|
||||||
|
<td>{{ (total.count || 0).toLocaleString() }}</td>
|
||||||
|
<td>{{ (total.totalCan || 0).toLocaleString() }} 캔</td>
|
||||||
|
<td>{{ (total.krw || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.fee || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.settlementAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.tax || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.depositAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.agentSettlementAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.totalCan="{ item }">
|
||||||
|
{{ (item.totalCan || 0).toLocaleString() }} 캔
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.krw="{ item }">
|
||||||
|
{{ (item.krw || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.fee="{ item }">
|
||||||
|
{{ (item.fee || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.settlementAmount="{ item }">
|
||||||
|
{{ (item.settlementAmount || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.tax="{ item }">
|
||||||
|
{{ (item.tax || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.depositAmount="{ item }">
|
||||||
|
{{ (item.depositAmount || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.agentSettlementAmount="{ item }">
|
||||||
|
{{ (item.agentSettlementAmount || 0).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="onPage"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as api from '@/api/agent_calculate';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AgentCalculateContentDonation'
|
name: 'AgentCalculateContentDonation',
|
||||||
|
components: { },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
menuStart: false,
|
||||||
|
menuEnd: false,
|
||||||
|
start_date: null,
|
||||||
|
end_date: null,
|
||||||
|
page: 1,
|
||||||
|
page_size: 20,
|
||||||
|
total_page: 0,
|
||||||
|
items: [],
|
||||||
|
total: {
|
||||||
|
count: 0,
|
||||||
|
totalCan: 0,
|
||||||
|
krw: 0,
|
||||||
|
fee: 0,
|
||||||
|
settlementAmount: 0,
|
||||||
|
tax: 0,
|
||||||
|
depositAmount: 0,
|
||||||
|
agentSettlementAmount: 0
|
||||||
|
},
|
||||||
|
headers: [
|
||||||
|
{ text: '닉네임', value: 'creatorNickname', align: 'center', sortable: false },
|
||||||
|
{ text: '건수', value: 'count', align: 'center', sortable: false },
|
||||||
|
{ text: '총 CAN', value: 'totalCan', align: 'center', sortable: false },
|
||||||
|
{ text: '원화', value: 'krw', align: 'center', sortable: false },
|
||||||
|
{ text: '수수료', value: 'fee', align: 'center', sortable: false },
|
||||||
|
{ text: '정산금액', value: 'settlementAmount', align: 'center', sortable: false },
|
||||||
|
{ text: '세금', value: 'tax', align: 'center', sortable: false },
|
||||||
|
{ text: '입금액', value: 'depositAmount', align: 'center', sortable: false },
|
||||||
|
{ text: '에이전트 정산금액', value: 'agentSettlementAmount', align: 'center', sortable: false },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
|
||||||
|
const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
|
||||||
|
this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
|
||||||
|
this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
|
||||||
|
|
||||||
|
await this.fetchItems();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
async onPage() {
|
||||||
|
await this.fetchItems();
|
||||||
|
},
|
||||||
|
async fetchItems() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.getContentDonationByCreator(this.start_date, this.end_date, this.page, this.page_size)
|
||||||
|
if (res.status === 200 && res.data && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
this.items = data.items || []
|
||||||
|
this.total = data.total || this.total
|
||||||
|
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
||||||
|
this.total_page = totalPage > 0 ? totalPage : 1
|
||||||
|
} else if (res.data && res.data.data) {
|
||||||
|
const data = res.data.data
|
||||||
|
this.items = data.items || []
|
||||||
|
this.total = data.total || this.total
|
||||||
|
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
||||||
|
this.total_page = totalPage > 0 ? totalPage : 1
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data?.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +1,241 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-container>
|
<div>
|
||||||
<h2>에이전트 전용 - 크리에이터별 라이브 정산</h2>
|
<v-toolbar dark>
|
||||||
<p>이 페이지는 추후 구현 예정입니다.</p>
|
<v-spacer />
|
||||||
</v-container>
|
<v-toolbar-title>에이전트 전용 - 크리에이터별 라이브 정산</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<!-- 필터 영역 -->
|
||||||
|
<v-row
|
||||||
|
class="mt-2 mb-2"
|
||||||
|
align="center"
|
||||||
|
justify="end"
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="3"
|
||||||
|
>
|
||||||
|
<v-menu
|
||||||
|
v-model="menuStart"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
transition="scale-transition"
|
||||||
|
offset-y
|
||||||
|
min-width="auto"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-text-field
|
||||||
|
v-bind="attrs"
|
||||||
|
label="시작일"
|
||||||
|
readonly
|
||||||
|
dense
|
||||||
|
:value="start_date"
|
||||||
|
v-on="on"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<v-date-picker
|
||||||
|
v-model="start_date"
|
||||||
|
scrollable
|
||||||
|
@input="menuStart = false"
|
||||||
|
/>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="3"
|
||||||
|
>
|
||||||
|
<v-menu
|
||||||
|
v-model="menuEnd"
|
||||||
|
:close-on-content-click="false"
|
||||||
|
transition="scale-transition"
|
||||||
|
offset-y
|
||||||
|
min-width="auto"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ on, attrs }">
|
||||||
|
<v-text-field
|
||||||
|
v-bind="attrs"
|
||||||
|
label="종료일"
|
||||||
|
readonly
|
||||||
|
dense
|
||||||
|
:value="end_date"
|
||||||
|
v-on="on"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<v-date-picker
|
||||||
|
v-model="end_date"
|
||||||
|
scrollable
|
||||||
|
@input="menuEnd = false"
|
||||||
|
/>
|
||||||
|
</v-menu>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="2"
|
||||||
|
>
|
||||||
|
<v-btn
|
||||||
|
color="#3bb9f1"
|
||||||
|
:loading="is_loading"
|
||||||
|
@click="fetchItems"
|
||||||
|
>
|
||||||
|
조회
|
||||||
|
</v-btn>
|
||||||
|
</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 slot="body.prepend">
|
||||||
|
<tr>
|
||||||
|
<td>합계</td>
|
||||||
|
<td>{{ (total.count || 0).toLocaleString() }}</td>
|
||||||
|
<td>{{ (total.totalCan || 0).toLocaleString() }} 캔</td>
|
||||||
|
<td>{{ (total.krw || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.fee || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.settlementAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.tax || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.depositAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
<td>{{ (total.agentSettlementAmount || 0).toLocaleString() }} 원</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:item.totalCan="{ item }">
|
||||||
|
{{ (item.totalCan || 0).toLocaleString() }} 캔
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.krw="{ item }">
|
||||||
|
{{ (item.krw || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.fee="{ item }">
|
||||||
|
{{ (item.fee || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.settlementAmount="{ item }">
|
||||||
|
{{ (item.settlementAmount || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.tax="{ item }">
|
||||||
|
{{ (item.tax || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.depositAmount="{ item }">
|
||||||
|
{{ (item.depositAmount || 0).toLocaleString() }} 원
|
||||||
|
</template>
|
||||||
|
<template v-slot:item.agentSettlementAmount="{ item }">
|
||||||
|
{{ (item.agentSettlementAmount || 0).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="onPage"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import * as api from '@/api/agent_calculate';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AgentCalculateLive'
|
name: 'AgentCalculateLive',
|
||||||
|
components: { },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
is_loading: false,
|
||||||
|
menuStart: false,
|
||||||
|
menuEnd: false,
|
||||||
|
start_date: null,
|
||||||
|
end_date: null,
|
||||||
|
page: 1,
|
||||||
|
page_size: 20,
|
||||||
|
total_page: 0,
|
||||||
|
items: [],
|
||||||
|
total: {
|
||||||
|
count: 0,
|
||||||
|
totalCan: 0,
|
||||||
|
krw: 0,
|
||||||
|
fee: 0,
|
||||||
|
settlementAmount: 0,
|
||||||
|
tax: 0,
|
||||||
|
depositAmount: 0,
|
||||||
|
agentSettlementAmount: 0
|
||||||
|
},
|
||||||
|
headers: [
|
||||||
|
{ text: '닉네임', value: 'creatorNickname', align: 'center', sortable: false },
|
||||||
|
{ text: '건수', value: 'count', align: 'center', sortable: false },
|
||||||
|
{ text: '총 CAN', value: 'totalCan', align: 'center', sortable: false },
|
||||||
|
{ text: '원화', value: 'krw', align: 'center', sortable: false },
|
||||||
|
{ text: '수수료', value: 'fee', align: 'center', sortable: false },
|
||||||
|
{ text: '정산금액', value: 'settlementAmount', align: 'center', sortable: false },
|
||||||
|
{ text: '세금', value: 'tax', align: 'center', sortable: false },
|
||||||
|
{ text: '입금액', value: 'depositAmount', align: 'center', sortable: false },
|
||||||
|
{ text: '에이전트 정산금액', value: 'agentSettlementAmount', align: 'center', sortable: false },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
|
||||||
|
const fdM = (firstDate.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
const ldM = (lastDate.getMonth() + 1).toString().padStart(2, '0')
|
||||||
|
|
||||||
|
this.start_date = `${firstDate.getFullYear()}-${fdM}-0${firstDate.getDate()}`
|
||||||
|
this.end_date = `${lastDate.getFullYear()}-${ldM}-${lastDate.getDate()}`
|
||||||
|
|
||||||
|
await this.fetchItems();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
},
|
||||||
|
async onPage() {
|
||||||
|
await this.fetchItems();
|
||||||
|
},
|
||||||
|
async fetchItems() {
|
||||||
|
this.is_loading = true
|
||||||
|
try {
|
||||||
|
const res = await api.getLiveByCreator(this.start_date, this.end_date, this.page, this.page_size)
|
||||||
|
if (res.status === 200 && res.data && res.data.success === true) {
|
||||||
|
const data = res.data.data
|
||||||
|
this.items = data.items || []
|
||||||
|
this.total = data.total || this.total
|
||||||
|
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
||||||
|
this.total_page = totalPage > 0 ? totalPage : 1
|
||||||
|
} else if (res.data && res.data.data) { // 일부 API는 success 없이 data만 줄 수도 있음
|
||||||
|
const data = res.data.data
|
||||||
|
this.items = data.items || []
|
||||||
|
this.total = data.total || this.total
|
||||||
|
const totalPage = Math.ceil((data.totalCount || 0) / this.page_size)
|
||||||
|
this.total_page = totalPage > 0 ? totalPage : 1
|
||||||
|
} else {
|
||||||
|
this.notifyError(res.data?.message || '알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user