KoPKB/lelong-web-pembida
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix payment

Browse Source
This commit is contained in:
Amir
2022-10-15 22:41:01 +08:00
parent 6c0c847071
commit aa7dece42d
8 changed files with 503 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2
View File
@@ -1 +1,3 @@
BASE_URL = http://localhost:8080
VUE_APP_ROOT_URL = http://lelong-admin.test/api VUE_APP_ROOT_URL = http://lelong-admin.test/api
.env.example
+2
View File
@@ -1 +1,3 @@
BASE_URL = http://localhost:8080
VUE_APP_ROOT_URL = http://lelong.test/api VUE_APP_ROOT_URL = http://lelong.test/api
src/components/pay/SelectOutlet.vue
+197 -2
View File
@@ -1,5 +1,114 @@
<template> <template>
<div class="container"> <TabView>
<TabPanel
v-for="data in namaCawangan"
v-bind:key="data"
:header="data.cawangan"
>
<div>
<div class="overflow-x-auto">
<table class="table text-center table-bordered table-hover">
<tbody>
<tr class="table-light">
<td>Bil</td>
<td style="min-width: 240px">No Rujukan</td>
<td style="min-width: 210px">Marhun</td>
<td style="min-width: 120px">Harga Bida</td>
</tr>
<tr v-for="(item, index) in data.sag" v-bind:key="item">
<td>{{ index + 1 }}</td>
<td>{{ item.norujukan }}</td>
<td>{{ item.marhun }}</td>
<td>
RM{{
item.total_payment
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</td>
</tr>
<tr class="uppercase">
<th colspan="3">Jumlah</th>
<th>
RM{{
data.total_hargabida
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</th>
</tr>
</tbody>
</table>
</div>
<div class="grid mt-5">
<!-- <button class="btn btn-danger" v-on:click="clickCancelButton()">
Cancel
</button> -->
<div class="col-12 md:col-5">
<Button
label="Batal Pembayaran"
class="p-button-text p-button-sm"
v-on:click="clickCancelButton()"
/>
</div>
<div class="sm:none md:col"></div>
<div class="col-12 md:col-5 md:text-right">
<Button
label="Bayar Bidaan Cawangan Ini"
class="p-button-sm"
@click="openModal(data)"
/>
</div>
<!-- <button
ref="nextButton"
v-on:click="clickNextButton()"
class="btn btn-primary"
>
Teruskan
</button> -->
</div>
</div>
</TabPanel>
</TabView>
<Dialog
header="Teruskan Bayaran"
v-model:visible="isDisplay"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }"
:style="{ width: '50vw' }"
:modal="true"
>
<p>Adakah anda pasti untuk membuat bayaran bagi cawangan ini?</p>
<div class="overflow-x-auto">
<table class="table text-center table-bordered">
<tbody>
<tr class="table-light">
<td style="min-width: 240px">Cawangan</td>
<td style="min-width: 120px">Harga Bida</td>
</tr>
<tr>
<th>{{ cawanganPilihan }}</th>
<th>
RM{{
hargaBidaanPilihan
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</th>
</tr>
</tbody>
</table>
</div>
<template #footer>
<Button
label="Tidak"
icon="pi pi-times"
@click="closeModal()"
class="p-button-text"
/>
<Button label="Ya" icon="pi pi-check" @click="doPayment()" />
</template>
</Dialog>
<!-- <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-7"> <div class="col-7">
<div v-if="!nextButton"> <div v-if="!nextButton">
@@ -39,11 +148,13 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
</template> </template>
<script> <script>
import { integer } from "@vuelidate/validators";
import SelectId from "./SelectId.vue"; import SelectId from "./SelectId.vue";
import axios from "axios";
export default { export default {
components: { components: {
@@ -52,15 +163,86 @@ export default {
props: { props: {
namaCawangan: "", namaCawangan: "",
lelongIdProps: "", lelongIdProps: "",
// invoiceIdProps: "",
// invoiceNoProps: "",
}, },
data() { data() {
return { return {
nextButton: false, nextButton: false,
selectCawangan: this.namaCawangan, selectCawangan: this.namaCawangan,
selectRadio: "", selectRadio: "",
isDisplay: false,
cawanganPilihan: "",
hargaBidaanPilihan: "",
form: {
email: localStorage.getItem("email"),
notel: localStorage.getItem("notelbimbit"),
name: localStorage.getItem("name"),
user_id: localStorage.getItem("id"),
lelong_id: "",
invoice_id: "",
invoice_no: "",
total: integer,
// sag: [
// {
// norujukan: "APM211121-0015",
// kodcaw: "APM",
// total_payment: 1329,
// },
// {
// norujukan: "APM211120-0018",
// kodcaw: "APM",
// total_payment: 1443,
// },
// ],
sag: "",
},
}; };
}, },
mounted() {
this.getInvoice();
},
methods: { methods: {
getInvoice() {
axios
.get("/invoice", {
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
params: {
user_id: localStorage.getItem("id"),
lelong_id: this.lelongIdProps,
},
})
.then((response) => {
console.log(response);
if (response.data.success == true) {
this.form.invoice_id = response.data.invoice.id;
this.form.invoice_no = response.data.invoice.invoice_no;
this.form.lelong_id = this.lelongIdProps;
} else if (response.data.success == false) {
alert("No Invoice Id");
}
})
.catch((error) => {
this.loading = false;
console.log(error);
});
},
openModal(value) {
this.isDisplay = true;
this.cawanganPilihan = value.cawangan;
this.hargaBidaanPilihan = value.total_hargabida;
this.form.total = parseFloat(value.total_hargabida.replace(/,/g, ""));
let convertData = JSON.parse(JSON.stringify(value.sag));
this.form.sag = convertData;
console.log(this.form);
},
closeModal() {
this.isDisplay = false;
this.form.total = "";
this.form.sag = "";
},
clickRadio(value) { clickRadio(value) {
console.log(value); console.log(value);
this.selectRadio = value; this.selectRadio = value;
@@ -80,6 +262,19 @@ export default {
backIsClick(value) { backIsClick(value) {
this.nextButton = value; this.nextButton = value;
}, },
doPayment() {
console.log(this.form);
axios
.post("/bidpayment", this.form)
.then((response) => {
console.log(response);
window.location.href = response.data.message + "?auto_submit=true";
})
.catch((response) => {
alert(response.message);
console.log(response);
});
},
}, },
}; };
</script> </script>
src/components/pay/ThePay.vue
+78 -9
View File
@@ -1,17 +1,70 @@
<template> <template>
<the-template> <the-template>
<base-card> <div v-if="isLoading" class="fadein animation-duration-400">
<div
class="flex align-items-center justify-content-center container-height"
>
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div v-else class="fadein animation-duration-400">
<div v-if="isSuccess">
<Card>
<template #title>
<div class="font-normal">Pembayaran Bidaan</div>
<div class="font-normal text-base">
Tarikh Lelong : {{ tarikhLelong }}
</div>
</template>
<template #content>
<select-outlet
v-bind:namaCawangan="lists"
v-bind:lelongIdProps="lelongId"
></select-outlet>
</template>
</Card>
</div>
<div v-else>
<div
class="
flex
align-items-center
justify-content-center
container-height
"
>
<div class="grid justify-content-center">
<div class="col-12 mb-4 text-center">
<i class="pi pi-book text-8xl text-400"></i>
</div>
<div class="col-12 text-center">
<span class="text-400">Tiada Data.</span>
</div>
<div class="col-12 text-center">
<span class="text-400"
>Sila rujuk halaman
<router-link v-bind:to="{ name: 'result' }"
>Keputusan</router-link
>
untuk maklumat rekod bidaan menang.</span
>
</div>
</div>
</div>
</div>
</div>
<!-- <base-card>
<p>Tarikh Lelong : {{ tarikhLelong }}</p> <p>Tarikh Lelong : {{ tarikhLelong }}</p>
<div v-if="statusComponent == 1"> <div v-if="statusComponent == 1">
<select-outlet v-bind:namaCawangan="lists" v-bind:lelongIdProps="lelongId"></select-outlet> <select-outlet
v-bind:namaCawangan="lists"
v-bind:lelongIdProps="lelongId"
></select-outlet>
</div> </div>
<!-- <div v-if="statusComponent == 2">
<select-id></select-id> </base-card> -->
</div>
<div v-else-if="statusComponent == 3">
<select-finalse></select-finalse>
</div> -->
</base-card>
</the-template> </the-template>
</template> </template>
@@ -32,11 +85,15 @@ export default {
lists: [], lists: [],
tarikhLelong: "", tarikhLelong: "",
statusComponent: 1, statusComponent: 1,
invoice_id: "",
invoice_no: "",
user: { user: {
id: 1, id: 1,
caw: "KOta Bbharu", caw: "KOta Bbharu",
}, },
lelongId: "", lelongId: "",
isLoading: false,
isSuccess: false,
}; };
}, },
created() { created() {
@@ -44,9 +101,11 @@ export default {
}, },
mounted: function () { mounted: function () {
this.liveData(); this.liveData();
// this.getInvoice();
}, },
methods: { methods: {
liveData() { liveData() {
this.isLoading = true;
axios axios
.get( .get(
"/bayarBaki/" + "/bayarBaki/" +
@@ -61,7 +120,9 @@ export default {
} }
) )
.then((response) => { .then((response) => {
this.isLoading = false;
if (response.data.success == true) { if (response.data.success == true) {
this.isSuccess = true;
this.lists = response.data.data; this.lists = response.data.data;
console.log(this.lists); console.log(this.lists);
this.tarikhLelong = response.data.tarikh_lelong; this.tarikhLelong = response.data.tarikh_lelong;
@@ -69,9 +130,11 @@ export default {
} }
}) })
.catch((error) => { .catch((error) => {
this.isLoading = false;
console.log(error); console.log(error);
}); });
}, },
clickBackButton() { clickBackButton() {
this.statusComponent -= 1; this.statusComponent -= 1;
}, },
@@ -81,3 +144,9 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
.container-height {
min-height: 70vh;
}
</style>
src/components/result/ResultDetail.vue
+199 -144
View File
@@ -10,110 +10,120 @@
</div> </div>
</div> </div>
<div v-else class="fadein animation-duration-400"> <div v-else class="fadein animation-duration-400">
<div class="row"> <div v-if="isSuccess">
<Toolbar class="toolbar-custom"> <div class="row">
<template #start> <Toolbar class="toolbar-custom">
<Button <template #start>
class=" <Button
p-button-sm class="
button-custom p-button-sm
p-button-secondary p-button-outlined button-custom
mr-2 p-button-secondary p-button-outlined
" mr-2
icon="pi pi-arrow-left" "
v-on:click="clickBackButton()" icon="pi pi-arrow-left"
/> v-on:click="clickBackButton()"
<div />
class="font-normal" <div
style="font-size: 1.5rem; font-weight: 700" class="font-normal"
> style="font-size: 1.5rem; font-weight: 700"
Keputusan Tarikh Lelong: {{ tarikhLelong }} >
</div> Keputusan Tarikh Lelong: {{ tarikhLelong }}
</template> </div>
</template>
<template #end> <template #end>
<Button <Button
label="Resit Bayaran" label="Resit Bayaran"
icon="pi pi-list" icon="pi pi-list"
iconPos="right" iconPos="right"
class="p-button-sm p-button-outlined mr-2" class="p-button-sm p-button-outlined mr-2"
/> />
<Button <Button
label="Bayar" label="Pembayaran"
icon="pi pi-money-bill" icon="pi pi-money-bill"
iconPos="right" iconPos="right"
class="p-button-sm" class="p-button-sm"
v-on:click="clickPayButton(lelongId)" :disabled="disabled == 1"
/> v-on:click="clickPayButton(lelongId)"
</template> />
</Toolbar> </template>
<Card> </Toolbar>
<!-- <template #title> <Card>
<!-- <template #title>
</template> --> </template> -->
<template #content> <template #content>
<Accordion :multiple="true"> <Accordion :multiple="true">
<AccordionTab v-for="list in lists" v-bind:key="list"> <AccordionTab v-for="list in lists" v-bind:key="list">
<template #header> <template #header>
<span>{{ list.cawangan }}</span> <span>{{ list.cawangan }}</span>
<!-- <span class="ml-2">Jumlah:RMXXXX</span> --> <!-- <span class="ml-2">Jumlah:RMXXXX</span> -->
</template> </template>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="table text-center table-bordered"> <table class="table text-center table-bordered">
<tbody> <tbody>
<tr class="table-light"> <tr class="table-light">
<td>Bil</td> <td>Bil</td>
<td style="min-width: 180px">No Rujukan</td> <td style="min-width: 180px">No Rujukan</td>
<td style="min-width: 180px">Harga Bidaan</td> <td style="min-width: 180px">Harga Bidaan</td>
<td style="min-width: 220px">Status Bayaran</td> <td style="min-width: 220px">Status Bayaran</td>
</tr> </tr>
<tr v-for="(data, index) in list.sag" :key="data"> <tr v-for="(data, index) in list.sag" :key="data">
<td>{{ index + 1 }}</td> <td>{{ index + 1 }}</td>
<td> <td>
<a <a
href="#" href="#"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#marhunModal" data-bs-target="#marhunModal"
v-on:click="marhunModal(data)" v-on:click="marhunModal(data)"
>
{{ data.norujukan }}
</a>
</td>
<td>
RM
{{
data.total_payment
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</td>
<td
v-if="
data.status_payment === null ||
data.status_payment == 0
"
> >
{{ data.norujukan }} <Tag
</a> value="Belum Bayar"
</td> icon="pi pi-times"
<td> class="p-tag-rounded"
RM severity="danger"
{{ ></Tag>
data.total_payment </td>
?.toString() <td v-if="data.status_payment === 2">
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || "" <Tag
}} value="Tunggu Pengesahan"
</td> icon="pi pi-stopwatch"
<td class="p-tag-rounded"
class="m-1 badge rounded-pill bg-danger" severity="warning"
v-if=" ></Tag>
data.status_payment === null || </td>
data.status_payment == 0 <td v-if="data.status_payment === 1">
" <Tag
> value="Selesai"
Belum Bayar icon="pi pi-check"
</td> class="p-tag-rounded"
<td severity="success"
class="m-1 badge rounded-pill bg-warning" ></Tag>
v-if="data.status_payment === 2" </td>
> </tr>
Tunggu Pengesahan </tbody>
</td> </table>
<td </div>
class="m-1 badge rounded-pill bg-success" </AccordionTab>
v-if="data.status_payment === 1" </Accordion>
> <!-- <div class="">
Selesai
</td>
</tr>
</tbody>
</table>
</div>
</AccordionTab>
</Accordion>
<!-- <div class="">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
@@ -226,42 +236,42 @@
</div> </div>
</div> </div>
</div> --> </div> -->
</template> </template>
</Card> </Card>
<div <div
class="modal fade" class="modal fade"
id="marhunModal" id="marhunModal"
tabindex="-1" tabindex="-1"
aria-labelledby="marhunModalLabel" aria-labelledby="marhunModalLabel"
aria-hidden="true" aria-hidden="true"
data-bs-backdrop="static" data-bs-backdrop="static"
> >
<div class="modal-dialog modal-lg modal-dialog-centered"> <div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<!-- <h5 class="modal-title" id="marhunModalLabel"> <!-- <h5 class="modal-title" id="marhunModalLabel">
{{ theData.norujukan }} {{ theData.norujukan }}
</h5> --> </h5> -->
<button <button
type="button" type="button"
class="btn-close" class="btn-close"
data-bs-dismiss="modal" data-bs-dismiss="modal"
aria-label="Close" aria-label="Close"
></button> ></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
<th scope="col">Bil</th> <th scope="col">Bil</th>
<th scope="col">Jenis</th> <th scope="col">Jenis</th>
<th scope="col">Karat</th> <th scope="col">Karat</th>
<th scope="col">Berat</th> <th scope="col">Berat</th>
<th scope="col">Nota</th> <th scope="col">Nota</th>
<th scope="col">Harga Asas</th> <th scope="col">Harga Asas</th>
</tr> </tr>
</thead> </thead>
<!-- <tbody> <!-- <tbody>
<tr <tr
v-for="(marhun, index) in theData.lelongbidmarhun" v-for="(marhun, index) in theData.lelongbidmarhun"
v-bind:key="marhun" v-bind:key="marhun"
@@ -278,17 +288,46 @@
<th>RM{{ theData.hargaasas }}</th> <th>RM{{ theData.hargaasas }}</th>
</tr> </tr>
</tbody> --> </tbody> -->
</table> </table>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Kembali
</button>
</div>
</div> </div>
<div class="modal-footer"> </div>
<button </div>
type="button" </div>
class="btn btn-secondary" </div>
data-bs-dismiss="modal" <div v-else>
<div
class="
flex
align-items-center
justify-content-center
container-height
"
>
<div class="grid justify-content-center">
<div class="col-12 mb-4 text-center">
<i class="pi pi-book text-8xl text-400"></i>
</div>
<div class="col-12 text-center">
<span class="text-400">Tiada Data.</span>
</div>
<div class="col-12 text-center">
<span class="text-400"
>Sila rujuk halaman
<router-link v-bind:to="{ name: 'result' }"
>Keputusan</router-link
> >
Kembali untuk maklumat rekod bidaan menang.</span
</button> >
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -309,6 +348,8 @@ export default {
loading: false, loading: false,
lelongId: "", lelongId: "",
statusPayment: "", statusPayment: "",
disabled: 0,
isSuccess: false,
}; };
}, },
created() { created() {
@@ -318,8 +359,16 @@ export default {
}, },
mounted: function () { mounted: function () {
this.liveData(); this.liveData();
this.checkStatusPayment();
}, },
methods: { methods: {
checkStatusPayment() {
if (this.statusPayment == "" || this.statusPayment == null) {
this.disabled = 0;
} else {
this.disabled = 1;
}
},
liveData() { liveData() {
this.loading = true; this.loading = true;
axios axios
@@ -337,11 +386,13 @@ export default {
) )
.then((response) => { .then((response) => {
if (response.data.success == true) { if (response.data.success == true) {
this.isSuccess = true;
this.loading = false; this.loading = false;
console.log(response); console.log(response);
this.lists = response.data.data; this.lists = response.data.data;
this.tarikhLelong = response.data.tarikh_lelong; this.tarikhLelong = response.data.tarikh_lelong;
} else { } else {
this.isSuccess = false;
} }
}) })
.catch((error) => { .catch((error) => {
@@ -371,4 +422,8 @@ export default {
height: 20px; height: 20px;
width: 10px !important; width: 10px !important;
} }
.container-height {
min-height: 70vh;
}
</style> </style>
src/components/result/ResultMain.vue
+15 -3
View File
@@ -42,9 +42,21 @@
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || "" .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}} }}
</td> </td>
<td v-if="data.status == 1" class="text-success">Selesai</td> <td v-if="data.status == 1">
<td v-else-if="data.status == null" class="text-danger"> <Tag
Belum Selesai value="Selesai"
icon="pi pi-check"
class="p-tag-rounded"
severity="success"
></Tag>
</td>
<td v-else-if="data.status == null">
<Tag
value="Belum Selesai"
icon="pi pi-times"
class="p-tag-rounded"
severity="danger"
></Tag>
</td> </td>
<td> <td>
<span class="text-primary underline cursor-pointer" <span class="text-primary underline cursor-pointer"
src/main.js
+6
View File
@@ -38,6 +38,9 @@ import AccordionTab from 'primevue/accordiontab';
import Dialog from 'primevue/dialog'; import Dialog from 'primevue/dialog';
import Toolbar from 'primevue/toolbar'; import Toolbar from 'primevue/toolbar';
import Avatar from 'primevue/avatar'; import Avatar from 'primevue/avatar';
import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';
import Tag from 'primevue/tag';
import TheTemplate from './components/layouts/TheTemplate.vue' import TheTemplate from './components/layouts/TheTemplate.vue'
import BaseCard from './components/base/BaseCard.vue' import BaseCard from './components/base/BaseCard.vue'
@@ -71,6 +74,9 @@ app.component('AccordionTab', AccordionTab);
app.component('Dialog', Dialog); app.component('Dialog', Dialog);
app.component('Avatar', Avatar); app.component('Avatar', Avatar);
app.component('Toolbar', Toolbar); app.component('Toolbar', Toolbar);
app.component('TabView', TabView);
app.component('TabPanel', TabPanel);
app.component('Tag', Tag);
app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app'); app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
// app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app'); // app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');
src/router/index.js
+3 -3
View File
@@ -210,9 +210,9 @@ const routes = [
]; ];
const router = createRouter({ const router = createRouter({
// history: createWebHistory(process.env.BASE_URL), history: createWebHistory(process.env.BASE_URL),
history: createWebHistory(), // history: createWebHistory(),
// history: createMemoryHistory(), // history: createMemoryHistory(process.env.BASE_URL),
routes, routes,
}); });