礼品卡

src/pages/gift-card/index.vue

@@ -5,27 +5,38 @@
       <div class="tabs border-bottom">
         <div class="tab" :class="{ active: type === 0 }" @click="type = 0">
           <span>NOT USED</span>
-          <span class="num">13</span>
+          <span class="num">{{ stat.unused }}</span>
         </div>
         <div class="tab" :class="{ active: type === 1 }" @click="type = 1">
           <span>USED</span>
-          <span class="num">1</span>
+          <span class="num">{{ stat.used }}</span>
         </div>
         <div class="tab" :class="{ active: type === 2 }" @click="type = 2">
           <span>EXPIRED</span>
-          <span class="num">1</span>
+          <span class="num">{{ stat.expired }}</span>
         </div>
       </div>
     </div>
     <div class="card-list-wrap">
       <div class="card-list">
-        <div class="card card-a">
-          <p class="card-title">Pull new reward gift card</p>
-          <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
-          <p class="card-value">- $10</p>
+        <div
+          v-for="(item, index) of list"
+          :key="index"
+          class="card"
+          :class="{
+            'card-a': type === 0,
+            'card-c': type === 1,
+            'card-e': type === 2,
+          }"
+        >
+          <p class="card-title">{{ item.title }}</p>
+          <p class="card-period">
+            Validity: {{ item.used_at }}-{{ item.expired_at }}
+          </p>
+          <p class="card-value">- {{ item.gift_card_amount }}</p>
           <p class="card-desc">PTC offline store use</p>
         </div>
-        <div class="card card-b">
+        <!-- <div class="card card-b">
           <p class="card-title">Pull new reward gift card</p>
           <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
           <p class="card-value">- $10 <span class="sub">100 available</span></p>
@@ -48,16 +59,40 @@
           <p class="card-period">Validity: 2020/12/01-2020/05/01</p>
           <p class="card-value">- $10 <span class="sub">100 available</span></p>
           <p class="card-desc">PTC offline store use</p>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
+<script>
+import { defineComponent } from 'vue'
+import { getGiftCardList } from '@/service/order'
 
-const type = ref(0)
+export default defineComponent({
+  async beforeRouteEnter(to, from, next) {
+    const { results } = await getGiftCardList(0)
+    next(vm => {
+      vm.list = results.items
+      vm.stat = results.stat
+    })
+  },
+  data() {
+    return {
+      type: 0,
+      /** @type {any[]} */
+      list: [],
+      /** @type {any} */
+      stat: {},
+    }
+  },
+  watch: {
+    async type(val) {
+      const { results } = await getGiftCardList(val)
+      this.list = results.items
+    },
+  },
+})
 </script>
 
 <style lang="scss">
@@ -113,6 +148,10 @@ const type = ref(0)
   .card-list-wrap {
     padding: 50px 34px 0;
     background: #fff;
+    @include media-breakpoint-up(md) {
+      height: 1000px;
+      overflow: auto;
+    }
   }
   .card-list {
     margin: auto;