123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- <template>
- <div class="container">
- <div class="ptc-inner">
- <div class="alert">
- <i class="alert-icon"></i>
- <p class="alert-message">{{ formattedTime }}</p>
- </div>
- <!-- <div class="action">
- <i class="icon-calendar"></i><strong>Add to calendar ></strong>
- </div> -->
- <div class="note">
- <ul class="note-list">
- <li class="note-item">
- Thank you for booking your mobile phone repair with us!
- </li>
- <li class="note-item">
- Our booking agent will be contacting you shortly to confirm your
- booking.
- </li>
- </ul>
- </div>
- <div class="detail">
- <div class="cell">
- <span class="cell-label">Store:</span>
- <span class="cell-value">{{ state.detail.shop_name }}</span>
- </div>
- <div class="cell">
- <strong class="primary pointer" @click="navigate">Navigation></strong>
- </div>
- <div class="cell">
- <span class="cell-label">Phone Brand:</span>
- <span class="cell-value">{{ state.detail.phone_brand }}</span>
- </div>
- <div class="cell">
- <span class="cell-label">Phone Model:</span>
- <span class="cell-value">{{ state.detail.phone_model }}</span>
- </div>
- <div class="cell">
- <span class="cell-label">Phone Number:</span>
- <span class="cell-value">{{ state.detail.phone_number }}</span>
- </div>
- <div class="cell">
- <span class="cell-label">IMEI:</span>
- <span class="cell-value">{{ state.detail.phone_imei }}</span>
- </div>
- <div class="cell">
- <span class="cell-label">Service:</span>
- <span class="cell-value">{{ state.detail.fix_name }}</span>
- </div>
- <div class="cell">
- <span class="cell-label">Member Price:</span>
- <span class="cell-value">${{ state.detail.price }}</span>
- </div>
- </div>
- </div>
- <div class="ptc-button-group mg0">
- <div class="ptc-inner">
- <button class="ptc-button" @click="reselect">Reselect time</button>
- <button class="ptc-button ptc-button--stroke" @click="applyCancel">
- Cancel appointment
- </button>
- </div>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { onMounted } from 'vue'
- import { useRouter } from 'vue-router'
- import { state } from '../store'
- import { cancelRepair } from '@/service/repair'
- import Toast from '@/components/toast'
- import dayjs from 'dayjs'
- import getLocation from '@/utils/getLocation'
- const router = useRouter()
- let coords: GeolocationCoordinates | undefined
- onMounted(async () => {
- coords = (await getLocation({ timeout: 800 }))?.coords
- })
- const formattedTime = (() => {
- const _ = dayjs(state.date, 'YYYY-MM-DD')
- return `${_.format('dddd')},${_.format('MMMM')} ${_.format('DD')} ${
- state.uiPeriod
- }`
- })()
- function reselect() {
- if (state.rightId) {
- router.replace({ path: '', query: { id: state.repairId } })
- }
- state.step = 1
- }
- async function applyCancel() {
- const { message } = await cancelRepair(+state.repairId)
- Toast(message)
- setTimeout(() => router.push('/repair/history'), 500)
- }
- function navigate() {
- const url = `https://maps.google.com/maps?${
- coords ? `saddr=${coords.latitude},${coords.longitude}&` : ''
- }daddr=${state.shop.coordinates || ''}`
- window.open(url)
- }
- </script>
|