Files
vmall/apps/mall/pages/user.vue
T
james 9904696e76 feat: wave 2 migration (P3, P5, P7 openspec changes)
Implements, verifies, and archives the three remaining Wave 2 changes from
openspec/MIGRATION-PLAN.md.

- add-wallet-settlement (P3): demo recharge, guarded withdrawal freeze and
  one-time admin review, paginated own fund entries, idempotent per-shop
  weekly/monthly settlement statements with commission rate and one-time
  payout confirmation.
- add-merchant-onboarding (P5): personal/enterprise applications with one live
  application per user, guarded review with mandatory rejection reason, and
  transactional shop + owner provisioning returning one-time credentials;
  mall onboarding/status pages and an admin review console.
- add-membership-messaging (P7): platform member levels, append-only growth
  accrual on order completion with guarded one-way leveling, order/shipment/
  refund system messages with unread/read state and soft deletion, plus the
  mall header unread badge.

Backend: migrations 0019-0023, new wallet, settlement, merchant_onboarding,
membership and messaging modules, event hooks in order/fulfillment/aftersale,
and integration suites for each. Shared contract extended and all three
frontends updated; code indexes, domain docs, backend guidelines and the
migration tracker synced.

Verification: cargo test -p vmall-api green twice consecutively; mall, admin
and shop-admin builds pass; browser smoke on every new surface; openspec
validate --all --strict green (33 passed).

The three changes share the @vmall/shared contract, the mall mock adapter and
per-app locale/nav files, so they are committed together to keep every commit
buildable.
2026-09-25 15:25:29 +00:00

84 lines
2.8 KiB
Vue

<script setup lang="ts">
definePageMeta({ middleware: "auth" });
const route = useRoute();
const session = useSessionStore();
const { t } = useI18n();
const menuGroups = computed(() => [
{
title: t("user.orderCenter"),
items: [
{ label: t("user.myOrders"), to: "/user/orders" },
{ label: t("user.pendingReviews"), to: "/user/reviews" },
{ label: t("user.addresses"), to: "/user/addresses" },
{ label: t("user.coupons"), to: "/user/coupons" },
{ label: t("user.aftersalesTitle"), to: "/user/aftersales" },
{ label: t("messaging.title"), to: "/user/messages" },
],
},
{
title: t("user.memberCenter"),
items: [
{ label: t("user.dashboard"), to: "/user" },
{ label: t("membership.entry"), to: "/user/membership" },
{ label: t("wallet.title"), to: "/user/wallet" },
{ label: t("user.favorites"), to: "/user/favorites" },
{ label: t("user.invoices"), to: "/user/invoices" },
],
},
]);
function isActive(to: string): boolean {
return to === "/user"
? route.path === "/user"
: route.path === to || route.path.startsWith(`${to}/`);
}
</script>
<template>
<div class="bg-bg text-text min-h-screen py-8 pb-16 font-sans">
<div
class="max-w-mall mx-auto grid w-full gap-5 px-4 lg:grid-cols-[234px_minmax(0,1fr)] lg:items-start"
>
<VCard :padded="false" class="min-h-[560px] pb-5">
<div class="border-border flex items-center gap-3 border-b px-4 py-5">
<img
class="h-[54px] w-[54px] rounded-full object-cover"
src="/mock/avatar.svg"
:alt="t('user.title')"
/>
<div class="min-w-0">
<!-- Session lives in localStorage, so the name is unknown at SSR time. -->
<ClientOnly
><strong class="text-text block truncate text-sm">{{
session.user?.display_name
}}</strong></ClientOnly
>
<NuxtLink
class="text-muted hover:text-primary mt-2 inline-block text-xs no-underline"
to="/user"
>{{ t("user.editProfile") }}</NuxtLink
>
</div>
</div>
<nav v-for="group in menuGroups" :key="group.title" class="pt-[18px]">
<h2 class="text-muted mb-2 px-5 text-[13px] font-semibold">{{ group.title }}</h2>
<NuxtLink
v-for="item in group.items"
:key="item.to"
:to="item.to"
class="text-text hover:bg-primary-soft hover:text-primary block border-l-[3px] border-transparent px-5 py-2.5 text-[13px] no-underline"
:class="isActive(item.to) ? 'border-primary bg-primary-soft text-primary' : ''"
>
{{ item.label }}
</NuxtLink>
</nav>
</VCard>
<main class="w-full min-w-0">
<NuxtPage />
</main>
</div>
</div>
</template>