vue-ptc/src/pages/repair/steps/StepFive.vue

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