james/vmall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip(freight): migration 0017 + model/column-list groundwork for add-freight-templates

Browse Source
This commit is contained in:
Chengdong Zhang
2026-09-23 17:39:45 +08:00
parent a83e857bdf
commit 5b426486ac
105 changed files with 6193 additions and 1566 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/mall/pages/checkout/pay.vue
+76 -23
View File
@@ -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>