89 lines
3.6 KiB
Vue
89 lines
3.6 KiB
Vue
<script setup lang="ts">
|
||
import { t as pick } from "@vmall/shared";
|
||
|
||
const { locale, t } = useI18n();
|
||
const { $api } = useNuxtApp();
|
||
|
||
// Shared with the order surfaces, which resolve shop ids to names from it.
|
||
const { data: shops } = await useAsyncData("shops", () => $api.listShops(), { default: () => [] });
|
||
const stores = computed(() => shops.value);
|
||
|
||
const breadcrumb = computed(() => [
|
||
{ label: t("stores.breadcrumbHome"), to: "/" },
|
||
{ label: t("stores.directory") },
|
||
]);
|
||
</script>
|
||
|
||
<template>
|
||
<div class="bg-bg text-text min-h-screen pb-16 font-sans">
|
||
<UiBreadcrumb :items="breadcrumb" />
|
||
<section class="max-w-mall mx-auto w-full px-4">
|
||
<VCard :padded="false" class="overflow-hidden">
|
||
<header
|
||
class="border-border bg-bg flex items-center justify-between border-b px-[18px] py-3.5"
|
||
>
|
||
<h1 class="border-primary m-0 border-l-[3px] pl-2.5 text-base font-medium">
|
||
{{ t("stores.directory") }}
|
||
</h1>
|
||
</header>
|
||
<div v-if="stores.length" class="divide-border divide-y">
|
||
<article
|
||
v-for="store in stores"
|
||
:key="store.id"
|
||
class="bg-surface hover:bg-bg flex min-h-[126px] items-center gap-0 px-[22px] py-5 max-sm:flex-wrap max-sm:gap-3"
|
||
>
|
||
<NuxtLink
|
||
:to="`/stores/${store.slug}`"
|
||
class="border-border bg-surface flex h-20 w-20 shrink-0 items-center justify-center border"
|
||
>
|
||
<img
|
||
v-if="store.logo"
|
||
class="h-[72px] w-[72px] object-contain"
|
||
:src="store.logo"
|
||
:alt="pick(store.name, locale)"
|
||
loading="lazy"
|
||
/>
|
||
<span
|
||
v-else
|
||
class="bg-bg text-muted flex h-full w-full items-center justify-center text-[28px] font-bold uppercase"
|
||
aria-hidden="true"
|
||
>{{ pick(store.name, locale).slice(0, 1) }}</span
|
||
>
|
||
</NuxtLink>
|
||
<div class="min-w-0 flex-1 px-7 max-sm:w-[calc(100%-100px)] max-sm:px-0">
|
||
<NuxtLink
|
||
:to="`/stores/${store.slug}`"
|
||
class="text-text hover:text-primary block text-base font-bold no-underline"
|
||
>{{ pick(store.name, locale) }}</NuxtLink
|
||
>
|
||
<p v-if="store.company" class="text-muted mt-2 text-[13px]">{{ store.company }}</p>
|
||
<p
|
||
v-if="store.region || store.address"
|
||
class="text-muted mt-2 flex gap-6 text-xs max-sm:flex-col max-sm:gap-1"
|
||
>
|
||
<span v-if="store.region">{{ t("stores.region") }}：{{ store.region }}</span
|
||
><span v-if="store.address"
|
||
>{{ t("stores.address") }}：{{ pick(store.address, locale) }}</span
|
||
>
|
||
</p>
|
||
</div>
|
||
<div
|
||
class="text-primary w-[130px] text-center text-[13px] max-sm:ml-[100px] max-sm:w-auto"
|
||
>
|
||
{{ t("stores.positiveRate") }}
|
||
</div>
|
||
<div class="flex w-[145px] flex-col items-end gap-2.5 max-sm:ml-auto max-sm:w-auto">
|
||
<NuxtLink
|
||
:to="`/stores/${store.slug}`"
|
||
class="border-primary bg-primary hover:bg-primary-hover inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium text-white no-underline"
|
||
>{{ t("stores.visitStore") }}</NuxtLink
|
||
>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<UiEmptyState v-else :text="t('common.empty')" />
|
||
</VCard>
|
||
</section>
|
||
</div>
|
||
</template>
|