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

<script setup lang="ts">
import type { AddressBookEntry, AddressInput } from "@vmall/shared";

definePageMeta({ middleware: "auth" });

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

const rows = ref<AddressBookEntry[]>([]);
const loading = ref(true);
const open = ref(false);
const saving = ref(false);
const editingId = ref<string | null>(null);

interface AddressForm {
  recipient: string;
  phone: string;
  country: string;
  region: string;
  city: string;
  line1: string;
  postal_code: string;
  is_default: boolean;
}

const form = reactive<AddressForm>({
  recipient: "",
  phone: "",
  country: "US",
  region: "",
  city: "",
  line1: "",
  postal_code: "",
  is_default: false,
});

const errorKey = ref("");

const modalTitle = computed(() => (editingId.value ? t("user.editAddress") : t("user.addAddress")));

async function load(): Promise<void> {
  loading.value = true;
  errorKey.value = "";
  try {
    rows.value = await $api.listMyAddresses();
  } catch {
    errorKey.value = "user.loadFailed";
  } finally {
    loading.value = false;
  }
}

onMounted(() => void load());

function resetForm(): void {
  form.recipient = "";
  form.phone = "";
  form.country = "US";
  form.region = "";
  form.city = "";
  form.line1 = "";
  form.postal_code = "";
  form.is_default = false;
  errorKey.value = "";
}

function openAdd(): void {
  editingId.value = null;
  resetForm();
  open.value = true;
}

function openEdit(row: AddressBookEntry): void {
  editingId.value = row.id;
  form.recipient = row.recipient;
  form.phone = row.phone;
  form.country = row.country;
  form.region = row.region;
  form.city = row.city;
  form.line1 = row.line1;
  form.postal_code = row.postal_code;
  form.is_default = row.is_default;
  errorKey.value = "";
  open.value = true;
}

async function setDefault(id: string): Promise<void> {
  try {
    await $api.setDefaultAddress(id);
    await load();
  } catch {
    errorKey.value = "user.saveFailed";
  }
}

async function remove(row: AddressBookEntry): Promise<void> {
  try {
    rows.value = await $api.deleteAddress(row.id);
  } catch {
    errorKey.value = "user.saveFailed";
  }
}

async function save(): Promise<void> {
  if (!form.recipient || !form.phone || !form.country || !form.region || !form.city || !form.line1 || !form.postal_code) {
    errorKey.value = "user.validationRequired";
    return;
  }
  const input: AddressInput = {
    recipient: form.recipient,
    phone: form.phone,
    country: form.country,
    region: form.region,
    city: form.city,
    line1: form.line1,
    postal_code: form.postal_code,
    is_default: form.is_default,
  };
  saving.value = true;
  errorKey.value = "";
  try {
    if (editingId.value) {
      await $api.updateAddress(editingId.value, input);
    } else {
      await $api.createAddress(input);
    }
    open.value = false;
    await load();
  } catch {
    errorKey.value = "user.saveFailed";
  } finally {
    saving.value = false;
  }
}
</script>

<template>
  <section class="mpanel addresses-panel">
    <h1 class="mpanel-title">
      {{ t("user.addresses") }}
      <button class="mbtn red" type="button" @click="openAdd">{{ t("user.addAddress") }}</button>
    </h1>
    <UiEmptyState v-if="!loading && rows.length === 0" :text="t('user.noAddresses')" />
    <table v-else class="mtable">
      <thead>
        <tr>
          <th>{{ t("user.recipient") }}</th>
          <th>{{ t("user.phone") }}</th>
          <th>{{ t("user.country") }}</th>
          <th>{{ t("user.region") }}</th>
          <th>{{ t("user.city") }}</th>
          <th>{{ t("user.line1") }}</th>
          <th>{{ t("user.postalCode") }}</th>
          <th>{{ t("common.status") }}</th>
          <th>{{ t("common.actions") }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td>{{ row.recipient }}</td>
          <td>{{ row.phone }}</td>
          <td>{{ row.country }}</td>
          <td>{{ row.region }}</td>
          <td>{{ row.city }}</td>
          <td>{{ row.line1 }}</td>
          <td>{{ row.postal_code }}</td>
          <td>
            <span v-if="row.is_default" class="default-tag">{{ t("user.defaultAddress") }}</span>
            <button v-else class="mbtn" type="button" @click="setDefault(row.id)">{{ t("user.setDefault") }}</button>
          </td>
          <td>
            <button class="mbtn" type="button" @click="openEdit(row)">{{ t("common.edit") }}</button>
            <button class="mbtn" type="button" @click="remove(row)">{{ t("common.delete") }}</button>
          </td>
        </tr>
      </tbody>
    </table>

    <UiModal :open="open" :title="modalTitle" @close="open = false">
      <div class="form-grid">
        <label>
          <span>{{ t("user.recipient") }}</span>
          <input v-model.trim="form.recipient" class="minput" type="text" />
        </label>
        <label>
          <span>{{ t("user.phone") }}</span>
          <input v-model.trim="form.phone" class="minput" type="text" />
        </label>
        <label>
          <span>{{ t("user.country") }}</span>
          <input v-model.trim="form.country" class="minput" type="text" />
        </label>
        <label>
          <span>{{ t("user.region") }}</span>
          <input v-model.trim="form.region" class="minput" type="text" />
        </label>
        <label>
          <span>{{ t("user.city") }}</span>
          <input v-model.trim="form.city" class="minput" type="text" />
        </label>
        <label class="full-line">
          <span>{{ t("user.line1") }}</span>
          <input v-model.trim="form.line1" class="minput" type="text" />
        </label>
        <label>
          <span>{{ t("user.postalCode") }}</span>
          <input v-model.trim="form.postal_code" class="minput" type="text" />
        </label>
        <label class="checkbox">
          <input v-model="form.is_default" type="checkbox" />
          <span>{{ t("user.defaultAddress") }}</span>
        </label>
      </div>
      <p v-if="errorKey" class="error">{{ t(errorKey) }}</p>
      <template #footer>
        <button class="mbtn" type="button" @click="open = false">{{ t("common.cancel") }}</button>
        <button class="mbtn red" type="button" :disabled="saving" @click="save">{{ t("user.saveAddress") }}</button>
      </template>
    </UiModal>
  </section>
</template>

<style scoped>
.addresses-panel {
  min-height: 560px;
}
.default-tag {
  color: var(--mall-red);
  font-size: 12px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-grid label > span {
  display: block;
  margin-bottom: 6px;
  color: var(--mall-muted);
  font-size: 12px;
}
.full-line {
  grid-column: 1 / -1;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkbox > span {
  margin: 0;
}
.error {
  margin-top: 8px;
  color: var(--mall-red);
  font-size: 12px;
}
@media (max-width: 760px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}
</style>