feat(freight): shop freight templates, server-side checkout fees, company dictionary (add-freight-templates)

apps/mall/pages/checkout/success.vue

@@ -1,7 +1,16 @@
 <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"),
@@ -24,6 +33,31 @@ const stepLabels = computed(() => [
         </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"