Merge pull request '광고 통계 페이지' (#59) from test into main

Reviewed-on: #59

src/api/marketing.js

@@ -12,8 +12,13 @@ async function getMediaPartnerList(page) {
     return Vue.axios.get("/admin/marketing/media-partner?page=" + (page - 1) + "&size=20")
 }
 
+async function getStatistics(page) {
+    return Vue.axios.get("/admin/marketing/statistics?page=" + (page - 1) + "&size=20")
+}
+
 export {
     createMediaPartner,
     updateMediaPartner,
-    getMediaPartnerList
+    getMediaPartnerList,
+    getStatistics
 }

src/router/index.js

@@ -242,7 +242,7 @@ const routes = [
             },
             {
                 path: '/marketing/ad-statistics',
-                name: 'MarketingAdStatistics',
+                name: 'MarketingAdStatisticsView',
                 component: () => import(/* webpackChunkName: "marketing" */ '../views/Marketing/MarketingAdStatisticsView.vue')
             },
         ]

src/views/Marketing/MarketingAdStatisticsView.vue

@@ -7,13 +7,229 @@
     </v-toolbar>
 
     <br>
+
+    <v-container>
+      <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 class="summary">
+                <td colspan="4">
+                  총합계
+                </td>
+                <td>{{ sumField('signUpCount').toLocaleString() }}</td>
+                <td>{{ sumField('firstPaymentCount').toLocaleString() }}</td>
+                <td>{{ sumField('firstPaymentTotalAmount').toLocaleString() }}</td>
+                <td>{{ sumField('repeatPaymentCount').toLocaleString() }}</td>
+                <td>{{ sumField('repeatPaymentTotalAmount').toLocaleString() }}</td>
+                <td>{{ sumField('allPaymentCount').toLocaleString() }}</td>
+                <td>{{ sumField('allPaymentTotalAmount').toLocaleString() }}</td>
+              </tr>
+            </template>
+
+            <template v-slot:item.date="{ item }">
+              {{ item.date }}
+            </template>
+
+            <template v-slot:item.mediaGroup="{ item }">
+              {{ item.mediaGroup }}
+            </template>
+
+            <template v-slot:item.pid="{ item }">
+              {{ item.pid }}
+            </template>
+
+            <template v-slot:item.pidName="{ item }">
+              {{ item.pidName }}
+            </template>
+
+            <template v-slot:item.signUpCount="{ item }">
+              {{ item.signUpCount.toLocaleString() }}
+            </template>
+
+            <template v-slot:item.firstPaymentCount="{ item }">
+              {{ item.firstPaymentCount.toLocaleString() }}
+            </template>
+
+            <template v-slot:item.firstPaymentTotalAmount="{ item }">
+              {{ item.firstPaymentTotalAmount.toLocaleString() }}
+            </template>
+
+            <template v-slot:item.repeatPaymentCount="{ item }">
+              {{ item.repeatPaymentCount.toLocaleString() }}
+            </template>
+
+            <template v-slot:item.repeatPaymentTotalAmount="{ item }">
+              {{ item.repeatPaymentTotalAmount.toLocaleString() }}
+            </template>
+
+            <template v-slot:item.allPaymentCount="{ item }">
+              {{ item.allPaymentCount.toLocaleString() }}
+            </template>
+
+            <template v-slot:item.allPaymentTotalAmount="{ item }">
+              {{ item.allPaymentTotalAmount.toLocaleString() }}
+            </template>
+          </v-data-table>
+        </v-col>
+      </v-row>
+      <v-row class="text-center">
+        <v-col>
+          <v-pagination
+            v-model="page"
+            :length="total_page"
+            circle
+            @input="next"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
 
 <script>
+import * as api from "@/api/marketing";
 
+export default {
+  name: 'MarketingAdStatisticsView',
+
+  data() {
+    return {
+      is_loading: false,
+      page: 1,
+      total_page: 0,
+
+      headers: [
+        {
+          text: '일자',
+          align: 'center',
+          sortable: false,
+          value: 'date',
+        },
+        {
+          text: '매체',
+          align: 'center',
+          sortable: false,
+          value: 'mediaGroup',
+        },
+        {
+          text: 'pid',
+          align: 'center',
+          sortable: false,
+          value: 'pid',
+        },
+        {
+          text: 'pid명',
+          align: 'center',
+          sortable: false,
+          value: 'pidName',
+        },
+        {
+          text: '가입수',
+          align: 'center',
+          sortable: false,
+          value: 'signUpCount',
+        },
+        {
+          text: '첫결제건수',
+          align: 'center',
+          sortable: false,
+          value: 'firstPaymentCount',
+        },
+        {
+          text: '첫결제금액',
+          align: 'center',
+          sortable: false,
+          value: 'firstPaymentTotalAmount',
+        },
+        {
+          text: '재결제건수',
+          align: 'center',
+          sortable: false,
+          value: 'repeatPaymentCount',
+        },
+        {
+          text: '재결제금액',
+          align: 'center',
+          sortable: false,
+          value: 'repeatPaymentTotalAmount',
+        },
+        {
+          text: '총 결제건수',
+          align: 'center',
+          sortable: false,
+          value: 'allPaymentCount',
+        },
+        {
+          text: '총 결제금액',
+          align: 'center',
+          sortable: false,
+          value: 'allPaymentTotalAmount',
+        }
+      ],
+      items: [],
+    }
+  },
+
+  async created() {
+    await this.getStatistics()
+  },
+
+  methods: {
+    notifyError(message) {
+      this.$dialog.notify.error(message)
+    },
+
+    notifySuccess(message) {
+      this.$dialog.notify.success(message)
+    },
+
+    sumField(key) {
+      return this.items.reduce((a, b) => a + (b[key] || 0), 0)
+    },
+
+    async next() {
+      await this.getStatistics()
+    },
+
+    async getStatistics() {
+      this.is_loading = true
+
+      try {
+        const res = await api.getStatistics(this.page);
+
+        if (res.status === 200 && res.data.success === true) {
+          let data = res.data.data
+          this.items = data.items
+
+          const totalPage = Math.ceil(data.totalCount / 20)
+          if (totalPage <= 0)
+            this.total_page = 1
+          else
+            this.total_page = totalPage
+        } else {
+          this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        }
+
+        this.is_loading = false
+      } catch (e) {
+        this.notifyError('알 수 없는 오류가 발생했습니다. 다시 시도해 주세요.')
+        this.is_loading = false
+      }
+    },
+  },
+}
 </script>
 
 <style scoped>
-
+.summary {
+  background-color: #c4dbf1;
+}
 </style>