[update] ui struk (blm kelar)
This commit is contained in:
dhilanradya
parent
e60498d74e
commit
4ecca7d2c6
@ -2,11 +2,13 @@
|
||||
<div v-if="isOpen"
|
||||
class="text-D pt-serif-regular-italic fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]">
|
||||
<div class="bg-white w-[1224px] h-[528px] rounded-md shadow-lg relative overflow-hidden">
|
||||
<div class="bg-D h-8 w-full"></div>
|
||||
<div class="bg-yellow-500 h-8 w-full">
|
||||
<div class="bg-D h-6 w-full"></div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 text-sm flex flex-col h-full relative">
|
||||
<div class="relative flex items-center justify-between pb-2 mb-2">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="relative flex items-center justify-between top-0 pb-2 mb-2">
|
||||
<div class="flex flex-col gap-2 -mt-5">
|
||||
<p class="flex items-center gap-2">
|
||||
<i class="fab fa-instagram text-D text-xl"></i> tokomas_Jakartacitayam
|
||||
</p>
|
||||
@ -16,27 +18,30 @@
|
||||
<p class="flex items-center gap-2">
|
||||
<i class="fab fa-whatsapp text-D text-xl"></i> 08158851178
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="absolute inset-x-0 top-0 flex flex-col items-center">
|
||||
<img :src="logo" alt="Logo" class="h-15" />
|
||||
|
||||
<p class="mt-1 text-center">{{ getCurrentDate() }}</p>
|
||||
<p class=" text-sm">{{ generateTransactionCode() }}</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-[130px_1fr] gap-y-2 items-center relative z-10">
|
||||
<div class="text-right font-semibold pr-3">Nama Pembeli</div>
|
||||
<div class="absolute inset-x-0 top-[-48px] flex flex-col items-center">
|
||||
<img :src="logo" alt="Logo" class="h-40" />
|
||||
</div>
|
||||
|
||||
<inputField v-model="namaPembeli" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
|
||||
|
||||
<div class="text-right font-semibold pr-3">Nomor Telepon</div>
|
||||
<div class="grid grid-cols-[130px_1fr] gap-y-0 text-xs items-center -mt-5 relative z-10">
|
||||
<div class="text-right font-semibold pr-3">Tanggal :</div>
|
||||
|
||||
<p class="mt-1 text-left pl-2">{{ getCurrentDate() }}</p>
|
||||
|
||||
<div class="text-right font-semibold pr-3">Nama :</div>
|
||||
|
||||
<inputField v-model="namaPembeli" class="h-7 text-sm rounded bg-blue-200 w-full" />
|
||||
|
||||
<div class="text-right font-semibold pr-3">No.Hp :</div>
|
||||
|
||||
<inputField v-model="nomorTelepon" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
|
||||
|
||||
<div class="text-right font-semibold pr-3">Alamat</div>
|
||||
<div class="text-right font-semibold pr-3">Alamat :</div>
|
||||
|
||||
<inputField v-model="alamat" class="h-7 px-2 text-sm rounded bg-blue-200 w-full" />
|
||||
|
||||
@ -44,24 +49,26 @@
|
||||
</div>
|
||||
|
||||
|
||||
<p class="mt-1 text-sm">{{ generateTransactionCode() }}</p>
|
||||
|
||||
|
||||
<table class="w-full border-D mt-0 text-sm table-fixed">
|
||||
|
||||
<table class="w-full border-D text-sm table-fixed border-b">
|
||||
<thead>
|
||||
<tr class="border-b border-D">
|
||||
<th class="w-[260px] py-2 border-r border-D">Item</th>
|
||||
<tr class="border-b border-t border-D">
|
||||
<th class="w-[60px] border-r border-D">Jml</th>
|
||||
<th class="w-[330px] py-2 border-r border-D">Item</th>
|
||||
<th class="w-[70px] border-r border-D">Posisi</th>
|
||||
<th class="w-[60px] border-r border-D">Berat</th>
|
||||
<th class="w-[60px] border-r border-D">Kadar</th>
|
||||
<th class="w-[140px] border-r border-D">Harga Satuan</th>
|
||||
<th class="w-[60px] border-r border-D">Jumlah</th>
|
||||
<th class="w-[140px]">Total Harga</th>
|
||||
<th class="w-[210px]">Harga</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in pesananMinimal" :key="index" class="text-center">
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.harga_deal">1</span>
|
||||
</td>
|
||||
<td class="flex items-center gap-2 p-2 border-r border-D">
|
||||
<template v-if="item.produk?.foto?.[0]?.url">
|
||||
<img :src="item.produk.foto[0].url" class="w-12 h-12 object-cover" />
|
||||
@ -78,88 +85,77 @@
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.produk?.kadar">{{ item.produk.kadar }}k</span>
|
||||
</td>
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span>
|
||||
</td>
|
||||
<td class="border-r border-D">
|
||||
<span v-if="item.harga_deal">1</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
|
||||
|
||||
<tfoot>
|
||||
|
||||
<tr class="align-top border-t">
|
||||
<td colspan="2" rowspan="2" class="p-2 text-left align-top">
|
||||
<p class="font-semibold">PERHATIAN</p>
|
||||
<ol class="list-decimal ml-4 text-xs space-y-1">
|
||||
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
|
||||
<li>Barang yang dikembalikan menurut harga pasaran dan <br> dipotong ongkos bikin,
|
||||
barang rusak lain
|
||||
harga.</li>
|
||||
<li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
|
||||
<li>Surat ini harap dibawa pada saat menjual kembali.</li>
|
||||
</ol>
|
||||
</td>
|
||||
|
||||
<td colspan="2" rowspan="2" class="p-2 text-center align-top">
|
||||
<div class="flex flex-col items-center justify-center h-full">
|
||||
<p><strong>Sales</strong></p>
|
||||
<inputSelect v-model="selectedSales" :options="salesOptions"
|
||||
class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left" />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td colspan="2" class="p-2 text-right text-sm font-semibold align-top border-r">
|
||||
<div class="space-y-2">
|
||||
<p>Ongkos bikin</p>
|
||||
<p class="text-red-500 text-xs">diluar harga jual</p>
|
||||
<p>Total</p>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="p-2 text-sm align-top">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center">
|
||||
<p>Rp</p>
|
||||
<inputField v-model.number="ongkosBikin" type="number"
|
||||
class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full" />
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p>Rp</p>
|
||||
<p class="px-3 py-1 text-left text-sm w-full">{{ grandTotal.toLocaleString() }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="p-2 text-center">
|
||||
<div class="flex gap-2">
|
||||
<button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded w-full">Batal</button>
|
||||
<button @click="handleSimpan" class="bg-C text-white px-6 py-2 rounded w-full">Simpan</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<!-- Bagian bawah -->
|
||||
<div class="flex text-sm mt-2">
|
||||
<!-- PERHATIAN -->
|
||||
<div class="w-[40%] p-2 text-left">
|
||||
<p class="font-semibold">PERHATIAN</p>
|
||||
<ol class="list-decimal ml-4 text-xs space-y-1">
|
||||
<li>Berat barang telah ditimbang dan disaksikan oleh pembeli.</li>
|
||||
<li>Barang yang dikembalikan menurut harga pasaran dan dipotong ongkos bikin, barang rusak
|
||||
lain harga.</li>
|
||||
<li>Barang yang sudah dibeli berarti sudah diperiksa dan disetujui.</li>
|
||||
<li>Surat ini harap dibawa pada saat menjual kembali.</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- SALES -->
|
||||
<div class="w-[20%] p-2 flex flex-col items-center justify-center">
|
||||
<p><strong>Sales</strong></p>
|
||||
<inputSelect v-model="selectedSales" :options="salesOptions"
|
||||
class="mt-16 text-sm rounded bg-B cursor-pointer !w-[160px] text-center [option]:text-left" />
|
||||
</div>
|
||||
|
||||
<!-- ONGKOS & TOTAL -->
|
||||
<div class="ml-auto w-[25%] p-2 flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<!-- Ongkos bikin -->
|
||||
<div class="flex items-start justify-between ">
|
||||
<div class="flex flex-col ">
|
||||
<p class="font-semibold">Ongkos bikin</p>
|
||||
<p class="text-red-500 text-xs">diluar harga jual</p>
|
||||
</div>
|
||||
<div class="flex items-center w-40">
|
||||
<p>Rp</p>
|
||||
<inputField v-model.number="ongkosBikin" type="number"
|
||||
class="h-7 px-2 text-sm rounded bg-blue-200 text-left w-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total -->
|
||||
<div class="flex items-center justify-between -mt-4">
|
||||
<p class="font-semibold">Total</p>
|
||||
<div class="flex items-center w-40">
|
||||
<p>Rp</p>
|
||||
<p class="px-3 pl-2 py-1 text-left text-sm w-full">
|
||||
{{ grandTotal.toLocaleString() }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<button @click="$emit('close')" class="bg-gray-400 text-white px-6 py-2 rounded">
|
||||
Batal
|
||||
</button>
|
||||
<button @click="handleSimpan" class="bg-C text-white px-6 py-2 rounded">
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p class="absolute bottom-0 left-0 text-xs bg-D text-white px-2 py-1 rounded-tr-md">
|
||||
<p class="absolute p-2 bottom-0 left-0 w-full text-left text-xs bg-D text-white py-1">
|
||||
Terima kasih sudah berbelanja dengan kami
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user