vue-ptc/src/pages/imei/index.vue

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