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

<template>
  <h3 class="ptc-title">Appointment</h3>
  <div class="ptc-block">
    <div class="ptc-inner">
      <div class="shop-name">{{ state.shop.name }}</div>
      <div class="shop-address pr">
        {{ state.shop.centre_name }},{{ state.shop.address }}
      </div>
      <div class="shop-action">
        <span class="modify" @click="state.step--">Modify ></span>
      </div>
    </div>
  </div>
  <div class="ptc-block">
    <div class="ptc-inner">
      <div class="ptc-cell">
        <p class="ptc-label">Select date</p>
        <div class="ptc-value">
          <PtcRadioGroup
            v-model="state.date"
            class="date-list"
            @change="onDateChange"
          >
            <PtcRadio
              v-for="(item, index) of nex7Days"
              :key="index"
              class="date"
              :value="item.fullDate"
              :disabled="!state.shop.can_appointment"
              ><span>{{ item.day }},{{ item.date }}</span></PtcRadio
            >
          </PtcRadioGroup>
        </div>
      </div>
    </div>
  </div>
  <div v-if="state.date" class="ptc-wrapper">
    <div class="ptc-block">
      <div class="ptc-inner">
        <div class="ptc-cell">
          <p class="ptc-label">Selection period</p>
          <div class="ptc-value">
            <PtcRadioGroup
              v-model="state.period"
              class="date-list"
              @change="onPeriodChange"
            >
              <PtcRadio
                v-for="(item, index) of state.periods"
                :key="index"
                class="date"
                :disabled="item.is_resreve != 1"
                :value="item.interface_time"
                ><span>{{ item.time }}</span></PtcRadio
              >
            </PtcRadioGroup>
          </div>
        </div>
      </div>
    </div>
    <div class="ptc-button-group">
      <div class="ptc-inner">
        <button
          class="ptc-button"
          :class="{ disabled: !state.period }"
          @click="state.step++"
        >
          NEXT
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import dayjs from 'dayjs'
import { PtcRadioGroup, PtcRadio } from '@/components/radio'
import { state } from '../store'
import { getShopPeriods } from '@/service/repair'

const nex7Days = (function getNext7Days() {
  const days = ['Sun', 'Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat']
  const _ = dayjs()
  const day = _.day()
  return days
    .slice(day)
    .concat(days.slice(0, day))
    .map((day, index) => {
      const today = _.add(index, 'd')
      return {
        day,
        date: String(today.date()).padStart(2, '0'),
        fullDate: today.format('YYYY-MM-DD'),
      }
    })
})()

async function onDateChange(date: string) {
  state.period = ''
  state.periods = (
    await getShopPeriods({
      date,
      area_code: '1',
      igeektek_id: state.shop.igeektek_id,
    })
  ).results

  const _ = nex7Days.find(item => item.fullDate === date)!
  state.uiDate = `${_.day},${_.date}`
}

function onPeriodChange(val: string) {
  state.uiPeriod = state.periods.find(item => item.interface_time === val)!.time
  // state.date && setTimeout(() => state.step++, 200)
}
</script>