src/api/signature.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 
-async function getSignatureList(page) {
+async function getSignatureList(page, sort) {
-    return Vue.axios.get('/admin/live/signature-can?page=' + (page - 1) + "&size=20");
+    return Vue.axios.get('/admin/live/signature-can?page=' + (page - 1) + "&size=20" + "&sort-type=" + sort);
 }
 
 async function createSignature(formData) {

src/views/Calculate/CalculateCommunityPost.vue

@@ -138,6 +138,12 @@ export default {
           align: 'center',
           width: "300px"
         },
+        {
+          text: '판매금액(캔)',
+          align: 'center',
+          sortable: false,
+          value: 'can',
+        },
         {
           text: '구매유저수',
           align: 'center',

src/views/Can/CanSignature.vue

@@ -23,6 +23,57 @@
           </v-btn>
         </v-col>
       </v-row>
+      <v-row class="row-sort">
+        <v-col>
+          <input
+            id="sort-newest"
+            v-model="sort_type"
+            type="radio"
+            value="NEWEST"
+            class="radio-sort"
+            @change="changeSortType"
+          >
+          <label
+            for="sort-newest"
+            class="radio-label-sort"
+          >
+            최신순
+          </label>
+        </v-col>
+        <v-col>
+          <input
+            id="sort-can-high"
+            v-model="sort_type"
+            type="radio"
+            value="CAN_HIGH"
+            class="radio-sort"
+            @change="changeSortType"
+          >
+          <label
+            for="sort-can-high"
+            class="radio-label-sort"
+          >
+            높은캔순
+          </label>
+        </v-col>
+        <v-col>
+          <input
+            id="sort-can-low"
+            v-model="sort_type"
+            type="radio"
+            value="CAN_LOW"
+            class="radio-sort"
+            @change="changeSortType"
+          >
+          <label
+            for="sort-can-low"
+            class="radio-label-sort"
+          >
+            낮은캔순
+          </label>
+        </v-col>
+        <v-col cols="10" />
+      </v-row>
       <v-row>
         <v-col>
           <v-data-table
@@ -374,6 +425,7 @@ export default {
       creator_id: null,
       is_active: null,
       selected_signature_can: {},
+      sort_type: 'NEWEST',
 
       headers: [
         {
@@ -490,11 +542,15 @@ export default {
       this.selected_signature_can = {}
     },
 
+    async changeSortType() {
+      await this.getSignatureList();
+    },
+
     async getSignatureList() {
       this.isLoading = true
 
       try {
-        let res = await api.getSignatureList(this.page);
+        let res = await api.getSignatureList(this.page, this.sort_type);
 
         if (res.status === 200 && res.data.success === true) {
           const data = res.data.data
@@ -680,4 +736,22 @@ export default {
   display: block;
   margin: 0 auto;
 }
+
+.row-sort {
+  margin-top: 40px;
+}
+
+.radio-sort {
+  display: none;
+}
+
+.radio-label-sort {
+  font-weight: normal;
+  color: black;
+}
+
+.radio-sort:checked + .radio-label-sort {
+  font-weight: bold;
+  color: #3bb9f1;
+}
 </style>