123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- <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 } from 'vue'
- import { state } from '../store'
- import * as api from '@/service/repair'
- import Toast from '@/components/toast'
- import NProgress from 'nprogress'
- 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>
|