101 lines
3.8 KiB
Vue
101 lines
3.8 KiB
Vue
<script setup lang="ts">
|
|
const {
|
|
countryGroups,
|
|
activeCountryIdx,
|
|
loading,
|
|
loadingProducts,
|
|
countryPage,
|
|
visibleCountries,
|
|
canPrevCountry,
|
|
canNextCountry,
|
|
currentProducts,
|
|
fetchCategories,
|
|
selectCountry,
|
|
} = usePodProducts();
|
|
|
|
onMounted(() => {
|
|
fetchCategories();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="w-full flex flex-col items-center p-6 lg:p-10 bg-inkreach-homepage-2">
|
|
<div class="w-full max-w-7xl flex flex-col gap-8 lg:gap-10">
|
|
<div class="text-2xl md:text-4xl lg:text-5xl text-center">全球POD货盘</div>
|
|
|
|
<div v-if="loading" class="flex justify-center py-8">
|
|
<i class="fa-solid fa-spinner fa-spin text-3xl text-primary"></i>
|
|
</div>
|
|
|
|
<template v-else>
|
|
<div class="flex items-center justify-center gap-4 lg:gap-10 overflow-x-auto pb-2">
|
|
<button
|
|
v-if="canPrevCountry"
|
|
@click="countryPage--"
|
|
class="w-8 h-8 flex-shrink-0 flex items-center justify-center rounded-full border border-gray-300 text-gray-400 hover:border-primary hover:text-primary transition-colors"
|
|
>
|
|
<i class="fa-solid fa-chevron-left text-xs"></i>
|
|
</button>
|
|
<button
|
|
v-for="country in visibleCountries"
|
|
:key="country.id"
|
|
@click="selectCountry(countryGroups.indexOf(country))"
|
|
class="px-4 lg:px-6 py-2 rounded-lg text-base lg:text-xl transition-colors whitespace-nowrap"
|
|
:class="activeCountryIdx === countryGroups.indexOf(country)
|
|
? 'bg-primary text-white'
|
|
: 'bg-white text-gray-500 hover:text-gray-700'"
|
|
>
|
|
{{ country.name }}
|
|
</button>
|
|
<button
|
|
v-if="canNextCountry"
|
|
@click="countryPage++"
|
|
class="w-8 h-8 flex-shrink-0 flex items-center justify-center rounded-full border border-gray-300 text-gray-400 hover:border-primary hover:text-primary transition-colors"
|
|
>
|
|
<i class="fa-solid fa-chevron-right text-xs"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex justify-center items-center min-h-[200px]">
|
|
<div v-if="loadingProducts" class="flex justify-center py-8">
|
|
<i class="fa-solid fa-spinner fa-spin text-2xl text-primary"></i>
|
|
</div>
|
|
<div v-else class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 lg:gap-5 w-full">
|
|
<div
|
|
v-for="product in currentProducts"
|
|
:key="product.id"
|
|
class="bg-white rounded-lg overflow-hidden"
|
|
>
|
|
<div class="h-[14.25rem] flex items-center justify-center">
|
|
<img
|
|
v-if="product.image"
|
|
:src="product.image"
|
|
:alt="product.name"
|
|
class="max-w-full max-h-full"
|
|
loading="lazy"
|
|
/>
|
|
<div v-else class="flex items-center justify-center text-gray-300">
|
|
<i class="fa-solid fa-image text-4xl"></i>
|
|
</div>
|
|
</div>
|
|
<div class="w-full text-xs lg:text-sm h-8 lg:h-10 flex justify-center items-center px-1 truncate">
|
|
<div class="truncate">{{ product.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full flex justify-center py-6 lg:py-10">
|
|
<NuxtLink
|
|
to="/product-center"
|
|
class="inline-flex items-center gap-2 px-6 lg:px-8 py-2.5 lg:py-3 rounded-lg border-2 border-primary text-primary text-base lg:text-lg font-medium bg-white hover:bg-primary hover:text-white hover:shadow-lg transition-all duration-300 transform hover:-translate-y-0.5"
|
|
>
|
|
更多产品
|
|
<i class="fa-solid fa-arrow-right text-xs"></i>
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</section>
|
|
</template>
|