77 lines
3.0 KiB
Vue
77 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import type { Order } from "@vmall/shared";
|
|
|
|
definePageMeta({ middleware: "auth" });
|
|
|
|
const { t } = useI18n();
|
|
/** Paid orders handed over by the pay page; empty on a fresh load. */
|
|
const paidOrders = useState<Order[]>("checkout-paid-orders", () => []);
|
|
|
|
// One-shot display: revisiting the page must not show stale orders.
|
|
onBeforeUnmount(() => {
|
|
paidOrders.value = [];
|
|
});
|
|
|
|
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 v-if="paidOrders.length > 0" class="mx-auto mt-6 max-w-[560px] space-y-2 text-left">
|
|
<div
|
|
v-for="order in paidOrders"
|
|
:key="order.id"
|
|
class="border-border flex flex-wrap items-center justify-between gap-3 border p-3 text-sm"
|
|
>
|
|
<span class="text-muted">{{ t("checkout.orderNo") }} {{ order.order_no }}</span>
|
|
<span class="flex items-center gap-4">
|
|
<span class="flex items-center gap-2">
|
|
<span class="text-muted">{{ t("checkout.shippingFee") }}</span>
|
|
<span v-if="order.shipping_fee_minor > 0"
|
|
><PriceText
|
|
:amount-minor="order.shipping_fee_minor"
|
|
:currency="order.currency" /></span
|
|
><span v-else>{{ t("checkout.freeShipping") }}</span>
|
|
</span>
|
|
<span class="flex items-center gap-2">
|
|
<span class="text-muted">{{ t("checkout.total") }}</span>
|
|
<strong class="text-primary"
|
|
><PriceText :amount-minor="order.total_minor" :currency="order.currency"
|
|
/></strong>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<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>
|