123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- <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">View mobile IMEI</h3>
- <div class="ptc-block">
- <div class="guide ptc-inner">
- <div class="guide-txt">
- View on iPhone: Turn on the phone and click Settings-General-About
- this machine to check the IMEI number。
- </div>
- <div class="guide-img"></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 {
- line-height: 44px;
- font-size: 32px;
- color: #333;
- }
- &-img {
- display: block;
- margin-top: 38px;
- height: 328px;
- background: #eee;
- }
- }
- }
- </style>
|