123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- <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>
|