vmall/apps/mall/pages/user/membership.vue

<script setup lang="ts">
import type { GrowthLogEntry, MembershipStatus } from "@vmall/shared";
import { t as localizedText } from "@vmall/shared";

definePageMeta({ middleware: "auth" });

const { locale, t } = useI18n();
const { $api } = useNuxtApp();

const status = ref<MembershipStatus | null>(null);
const logs = ref<GrowthLogEntry[]>([]);
const logPage = ref(1);
const logTotal = ref(0);
const logPerPage = ref(20);
const loading = ref(true);
const error = ref("");
const logError = ref("");

const REASON_KEYS: Record<string, string> = {
  order_complete: "membership.reason_order_complete",
};

function levelName(name: Record<string, string>): string {
  return localizedText(name, locale.value);
}

function reasonLabel(reason: string): string {
  const key = REASON_KEYS[reason];
  return key ? t(key) : reason;
}

async function loadStatus(): Promise<void> {
  status.value = await $api.getMembership();
}

async function loadLogs(page: number): Promise<void> {
  const result = await $api.listGrowthLogs(page);
  logs.value = result.items;
  logPage.value = result.page;
  logTotal.value = result.total;
  logPerPage.value = result.per_page;
}

async function changeLogPage(page: number): Promise<void> {
  logError.value = "";
  try {
    await loadLogs(page);
  } catch {
    logError.value = t("membership.historyFailed");
  }
}

async function load(): Promise<void> {
  loading.value = true;
  error.value = "";
  try {
    await Promise.all([loadStatus(), loadLogs(1)]);
  } catch {
    error.value = t("membership.loadFailed");
  } finally {
    loading.value = false;
  }
}

/**
 * Progress inside the current band: from the level's own threshold to the next
 * one. Below the lowest threshold the band starts at zero. Growth is a plain
 * integer, so the percentage is integer arithmetic with one rounding.
 */
const progressPercent = computed<number | null>(() => {
  const current = status.value;
  if (!current || !current.next_level) return null;
  const base = current.level?.growth_threshold ?? 0;
  const span = current.next_level.growth_threshold - base;
  if (span <= 0) return null;
  const within = Math.min(Math.max(current.growth_total - base, 0), span);
  return Math.round((within / span) * 100);
});

onMounted(() => void load());
</script>

<template>
  <VCard class="min-h-[560px]">
    <h1 class="text-text mb-4 text-xl font-bold">{{ t("membership.title") }}</h1>
    <p
      v-if="error"
      role="alert"
      class="border-danger/30 bg-danger/10 text-danger mb-4 border px-3.5 py-2.5 text-sm"
    >
      {{ error }}
    </p>
    <div v-else-if="loading" class="text-muted py-10">{{ t("common.loading") }}</div>
    <p v-else-if="!status" class="text-muted py-10">{{ t("membership.loadFailed") }}</p>
    <template v-else>
      <div class="mb-6 grid gap-3 sm:grid-cols-2">
        <div class="border-border bg-primary-soft border p-[18px]">
          <span class="text-muted block text-xs">{{ t("membership.currentLevel") }}</span>
          <div v-if="status.level" class="mt-2.5 flex items-center gap-2.5">
            <span
              class="border-primary/40 text-primary flex h-9 w-9 items-center justify-center rounded-full border text-sm font-bold"
              >{{ status.level.icon }}</span
            >
            <strong class="text-primary text-xl">{{ levelName(status.level.name) }}</strong>
          </div>
          <strong v-else class="text-muted mt-2.5 block text-xl">{{
            t("membership.noLevel")
          }}</strong>
          <p v-if="status.level" class="text-muted mt-2 mb-0 text-xs">
            {{ t("membership.benefits") }}: {{ levelName(status.level.benefits) }}
          </p>
          <p v-else-if="status.next_level" class="text-muted mt-2 mb-0 text-xs">
            {{
              t("membership.noLevelHint", {
                threshold: status.next_level.growth_threshold,
                unit: t("membership.growthUnit"),
                level: levelName(status.next_level.name),
              })
            }}
          </p>
        </div>
        <div class="border-border bg-bg border p-[18px]">
          <span class="text-muted block text-xs">{{ t("membership.growthTotal") }}</span>
          <strong class="text-primary mt-2.5 block text-xl">{{ status.growth_total }}</strong>
          <span class="text-muted mt-1 block text-xs">{{ t("membership.growthUnit") }}</span>
        </div>
      </div>

      <section class="border-border mb-6 rounded-md border p-4">
        <template v-if="status.next_level">
          <h2 class="text-text m-0 text-lg font-semibold">
            {{ t("membership.progressTitle", { level: levelName(status.next_level.name) }) }}
          </h2>
          <p class="text-muted mt-1 mb-3 text-xs">
            {{
              t("membership.progressThreshold", {
                current: status.growth_total,
                threshold: status.next_level.growth_threshold,
                unit: t("membership.growthUnit"),
              })
            }}
          </p>
          <div
            class="bg-border h-2.5 w-full overflow-hidden rounded-full"
            role="progressbar"
            :aria-valuenow="progressPercent ?? 0"
            aria-valuemin="0"
            aria-valuemax="100"
            :aria-label="t('membership.progressTitle', { level: levelName(status.next_level.name) })"
          >
            <div
              class="bg-primary h-full rounded-full transition-all"
              :style="{ width: `${progressPercent ?? 0}%` }"
            />
          </div>
          <p class="text-primary mt-2 mb-0 text-xs font-medium">
            {{
              t("membership.remaining", {
                remaining: status.next_level.remaining,
                unit: t("membership.growthUnit"),
              })
            }}
          </p>
        </template>
        <template v-else-if="status.level">
          <h2 class="text-text m-0 text-lg font-semibold">{{ t("membership.topLevel") }}</h2>
          <p class="text-muted mt-1 mb-0 text-xs">{{ t("membership.topLevelHint") }}</p>
        </template>
        <p v-else class="text-muted m-0 text-sm">{{ t("membership.noLevel") }}</p>
      </section>

      <section>
        <h2 class="text-text mb-3 text-lg font-semibold">{{ t("membership.historyTitle") }}</h2>
        <p v-if="logError" role="alert" class="text-danger mb-3 text-sm">{{ logError }}</p>
        <UiEmptyState v-if="logs.length === 0" :text="t('membership.historyEmpty')" />
        <template v-else>
          <VTable>
            <thead>
              <tr>
                <th>{{ t("membership.historyDate") }}</th>
                <th>{{ t("membership.historyReason") }}</th>
                <th class="text-right!">{{ t("membership.historyDelta") }}</th>
                <th class="text-right!">{{ t("membership.historyTotal") }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="entry in logs" :key="entry.id">
                <td class="text-muted text-xs whitespace-nowrap">
                  {{ entry.created_at.slice(0, 10) }}
                </td>
                <td>{{ reasonLabel(entry.reason) }}</td>
                <td
                  class="text-right font-semibold"
                  :class="entry.delta < 0 ? 'text-danger' : 'text-success'"
                >
                  {{ entry.delta < 0 ? "−" : "+" }}{{ Math.abs(entry.delta) }}
                </td>
                <td class="text-right">{{ entry.growth_total }}</td>
              </tr>
            </tbody>
          </VTable>
          <UiPagination
            :page="logPage"
            :total="logTotal"
            :per-page="logPerPage"
            @change="changeLogPage"
          />
        </template>
      </section>
    </template>
  </VCard>
</template>