Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Produk.vue

Browse Source
This commit is contained in:
dhilanradya 2025-08-28 14:35:04 +07:00
parent 0bb5b23ead
commit f0f570be21
1 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
resources/js/pages/Produk.vue
View File

@ -42,17 +42,18 @@
<!-- Overlay Detail Produk --> <!-- Overlay Detail Produk -->
<!-- Overlay Detail Produk --> <!-- Overlay Detail Produk -->
<!-- Overlay Detail Produk -->
<div <div
v-if="showOverlay" v-if="showOverlay"
class="fixed inset-0 bg-black/30 flex justify-center items-center z-50" class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
@click.self="closeOverlay" @click.self="closeOverlay"
> >
<div <div
class="bg-white rounded-lg shadow-lg p-6 w-[400px] border-2 border-[#e6d3b3] relative flex flex-col items-center" class="bg-white rounded-lg shadow-lg p-6 w-[450px] border-2 border-[#e6d3b3] relative flex flex-col items-center"
@mouseleave="closeOverlay"
> >
<!-- Foto Produk dengan Slider --> <!-- Foto Produk -->
<div class="relative w-60 h-60 border border-[#e6d3b3] flex items-center justify-center mb-4 overflow-hidden rounded"> <div class="relative w-72 h-72 border border-[#e6d3b3] flex items-center justify-center mb-3 overflow-hidden rounded">
<img <img
v-if="detail.foto && detail.foto.length > 0" v-if="detail.foto && detail.foto.length > 0"
:src="detail.foto[currentFotoIndex].url" :src="detail.foto[currentFotoIndex].url"
@ -63,21 +64,14 @@
<!-- Stok (pcs) pojok kiri atas --> <!-- Stok (pcs) pojok kiri atas -->
<div class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded"> <div class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded">
{{ detail.item_count }} pcs {{ detail.items_count }} pcs
</div>
<!-- Nama Produk di bawah -->
<div
class="absolute bottom-0 w-full bg-black/70 text-white text-center text-sm py-1"
>
{{ detail.nama }}
</div> </div>
<!-- Tombol Prev --> <!-- Tombol Prev -->
<button <button
v-if="detail.foto && detail.foto.length > 1" v-if="detail.foto && detail.foto.length > 1"
@click.stop="prevFoto" @click.stop="prevFoto"
class="absolute left-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded" class="absolute left-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
> >
‹ ‹
</button> </button>
@ -85,40 +79,46 @@
<button <button
v-if="detail.foto && detail.foto.length > 1" v-if="detail.foto && detail.foto.length > 1"
@click.stop="nextFoto" @click.stop="nextFoto"
class="absolute right-2 bg-white/70 hover:bg-white text-black px-2 py-1 rounded" class="absolute right-2 bg-white/80 hover:bg-white text-black px-2 py-1 rounded-full shadow"
> >
› ›
</button> </button>
</div> </div>
<!-- Nama Produk -->
<p class="text-lg font-semibold text-center mb-4">{{ detail.nama }}</p>
<!-- Detail Harga & Info --> <!-- Detail Harga & Info -->
<div class="grid grid-cols-2 gap-2 text-sm mb-4 w-full"> <div class="grid grid-cols-2 gap-y-2 gap-x-4 text-sm w-full mb-6">
<!-- harga beli dihapus --> <p class="col-span-1">Harga Jual :</p>
<p>Harga Jual : Rp. {{ formatNumber(detail.harga_jual) }}</p> <p class="col-span-1 text-right">Rp. {{ formatNumber(detail.harga_jual) }}</p>
<p class="text-right">{{ detail.kadar }} K</p>
<p class="col-span-2 text-center"> <p class="col-span-1">Kadar :</p>
Berat : {{ detail.berat }} gram <p class="col-span-1 text-right">{{ detail.kadar }} K</p>
</p>
<p class="col-span-2"> <p class="col-span-1">Berat :</p>
Harga/gram : Rp. {{ formatNumber(detail.harga_per_gram) }} <p class="col-span-1 text-right">{{ detail.berat }} gram</p>
</p>
<p class="col-span-1">Harga/gram :</p>
<p class="col-span-1 text-right">Rp. {{ formatNumber(detail.harga_per_gram) }}</p>
</div> </div>
<!-- Tombol Aksi --> <!-- Tombol Aksi -->
<div class="flex justify-between w-full"> <div class="flex w-full gap-3">
<button class="bg-yellow-400 text-black px-4 py-2 rounded font-bold"> <button class="flex-1 bg-yellow-400 text-black py-2 rounded font-bold">
Ubah Ubah
</button> </button>
<button class="bg-green-400 text-black px-4 py-2 rounded font-bold"> <button class="flex-1 bg-green-400 text-black py-2 rounded font-bold">
Tambah Tambah
</button> </button>
<button class="bg-red-500 text-white px-4 py-2 rounded font-bold"> <button class="flex-1 bg-red-500 text-white py-2 rounded font-bold">
Hapus Hapus
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</mainLayout> </mainLayout>
</template> </template>
@ -170,14 +170,12 @@ const filteredProducts = computed(() => {
}); });
// buka overlay // buka overlay
async function openOverlay(id) { function openOverlay(id) {
try { const produk = products.value.find((p) => p.id === id);
const res = await axios.get(`http://127.0.0.1:8000/api/produk/${id}`); if (produk) {
detail.value = res.data; detail.value = produk;
currentFotoIndex.value = 0; // reset ke foto pertama currentFotoIndex.value = 0; // reset ke foto pertama
showOverlay.value = true; showOverlay.value = true;
} catch (error) {
console.error("Gagal fetch detail produk:", error);
} }
} }