wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates
This commit is contained in:
Chengdong Zhang
@@ -1,6 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { t as pick } from "@vmall/shared";
|
||||
import type { Address, AddressBookEntry, CartItem, Coupon, GroupBuyIntent, LocalizedText } from "@vmall/shared";
|
||||
import type {
|
||||
Address,
|
||||
AddressBookEntry,
|
||||
CartItem,
|
||||
Coupon,
|
||||
GroupBuyIntent,
|
||||
LocalizedText,
|
||||
} from "@vmall/shared";
|
||||
|
||||
type CheckoutGroup = {
|
||||
shopId: string;
|
||||
@@ -122,8 +129,7 @@ async function loadCart(): Promise<void> {
|
||||
if (intent && !items.value.some((item) => item.sku_id === intent.sku_id)) {
|
||||
groupIntent.value = null;
|
||||
}
|
||||
selectedAddressId.value =
|
||||
list.find((address) => address.is_default)?.id ?? list[0]?.id ?? "";
|
||||
selectedAddressId.value = list.find((address) => address.is_default)?.id ?? list[0]?.id ?? "";
|
||||
if (items.value.length === 0) {
|
||||
await router.replace("/cart");
|
||||
}
|
||||
@@ -176,83 +182,175 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-bg font-sans text-text">
|
||||
<div class="mx-auto max-w-mall px-4 py-6">
|
||||
<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="1" />
|
||||
<header class="mb-4"><h1 class="m-0 text-xl font-medium">{{ t("checkout.title") }}</h1></header>
|
||||
<header class="mb-4">
|
||||
<h1 class="m-0 text-xl font-medium">{{ t("checkout.title") }}</h1>
|
||||
</header>
|
||||
|
||||
<p v-if="error" class="mb-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger">{{ error }}</p>
|
||||
<p v-if="error" class="border-danger/30 bg-danger/10 text-danger mb-4 border px-3.5 py-2.5">
|
||||
{{ error }}
|
||||
</p>
|
||||
<template v-if="!loading && items.length > 0">
|
||||
<VCard class="mb-4 p-5">
|
||||
<h2 class="mb-4 mt-0 text-base font-semibold">{{ t("checkout.address") }}</h2>
|
||||
<h2 class="mt-0 mb-4 text-base font-semibold">{{ t("checkout.address") }}</h2>
|
||||
<div v-if="addresses.length > 0" class="grid gap-2">
|
||||
<label
|
||||
v-for="address in addresses"
|
||||
:key="address.id"
|
||||
class="flex cursor-pointer items-start gap-3 rounded-md border border-border p-3 text-sm has-[:checked]:border-primary has-[:checked]:bg-primary-soft"
|
||||
class="border-border has-[:checked]:border-primary has-[:checked]:bg-primary-soft flex cursor-pointer items-start gap-3 rounded-md border p-3 text-sm"
|
||||
>
|
||||
<input v-model="selectedAddressId" class="mt-1 h-4 w-4 accent-primary" type="radio" name="shipping-address" :value="address.id" />
|
||||
<input
|
||||
v-model="selectedAddressId"
|
||||
class="accent-primary mt-1 h-4 w-4"
|
||||
type="radio"
|
||||
name="shipping-address"
|
||||
:value="address.id"
|
||||
/>
|
||||
<span class="flex min-w-0 flex-1 flex-col gap-1">
|
||||
<span class="flex flex-wrap gap-2"><strong>{{ address.recipient }}</strong><span>{{ address.phone }}</span></span>
|
||||
<span class="text-muted">{{ address.region }} {{ address.city }} {{ address.line1 }} {{ address.postal_code }}</span>
|
||||
<span class="flex flex-wrap gap-2"
|
||||
><strong>{{ address.recipient }}</strong
|
||||
><span>{{ address.phone }}</span></span
|
||||
>
|
||||
<span class="text-muted"
|
||||
>{{ address.region }} {{ address.city }} {{ address.line1 }}
|
||||
{{ address.postal_code }}</span
|
||||
>
|
||||
</span>
|
||||
<VBadge v-if="address.is_default" tone="blue">{{ t("checkout.defaultAddress") }}</VBadge>
|
||||
<VBadge v-if="address.is_default" tone="blue">{{
|
||||
t("checkout.defaultAddress")
|
||||
}}</VBadge>
|
||||
</label>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p class="mb-3 text-sm text-muted">{{ t("checkout.noSavedAddress") }}</p>
|
||||
<p class="text-muted mb-3 text-sm">{{ t("checkout.noSavedAddress") }}</p>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<VField :label="t('user.recipient')"><VInput v-model.trim="manual.recipient" type="text" :placeholder="t('user.recipient')" /></VField>
|
||||
<VField :label="t('user.phone')"><VInput v-model.trim="manual.phone" type="text" :placeholder="t('user.phone')" /></VField>
|
||||
<VField :label="t('user.country')"><VInput v-model.trim="manual.country" type="text" :placeholder="t('user.country')" /></VField>
|
||||
<VField :label="t('user.region')"><VInput v-model.trim="manual.region" type="text" :placeholder="t('user.region')" /></VField>
|
||||
<VField :label="t('user.city')"><VInput v-model.trim="manual.city" type="text" :placeholder="t('user.city')" /></VField>
|
||||
<VField :label="t('user.postalCode')"><VInput v-model.trim="manual.postal_code" type="text" :placeholder="t('user.postalCode')" /></VField>
|
||||
<VField class="sm:col-span-2" :label="t('user.line1')"><VInput v-model.trim="manual.line1" type="text" :placeholder="t('user.line1')" /></VField>
|
||||
<VField :label="t('user.recipient')"
|
||||
><VInput
|
||||
v-model.trim="manual.recipient"
|
||||
type="text"
|
||||
:placeholder="t('user.recipient')"
|
||||
/></VField>
|
||||
<VField :label="t('user.phone')"
|
||||
><VInput v-model.trim="manual.phone" type="text" :placeholder="t('user.phone')"
|
||||
/></VField>
|
||||
<VField :label="t('user.country')"
|
||||
><VInput v-model.trim="manual.country" type="text" :placeholder="t('user.country')"
|
||||
/></VField>
|
||||
<VField :label="t('user.region')"
|
||||
><VInput v-model.trim="manual.region" type="text" :placeholder="t('user.region')"
|
||||
/></VField>
|
||||
<VField :label="t('user.city')"
|
||||
><VInput v-model.trim="manual.city" type="text" :placeholder="t('user.city')"
|
||||
/></VField>
|
||||
<VField :label="t('user.postalCode')"
|
||||
><VInput
|
||||
v-model.trim="manual.postal_code"
|
||||
type="text"
|
||||
:placeholder="t('user.postalCode')"
|
||||
/></VField>
|
||||
<VField class="sm:col-span-2" :label="t('user.line1')"
|
||||
><VInput v-model.trim="manual.line1" type="text" :placeholder="t('user.line1')"
|
||||
/></VField>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
<VCard class="mb-4 p-5">
|
||||
<h2 class="mb-4 mt-0 text-base font-semibold">{{ t("checkout.orderPreview") }}</h2>
|
||||
<div v-for="group in groups" :key="group.shopId" class="border-b border-border pb-3 last:border-b-0 last:pb-0">
|
||||
<header class="border-b border-border py-2 text-sm font-medium">{{ pick(group.shopName, locale) || t("checkout.shop") }}</header>
|
||||
<div v-for="item in group.items" :key="item.sku_id" class="grid grid-cols-[56px_minmax(0,1fr)_auto_auto_auto] items-center gap-3 border-b border-bg py-3 last:border-b-0">
|
||||
<img class="h-14 w-14 object-cover" :src="imageFor(item)" :alt="pick(item.product_name, locale)" />
|
||||
<div class="flex min-w-0 flex-col gap-1"><strong class="truncate">{{ pick(item.product_name, locale) }}</strong><span class="text-xs text-muted">{{ item.sku_code }}</span></div>
|
||||
<h2 class="mt-0 mb-4 text-base font-semibold">{{ t("checkout.orderPreview") }}</h2>
|
||||
<div
|
||||
v-for="group in groups"
|
||||
:key="group.shopId"
|
||||
class="border-border border-b pb-3 last:border-b-0 last:pb-0"
|
||||
>
|
||||
<header class="border-border border-b py-2 text-sm font-medium">
|
||||
{{ pick(group.shopName, locale) || t("checkout.shop") }}
|
||||
</header>
|
||||
<div
|
||||
v-for="item in group.items"
|
||||
:key="item.sku_id"
|
||||
class="border-bg grid grid-cols-[56px_minmax(0,1fr)_auto_auto_auto] items-center gap-3 border-b py-3 last:border-b-0"
|
||||
>
|
||||
<img
|
||||
class="h-14 w-14 object-cover"
|
||||
:src="imageFor(item)"
|
||||
:alt="pick(item.product_name, locale)"
|
||||
/>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<strong class="truncate">{{ pick(item.product_name, locale) }}</strong
|
||||
><span class="text-muted text-xs">{{ item.sku_code }}</span>
|
||||
</div>
|
||||
<PriceText :amount-minor="item.unit_price_minor" :currency="item.currency" />
|
||||
<span class="text-xs text-muted">× {{ item.qty }}</span>
|
||||
<strong class="text-right text-primary"><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="item.currency" /></strong>
|
||||
<span class="text-muted text-xs">× {{ item.qty }}</span>
|
||||
<strong class="text-primary text-right"
|
||||
><PriceText
|
||||
:amount-minor="item.unit_price_minor * item.qty"
|
||||
:currency="item.currency"
|
||||
/></strong>
|
||||
</div>
|
||||
<div v-if="!groupIntent && couponsForShop(group.shopId).length > 0" class="flex flex-wrap items-center gap-3 pt-3 text-sm">
|
||||
<div
|
||||
v-if="!groupIntent && couponsForShop(group.shopId).length > 0"
|
||||
class="flex flex-wrap items-center gap-3 pt-3 text-sm"
|
||||
>
|
||||
<span class="text-muted">{{ t("checkout.coupon") }}</span>
|
||||
<select v-model="selectedCoupon[group.shopId]" class="rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30">
|
||||
<select
|
||||
v-model="selectedCoupon[group.shopId]"
|
||||
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 rounded-md border px-3 py-2 text-sm focus:outline-2"
|
||||
>
|
||||
<option value="">{{ t("checkout.noCoupon") }}</option>
|
||||
<option v-for="coupon in couponsForShop(group.shopId)" :key="coupon.id" :value="coupon.id">{{ pick(coupon.title, locale) }}</option>
|
||||
<option
|
||||
v-for="coupon in couponsForShop(group.shopId)"
|
||||
:key="coupon.id"
|
||||
:value="coupon.id"
|
||||
>
|
||||
{{ pick(coupon.title, locale) }}
|
||||
</option>
|
||||
</select>
|
||||
<span v-if="selectedCouponFor(group.shopId)" class="text-danger">− <PriceText :amount-minor="selectedCouponFor(group.shopId)?.amount_minor ?? 0" :currency="selectedCouponFor(group.shopId)?.currency ?? sourceCurrency" /></span>
|
||||
<span v-if="selectedCouponFor(group.shopId)" class="text-danger"
|
||||
>−
|
||||
<PriceText
|
||||
:amount-minor="selectedCouponFor(group.shopId)?.amount_minor ?? 0"
|
||||
:currency="selectedCouponFor(group.shopId)?.currency ?? sourceCurrency"
|
||||
/></span>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
<VCard class="mb-4 p-5">
|
||||
<label class="mb-1 block text-sm font-medium" for="order-remark">{{ t("checkout.remark") }}</label>
|
||||
<textarea id="order-remark" v-model="remark" class="w-full rounded-md border border-border bg-surface px-3 py-2 text-sm text-text focus:border-primary focus:outline-2 focus:outline-primary/30" :placeholder="t('checkout.remarkPlaceholder')" rows="3" />
|
||||
<label class="mb-1 block text-sm font-medium" for="order-remark">{{
|
||||
t("checkout.remark")
|
||||
}}</label>
|
||||
<textarea
|
||||
id="order-remark"
|
||||
v-model="remark"
|
||||
class="border-border bg-surface text-text focus:border-primary focus:outline-primary/30 w-full rounded-md border px-3 py-2 text-sm focus:outline-2"
|
||||
:placeholder="t('checkout.remarkPlaceholder')"
|
||||
rows="3"
|
||||
/>
|
||||
</VCard>
|
||||
|
||||
<footer class="mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border border-border bg-surface p-4 shadow-sm">
|
||||
<footer
|
||||
class="border-border bg-surface mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border p-4 shadow-sm"
|
||||
>
|
||||
<span class="text-sm">{{ t("checkout.total") }}:</span>
|
||||
<strong class="text-lg text-primary"><PriceText :amount-minor="totalMinor" :currency="sourceCurrency" /></strong>
|
||||
<VBtn variant="primary" type="button" :disabled="submitting" @click="submitOrder">{{ t("checkout.submit") }}</VBtn>
|
||||
<strong class="text-primary text-lg"
|
||||
><PriceText :amount-minor="totalMinor" :currency="sourceCurrency"
|
||||
/></strong>
|
||||
<VBtn variant="primary" type="button" :disabled="submitting" @click="submitOrder">{{
|
||||
t("checkout.submit")
|
||||
}}</VBtn>
|
||||
</footer>
|
||||
</template>
|
||||
<VCard v-else-if="!loading" class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<UiEmptyState :text="t('checkout.noItems')" />
|
||||
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-bg" to="/cart">{{ t("checkout.backToCart") }}</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="/cart"
|
||||
>{{ t("checkout.backToCart") }}</NuxtLink
|
||||
>
|
||||
</VCard>
|
||||
<div v-else class="py-8 text-center text-muted">{{ $t("common.loading") }}</div>
|
||||
<div v-else class="text-muted py-8 text-center">{{ $t("common.loading") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
@@ -36,7 +36,9 @@ const paymentOptions = computed(() => [
|
||||
{ value: "alipay", label: t("checkout.alipay") },
|
||||
]);
|
||||
|
||||
const grandTotalMinor = computed(() => orders.value.reduce((total, order) => total + order.total_minor, 0));
|
||||
const grandTotalMinor = computed(() =>
|
||||
orders.value.reduce((total, order) => total + order.total_minor, 0),
|
||||
);
|
||||
const totalCurrency = computed(() => orders.value[0]?.currency ?? currency.value);
|
||||
|
||||
function imageFor(image: string | null): string {
|
||||
@@ -79,51 +81,102 @@ onMounted(() => void loadOrders());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-bg font-sans text-text">
|
||||
<div class="mx-auto max-w-mall px-4 py-6">
|
||||
<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="2" />
|
||||
<header class="mb-4"><h1 class="m-0 text-xl font-medium">{{ t("checkout.payTitle") }}</h1></header>
|
||||
<p v-if="error" class="mb-4 border border-danger/30 bg-danger/10 px-3.5 py-2.5 text-danger">{{ error }}</p>
|
||||
<header class="mb-4">
|
||||
<h1 class="m-0 text-xl font-medium">{{ t("checkout.payTitle") }}</h1>
|
||||
</header>
|
||||
<p v-if="error" class="border-danger/30 bg-danger/10 text-danger mb-4 border px-3.5 py-2.5">
|
||||
{{ error }}
|
||||
</p>
|
||||
<template v-if="!loading && orders.length > 0">
|
||||
<section class="mb-4 space-y-4">
|
||||
<VCard v-for="order in orders" :key="order.id" :padded="false" class="overflow-hidden">
|
||||
<header class="flex items-center justify-between border-b border-border px-4 py-3 text-sm">
|
||||
<header
|
||||
class="border-border flex items-center justify-between border-b px-4 py-3 text-sm"
|
||||
>
|
||||
<span>{{ t("checkout.orderNo") }}: {{ order.order_no }}</span>
|
||||
<span class="text-muted">{{ shopName(order.shop_id) }}</span>
|
||||
</header>
|
||||
<div v-for="item in order.items" :key="item.id" class="grid grid-cols-[56px_minmax(0,1fr)_auto_auto_auto] items-center gap-3 border-b border-bg px-4 py-3">
|
||||
<img class="h-14 w-14 border border-border object-cover" :src="imageFor(item.image)" :alt="pick(item.product_name, locale)" />
|
||||
<div class="flex min-w-0 flex-col gap-1"><strong class="truncate">{{ pick(item.product_name, locale) }}</strong><span class="text-xs text-muted">{{ item.sku_code }}</span><VBadge v-if="item.flash_sale_item_id" tone="orange">{{ t("marketing.flashTag") }}</VBadge></div>
|
||||
<div
|
||||
v-for="item in order.items"
|
||||
:key="item.id"
|
||||
class="border-bg grid grid-cols-[56px_minmax(0,1fr)_auto_auto_auto] items-center gap-3 border-b px-4 py-3"
|
||||
>
|
||||
<img
|
||||
class="border-border h-14 w-14 border object-cover"
|
||||
:src="imageFor(item.image)"
|
||||
:alt="pick(item.product_name, locale)"
|
||||
/>
|
||||
<div class="flex min-w-0 flex-col gap-1">
|
||||
<strong class="truncate">{{ pick(item.product_name, locale) }}</strong
|
||||
><span class="text-muted text-xs">{{ item.sku_code }}</span
|
||||
><VBadge v-if="item.flash_sale_item_id" tone="orange">{{
|
||||
t("marketing.flashTag")
|
||||
}}</VBadge>
|
||||
</div>
|
||||
<PriceText :amount-minor="item.unit_price_minor" :currency="order.currency" />
|
||||
<span class="text-xs text-muted">× {{ item.qty }}</span>
|
||||
<strong class="text-right text-primary"><PriceText :amount-minor="item.unit_price_minor * item.qty" :currency="order.currency" /></strong>
|
||||
<span class="text-muted text-xs">× {{ item.qty }}</span>
|
||||
<strong class="text-primary text-right"
|
||||
><PriceText
|
||||
:amount-minor="item.unit_price_minor * item.qty"
|
||||
:currency="order.currency"
|
||||
/></strong>
|
||||
</div>
|
||||
<footer class="flex flex-wrap items-center justify-end gap-3 px-4 py-3 text-sm">
|
||||
<template v-if="order.discount_minor > 0"><span>{{ t("checkout.couponDiscount") }}</span><span class="text-danger">−<PriceText :amount-minor="order.discount_minor" :currency="order.currency" /></span></template>
|
||||
<span>{{ t("checkout.total") }}</span><strong class="text-primary"><PriceText :amount-minor="order.total_minor" :currency="order.currency" /></strong>
|
||||
<template v-if="order.discount_minor > 0"
|
||||
><span>{{ t("checkout.couponDiscount") }}</span
|
||||
><span class="text-danger"
|
||||
>−<PriceText
|
||||
:amount-minor="order.discount_minor"
|
||||
:currency="order.currency" /></span
|
||||
></template>
|
||||
<span>{{ t("checkout.total") }}</span
|
||||
><strong class="text-primary"
|
||||
><PriceText :amount-minor="order.total_minor" :currency="order.currency"
|
||||
/></strong>
|
||||
</footer>
|
||||
</VCard>
|
||||
</section>
|
||||
<VCard class="mb-4 p-5">
|
||||
<h2 class="mb-4 mt-0 text-base font-semibold">{{ t("checkout.paymentTitle") }}</h2>
|
||||
<label v-for="option in paymentOptions" :key="option.value" class="mr-5 inline-flex cursor-pointer items-center gap-2 text-sm">
|
||||
<input v-model="paymentMethod" class="h-4 w-4 accent-primary" type="radio" name="payment-method" :value="option.value" />
|
||||
<h2 class="mt-0 mb-4 text-base font-semibold">{{ t("checkout.paymentTitle") }}</h2>
|
||||
<label
|
||||
v-for="option in paymentOptions"
|
||||
:key="option.value"
|
||||
class="mr-5 inline-flex cursor-pointer items-center gap-2 text-sm"
|
||||
>
|
||||
<input
|
||||
v-model="paymentMethod"
|
||||
class="accent-primary h-4 w-4"
|
||||
type="radio"
|
||||
name="payment-method"
|
||||
:value="option.value"
|
||||
/>
|
||||
<span>{{ option.label }}</span>
|
||||
</label>
|
||||
</VCard>
|
||||
<footer class="mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border border-border bg-surface p-4 shadow-sm">
|
||||
<footer
|
||||
class="border-border bg-surface mb-4 flex flex-wrap items-center justify-end gap-4 rounded-lg border p-4 shadow-sm"
|
||||
>
|
||||
<span class="text-sm">{{ t("checkout.grandTotal") }}:</span>
|
||||
<strong class="text-lg text-primary"><PriceText :amount-minor="grandTotalMinor" :currency="totalCurrency" /></strong>
|
||||
<VBtn variant="primary" type="button" :disabled="paying" @click="confirmPayment">{{ t("checkout.confirmPay") }}</VBtn>
|
||||
<strong class="text-primary text-lg"
|
||||
><PriceText :amount-minor="grandTotalMinor" :currency="totalCurrency"
|
||||
/></strong>
|
||||
<VBtn variant="primary" type="button" :disabled="paying" @click="confirmPayment">{{
|
||||
t("checkout.confirmPay")
|
||||
}}</VBtn>
|
||||
</footer>
|
||||
</template>
|
||||
<VCard v-else-if="!loading" class="flex flex-col items-center gap-4 p-8 text-center">
|
||||
<UiEmptyState :text="t('checkout.noPendingOrders')" />
|
||||
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-bg" to="/">{{ t("checkout.backHome") }}</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.backHome") }}</NuxtLink
|
||||
>
|
||||
</VCard>
|
||||
<div v-else class="py-8 text-center text-muted">{{ $t("common.loading") }}</div>
|
||||
<div v-else class="text-muted py-8 text-center">{{ $t("common.loading") }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
@@ -12,20 +12,31 @@ const stepLabels = computed(() => [
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-bg font-sans text-text">
|
||||
<div class="mx-auto max-w-mall px-4 py-6">
|
||||
<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="mx-auto flex h-[72px] w-[72px] items-center justify-center rounded-full bg-success text-5xl leading-none text-white" aria-hidden="true">✓</div>
|
||||
<h1 class="mb-2 mt-5 text-2xl font-medium">{{ t("checkout.successTitle") }}</h1>
|
||||
<p class="m-0 text-muted">{{ t("checkout.successMessage") }}</p>
|
||||
<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="inline-flex items-center justify-center rounded-md border border-primary bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover" to="/user/orders">{{ t("checkout.viewOrders") }}</NuxtLink>
|
||||
<NuxtLink class="inline-flex items-center justify-center rounded-md border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-bg" to="/">{{ t("checkout.continueShopping") }}</NuxtLink>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user