vue-ptc/src/pages/my-order/index.vue

<template>
  <div class="p-my-order">
    <h3 class="ptc-title">My Order</h3>
    <div
      v-for="item of list"
      :key="item.id"
      class="ptc-block wrapper"
      :class="{ pb24: item.status !== 1 }"
    >
      <div
        class="pointer"
        @click="item.status === 1 && $router.push(`/order/${item.id}`)"
      >
        <div class="cell-group border-bottom">
          <div class="cell">
            <span class="cell__label">Order Status</span>
            <span class="cell__value">
              <span
                class="ptc-tag"
                :class="{
                  'not-paid': item.status === 0,
                  paid: item.status === 1,
                  canceled: item.stauts > 1,
                }"
                >{{
                  item.status === 0
                    ? 'Not Paid'
                    : item.status === 1
                    ? 'Paid'
                    : 'Canceled'
                }}</span
              >
            </span>
          </div>
          <div class="cell">
            <span class="cell__label">Order Number</span>
            <span class="cell__value">{{ item.contract_no }}</span>
          </div>
          <div class="cell">
            <span class="cell__label">Order Time</span>
            <span class="cell__value">{{ item.created_at }}</span>
          </div>
          <div class="cell">
            <span class="cell__label">Phone brand</span>
            <span class="cell__value">{{ item.phone_info }}</span>
          </div>
          <div class="cell">
            <span class="cell__label">Version</span>
            <span class="cell__value"
              >{{ item.product_name }}({{ item.end_time }} Expires)</span
            >
          </div>
        </div>
        <div class="cell-group cell-group--compact">
          <template v-if="item.status < 2">
            <div class="cell">
              <span class="cell__label">Activation fee</span>
              <span class="cell__value">${{ item.payment_open }}</span>
            </div>
            <div class="cell">
              <span class="cell__label">Membership fee</span>
              <span class="cell__value">${{ item.payment_product }}</span>
            </div>
            <div class="cell">
              <span class="cell__label">Discount</span>
              <span class="cell__value highlight"
                >-${{ item.discount_amount }}</span
              >
            </div>
          </template>
          <div class="cell" :class="{ mt48: 1 }">
            <span class="cell__label">Cost</span>
            <span class="cell__value bold">${{ item.payment_amount }}</span>
          </div>
        </div>
      </div>
      <div v-if="item.status !== 1" class="button-group">
        <template v-if="item.status === 0">
          <button class="ptc-button">Pay 14:40</button>
          <button
            class="ptc-button ptc-button--stroke"
            @click="cancelOrder(item)"
          >
            Cancel
          </button>
        </template>
        <button
          v-else
          class="ptc-button ptc-button--stroke"
          @click="deleteOrder(item)"
        >
          Delete
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import * as api from '@/service/order'

export default defineComponent({
  name: 'OrderList',
  async beforeRouteEnter(to, from, next) {
    const { results } = await api.getOrderList()
    next(vm => (vm.list = results))
  },
  data() {
    return {
      /** @type {any[]} */
      list: [],
    }
  },
  methods: {
    async cancelOrder(item) {
      await api.cancelOrder(item.id)
      item.status = 2
    },

    async deleteOrder(item) {
      await api.deleteOrder(item.id)
      this.list.splice(this.list.indexOf(item), 1)
    },
  },
})
</script>

<style lang="scss">
.p-my-order {
  background: #f7f7f7;

  .pb24 {
    padding-bottom: 24px !important;
  }

  .cell {
    &-group {
      padding: 8px 0 48px;
      &--compact {
        padding: 48px 0 8px;
        .cell + .cell {
          margin-top: 24px;
        }
      }
      @include media-breakpoint-up(md) {
        margin: auto;
        width: 1258px;
        &:first-child {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .cell {
            width: 45%;
            justify-content: flex-start;
            + .cell {
              margin-top: 20px;
            }
            &:nth-child(2) {
              margin-top: 0;
            }
            &__label {
              margin-right: 14px;
              &::after {
                content: ':';
              }
            }
          }
        }
        .ptc-tag {
          margin-left: 0;
        }
      }
    }

    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32px;
    + .cell {
      margin-top: 48px;
    }

    &__label {
      color: #999;
    }
    &__value {
      color: #1a1a1a;
    }
  }

  .ptc-tag {
    &.not-paid {
      background: #dae1ef;
      color: $primary-color;
    }
    &.paid {
      background: #dae1ef;
      color: #a7b0c1;
    }
    &.canceled {
      background: #eaeaea;
      color: #999;
    }
  }

  .button-group {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    margin-top: 24px;
    @include media-breakpoint-up(md) {
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 24px;
      width: 1258px;
    }

    .ptc-button {
      width: 328px;
      height: 92px;
      + .ptc-button {
        margin-right: 26px;
      }
    }
  }

  @include media-breakpoint-up(xl) {
    .wrapper {
      display: flex;
      padding-left: 176px;
    }
    .button-group {
      display: block;
      width: auto;
      margin-left: 90px;
      margin-top: 122px;
      .ptc-button + .ptc-button {
        margin-right: 0;
        margin-top: 24px;
      }
    }
  }
}
</style>