383 lines
13 KiB
Vue
383 lines
13 KiB
Vue
<template>
|
|
<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-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 top-0 pb-1 mb-2">
|
|
<div class="flex flex-col gap-2 -mt-5">
|
|
<p class="flex items-center gap-2">
|
|
<i class="fab fa-instagram text-pink-600 text-xl"></i> tokomas_Jakartacitayam
|
|
</p>
|
|
<p class="flex items-center gap-2">
|
|
<i class="fab fa-tiktok text-black text-xl"></i> tokomas_Jakartacitayam
|
|
</p>
|
|
<p class="flex items-center gap-2">
|
|
<i class="fab fa-whatsapp text-green-500 text-xl"></i> 08158851178
|
|
</p>
|
|
<p class=" text-sm">{{ generateTransactionCode() }}</p>
|
|
</div>
|
|
|
|
<div class="absolute inset-x-0 top-[-48px] flex flex-col items-center">
|
|
<img :src="logo" alt="Logo" class="h-40" />
|
|
</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">Alamat :</div>
|
|
<inputField v-model="alamat" class="h-7 px-2 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>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center mb-1 w-full">
|
|
<div class="flex gap-2">
|
|
<img :src="logo_bca" alt="Logo_bca" class="h-5" />
|
|
<img :src="logo_bri" alt="Logo_bri" class="h-5" />
|
|
<img :src="logo_bni" alt="Logo_bni" class="h-5" />
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<img :src="logo_mastercard" alt="Logo_mastercard" class="h-5" />
|
|
<img :src="logo_visa" alt="Logo_visa" class="h-5" />
|
|
<img :src="logo_mandiri" alt="Logo_mandiri" class="h-5" />
|
|
</div>
|
|
</div>
|
|
<table class="w-full border-D text-sm table-fixed border-b">
|
|
<thead>
|
|
<tr class="border-b border-t border-D">
|
|
<th class="w-[40px] border-r text-lg border-D">Jml</th>
|
|
<th class="w-[360px] py-2 text-lg border-r border-D">Item</th>
|
|
<th class="w-[70px] border-r text-lg border-D">Posisi</th>
|
|
<th class="w-[40px] border-r text-lg border-D">Berat</th>
|
|
<th class="w-[40px] border-r text-lg border-D">Kadar</th>
|
|
<th class="w-[240px] text-lg">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" />
|
|
</template>
|
|
<template v-else>
|
|
<div class="w-12 h-12"></div>
|
|
</template>
|
|
{{ item.produk?.nama || '' }}
|
|
</td>
|
|
<td class="border-r border-D">{{ item.produk.nama ? (item.nampan?.nama || 'Brankas') : '' }}</td>
|
|
<td class="border-r border-D">
|
|
<span v-if="item.produk?.berat">{{ item.produk.berat }}g</span>
|
|
</td>
|
|
<td class="border-r border-D">
|
|
<span v-if="item.produk?.kadar">{{ item.produk.kadar }}k</span>
|
|
</td>
|
|
<td>
|
|
<span v-if="item.harga_deal">Rp{{ item.harga_deal.toLocaleString() }}</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</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 class="text-red-500">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>Hormat Kami</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>
|
|
<input type="text" v-model="ongkosBikinFormatted" @input="formatInput"
|
|
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 Harga</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 p-8 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>
|
|
|
|
<!-- Simple Toast Alert -->
|
|
<div v-if="showToast"
|
|
class="fixed top-4 left-1/2 transform -translate-x-1/2 z-[10001]
|
|
transition-all duration-300 ease-in-out"
|
|
:class="toastClasses">
|
|
<div class="flex items-center gap-2 px-4 py-3 rounded-lg shadow-lg max-w-sm">
|
|
<!-- Icon -->
|
|
<div class="flex-shrink-0">
|
|
<svg v-if="toastType === 'error'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
|
|
</svg>
|
|
<svg v-else-if="toastType === 'success'" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
|
</svg>
|
|
<svg v-else class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Message -->
|
|
<p class="text-sm font-medium">{{ toastMessage }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted } from 'vue'
|
|
import logo from '@/../images/logo.png'
|
|
import logo_bca from '@/../images/logo_bca.png'
|
|
import logo_bri from '@/../images/logo_bri.png'
|
|
import logo_bni from '@/../images/logo_bni.png'
|
|
import logo_mastercard from '@/../images/logo_mastercard.png'
|
|
import logo_visa from '@/../images/logo_visa.png'
|
|
import logo_mandiri from '@/../images/logo_mandiri.png'
|
|
import inputField from '@/components/inputField.vue'
|
|
import inputSelect from '@/components/inputSelect.vue'
|
|
|
|
import axios from 'axios'
|
|
|
|
const props = defineProps({
|
|
isOpen: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
pesanan: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
total: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['close', 'confirm'])
|
|
|
|
const namaPembeli = ref('')
|
|
const nomorTelepon = ref('')
|
|
const alamat = ref('')
|
|
const ongkosBikin = ref(0)
|
|
const selectedSales = ref(null)
|
|
const salesOptions = ref([])
|
|
const ongkosBikinFormatted = ref("")
|
|
|
|
// Simple Toast State
|
|
const showToast = ref(false)
|
|
const toastType = ref('error') // 'error', 'success', 'info'
|
|
const toastMessage = ref('')
|
|
|
|
const toastClasses = computed(() => {
|
|
const baseClasses = 'text-white'
|
|
const typeClasses = {
|
|
error: 'bg-red-500',
|
|
success: 'bg-green-500',
|
|
info: 'bg-blue-500'
|
|
}
|
|
return `${baseClasses} ${typeClasses[toastType.value]}`
|
|
})
|
|
|
|
const grandTotal = computed(() => {
|
|
return props.total + (ongkosBikin.value || 0)
|
|
})
|
|
|
|
const getCurrentDate = () => {
|
|
const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']
|
|
const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
|
|
|
|
const now = new Date()
|
|
const dayName = days[now.getDay()]
|
|
const day = String(now.getDate()).padStart(2, '0')
|
|
const month = months[now.getMonth()]
|
|
const year = now.getFullYear()
|
|
|
|
return `${dayName}/${day}-${month}-${year}`
|
|
}
|
|
|
|
const generateTransactionCode = () => {
|
|
const now = new Date()
|
|
const timestamp = now.getTime().toString().slice(-6)
|
|
return `TRS-${timestamp}`
|
|
}
|
|
|
|
// Simple Toast Function
|
|
const showSimpleToast = (type, message, duration = 3000) => {
|
|
toastType.value = type
|
|
toastMessage.value = message
|
|
showToast.value = true
|
|
|
|
setTimeout(() => {
|
|
showToast.value = false
|
|
}, duration)
|
|
}
|
|
|
|
const fetchSales = async () => {
|
|
try {
|
|
const response = await axios.get('/api/sales', {
|
|
headers: {
|
|
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
|
},
|
|
})
|
|
|
|
salesOptions.value = response.data.map(sales => ({
|
|
value: sales.id,
|
|
label: sales.nama
|
|
}))
|
|
|
|
if (salesOptions.value.length > 0) {
|
|
selectedSales.value = salesOptions.value[0].value
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching sales:', error)
|
|
}
|
|
}
|
|
|
|
const handleSimpan = () => {
|
|
if (!namaPembeli.value.trim()) {
|
|
showSimpleToast('error', 'Nama pembeli harus diisi!')
|
|
return
|
|
}
|
|
|
|
if (!nomorTelepon.value.trim()) {
|
|
showSimpleToast('error', 'Nomor telepon harus diisi!')
|
|
return
|
|
}
|
|
|
|
if (!alamat.value.trim()) {
|
|
showSimpleToast('error', 'Alamat harus diisi!')
|
|
return
|
|
}
|
|
|
|
if (!selectedSales.value) {
|
|
showSimpleToast('error', 'Sales harus dipilih!')
|
|
return
|
|
}
|
|
|
|
simpanTransaksi({
|
|
id_sales: selectedSales.value,
|
|
nama_pembeli: namaPembeli.value,
|
|
no_hp: nomorTelepon.value,
|
|
alamat: alamat.value,
|
|
ongkosBikin: ongkosBikin.value || 0,
|
|
total_harga: grandTotal.value,
|
|
items: props.pesanan
|
|
})
|
|
}
|
|
|
|
const simpanTransaksi = async (dataTransaksi) => {
|
|
console.log('Data transaksi yang akan disimpan:', dataTransaksi);
|
|
|
|
try {
|
|
const response = await axios.post('/api/transaksi', dataTransaksi, {
|
|
headers: {
|
|
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
|
},
|
|
});
|
|
|
|
showSimpleToast('success', 'Transaksi berhasil disimpan!', 2000)
|
|
|
|
// Delay untuk memberikan waktu user membaca notifikasi
|
|
setTimeout(() => {
|
|
props.pesanan.value = [];
|
|
props.isOpen = false;
|
|
window.location.reload();
|
|
}, 2200);
|
|
|
|
} catch (error) {
|
|
console.error('Error saving transaksi:', error);
|
|
const errorMessage = error.response?.data?.message || error.message || 'Terjadi kesalahan saat menyimpan transaksi';
|
|
showSimpleToast('error', `Error: ${errorMessage}`, 4000);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
if (props.isOpen) {
|
|
fetchSales()
|
|
}
|
|
})
|
|
|
|
const pesananMinimal = computed(() => {
|
|
const arr = [...props.pesanan]
|
|
while (arr.length < 2) {
|
|
arr.push({ produk: {}, harga_deal: 0, posisi: '' })
|
|
}
|
|
return arr
|
|
})
|
|
|
|
function formatInput(e) {
|
|
let value = e.target.value.replace(/\D/g, "");
|
|
ongkosBikin.value = value ? parseInt(value, 10) : null;
|
|
ongkosBikinFormatted.value = value
|
|
? new Intl.NumberFormat("id-ID").format(value)
|
|
: "";
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
|
|
|
.pt-serif-regular-italic {
|
|
font-family: "PT Serif", serif;
|
|
font-weight: 400;
|
|
}
|
|
</style> |