54 lines
1.9 KiB
Vue
54 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { Product } from "@vmall/shared";
|
|
import { t as pick } from "@vmall/shared";
|
|
import { lowestSku } from "~/utils/product";
|
|
|
|
const props = defineProps<{ product: Product }>();
|
|
const { locale } = useI18n();
|
|
|
|
const sku = computed(() => lowestSku(props.product));
|
|
// Reported by the catalog API from paid orders; no reviews figure exists.
|
|
const sold = computed(() => props.product.sold_count);
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink
|
|
:to="`/goods/${product.slug}`"
|
|
class="group block h-full text-inherit no-underline transition-shadow duration-200 hover:-translate-y-0.5 hover:shadow-lg"
|
|
>
|
|
<VCard :padded="false" class="border-border bg-surface h-full overflow-hidden border">
|
|
<div class="flex items-center justify-center p-4">
|
|
<img
|
|
:src="product.images[0] || '/mock/product-1.svg'"
|
|
:alt="pick(product.name, locale)"
|
|
loading="lazy"
|
|
class="h-[180px] w-[180px] object-contain"
|
|
/>
|
|
</div>
|
|
<div class="px-[14px] pb-[14px]">
|
|
<p
|
|
class="group-hover:text-primary m-0 h-[37px] overflow-hidden text-[13px] leading-[1.4] transition-colors"
|
|
>
|
|
{{ pick(product.name, locale) }}
|
|
</p>
|
|
<p
|
|
class="text-muted/70 m-0 mt-1 mb-2 overflow-hidden text-[12px] text-ellipsis whitespace-nowrap"
|
|
>
|
|
{{ pick(product.description, locale) }}
|
|
</p>
|
|
<p class="m-0">
|
|
<span v-if="sku" class="text-primary mr-2 text-[16px] font-bold">
|
|
<PriceText :amount-minor="sku.price_minor" :currency="sku.currency" />
|
|
</span>
|
|
<s v-if="sku" class="text-muted/60 text-[12px]">
|
|
<PriceText :amount-minor="sku.price_minor + 10000" :currency="sku.currency" />
|
|
</s>
|
|
</p>
|
|
<p class="text-muted/70 m-0 mt-1.5 text-[12px]">
|
|
{{ $t("product.salesCount", { n: sold }) }}
|
|
</p>
|
|
</div>
|
|
</VCard>
|
|
</NuxtLink>
|
|
</template>
|