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

<template>
  <div class="container">
    <div class="ptc-inner">
      <div class="alert">
        <i class="alert-icon"></i>
        <p class="alert-message">Monday, October 10 9:00 -9:30</p>
      </div>
      <div class="action">
        <i class="icon-calendar"></i><strong>Add to calendar ></strong>
      </div>
      <div class="note">
        <p class="note-title">Preparations：</p>
        <ul class="note-list">
          <li class="note-item">· You need to back up the data in advance</li>
          <li class="note-item">· You need to back up the data in advance</li>
        </ul>
      </div>
      <div class="detail">
        <div class="cell">
          <span class="cell-label">Store:</span>
          <span class="cell-value">xxxxxxxxxx</span>
        </div>
        <div class="cell">
          <span class="cell-label">Phone Brand:</span>
          <span class="cell-value">xxxxxxxxxx</span>
        </div>
        <div class="cell">
          <strong class="primary">Navigation></strong>
        </div>
        <div class="cell">
          <span class="cell-label">Phone Model:</span>
          <span class="cell-value">xxxxxxxxxx</span>
        </div>
        <div class="cell">
          <span class="cell-label">Phone Number:</span>
          <span class="cell-value">xxxxxxxxxx</span>
        </div>
        <div class="cell">
          <span class="cell-label">IMEI:</span>
          <span class="cell-value">xxxxxxxxxx</span>
        </div>
        <div class="cell">
          <span class="cell-label">Service:</span>
          <span class="cell-value">xxxxxxxxxx</span>
        </div>
        <div class="cell">
          <span class="cell-label">Member Price:</span>
          <span class="cell-value">$35</span>
        </div>
      </div>
    </div>
    <div class="ptc-button-group mg0">
      <div class="ptc-inner">
        <button class="ptc-button" @click="state.step = 1">
          Reselect time
        </button>
        <button class="ptc-button ptc-button--stroke">
          Cancel appointment
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { state } from '../store'
import { cancelRepair } from '@/service/repair'
</script>