123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <template>
- <div v-if="action === 'bind'" class="p-imei">
- <h3 class="ptc-title">
- You have a {{ state.currentOrder.product_name }} version of membership
- service to be bound
- </h3>
- <div class="ptc-wrapper">
- <div class="ptc-block">
- <div class="ptc-inner">
- <p class="label">IMEI</p>
- <p class="control">
- <input
- v-model="imei"
- class="ptc-input"
- placeholder="please enter"
- />
- </p>
- <p class="tip">
- <span class="pointer" @click="$router.push('view')"
- >How to view IMEI?</span
- >
- </p>
- </div>
- </div>
- <div class="ptc-button-group">
- <div class="ptc-inner">
- <button class="ptc-button" :loading="loading" @click="applyBind">
- BIND IMEI
- </button>
- </div>
- </div>
- </div>
- </div>
- <div v-else class="p-imei">
- <h3 class="ptc-title">What is an IMEI number?</h3>
- <div class="ptc-wrapper">
- <div class="ptc-block">
- <div class="guide ptc-inner">
- <p class="guide-txt">
- The IMEI and series number are between 10 - 20 serial character
- unique to each and every phone.
- </p>
- <p class="guide-txt bold">
- You’ll usually find it printed on the back of your phone or on the
- SIM tray.
- </p>
- <img class="guide-img" src="@img/imei-1.jpg" />
- <img class="guide-img" src="@img/imei-2.jpg" />
- <p class="guide-txt">
- Alternatively you can have your mobile display its IMEI number by
- typing the following on the keypad: <strong>*#06#</strong>
- </p>
- <img class="guide-img" src="@img/imei-3.jpg" />
- <p class="guide-txt">
- *If your handset display character and symbol please enter character
- only. *
- </p>
- </div>
- </div>
- <div class="ptc-button-group">
- <div class="ptc-inner">
- <button class="ptc-button" @click="$router.back()">BACK</button>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script lang="ts">
- import { defineComponent } from 'vue'
- import { getCurrentOrder } from '@/store'
- export default defineComponent({
- name: 'IMEI',
- async beforeRouteEnter(to) {
- await getCurrentOrder(to.query.id as string)
- },
- })
- </script>
- <script setup lang="ts">
- import { ref } from 'vue'
- import { useRoute, useRouter } from 'vue-router'
- import { bindIMEI } from '@/service/order'
- import { state, getUserInfo } from '@/store'
- import Toast from '@/components/toast'
- defineProps<{ action: 'bind' | 'view' }>()
- const router = useRouter()
- const imei = ref('')
- const loading = ref(false)
- const { id } = useRoute().query as any
- const fromPath = history.state.back || '/'
- async function applyBind() {
- if (!imei.value) return Toast('Please enter IMEI')
- loading.value = true
- try {
- const { message } = await bindIMEI({ id, imei: imei.value })
- Toast(message)
- getUserInfo()
- state.currentOrder.id = -1
- const matched = fromPath.match(/order\/(\d+)/)
- matched?.[1] === id ? router.back() : router.push(`/order/${id}`)
- } catch {}
- loading.value = false
- }
- </script>
- <style lang="scss">
- .p-imei {
- .label {
- font-size: 32px;
- color: #999;
- }
- .control {
- margin: 48px 0;
- }
- .tip {
- font-size: 32px;
- color: $primary-color;
- }
- .guide {
- &-txt {
- margin-top: 40px;
- line-height: 44px;
- font-size: 32px;
- color: #333;
- }
- &-img {
- display: block;
- margin-top: 40px;
- height: 328px;
- background: #eee;
- }
- }
- }
- </style>
|