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

<template>
  <div class="p-pay-result">
    <div
      v-if="$route.params.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
          v-if="!info.phone_imei"
          class="ptc-button"
          @click="$router.push(`/imei/bind?id=${$route.query.id}`)"
        >
          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" @click="toHomePage">
          HOMEPAGE
        </button>
      </div>
    </div>

    <div
      v-else-if="$route.params.status === 'success'"
      class="pay-success ptc-inner"
    >
      <div class="alert">
        <i class="alert-icon icon-success"></i>
        <p class="alert-message">
          Payment Successful And Thank You For Joining PTC Care Plus
        </p>
      </div>
      <div class="button-group">
        <button
          class="ptc-button"
          @click="$router.push(`/imei/bind?id=${$route.query.id}`)"
        >
          BIND IMEI
        </button>
        <button class="ptc-button ptc-button--stroke" @click="toHomePage">
          HOMEPAGE
        </button>
      </div>
      <p class="tip">
        Your Login Details Has Sent To Your Email, Please Login to Bind IMEI and
        Start Enjoy PTC Care Plus
      </p>
    </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" @click="customerService">
          CUSTOMER SERVICE
        </button>
        <button class="ptc-button ptc-button--stroke" @click="toHomePage">
          HOMEPAGE
        </button>
      </div>
    </div>
  </div>
</template>

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

export default defineComponent({
  name: 'PayResult',
  async beforeRouteEnter(to) {
    if (to.params.status === 'success' && state.userInfo) {
      await getCurrentOrder(to.query.id)
    }
  },
  computed: {
    info() {
      return state.currentOrder
    },
    phoneModel() {
      return (this.info.phone_info || '').split(' ').slice(1).join(' ')
    },
  },
  created() {
    state.bgWhite = true
  },
  methods: {
    toHomePage() {
      location.href = '/ptc/'
    },
    customerService() {
      Beacon('open')
    },
  },
})
</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: 64px 0;
    &-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;
  }

  .tip {
    margin: 40px 0 64px;
    line-height: 40px;
    text-align: center;
    font-size: 28px;
    color: #505050;
  }
}
</style>