pay-result

src/pages/pay-result/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="p-pay-result">
+    <div v-if="status === 'success'" class="pay-success">
+      <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">xxxxx</span>
+        </p>
+        <p class="info-item">
+          <span class="info-label">Duration: </span>
+          <span class="info-value">xxxxx</span>
+        </p>
+        <p class="info-item">
+          <span class="info-label">Phone brand: </span>
+          <span class="info-value">xxxxx</span>
+        </p>
+        <p class="info-item">
+          <span class="info-label">Phone model: </span>
+          <span class="info-value">xxxxx</span>
+        </p>
+      </div>
+      <div class="button-group">
+        <button class="ptc-button" @click="$router.push('/imei/bind')">
+          BIND IMEI
+        </button>
+        <button class="ptc-button ptc-button--stroke">CHECK ORDER</button>
+        <button class="ptc-button ptc-button--stroke">HOMEPAGE</button>
+      </div>
+    </div>
+
+    <div v-else class="pay-fail">
+      <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 setup lang="ts">
+defineProps<{ status: 'success' | 'fail' }>()
+</script>
+
+<style lang="scss">
+.p-pay-result {
+  padding-left: 76px;
+  padding-right: 76px;
+  .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:nth-child(2) {
+    margin: 36px 0 64px;
+  }
+}
+</style>

src/router.ts

@@ -24,5 +24,10 @@ export default createRouter({
       path: '/fill-order',
       component: () => import('./pages/fill-order/index.vue'),
     },
+    {
+      path: '/pay-result/:status',
+      component: () => import('./pages/pay-result/index.vue'),
+      props: true,
+    },
   ],
 })

src/style/components.scss

@@ -15,6 +15,9 @@
     background: none;
     border: 2Px solid $primary-color;
     color: $primary-color;
+    &:active {
+      background: #f2f5fb;
+    }
   }
 }