vue-ptc/src/pages/appointment/StepTwo.vue

<template>
  <h3 class="ptc-title">Appointment</h3>
  <div class="ptc-block">
    <div class="shop-name">PTC Browns Plains Kiosk</div>
    <div class="shop-address">
      Browns Plains Grand Plaza Shopping Centre, Shop K007 27-49 Browns Plains
      Road, Browns Plains, QLD, 4118 (07) 3059 1014
    </div>
  </div>
  <div class="ptc-block">
    <div class="ptc-cell">
      <p class="ptc-label">Select date</p>
      <div class="ptc-value">
        <PtcRadioGroup v-model="state.date" class="date-list">
          <PtcRadio class="date" value="1">Mon,10</PtcRadio>
          <PtcRadio class="date" value="2">Mon,10</PtcRadio>
          <PtcRadio class="date" value="3">Mon,10</PtcRadio>
          <PtcRadio class="date" value="4">Mon,10</PtcRadio>
          <PtcRadio class="date" value="5">Mon,10</PtcRadio>
          <PtcRadio class="date" value="6">Mon,10</PtcRadio>
          <PtcRadio class="date" value="7">Mon,10</PtcRadio>
        </PtcRadioGroup>
      </div>
    </div>
  </div>
  <div class="ptc-block">
    <div class="ptc-cell">
      <p class="ptc-label">Selection period</p>
      <div class="ptc-value">
        <div class="ptc-select">
          <!-- <span class="ptc-select__placeholder">请选择</span> -->
          <span class="ptc-select__value">9：00 - 9：30</span>
        </div>
      </div>
    </div>
  </div>
  <div class="ptc-wrap mt48">
    <button class="ptc-button" @click="state.step++">CONTINUE</button>
  </div>
</template>

<script setup lang="ts">
import { PtcRadioGroup, PtcRadio } from '@/components/radio'
import { state } from './store'
</script>