vue-ptc/src/pages/pay-result/index.vue

<template>
  <div class="p-pay-result">
    <div v-if="status === 'success' && info" class="pay-success ptc-inner">
      <div class="alert">
        <i class="alert-icon icon-success"></i>
        <p class="alert-message">
          Your membership service is successfully purchased
        </p>
      </div>
      <div class="info">
        <p class="info-item">
          <span class="info-label">Version: </span>
          <span class="info-value">{{ info.product_name }}</span>
        </p>
        <p class="info-item">
          <span class="info-label">Duration: </span>
          <span class="info-value"
            >1 year ({{ info.start_time }}-{{ info.end_time }})</span
          >
        </p>
        <p class="info-item">
          <span class="info-label">Phone brand: </span>
          <span class="info-value">{{ info.phone_info.split(' ')[0] }}</span>
        </p>
        <p class="info-item">
          <span class="info-label">Phone model: </span>
          <span class="info-value">{{ phoneModel }}</span>
        </p>
      </div>
      <div class="button-group">
        <button
          class="ptc-button"
          @click="
            $router.push(
              `/imei/bind?id=${$route.query.id}&v=${info.product_name}`
            )
          "
        >
          BIND IMEI
        </button>
        <button
          class="ptc-button ptc-button--stroke"
          @click="$router.push(`/order/${$route.query.id}`)"
        >
          CHECK ORDER
        </button>
        <button class="ptc-button ptc-button--stroke">HOMEPAGE</button>
      </div>
    </div>

    <div v-else class="pay-fail ptc-inner">
      <div class="alert">
        <i class="alert-icon icon-warn"></i>
        <p class="alert-message">Your membership service purchase failed</p>
      </div>
      <p class="reason">Insufficient bank card balance</p>
      <div class="button-group">
        <button class="ptc-button">CUSTOMER SERVICE</button>
        <button class="ptc-button ptc-button--stroke">HOMEPAGE</button>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { state, getCurrentOrder } from '@/store'

export default defineComponent({
  name: 'PayResult',
  props: ['status'], // 'success' | 'fail'
  async beforeRouteEnter(to) {
    await getCurrentOrder(to.query.id)
  },
  computed: {
    info() {
      return state.currentOrder
    },
    phoneModel() {
      return (this.info.phone_info || '').split(' ').slice(1).join(' ')
    },
  },
  created() {
    state.bgWhite = true
  },
})
</script>

<style lang="scss">
.p-pay-result {
  padding-left: 48px;
  padding-right: 48px;
  .icon-success {
    background-image: url(@img/success.png);
  }
  .icon-warn {
    background-image: url(@img/warn.png);
  }
  .alert {
    margin-top: 64px;
    &-icon {
      display: block;
      margin: auto;
      width: 96px;
      height: 96px;
      background-size: 100% 100%;
    }
    &-message {
      margin-top: 32px;
      text-align: center;
      line-height: 56px;
      font-size: 40px;
      font-weight: bold;
      color: #333;
    }
  }

  .info {
    margin: 64px 0;
    &-item {
      display: flex;
      line-height: 64px;
      font-size: 32px;
      color: #333;
    }
    &-label {
      margin-right: 12px;
      color: #999;
    }
  }

  .reason {
    margin: 64px 0;
    text-align: center;
    line-height: 64px;
    font-size: 32px;
    color: #333;
  }

  .ptc-button--stroke {
    margin: 36px 0 64px;
  }
}
</style>