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

fix result

Browse Source
This commit is contained in:
Amir
2022-10-11 06:26:31 +08:00
parent 64bfad8f09
commit a7a69281a4
5 changed files with 320 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cart/CartListNew.vue
+1 -5
View File
@@ -191,7 +191,7 @@
</Card> </Card>
</div> </div>
<div class="col-12 lg:col-3"> <div class="col-12 lg:col-3">
<Card class="card-custom"> <Card>
<template #title> <template #title>
<div class="font-normal">Ringkasan Troli</div> <div class="font-normal">Ringkasan Troli</div>
</template> </template>
@@ -1134,8 +1134,4 @@ export default {
.container-height { .container-height {
min-height: 70vh; min-height: 70vh;
} }
.card-customer {
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 80%);
}
</style> </style>
src/components/result/ResultDetail.vue
+237 -121
View File
@@ -1,132 +1,233 @@
<template> <template>
<the-template> <the-template>
<base-card> <!-- <base-card> -->
<div <div
v-if="loading" v-if="loading"
style="min-height: 70vh; display: grid; place-items: center" style="min-height: 70vh; display: grid; place-items: center"
> >
<div class="spinner-border" role="status"> <div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>
</div>
</div> </div>
<div v-else style="min-height: 70vh" class="container"> </div>
<div class="row"> <div v-else class="fadein animation-duration-400">
<div class="col"> <div class="row">
<div class="d-flex justify-content-between"> <Toolbar class="toolbar-custom">
<router-link <template #start>
v-bind:to="{ name: 'result' }" <Button
class="btn btn-secondary m-3 ms-0" class="
>Kembali</router-link p-button-sm
> button-custom
<h5 class="m-3">Keputusan Tarikh Lelong: {{ tarikhLelong }}</h5> p-button-secondary p-button-outlined
<button mr-2
v-if="!statusPayment" "
v-on:click="clickPayButton(lelongId)" icon="pi pi-arrow-left"
class="btn btn-primary m-3 me-0" v-on:click="clickBackButton()"
> />
Bayar <div
</button> class="font-normal"
style="font-size: 1.5rem; font-weight: 700"
>
Keputusan Tarikh Lelong: {{ tarikhLelong }}
</div> </div>
<div class="d-flex justify-content-end"> </template>
<router-link
v-bind:to="{ name: 'receipt' }" <template #end>
class="btn btn-outline-primary m-2 me-0" <Button
>Resit Bayaran</router-link label="Resit Bayaran"
> icon="pi pi-list"
</div> iconPos="right"
<div> class="p-button-sm p-button-outlined mr-2"
<div class="accordion" id="accordionExample"> />
<div <Button
v-for="list in lists" label="Bayar"
v-bind:key="list" icon="pi pi-money-bill"
class="accordion-item" iconPos="right"
> class="p-button-sm"
<h2 class="accordion-header" id="headingOne"> v-on:click="clickPayButton(lelongId)"
<button />
class="accordion-button" </template>
type="button" </Toolbar>
data-bs-toggle="collapse" <Card>
data-bs-target="#collapseOne" <!-- <template #title>
aria-expanded="true" </template> -->
aria-controls="collapseOne" <template #content>
> <Accordion :multiple="true">
{{ list.cawangan }} <AccordionTab v-for="list in lists" v-bind:key="list">
</button> <template #header>
</h2> <span>{{ list.cawangan }}</span>
<div <!-- <span class="ml-2">Jumlah:RMXXXX</span> -->
id="collapseOne" </template>
class="accordion-collapse collapse show" <div class="overflow-x-auto">
aria-labelledby="headingOne" <table class="table text-center table-bordered">
data-bs-parent="#accordionExample" <tbody>
> <tr class="table-light">
<div class="accordion-body"> <td>Bil</td>
<table class="table table-bordered"> <td style="min-width: 180px">No Rujukan</td>
<thead> <td style="min-width: 180px">Harga Bidaan</td>
<tr> <td style="min-width: 220px">Status Bayaran</td>
<th scope="col">Bil</th> </tr>
<th scope="col">No Rujukan</th> <tr v-for="(data, index) in list.sag" :key="data">
<th scope="col">Harga Bidaan</th> <td>{{ index + 1 }}</td>
<th scope="col">Status Bayaran</th> <td>
</tr> <a
</thead> href="#"
<tbody> data-bs-toggle="modal"
<tr data-bs-target="#marhunModal"
v-for="(data, index) in list.sag" v-on:click="marhunModal(data)"
v-bind:key="data"
> >
<td>{{ index + 1 }}</td> {{ data.norujukan }}
<td> </a>
<a </td>
href="#" <td>
data-bs-toggle="modal" RM
data-bs-target="#marhunModal" {{
v-on:click="marhunModal(data)" data.total_payment
>{{ data.norujukan }} ?.toString()
</a> .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
</td> }}
<td>RM {{ data.total_payment }}</td> </td>
<td <td
class="m-1 badge rounded-pill bg-danger" class="m-1 badge rounded-pill bg-danger"
v-if=" v-if="
data.status_payment === null || data.status_payment === null ||
data.status_payment == 0 data.status_payment == 0
" "
> >
Belum Bayar Belum Bayar
</td> </td>
<td <td
class="m-1 badge rounded-pill bg-warning" class="m-1 badge rounded-pill bg-warning"
v-if="data.status_payment === 2" v-if="data.status_payment === 2"
> >
Tunggu Pengesahan Tunggu Pengesahan
</td> </td>
<td <td
class="m-1 badge rounded-pill bg-success" class="m-1 badge rounded-pill bg-success"
v-if="data.status_payment === 1" v-if="data.status_payment === 1"
> >
Selesai Selesai
</td> </td>
</tr> </tr>
<!-- <tr> </tbody>
<td colspan="5" style="justify-content: end"> </table>
Muat Turun Penyata </div>
<a href="#" class="btn btn-outline-primary"> </AccordionTab>
<i class="bi bi-download"></i </Accordion>
></a> <!-- <div class="">
</td> <div class="row">
</tr> --> <div class="col">
</tbody> <div class="d-flex justify-content-between">
</table> <router-link
<h5 class="mt-4 mb-5"> v-bind:to="{ name: 'result' }"
Jumlah Harga Bida: RM{{ list.total_hargabida }} class="btn btn-secondary m-3 ms-0"
</h5> >Kembali</router-link
>
<h5 class="m-3">
Keputusan Tarikh Lelong: {{ tarikhLelong }}
</h5>
<button
v-if="!statusPayment"
v-on:click="clickPayButton(lelongId)"
class="btn btn-primary m-3 me-0"
>
Bayar
</button>
</div>
<div class="d-flex justify-content-end">
<router-link
v-bind:to="{ name: 'receipt' }"
class="btn btn-outline-primary m-2 me-0"
>Resit Bayaran</router-link
>
</div>
<div>
<div class="accordion" id="accordionExample">
<div
v-for="list in lists"
v-bind:key="list"
class="accordion-item"
>
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
{{ list.cawangan }}
</button>
</h2>
<div
id="collapseOne"
class="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample"
>
<div class="accordion-body">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Bil</th>
<th scope="col">No Rujukan</th>
<th scope="col">Harga Bidaan</th>
<th scope="col">Status Bayaran</th>
</tr>
</thead>
<tbody>
<tr
v-for="(data, index) in list.sag"
v-bind:key="data"
>
<td>{{ index + 1 }}</td>
<td>
<a
href="#"
data-bs-toggle="modal"
data-bs-target="#marhunModal"
v-on:click="marhunModal(data)"
>{{ data.norujukan }}
</a>
</td>
<td>RM {{ data.total_payment }}</td>
<td
class="m-1 badge rounded-pill bg-danger"
v-if="
data.status_payment === null ||
data.status_payment == 0
"
>
Belum Bayar
</td>
<td
class="m-1 badge rounded-pill bg-warning"
v-if="data.status_payment === 2"
>
Tunggu Pengesahan
</td>
<td
class="m-1 badge rounded-pill bg-success"
v-if="data.status_payment === 1"
>
Selesai
</td>
</tr>
</tbody>
</table>
<h5 class="mt-4 mb-5">
Jumlah Harga Bida: RM{{ list.total_hargabida }}
</h5>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
</div> </template>
</Card>
<div <div
class="modal fade" class="modal fade"
id="marhunModal" id="marhunModal"
@@ -192,7 +293,8 @@
</div> </div>
</div> </div>
</div> </div>
</base-card> </div>
<!-- </base-card> -->
</the-template> </the-template>
</template> </template>
@@ -250,9 +352,23 @@ export default {
clickPayButton(value) { clickPayButton(value) {
this.$router.push({ name: "pay", params: { lelongId: value } }); this.$router.push({ name: "pay", params: { lelongId: value } });
}, },
clickBackButton() {
this.$router.push({ name: "result" });
},
marhunModal(value) { marhunModal(value) {
console.log(value); console.log(value);
}, },
}, },
}; };
</script> </script>
<style scoped>
.toolbar-custom {
background: #fff !important;
}
.button-custom {
height: 20px;
width: 10px !important;
}
</style>
src/components/result/ResultMain.vue
+79 -36
View File
@@ -7,41 +7,78 @@
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
</div> </div>
<div v-else class="container"> <div
<table class="table table-bordered table-hover"> v-else
<thead> style="min-height: 70vh"
<tr> class="container fadein animation-duration-400"
<th scope="col">Bil</th> >
<th scope="col">Tarikh</th> <div v-if="isSuccess">
<th scope="col">Jumlah</th> <Card>
<th scope="col">Status Bayaran</th> <template #title>
<th scope="col">Penyata</th> <div class="font-normal">Keputusan Lelongan</div>
</tr> </template>
</thead> <template #content>
<tbody v-if="isSuccess"> <div class="overflow-x-auto">
<tr v-for="(data, index) in lelong" v-bind:key="data"> <table class="table table-bordered text-center table-hover">
<td>{{ index + 1 }}</td> <tbody>
<td class="btn text-primary" style="" v-on:click="selectDate(data)"> <tr class="table-light">
<u>{{ data.tarikh_lelong }}</u> <td>Bil</td>
</td> <td style="min-width: 115px">Tarikh</td>
<td>RM{{ data.jumlah }}</td> <td style="min-width: 100px">Jumlah</td>
<td v-if="data.status == 1" class="text-success">Selesai</td> <td style="min-width: 145px">Status Bayaran</td>
<td v-else-if="data.status == null" class="text-danger"> <td style="min-width: 150px">Penyata</td>
Belum Selesai </tr>
</td> <tr v-for="(data, index) in lelong" v-bind:key="data">
<td> <td>{{ index + 1 }}</td>
<a href="#" class="btn btn-outline-primary"> <td v-on:click="selectDate(data)">
Muat Turun <i class="bi bi-download"></i <span class="text-primary underline cursor-pointer">{{
></a> data.tarikh_lelong
</td> }}</span>
</tr> </td>
</tbody> <td>
<tbody v-else> RM{{
<tr> data.jumlah
<td colspan="100">Tiada Data</td> ?.toString()
</tr> .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
</tbody> }}
</table> </td>
<td v-if="data.status == 1" class="text-success">Selesai</td>
<td v-else-if="data.status == null" class="text-danger">
Belum Selesai
</td>
<td>
<span class="text-primary underline cursor-pointer"
>Muat Turun <i class="pi pi-cloud-download"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</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-slack text-8xl text-400"></i>
</div>
<div class="col-12 text-center">
<span class="text-400">Tiada Data Dalam Keputusan.</span>
</div>
<div class="col-12 text-center">
<span class="text-400"
>Sila rujuk halaman
<router-link v-bind:to="{ name: 'home' }">Utama</router-link>
untuk jadual lelong</span
>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
@@ -98,4 +135,10 @@ export default {
}, },
}, },
}; };
</script> </script>
<style scoped>
.container-height {
min-height: 70vh;
}
</style>
src/components/result/TheResult.vue
+1 -16
View File
@@ -1,21 +1,6 @@
<template> <template>
<the-template> <the-template>
<div class="container"> <result-main v-bind:key="statusComponent"></result-main>
<div class="row justify-content-center">
<div class="col-7">
<base-card>
<button
v-on:click="reloadComponent()"
class="badge btn-secondary m-2"
>
Reload <i class="bi bi-arrow-clockwise"></i>
</button>
<h5>KEPUTUSAN</h5>
<result-main v-bind:key="statusComponent"></result-main>
</base-card>
</div>
</div>
</div>
</the-template> </the-template>
</template> </template>
src/main.js
+2
View File
@@ -36,6 +36,7 @@ import RadioButton from 'primevue/radiobutton';
import Accordion from 'primevue/accordion'; import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab'; import AccordionTab from 'primevue/accordiontab';
import Dialog from 'primevue/dialog'; import Dialog from 'primevue/dialog';
import Toolbar from 'primevue/toolbar';
import Avatar from 'primevue/avatar'; import Avatar from 'primevue/avatar';
import TheTemplate from './components/layouts/TheTemplate.vue' import TheTemplate from './components/layouts/TheTemplate.vue'
@@ -69,6 +70,7 @@ app.component('Accordion', Accordion);
app.component('AccordionTab', AccordionTab); 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.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');