vue-ptc/src/pages/gift-card/index.vue

<template>
  <div class="p-gift-card">
    <div>
      <h3 class="ptc-title bg-gray">My gift card</h3>
      <div class="tabs border-bottom">
        <div class="tab" :class="{ active: type === 0 }" @click="type = 0">
          <span>NOT USED</span>
          <span class="num">{{ stat.unused }}</span>
        </div>
        <div class="tab" :class="{ active: type === 1 }" @click="type = 1">
          <span>USED</span>
          <span class="num">{{ stat.used }}</span>
        </div>
        <div class="tab" :class="{ active: type === 2 }" @click="type = 2">
          <span>EXPIRED</span>
          <span class="num">{{ stat.expired }}</span>
        </div>
      </div>
    </div>
    <div :class="{ 'ptc-loading': loading }">
      <div class="card-list-wrap">
        <div v-if="!list.length" class="ptc-empty">
          <i class="ptc-empty-img"></i>
          <p class="ptc-empty-txt">No gift card yet</p>
        </div>
        <div v-else class="card-list">
          <div
            v-for="(item, index) of list"
            :key="index"
            class="card"
            :class="{
              'card-a': item.status == 0 && !item.gift_card_threshold,
              'card-b': item.status == 0 && item.gift_card_threshold,
              'card-c': item.status == 1 && !item.gift_card_threshold,
              'card-d': item.status == 1 && item.gift_card_threshold,
              'card-e': item.status == 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 }}
              <span v-if="item.gift_card_threshold" class="sub"
                >{{ item.gift_card_threshold }} available</span
              >
            </p>
            <p class="card-desc">PTC offline store use</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { getGiftCardList } from '@/service/order'

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: {},
      loading: false,
    }
  },
  watch: {
    async type(val) {
      this.loading = true
      try {
        const { results } = await getGiftCardList(val)
        this.list = results.items
      } catch {}
      this.loading = false
    },
  },
})
</script>

<style lang="scss">
.p-gift-card {
  .fixed {
    position: fixed;
    top: var(--nav-bar-height);
    left: 0;
    right: 0;
  }
  .tabs {
    display: flex;
    @include media-breakpoint-down(md) {
      justify-content: space-around;
    }
    line-height: 104px;
    background: #fff;
  }
  .tab {
    position: relative;
    font-size: 32px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    @include media-breakpoint-up(md) {
      margin-left: 140px;
    }
    &.active {
      font-weight: bold;
      color: $primary-color;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 92px;
        height: 4px;
        background: #193059;
        border-radius: 2px;
      }
    }
    .num {
      position: absolute;
      top: 22px;
      right: -4px;
      transform: translateX(100%);
      font-size: 24px;
      line-height: 1;
    }
  }

  .card-list-wrap {
    padding: 50px 34px 0;
    background: #fff;
    @include media-breakpoint-up(md) {
      height: 1000px;
      overflow: auto;
    }
  }
  .card-list {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    @include media-breakpoint-up(md) {
      width: 680px * 2 + 52px;
    }
  }
  .card {
    margin-bottom: 48px;
    // width: 680px;
    width: 100%;
    height: 296px;
    text-align: center;
    font-weight: bold;
    background-size: 100% 100%;
    line-height: 1;
    overflow: hidden;
    @include media-breakpoint-up(md) {
      width: 680px;
    }

    &-title {
      margin: 32px 0 16px;
      font-size: 32px;
    }
    &-period,
    &-desc {
      font-size: 28px;
    }
    &-value {
      margin: 40px 0 32px;
      font-size: 56px;
      .sub {
        font-size: 40px;
      }
    }

    &-a {
      background-image: url(@img/coupon0.png);
      .card-title,
      .card-value {
        color: $primary-color;
      }
      .card-period,
      .card-desc {
        color: #9aa8c5;
      }
    }
    &-b {
      background-image: url(@img/coupon1.png);
      .card-title,
      .card-value {
        color: #cb2927;
      }
      .card-period,
      .card-desc {
        color: #f8a7a6;
      }
    }
    &-c {
      background-image: url(@img/coupon2.png);
      color: #9aa8c5;
    }
    &-d {
      background-image: url(@img/coupon3.png);
      color: #f8a7a6;
    }
    &-e {
      background-image: url(@img/coupon4.png);
      color: #999;
    }
  }
}
</style>