43 lines
1.5 KiB
Vue
43 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({ middleware: "auth" });
|
|
|
|
const { t } = useI18n();
|
|
|
|
const stepLabels = computed(() => [
|
|
t("checkout.steps.cart"),
|
|
t("checkout.steps.order"),
|
|
t("checkout.steps.payment"),
|
|
t("checkout.steps.complete"),
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-bg text-text min-h-screen font-sans">
|
|
<div class="max-w-mall mx-auto px-4 py-6">
|
|
<UiStepBar :steps="stepLabels" :active="3" />
|
|
<VCard class="px-5 py-16 text-center">
|
|
<div
|
|
class="bg-success mx-auto flex h-[72px] w-[72px] items-center justify-center rounded-full text-5xl leading-none text-white"
|
|
aria-hidden="true"
|
|
>
|
|
✓
|
|
</div>
|
|
<h1 class="mt-5 mb-2 text-2xl font-medium">{{ t("checkout.successTitle") }}</h1>
|
|
<p class="text-muted m-0">{{ t("checkout.successMessage") }}</p>
|
|
<div class="mt-7 flex justify-center gap-3">
|
|
<NuxtLink
|
|
class="border-primary bg-primary hover:bg-primary-hover inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium text-white"
|
|
to="/user/orders"
|
|
>{{ t("checkout.viewOrders") }}</NuxtLink
|
|
>
|
|
<NuxtLink
|
|
class="border-border bg-surface hover:bg-bg inline-flex items-center justify-center rounded-md border px-4 py-2 text-sm font-medium"
|
|
to="/"
|
|
>{{ t("checkout.continueShopping") }}</NuxtLink
|
|
>
|
|
</div>
|
|
</VCard>
|
|
</div>
|
|
</div>
|
|
</template>
|