234 lines
10 KiB
Vue
234 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { X } from '@lucide/vue';
|
|
import { ref, computed, watch } from 'vue';
|
|
import { formatRupiah } from '@/lib/rupiah';
|
|
import type { Product, Variant, Price, MediaItem } from '@/types/product';
|
|
|
|
const props = defineProps<{
|
|
product: Product | null;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
close: [];
|
|
addToCart: [product: Product, variant: Variant, price: Price];
|
|
}>();
|
|
|
|
const activeVariant = ref<Variant | null>(null);
|
|
const activePriceType = ref<string>('retail');
|
|
const activeImageIndex = ref(0);
|
|
|
|
const allImages = computed<MediaItem[]>(() => {
|
|
if (!props.product) {
|
|
return [];
|
|
}
|
|
|
|
return props.product.variants.flatMap(v => v.images);
|
|
});
|
|
|
|
const mainImage = computed(() => {
|
|
if (allImages.value.length > 0) {
|
|
const img = allImages.value[activeImageIndex.value];
|
|
|
|
if (img) {
|
|
return img.url;
|
|
}
|
|
}
|
|
|
|
return getFallbackImage();
|
|
});
|
|
|
|
watch(() => props.product, (newProduct) => {
|
|
if (newProduct) {
|
|
activeVariant.value = newProduct.variants[0] || null;
|
|
activePriceType.value = 'retail';
|
|
activeImageIndex.value = 0;
|
|
} else {
|
|
activeVariant.value = null;
|
|
}
|
|
});
|
|
|
|
const selectedPrice = computed(() => {
|
|
if (!activeVariant.value) {
|
|
return null;
|
|
}
|
|
|
|
return activeVariant.value.prices.find(p => p.type === activePriceType.value) || activeVariant.value.prices[0] || null;
|
|
});
|
|
|
|
const getFallbackImage = () => {
|
|
if (!props.product) {
|
|
return '';
|
|
}
|
|
|
|
const firstCat = props.product.categories?.[0]?.slug || '';
|
|
const fallbacks: Record<string, string[]> = {
|
|
'daster': [
|
|
'https://images.unsplash.com/photo-1595777457583-95e059d581b8?w=800&auto=format&fit=crop&q=80',
|
|
],
|
|
'setelan-celana': [
|
|
'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=800&auto=format&fit=crop&q=80',
|
|
],
|
|
'atasan': [
|
|
'https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=800&auto=format&fit=crop&q=80',
|
|
],
|
|
'bawahan': [
|
|
'https://images.unsplash.com/photo-1583496661160-fb4886b36ca7?w=800&auto=format&fit=crop&q=80',
|
|
],
|
|
'busui': [
|
|
'https://images.unsplash.com/photo-1509631179647-0177331693ae?w=800&auto=format&fit=crop&q=80',
|
|
]
|
|
};
|
|
|
|
const categoryUrls = fallbacks[firstCat] || [
|
|
'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=800&auto=format&fit=crop&q=80',
|
|
];
|
|
|
|
return categoryUrls[0];
|
|
};
|
|
|
|
const handleAddToCart = () => {
|
|
if (props.product && activeVariant.value && selectedPrice.value) {
|
|
emit('addToCart', props.product, activeVariant.value, selectedPrice.value);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="product"
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm transition-opacity duration-300"
|
|
@click.self="emit('close')">
|
|
<div
|
|
class="w-full max-w-3xl bg-[#FDFDFC] rounded-3xl p-6 md:p-8 shadow-2xl flex flex-col md:flex-row gap-8 max-h-[90vh] overflow-y-auto border border-amber-100/30 scrollbar-thin">
|
|
<!-- Image Side -->
|
|
<div class="w-full md:w-1/2 flex flex-col space-y-3">
|
|
<div
|
|
class="aspect-3/4 rounded-2xl overflow-hidden bg-slate-50 border border-slate-200/50 shadow-sm relative">
|
|
<img :src="mainImage" :alt="product.name" class="w-full h-full object-cover" />
|
|
</div>
|
|
|
|
<!-- Image Thumbnails -->
|
|
<div v-if="allImages.length > 1" class="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
|
|
<button v-for="(img, idx) in allImages" :key="img.id" @click="activeImageIndex = idx" :class="[
|
|
'shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 transition-all cursor-pointer',
|
|
activeImageIndex === idx
|
|
? 'border-amber-500 shadow-md shadow-amber-200/40'
|
|
: 'border-slate-200/60 opacity-60 hover:opacity-100'
|
|
]">
|
|
<img :src="img.thumb_url || img.url" :alt="`Gambar ${idx + 1}`"
|
|
class="w-full h-full object-cover" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Side -->
|
|
<div class="w-full md:w-1/2 flex flex-col justify-between space-y-6 text-left">
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<span class="text-[10px] font-bold uppercase tracking-widest text-amber-600">
|
|
{{product.categories.map(c => c.name).join(', ')}}
|
|
</span>
|
|
<h3 class="text-2xl font-serif mt-0.5 text-slate-800">{{ product.name }}</h3>
|
|
</div>
|
|
<button @click="emit('close')"
|
|
class="p-1.5 rounded-full hover:bg-slate-100 transition-colors cursor-pointer">
|
|
<X class="w-5 h-5 text-slate-500" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="space-y-1.5">
|
|
<h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Deskripsi</h4>
|
|
<p
|
|
class="text-xs text-slate-500 font-light leading-relaxed max-h-32 overflow-y-auto scrollbar-thin pr-1">
|
|
{{ product.description || `Pakaian batik modern dan nyaman hasil karya perajin
|
|
terbaik kami.Menggunakan serat kain pilihan yang awet dan menyejukkan kulit.` }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Variant Select -->
|
|
<div v-if="product.variants.length > 0" class="space-y-2">
|
|
<h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Pilih Ukuran /
|
|
Varian</h4>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
<button v-for="variant in product.variants" :key="variant.id"
|
|
@click="activeVariant = variant" :class="[
|
|
'px-3 py-1.5 rounded-xl text-xs font-semibold uppercase tracking-wider border cursor-pointer transition-all',
|
|
activeVariant?.id === variant.id
|
|
? 'bg-amber-600 text-white border-transparent shadow-md shadow-amber-200/30'
|
|
: 'bg-transparent text-slate-600 border-slate-200/60'
|
|
]">
|
|
{{ variant.name }}
|
|
<span class="text-[9px] opacity-70 ml-1">({{ variant.stock }} pcs)</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Price Tiers -->
|
|
<div v-if="activeVariant && activeVariant.prices.length > 0" class="space-y-2">
|
|
<h4 class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Saluran Harga
|
|
(Grosir/Eceran)</h4>
|
|
<div class="grid grid-cols-2 gap-1.5 max-h-36 overflow-y-auto scrollbar-thin pr-1">
|
|
<button v-for="price in activeVariant.prices" :key="price.id"
|
|
@click="activePriceType = price.type" :class="[
|
|
'px-3 py-2 text-left rounded-xl border transition-all cursor-pointer',
|
|
activePriceType === price.type
|
|
? 'border-amber-500 bg-amber-500/5/5'
|
|
: 'border-slate-200/60 hover'
|
|
]">
|
|
<span class="block text-[8px] uppercase tracking-wider font-bold text-slate-400">
|
|
{{ price.type_label }}
|
|
</span>
|
|
<span class="block text-xs font-bold mt-0.5 text-amber-600">
|
|
{{ `Rp ${formatRupiah(price.price)}` }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cart Call to Action -->
|
|
<div class="pt-4 border-t border-slate-100/50 space-y-4">
|
|
<div class="flex justify-between items-center text-xs">
|
|
<div>
|
|
<span class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Harga
|
|
Terpilih</span>
|
|
<div class="text-xl font-bold text-amber-600 mt-0.5">
|
|
{{ selectedPrice ? `Rp ${formatRupiah(selectedPrice.price)}` : 'Pilih ukuran' }}
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="text-[10px] uppercase font-bold tracking-widest text-slate-400">Sisa
|
|
Stok</span>
|
|
<div class="font-semibold text-slate-700 mt-0.5">
|
|
{{ activeVariant ? `${activeVariant.stock} pcs` : 'Pilih ukuran' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button v-if="activeVariant && selectedPrice" @click="handleAddToCart"
|
|
:disabled="activeVariant.stock <= 0" :class="[
|
|
'w-full py-3.5 text-xs font-bold uppercase tracking-widest rounded-xl transition-all cursor-pointer shadow-md',
|
|
activeVariant.stock > 0
|
|
? 'bg-amber-600 text-white hover:bg-amber-500 shadow-amber-200/50'
|
|
: 'bg-slate-100 text-slate-400 cursor-not-allowed shadow-none'
|
|
]">
|
|
{{ activeVariant.stock > 0 ? 'Masukkan ke Keranjang' : 'Stok Habis' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|