80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<template>
|
|
<v-container class="pa-4 pa-md-6" fluid>
|
|
<v-sheet class="rounded-lg pa-4 pa-md-6 mb-4">
|
|
<h1 class="text-h5 font-weight-bold">Consultar mi pedido o compra</h1>
|
|
<p class="text-body-2 text-medium-emphasis mb-4">
|
|
Ingresa el código de tu pedido o compra, o abre el link que recibiste para revisar su estado.
|
|
</p>
|
|
<v-form @submit.prevent="onConsult">
|
|
<v-row align="center">
|
|
<v-col cols="12" md="6" sm="8">
|
|
<v-text-field
|
|
v-model="inputCode"
|
|
clearable
|
|
density="comfortable"
|
|
hide-details
|
|
label="Código"
|
|
variant="outlined"
|
|
/>
|
|
</v-col>
|
|
<v-col class="d-flex align-center" cols="12" md="6" sm="4">
|
|
<v-btn color="primary" prepend-icon="mdi-magnify-scan" type="submit">
|
|
Consultar
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-form>
|
|
</v-sheet>
|
|
|
|
<PublicOrderSummary :error="error" :loading="loading" :purchase="purchase" />
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { inject, ref, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import PublicOrderSummary from '@/components/PublicOrderSummary.vue'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const api = inject('api')
|
|
|
|
const inputCode = ref(route.params.code || '')
|
|
const purchase = ref(null)
|
|
const loading = ref(false)
|
|
const error = ref('')
|
|
|
|
async function fetchOrder (code) {
|
|
loading.value = true
|
|
error.value = ''
|
|
purchase.value = null
|
|
try {
|
|
purchase.value = await api.getPublicOrderSummary(code)
|
|
} catch (e) {
|
|
error.value =
|
|
e?.response?.status === 404
|
|
? 'No se encontró un pedido con ese código.'
|
|
: 'Ocurrió un error al consultar el pedido. Inténtalo de nuevo.'
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function onConsult () {
|
|
const code = inputCode.value.trim()
|
|
if (!code) return
|
|
router.push(`/pedido/${code}`)
|
|
}
|
|
|
|
watch(
|
|
() => route.params.code,
|
|
code => {
|
|
if (code) {
|
|
inputCode.value = code
|
|
fetchOrder(code)
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
</script>
|