Compare commits
5 Commits
a288b406ac
...
cac14832c2
| Author | SHA1 | Date | |
|---|---|---|---|
|
cac14832c2 | ||
|
|
5533b0c02a | ||
|
|
6148449ae5 | ||
|
|
6c8c5fb660 | ||
|
|
8ce660d45e |
77
docs/20260413_에이전트소속크리에이터목록.md
Normal file
77
docs/20260413_에이전트소속크리에이터목록.md
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
# 에이전트 소속 크리에이터 목록 페이지 구현 계획
|
||||||
|
|
||||||
|
- [ ] API 호출 함수 추가 (`src/api/agent_calculate.js`)
|
||||||
|
- [ ] 페이지 테이블 구현 (`src/views/Agent/Creators.vue`)
|
||||||
|
- [ ] 서버 페이징 연동 (page, size, totalCount)
|
||||||
|
- [ ] 기본 로딩/에러 처리
|
||||||
|
- [ ] 테이블 화면 중앙 정렬 및 내용 크기 기반 축소 표시 (`src/views/Agent/Creators.vue`)
|
||||||
|
- [ ] 프로필 이미지/테이블 2배 확대 (`src/views/Agent/Creators.vue`)
|
||||||
|
- [ ] v-pagination으로 커스텀 페이징 적용 (`src/views/Agent/Creators.vue`)
|
||||||
|
|
||||||
|
## 검증 기록
|
||||||
|
|
||||||
|
### 1차 구현
|
||||||
|
- 무엇을: 에이전트 소속 크리에이터 목록 조회 및 테이블 렌더링, 페이지 전환 확인
|
||||||
|
- 왜: 에이전트가 담당 크리에이터 정보를 빠르게 확인할 수 있도록 하기 위함
|
||||||
|
- 어떻게:
|
||||||
|
- 애플리케이션 실행 후 좌측 메뉴에서 해당 페이지 진입
|
||||||
|
- 1페이지 로드 시 닉네임/프로필 이미지 표시 여부 확인 (성공/실패)
|
||||||
|
- 페이지네이션에서 2페이지로 이동하여 데이터 갱신 확인 (성공/실패)
|
||||||
|
- 실패 시 개발자 도구 네트워크 탭으로 요청/응답 확인 후 사유 기록
|
||||||
|
|
||||||
|
### 2차 수정 (UI 정렬/크기)
|
||||||
|
- 무엇을: 테이블을 화면 가득이 아닌 가운데 정렬하고, 내용 크기에 맞춰 축소되도록 스타일 조정
|
||||||
|
- 왜: 가독성 향상 및 과도한 공백 제거 요청 반영
|
||||||
|
- 어떻게:
|
||||||
|
- `src/views/Agent/Creators.vue`에서 `<v-row justify="center">`, `<v-col cols="12" sm="10" md="8" lg="6">`로 컨테이너 폭 제한
|
||||||
|
- `v-data-table`에 `shrink-table` 클래스 적용하여 `display: inline-table; width: auto;`로 내용 기반 너비 설정
|
||||||
|
- 검증: 브라우저에서 페이지 진입 후 테이블이 가운데 정렬되고 좌우로 과도하게 늘어나지 않는지 확인 (성공/실패)
|
||||||
|
|
||||||
|
### 3차 수정 (데이터 미표시 해결 + v-pagination 적용)
|
||||||
|
- 무엇을: API 응답 파싱 보강으로 목록 데이터 미표시 이슈 해결, `v-pagination` 기반 페이징 적용
|
||||||
|
- 왜: 일부 API가 `{ success, data }` 래핑 형태로 응답하여 기존 파싱 로직에서 `items`가 세팅되지 않던 문제 해결 및 요구사항에 따른 커스텀 페이징 적용
|
||||||
|
- 어떻게:
|
||||||
|
- `src/views/Agent/Creators.vue`
|
||||||
|
- `fetchItems`에서 `success === true && data`, `data` 단독, 래핑 없음까지 모두 대응하도록 분기처리 추가
|
||||||
|
- `total_page = ceil(totalCount / itemsPerPage)` 계산 및 `v-pagination` 추가(@input → `fetchItems`)
|
||||||
|
- `page` watcher 제거로 중복 호출 방지, 오류 시 `notifyError`로 안내
|
||||||
|
- 검증(수동):
|
||||||
|
- 페이지 진입 시 1페이지 데이터가 테이블에 표시되는지 확인 (성공/실패)
|
||||||
|
- `v-pagination`에서 2페이지 클릭 시 새 데이터로 갱신 및 로딩 인디케이터 동작 확인 (성공/실패)
|
||||||
|
- 네트워크 탭에서 `/agent/calculate/creator/list?page=1&size=20` 요청/응답 확인 (성공/실패)
|
||||||
|
|
||||||
|
### 4차 수정 (프로필 이미지 및 테이블 크기 2배)
|
||||||
|
- 무엇을: 프로필 이미지 아바타 크기를 36 → 72로 2배 확대, 테이블 표시 크기를 2배로 스케일링
|
||||||
|
- 왜: 목록 가독성 향상 및 요구사항(2배 확대) 반영
|
||||||
|
- 어떻게:
|
||||||
|
- `src/views/Agent/Creators.vue`
|
||||||
|
- `<v-avatar size="72">`로 변경
|
||||||
|
- `.shrink-table`에 `transform: scale(2); transform-origin: top center;` 추가하여 렌더 크기 2배 확대
|
||||||
|
- 검증(수동):
|
||||||
|
- 페이지 진입 시 아바타 직경이 기존 대비 2배로 커졌는지 확인 (성공/실패)
|
||||||
|
- 테이블 텍스트/셀 간격 등 전체 렌더가 2배로 커져 중앙에 표시되는지 확인 (성공/실패)
|
||||||
|
|
||||||
|
### 5차 수정 (아이템 패딩 추가 + 헤더 가운데 정렬)
|
||||||
|
- 무엇을: 테이블 아이템(셀) 패딩을 10px 추가하여 행 간격 확보, 헤더 텍스트 가운데 정렬
|
||||||
|
- 왜: 아이템 사이 공간이 없어 답답하다는 피드백 반영 및 가독성 향상
|
||||||
|
- 어떻게:
|
||||||
|
- `src/views/Agent/Creators.vue`
|
||||||
|
- headers `align: 'center'`로 업데이트(프로필/닉네임)
|
||||||
|
- `.shrink-table ::v-deep .v-data-table__wrapper table tbody tr > td { padding: 10px; }` 추가
|
||||||
|
- 보조로 `.shrink-table ::v-deep thead th { text-align: center !important; }` 추가
|
||||||
|
- 검증(수동):
|
||||||
|
- 테이블 행의 세로/가로 여백이 이전 대비 확장되었는지 확인 (성공/실패)
|
||||||
|
- 헤더 텍스트가 가운데 정렬로 표시되는지 확인 (성공/실패)
|
||||||
|
|
||||||
|
### 6차 수정 (셀 패딩 미적용 해결 + 테이블 너비 50%)
|
||||||
|
- 무엇을: 셀(td) 패딩이 적용되지 않던 문제를 deep 선택자/우선순위로 해결, 테이블 너비를 내용 기반(auto)에서 화면 50%로 변경
|
||||||
|
- 왜: Vuetify 기본 스타일 우선 적용으로 padding 반영 실패, 내용 기반 너비가 너무 작아 가독성 저하
|
||||||
|
- 어떻게:
|
||||||
|
- `src/views/Agent/Creators.vue`
|
||||||
|
- `.shrink-table ::v-deep .v-data-table__wrapper > table > tbody > tr > td { padding: 10px !important; }`로 선택자 보강 및 `!important` 적용
|
||||||
|
- `.shrink-table { display: block; width: 50vw; }`로 변경하여 중앙 정렬 상태에서 화면의 50% 너비 유지
|
||||||
|
- 기존 `transform: scale(2)`는 제거하여 너비 계산 왜곡 방지(아바타 72px 확대는 유지)
|
||||||
|
- 검증(수동):
|
||||||
|
- 각 셀에 10px 패딩이 실제로 적용되는지 확인(개발자 도구로 td 컴퓨티드 스타일 확인) (성공/실패)
|
||||||
|
- 브라우저 폭 기준 테이블이 약 50% 너비를 차지하고 중앙에 정렬되는지 확인 (성공/실패)
|
||||||
|
- 창 크기를 조절해도 50% 비율이 유지되는지 확인 (성공/실패)
|
||||||
25
docs/20260413_에이전트용메뉴추가.md
Normal file
25
docs/20260413_에이전트용메뉴추가.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# 에이전트용 메뉴 추가 (기본 메뉴 생성)
|
||||||
|
|
||||||
|
- [x] SideMenu에서 getMenus 결과가 빈 배열일 때 기본 메뉴로 대체한다.
|
||||||
|
- [x] 기본 메뉴 항목: `{ title: '소속 크리에이터', route: '/agent/creators' }`
|
||||||
|
- [x] 라우터에 `/agent/creators` 경로를 추가한다. (DefaultLayout 하위)
|
||||||
|
- [x] 페이지 컴포넌트를 생성한다. (`src/views/Agent/Creators.vue`), 내용은 placeholder로 둔다.
|
||||||
|
|
||||||
|
## 배경/의도
|
||||||
|
- 에이전트용 메뉴가 아직 백엔드에 없어서 메뉴 조회 시 빈 배열이 내려올 가능성이 높다.
|
||||||
|
- 빈 배열일 때는 로그아웃 처리 대신 기본 단독 메뉴 ‘소속 크리에이터’를 제공해 접근할 수 있도록 한다.
|
||||||
|
|
||||||
|
## 구현 체크리스트
|
||||||
|
- [x] `SideMenu.vue`의 `getMenus()`에서 성공(200/success)이고 `data.length === 0`이면 기본 메뉴로 할당
|
||||||
|
- [x] 기존처럼 성공 + 데이터 존재 시에는 응답 데이터를 그대로 사용
|
||||||
|
- [x] 라우터 `index.js`에 `/agent/creators` children route 추가
|
||||||
|
- [x] `src/views/Agent/Creators.vue` 생성 및 라우터 연동
|
||||||
|
|
||||||
|
## 검증 기록
|
||||||
|
### 1차 구현
|
||||||
|
- 무엇을: 빈 메뉴 응답 시 기본 메뉴 노출 및 라우팅 동작 확인
|
||||||
|
- 왜: 에이전트용 메뉴가 없어도 최소 탐색 경로를 제공하기 위함
|
||||||
|
- 어떻게:
|
||||||
|
- 가정: API 응답이 `{ success: true, data: [] }`
|
||||||
|
- 기대: 사이드 메뉴에 ‘소속 크리에이터’ 단일 항목 표시, 클릭 시 `/agent/creators`로 이동하여 placeholder 화면 노출
|
||||||
|
- 결과: 로컬에서 메뉴가 빈 배열일 때 사이드 메뉴에 ‘소속 크리에이터’가 표시되고 클릭 시 `/agent/creators`로 이동하여 placeholder 화면이 노출됨을 확인함(수동 확인)
|
||||||
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 응답 시 데이터 표시 예상(수동 점검 예정)
|
||||||
|
|
||||||
|
## 정정
|
||||||
|
- 현재 없음. 추후 백엔드 스펙 변경 시 쿼리/필드명 반영 예정.
|
||||||
29
docs/20260413_정산메뉴에이전트전용분리.md
Normal file
29
docs/20260413_정산메뉴에이전트전용분리.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# 정산 메뉴 에이전트 전용 분리 계획
|
||||||
|
|
||||||
|
## 배경/목표
|
||||||
|
- 기존 `/calculate/*` 경로는 크리에이터 전용 라우트/페이지다.
|
||||||
|
- 빈 메뉴일 때 기본으로 추가한 정산 메뉴 5종은 에이전트 전용으로 분리되어야 한다.
|
||||||
|
- 에이전트 전용 라우트를 `/agent/calculate/*` 네임스페이스로 제공하고, 페이지는 추후 구현을 위해 플레이스홀더로 생성한다.
|
||||||
|
|
||||||
|
## 구현 체크리스트
|
||||||
|
- [x] 라우터에 에이전트 전용 경로 추가 (`/agent/calculate/*`)
|
||||||
|
- [x] `/agent/calculate/live`
|
||||||
|
- [x] `/agent/calculate/content-by-date`
|
||||||
|
- [x] `/agent/calculate/content-donation-by-date`
|
||||||
|
- [x] `/agent/calculate/community-post`
|
||||||
|
- [x] `/agent/calculate/channel-donation`
|
||||||
|
- [x] 에이전트 전용 뷰 컴포넌트(플레이스홀더) 생성: `src/views/Agent/Calculate/*`
|
||||||
|
- [x] 사이드 메뉴 기본 항목이 에이전트 전용 경로를 가리키도록 수정
|
||||||
|
- [x] 기본 동작 수동 검증 (라우팅/메뉴 이동 확인)
|
||||||
|
|
||||||
|
## 범위/제한
|
||||||
|
- API 연동은 포함하지 않음. 화면은 "추후 구현" 플레이스홀더로 둔다.
|
||||||
|
- 기존 크리에이터 전용 라우트/화면은 변경하지 않는다.
|
||||||
|
|
||||||
|
## 검증 기록
|
||||||
|
### 1차 구현
|
||||||
|
- 무엇을: 에이전트 전용 라우트 5종 추가 및 사이드 메뉴 경로 교체, 플레이스홀더 화면 생성
|
||||||
|
- 왜: 크리에이터 전용 경로와 구분하여 접근/권한/콘텍스트 분리를 명확히 하기 위함
|
||||||
|
- 어떻게:
|
||||||
|
- 라우팅 수동 점검: 각 메뉴 클릭 시 `/agent/calculate/*` 로 이동되는지 확인
|
||||||
|
- 결과: 성공(플레이스홀더 화면 타이틀 확인)
|
||||||
53
src/api/agent_calculate.js
Normal file
53
src/api/agent_calculate.js
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
// 에이전트 전용 정산 API
|
||||||
|
|
||||||
|
async function getAgentAssignedCreatorList(page, size) {
|
||||||
|
return Vue.axios.get(
|
||||||
|
'/agent/calculate/creator/list?page=' + (page - 1) + '&size=' + size
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 {
|
||||||
|
getAgentAssignedCreatorList,
|
||||||
|
getLiveByCreator,
|
||||||
|
getContentByCreator,
|
||||||
|
getContentDonationByCreator,
|
||||||
|
getCommunityByCreator,
|
||||||
|
getChannelDonationByCreator
|
||||||
|
}
|
||||||
@@ -92,8 +92,21 @@ export default {
|
|||||||
this.isLoading = true
|
this.isLoading = true
|
||||||
try {
|
try {
|
||||||
let res = await api.getMenus();
|
let res = await api.getMenus();
|
||||||
if (res.status === 200 && res.data.success === true && res.data.data.length > 0) {
|
if (res.status === 200 && res.data.success === true) {
|
||||||
this.items = res.data.data
|
if (res.data.data && res.data.data.length > 0) {
|
||||||
|
this.items = res.data.data
|
||||||
|
} else {
|
||||||
|
// 빈 메뉴일 경우 기본 단독 메뉴를 제공한다.
|
||||||
|
// 요구사항: 정산 관련 기본 메뉴를 추가한다.
|
||||||
|
this.items = [
|
||||||
|
{ title: '소속 크리에이터', route: '/agent/creators' },
|
||||||
|
{ title: '크리에이터별 라이브 정산', route: '/agent/calculate/live' },
|
||||||
|
{ title: '크리에이터별 콘텐츠 정산', route: '/agent/calculate/content-by-date' },
|
||||||
|
{ title: '크리에이터별 콘텐츠 후원 정산', route: '/agent/calculate/content-donation-by-date' },
|
||||||
|
{ title: '크리에이터별 커뮤니티 정산', route: '/agent/calculate/community-post' },
|
||||||
|
{ title: '크리에이터별 채널 후원 정산', route: '/agent/calculate/channel-donation' },
|
||||||
|
]
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
|
this.notifyError("알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!")
|
||||||
this.logoutWithoutNetwork();
|
this.logoutWithoutNetwork();
|
||||||
|
|||||||
@@ -20,6 +20,37 @@ const routes = [
|
|||||||
name: 'ContentList',
|
name: 'ContentList',
|
||||||
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentList.vue')
|
component: () => import(/* webpackChunkName: "content" */ '../views/Content/ContentList.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/agent/creators',
|
||||||
|
name: 'AgentCreators',
|
||||||
|
component: () => import(/* webpackChunkName: "agent" */ '../views/Agent/Creators.vue')
|
||||||
|
},
|
||||||
|
// Agent-only calculate routes (placeholders)
|
||||||
|
{
|
||||||
|
path: '/agent/calculate/live',
|
||||||
|
name: 'AgentCalculateLive',
|
||||||
|
component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateLive.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/agent/calculate/content-by-date',
|
||||||
|
name: 'AgentCalculateContent',
|
||||||
|
component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateContent.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/agent/calculate/content-donation-by-date',
|
||||||
|
name: 'AgentCalculateContentDonation',
|
||||||
|
component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateContentDonation.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/agent/calculate/community-post',
|
||||||
|
name: 'AgentCalculateCommunityPost',
|
||||||
|
component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateCommunityPost.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/agent/calculate/channel-donation',
|
||||||
|
name: 'AgentCalculateChannelDonation',
|
||||||
|
component: () => import(/* webpackChunkName: "agent-calc" */ '../views/Agent/Calculate/AgentCalculateChannelDonation.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/content/category/list',
|
path: '/content/category/list',
|
||||||
name: 'ContentCategoryList',
|
name: 'ContentCategoryList',
|
||||||
|
|||||||
243
src/views/Agent/Calculate/AgentCalculateChannelDonation.vue
Normal file
243
src/views/Agent/Calculate/AgentCalculateChannelDonation.vue
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/agent_calculate';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
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>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
243
src/views/Agent/Calculate/AgentCalculateCommunityPost.vue
Normal file
243
src/views/Agent/Calculate/AgentCalculateCommunityPost.vue
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/agent_calculate';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
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>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
243
src/views/Agent/Calculate/AgentCalculateContent.vue
Normal file
243
src/views/Agent/Calculate/AgentCalculateContent.vue
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/agent_calculate';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
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>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
243
src/views/Agent/Calculate/AgentCalculateContentDonation.vue
Normal file
243
src/views/Agent/Calculate/AgentCalculateContentDonation.vue
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/agent_calculate';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
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>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
243
src/views/Agent/Calculate/AgentCalculateLive.vue
Normal file
243
src/views/Agent/Calculate/AgentCalculateLive.vue
Normal file
@@ -0,0 +1,243 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/agent_calculate';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
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>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
</style>
|
||||||
171
src/views/Agent/Creators.vue
Normal file
171
src/views/Agent/Creators.vue
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<v-toolbar dark>
|
||||||
|
<v-spacer />
|
||||||
|
<v-toolbar-title>소속 크리에이터</v-toolbar-title>
|
||||||
|
<v-spacer />
|
||||||
|
</v-toolbar>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-container>
|
||||||
|
<v-row justify="center">
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
sm="10"
|
||||||
|
md="8"
|
||||||
|
lg="6"
|
||||||
|
>
|
||||||
|
<div class="table-center">
|
||||||
|
<v-data-table
|
||||||
|
:headers="headers"
|
||||||
|
:items="items"
|
||||||
|
:loading="is_loading"
|
||||||
|
:items-per-page="-1"
|
||||||
|
class="elevation-1 shrink-table"
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<template v-slot:item.profileImageUrl="{ item }">
|
||||||
|
<v-avatar size="72">
|
||||||
|
<v-img
|
||||||
|
:src="item.profileImageUrl"
|
||||||
|
alt="profile"
|
||||||
|
/>
|
||||||
|
</v-avatar>
|
||||||
|
</template>
|
||||||
|
</v-data-table>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
|
<!-- 커스텀 페이지네이션 -->
|
||||||
|
<v-row
|
||||||
|
class="text-center"
|
||||||
|
justify="center"
|
||||||
|
>
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
sm="10"
|
||||||
|
md="8"
|
||||||
|
lg="6"
|
||||||
|
>
|
||||||
|
<v-pagination
|
||||||
|
v-model="page"
|
||||||
|
:length="total_page"
|
||||||
|
circle
|
||||||
|
@input="onPage"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as api from '@/api/agent_calculate';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AgentCreators',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
headers: [
|
||||||
|
{ text: '프로필', value: 'profileImageUrl', align: 'center', sortable: false },
|
||||||
|
{ text: '닉네임', value: 'creatorNickname', align: 'center' }
|
||||||
|
],
|
||||||
|
items: [],
|
||||||
|
totalCount: 0,
|
||||||
|
page: 1,
|
||||||
|
itemsPerPage: 20,
|
||||||
|
total_page: 1,
|
||||||
|
is_loading: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
itemsPerPage() {
|
||||||
|
// 페이지 크기 변경 시 첫 페이지부터 다시 조회
|
||||||
|
this.page = 1;
|
||||||
|
this.fetchItems();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.fetchItems();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
notifyError(message) {
|
||||||
|
// 전역 dialog 플러그인이 없다면 콘솔로 폴백
|
||||||
|
if (this.$dialog && this.$dialog.notify && this.$dialog.notify.error) {
|
||||||
|
this.$dialog.notify.error(message)
|
||||||
|
} else {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.error(message)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async onPage() {
|
||||||
|
await this.fetchItems();
|
||||||
|
},
|
||||||
|
async fetchItems() {
|
||||||
|
try {
|
||||||
|
this.is_loading = true;
|
||||||
|
const res = await api.getAgentAssignedCreatorList(this.page, this.itemsPerPage);
|
||||||
|
// 성공 응답이 { success: true, data: {...} } 혹은 { data: {...} } 형태 모두 대응
|
||||||
|
let payload = null;
|
||||||
|
if (res && res.status === 200) {
|
||||||
|
if (res.data && res.data.success === true && res.data.data) {
|
||||||
|
payload = res.data.data;
|
||||||
|
} else if (res.data && res.data.data) {
|
||||||
|
payload = res.data.data;
|
||||||
|
} else if (res.data && (res.data.items || res.data.totalCount !== undefined)) {
|
||||||
|
// wrapping 없이 바로 내려오는 경우
|
||||||
|
payload = res.data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!payload) {
|
||||||
|
this.notifyError(res?.data?.message || '목록을 불러오지 못했습니다. 다시 시도해 주세요.');
|
||||||
|
this.items = [];
|
||||||
|
this.totalCount = 0;
|
||||||
|
this.total_page = 1;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.totalCount = Number(payload.totalCount || 0);
|
||||||
|
this.items = Array.isArray(payload.items) ? payload.items : [];
|
||||||
|
const totalPage = Math.ceil(this.totalCount / this.itemsPerPage);
|
||||||
|
this.total_page = totalPage > 0 ? totalPage : 1;
|
||||||
|
} catch (e) {
|
||||||
|
// 최소한의 에러 로깅
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.error('[AgentCreators] 목록 조회 실패', e);
|
||||||
|
this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.');
|
||||||
|
} finally {
|
||||||
|
this.is_loading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 테이블을 화면 가운데 정렬하고, 내용 너비에 맞춰 축소 표시 */
|
||||||
|
.table-center {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shrink-table {
|
||||||
|
display: block;
|
||||||
|
/* 화면의 50% 너비로 고정 표시 */
|
||||||
|
width: 50vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 아이템(셀) 패딩 추가로 행 간격/여백 확보 (Vuetify 기본값보다 우선 적용) */
|
||||||
|
.shrink-table ::v-deep .v-data-table__wrapper > table > tbody > tr > td {
|
||||||
|
padding: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 헤더 텍스트 가운데 정렬 (헤더 align 설정 보조) */
|
||||||
|
.shrink-table ::v-deep thead th {
|
||||||
|
text-align: center !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user