feat: three nuxt frontends, demo seed, rounding + money-exponent + rate-cast fixes, archived specs
This commit is contained in:
Chengdong Zhang
@@ -0,0 +1,245 @@
|
||||
<script setup lang="ts">
|
||||
import { t as localized } from "@vmall/shared";
|
||||
import type { Order, OrderStatus, Shipment, ShipmentItemBody } from "@vmall/shared";
|
||||
|
||||
definePageMeta({ middleware: "auth" });
|
||||
|
||||
const { $api } = useNuxtApp();
|
||||
const { locale, t: translate } = useI18n();
|
||||
const { load: loadMoney, fmt } = useMoney();
|
||||
const route = useRoute();
|
||||
const orderId = computed(() => String(route.params.id));
|
||||
const order = ref<Order | null>(null);
|
||||
const shipments = ref<Shipment[]>([]);
|
||||
const quantities = ref<Record<string, number>>({});
|
||||
const carrier = ref("");
|
||||
const trackingNo = ref("");
|
||||
const loading = ref(true);
|
||||
const busy = ref(false);
|
||||
const actionId = ref("");
|
||||
const error = ref("");
|
||||
|
||||
function statusClass(value: OrderStatus): string {
|
||||
if (value === "completed") return "green";
|
||||
if (value === "cancelled") return "red";
|
||||
if (value === "pending_payment") return "orange";
|
||||
return "blue";
|
||||
}
|
||||
|
||||
function shipmentStatusClass(value: Shipment["status"]): string {
|
||||
return value === "delivered" ? "green" : value === "shipped" ? "blue" : "orange";
|
||||
}
|
||||
|
||||
function formatDate(value: string): string {
|
||||
return new Date(value).toLocaleString(locale.value === "zh" ? "zh-CN" : "en-US");
|
||||
}
|
||||
|
||||
function shippedQuantity(itemId: string): number {
|
||||
return shipments.value
|
||||
.filter((shipment) => shipment.order_id === orderId.value)
|
||||
.flatMap((shipment) => shipment.items)
|
||||
.filter((item) => item.order_item_id === itemId)
|
||||
.reduce((total, item) => total + item.qty, 0);
|
||||
}
|
||||
|
||||
function unshippedQuantity(itemId: string, total: number): number {
|
||||
return Math.max(0, total - shippedQuantity(itemId));
|
||||
}
|
||||
|
||||
async function findShopOrder(): Promise<Order> {
|
||||
let currentPage = 1;
|
||||
let totalPages = 1;
|
||||
while (currentPage <= totalPages) {
|
||||
const result = await $api.shop.listOrders({ page: currentPage });
|
||||
const found = result.items.find((item) => item.id === orderId.value);
|
||||
if (found) return found;
|
||||
totalPages = Math.max(1, Math.ceil(result.total / result.per_page));
|
||||
currentPage += 1;
|
||||
}
|
||||
throw new Error(translate("common.empty"));
|
||||
}
|
||||
|
||||
async function loadOrder(): Promise<void> {
|
||||
loading.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
const [loadedOrder, loadedShipments] = await Promise.all([
|
||||
findShopOrder(),
|
||||
$api.shop.listShipments(),
|
||||
]);
|
||||
order.value = loadedOrder;
|
||||
shipments.value = loadedShipments.filter((shipment) => shipment.order_id === orderId.value);
|
||||
const nextQuantities: Record<string, number> = {};
|
||||
loadedOrder.items.forEach((item) => {
|
||||
nextQuantities[item.id] = Math.max(
|
||||
0,
|
||||
item.qty - loadedShipments
|
||||
.filter((shipment) => shipment.order_id === orderId.value)
|
||||
.flatMap((shipment) => shipment.items)
|
||||
.filter((shipmentItem) => shipmentItem.order_item_id === item.id)
|
||||
.reduce((total, shipmentItem) => total + shipmentItem.qty, 0),
|
||||
);
|
||||
});
|
||||
quantities.value = nextQuantities;
|
||||
} catch (err: unknown) {
|
||||
error.value = err instanceof Error ? err.message : translate("common.error");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createShipment(): Promise<void> {
|
||||
if (!order.value || !carrier.value.trim() || !trackingNo.value.trim()) {
|
||||
error.value = translate("common.required");
|
||||
return;
|
||||
}
|
||||
const items: ShipmentItemBody[] = order.value.items
|
||||
.map((item) => ({ order_item_id: item.id, qty: quantities.value[item.id] ?? 0 }))
|
||||
.filter((item) => item.qty > 0);
|
||||
if (!items.length) {
|
||||
error.value = translate("common.required");
|
||||
return;
|
||||
}
|
||||
busy.value = true;
|
||||
error.value = "";
|
||||
try {
|
||||
await $api.shop.createShipment(order.value.id, carrier.value.trim(), trackingNo.value.trim(), items);
|
||||
carrier.value = "";
|
||||
trackingNo.value = "";
|
||||
await loadOrder();
|
||||
} catch (err: unknown) {
|
||||
error.value = err instanceof Error ? err.message : translate("common.error");
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function markShipped(shipment: Shipment): Promise<void> {
|
||||
actionId.value = shipment.id;
|
||||
error.value = "";
|
||||
try {
|
||||
await $api.shop.markShipped(shipment.id);
|
||||
await loadOrder();
|
||||
} catch (err: unknown) {
|
||||
error.value = err instanceof Error ? err.message : translate("common.error");
|
||||
} finally {
|
||||
actionId.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadMoney();
|
||||
loadOrder();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-head">
|
||||
<h1 class="page-title">{{ order ? order.order_no : $t("order.title") }}</h1>
|
||||
<NuxtLink class="btn" to="/orders">{{ $t("common.back") }}</NuxtLink>
|
||||
</div>
|
||||
<div v-if="error" class="error-text" role="alert">{{ error }}</div>
|
||||
<p v-if="loading" class="muted">{{ $t("common.loading") }}</p>
|
||||
<template v-else-if="order">
|
||||
<section class="card">
|
||||
<div class="row between detail-heading">
|
||||
<h2>{{ $t("shop.details") }}</h2>
|
||||
<span class="badge" :class="statusClass(order.status)">{{ $t(`order.status.${order.status}`) }}</span>
|
||||
</div>
|
||||
<div class="order-meta">
|
||||
<div><span class="muted">{{ $t("shop.created") }}</span><strong>{{ formatDate(order.created_at) }}</strong></div>
|
||||
<div><span class="muted">{{ $t("shop.total") }}</span><strong>{{ fmt(order.total_minor, order.currency) }}</strong></div>
|
||||
</div>
|
||||
<h3>{{ $t("shop.items") }}</h3>
|
||||
<div class="table-wrap">
|
||||
<table class="table">
|
||||
<thead><tr><th>{{ $t("product.detail") }}</th><th>{{ $t("product.skuCode") }}</th><th>{{ $t("common.qty") }}</th><th>{{ $t("common.price") }}</th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="item in order.items" :key="item.id">
|
||||
<td>{{ localized(item.product_name, locale) }}</td>
|
||||
<td>{{ item.sku_code }}</td>
|
||||
<td>{{ item.qty }}</td>
|
||||
<td>{{ fmt(item.unit_price_minor, order.currency) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<h3>{{ $t("shop.address") }}</h3>
|
||||
<address class="address">
|
||||
<div>{{ order.shipping_address.recipient }} · {{ order.shipping_address.phone }}</div>
|
||||
<div>{{ order.shipping_address.country }}, {{ order.shipping_address.region }}, {{ order.shipping_address.city }}</div>
|
||||
<div>{{ order.shipping_address.line1 }}, {{ order.shipping_address.postal_code }}</div>
|
||||
</address>
|
||||
</section>
|
||||
|
||||
<section v-if="order.status === 'paid' || order.status === 'fulfilling'" class="card mt">
|
||||
<h2>{{ $t("shop.createShipment") }}</h2>
|
||||
<form @submit.prevent="createShipment">
|
||||
<div class="field-row">
|
||||
<div class="field"><label for="carrier">{{ $t("shop.carrier") }}</label><input id="carrier" v-model="carrier" required /></div>
|
||||
<div class="field"><label for="tracking-no">{{ $t("shop.trackingNo") }}</label><input id="tracking-no" v-model="trackingNo" required /></div>
|
||||
</div>
|
||||
<h3>{{ $t("shop.shipmentQuantities") }}</h3>
|
||||
<div v-for="item in order.items" :key="`quantity-${item.id}`" class="field-row quantity-row">
|
||||
<div class="quantity-name">{{ localized(item.product_name, locale) }} ({{ item.sku_code }})</div>
|
||||
<div class="field"><label :for="`quantity-${item.id}`">{{ $t("shop.unshipped") }}: {{ unshippedQuantity(item.id, item.qty) }}</label><input :id="`quantity-${item.id}`" v-model.number="quantities[item.id]" type="number" min="0" :max="unshippedQuantity(item.id, item.qty)" step="1" /></div>
|
||||
</div>
|
||||
<button class="btn primary" type="submit" :disabled="busy">{{ $t("shop.createShipment") }}</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="card mt">
|
||||
<h2>{{ $t("shipment.title") }}</h2>
|
||||
<div v-if="!shipments.length" class="muted">{{ $t("common.empty") }}</div>
|
||||
<div v-else class="table-wrap">
|
||||
<table class="table">
|
||||
<thead><tr><th>{{ $t("shipment.shipmentNo") }}</th><th>{{ $t("shop.carrier") }}</th><th>{{ $t("shop.trackingNo") }}</th><th>{{ $t("common.status") }}</th><th>{{ $t("common.actions") }}</th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="shipment in shipments" :key="shipment.id">
|
||||
<td>{{ shipment.shipment_no }}</td><td>{{ shipment.carrier }}</td><td>{{ shipment.tracking_no }}</td>
|
||||
<td><span class="badge" :class="shipmentStatusClass(shipment.status)">{{ $t(`shipment.status.${shipment.status}`) }}</span></td>
|
||||
<td><button v-if="shipment.status === 'pending'" class="btn sm" :disabled="actionId === shipment.id" @click="markShipped(shipment)">{{ $t("shipment.markShipped") }}</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.detail-heading h2,
|
||||
.card h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.order-meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.order-meta > div {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
.address {
|
||||
font-style: normal;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.quantity-row {
|
||||
align-items: end;
|
||||
}
|
||||
.quantity-name {
|
||||
flex: 2;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.quantity-row .field {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user