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.centre_name }},{{ state.shop.address }}
      </div>
      <div v-if="!submitted" 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', { hidden: submitted }]" @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" :loading="loading" @click="onSubmit">
          SUBMIT
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { state } from '../store'
import * as api from '@/service/repair'
import Toast from '@/components/toast'
import NProgress from 'nprogress'

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

const submitted = ref(false)
const loading = ref(false)

function onSubmit() {
  submit().then(next)
}

async function submit() {
  if (submitted.value) return
  if (!state.phoneNumber) {
    Toast('Please enter your phone number')
    return Promise.reject()
  }
  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
    ? api.rescheduleRepair({ id: state.repairId, ...commonParams })
    : api.applyRepair({ right_id: state.rightId, ...commonParams })
  loading.value = true
  request.finally(() => (loading.value = false))
  const { results } = await request
  state.repairId = results
  submitted.value = true
}

async function next() {
  if (NProgress.status) return
  try {
    NProgress.start()
    state.detail = (await api.getRepairInfo(+state.repairId)).results
    state.step++
    NProgress.done()
  } catch {
    NProgress.status = null
    NProgress.remove()
  }
}
</script>