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

<template>
  <h3 class="ptc-title">Confirm appointment</h3>
  <div class="ptc-block">
    <div class="ptc-inner">
      <div class="shop-name">{{ state.shop.name }}</div>
      <div class="shop-address">
        {{ state.shop.address }}
      </div>
      <div class="shop-action">
        <span class="modify" @click="state.step = 0">Modify ></span>
      </div>
    </div>
  </div>
  <div class="ptc-block">
    <div class="ptc-inner">
      <p class="t2">Appointed time</p>
      <div class="flex-ac space-between">
        <strong class="p1">{{ state.uiDate }}</strong>
        <strong class="p2">{{ state.uiPeriod }}</strong>
        <span class="modify" @click="state.step--">Modify ></span>
      </div>
    </div>
  </div>
  <div class="ptc-block">
    <div class="ptc-inner">
      <p class="t1">
        Please provide a mobile number so that the customer service can confirm
        the details with you。
      </p>
      <p class="t2">Phone number</p>
      <input
        v-model="state.phoneNumber"
        type="text"
        class="ptc-input"
        placeholder="Please enter"
      />
    </div>
  </div>
  <div class="ptc-wrapper">
    <div class="ptc-block">
      <div class="ptc-inner">
        <p class="t1">
          Is there anything to pay attention to, nothing to skip。
        </p>
        <textarea
          v-model="state.remark"
          placeholder="Please enter, up to 1000 characters"
        ></textarea>
      </div>
    </div>
    <div class="ptc-button-group">
      <div class="ptc-inner">
        <button class="ptc-button ptc-button--loading" @click="submit">
          SUBMIT
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { state } from '../store'
import { getRepairPhone, applyRepair, rescheduleRepair } from '@/service/repair'
import Toast from '@/components/toast'

onMounted(async () => {
  if (state.repairId) {
    state.phoneNumber = (await getRepairPhone()).results
  }
})

async function submit() {
  if (!state.phoneNumber) return Toast('Please enter a phone number')
  const commonParams = {
    igeektek_id: state.shop.igeektek_id,
    pickup_time: state.date + ' ' + state.period,
    phone_number: state.phoneNumber,
    remark: state.remark || '',
  }
  const request = state.repairId
    ? rescheduleRepair({ id: +state.repairId, ...commonParams })
    : applyRepair({ ...commonParams })
  await request
  state.step++
}
</script>