fix pay, cart & profile loader
This commit is contained in:
Amir
+489
-286
@@ -3,280 +3,250 @@
|
||||
</div> -->
|
||||
|
||||
<Navbar />
|
||||
<div class="spinner-border" v-if="loading" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 70vh; display: grid; place-items: center"
|
||||
>
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="container">
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Back <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<h1>Cart <i class="bi bi-cart-fill"></i></h1>
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-sm-12" style="overflow-x: auto">
|
||||
<div class="ibox">
|
||||
<div class="table-responsive">
|
||||
<div class="ibox-content">
|
||||
<table class="table shoping-cart-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Maklumat Marhun</td>
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Harga Asas
|
||||
<!-- {{ countDown }} -->
|
||||
</td>
|
||||
<td
|
||||
width="120"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Harga Bida
|
||||
</td>
|
||||
<td
|
||||
width="80"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Tindakan
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
class="ibox-content"
|
||||
v-for="senaraiCart in senaraiCarts"
|
||||
:key="senaraiCart.id"
|
||||
>
|
||||
<table class="table shoping-cart-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<!-- <td width="90">
|
||||
<div>
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Back <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<h1>Cart <i class="bi bi-cart-fill"></i></h1>
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-sm-12" style="overflow-x: auto">
|
||||
<div class="ibox">
|
||||
<div class="table-responsive">
|
||||
<div class="accordion-body">
|
||||
<div class="ibox-content" style="padding-bottom: none">
|
||||
<table class="table shoping-cart-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Maklumat Marhun</td>
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Harga Asas
|
||||
<!-- {{ countDown }} -->
|
||||
</td>
|
||||
<td
|
||||
width="120"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Harga Bida
|
||||
</td>
|
||||
<td
|
||||
width="80"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Tindakan
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
class="ibox-content"
|
||||
v-for="senaraiCart in senaraiCarts.slice().reverse()"
|
||||
:key="senaraiCart.id"
|
||||
style="border-bottom: 1px solid #e7eaec"
|
||||
>
|
||||
<table class="table shoping-cart-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<!-- <td width="90">
|
||||
<div class="cart-product-imitation"></div>
|
||||
</td> -->
|
||||
<td class="desc">
|
||||
<h3 class="text-primary">
|
||||
{{ senaraiCart.datalelongbid.norujukan }}
|
||||
</h3>
|
||||
<!-- <p class="small">
|
||||
<td class="desc">
|
||||
<h3 class="text-primary">
|
||||
{{ senaraiCart.datalelongbid.norujukan }}
|
||||
</h3>
|
||||
<!-- <p class="small">
|
||||
It is a long established fact that a reader will be
|
||||
distracted by the readable content of a page when
|
||||
looking at its layout. The point of using Lorem Ipsum
|
||||
is
|
||||
</p> -->
|
||||
<dl class="small m-b-none">
|
||||
<!-- <dt>Maklumat SAG</dt> -->
|
||||
<p>Marhun: {{ senaraiCart.datalelongbid.marhun }}</p>
|
||||
<p>Berat: {{ senaraiCart.datalelongbid.berat }}g</p>
|
||||
<p>
|
||||
Cawangan:
|
||||
{{ senaraiCart.datalelongbid.cawangan.caw_name }}
|
||||
</p>
|
||||
</dl>
|
||||
<dl class="small m-b-none">
|
||||
<!-- <dt>Maklumat SAG</dt> -->
|
||||
<p>
|
||||
Marhun:
|
||||
{{ senaraiCart.datalelongbid.marhun }}
|
||||
</p>
|
||||
<p>
|
||||
Berat:
|
||||
{{ senaraiCart.datalelongbid.berat }}g
|
||||
</p>
|
||||
<p>
|
||||
Cawangan:
|
||||
{{
|
||||
senaraiCart.datalelongbid.cawangan.caw_name
|
||||
}}
|
||||
</p>
|
||||
</dl>
|
||||
|
||||
<div class="m-t-sm">
|
||||
<!-- <a href="#" class="text-muted"
|
||||
<div class="m-t-sm">
|
||||
<!-- <a href="#" class="text-muted"
|
||||
><i class="fa fa-gift"></i> Add gift package</a
|
||||
>
|
||||
| -->
|
||||
<button
|
||||
class="btn btn-outline-danger"
|
||||
@click="deleteCart(senaraiCart.id)"
|
||||
>
|
||||
Padam Item
|
||||
</button>
|
||||
<!-- <p>{{ senaraiCart.datalelongbid.lelongbidmarhun }}</p> -->
|
||||
</div>
|
||||
</td>
|
||||
<button
|
||||
class="btn btn-outline-danger"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#deleteModal"
|
||||
@click="deleteModal(senaraiCart)"
|
||||
>
|
||||
Hapus
|
||||
</button>
|
||||
<!-- <p>{{ senaraiCart.datalelongbid.lelongbidmarhun }}</p> -->
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
RM{{ senaraiCart.datalelongbid.hargaasas }}
|
||||
<!-- <s class="small text-muted">$230,00</s> -->
|
||||
</td>
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
<h4>RM{{ senaraiCart.hargabida }}</h4>
|
||||
</td>
|
||||
<td
|
||||
width="120"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
<!-- <input
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
RM{{ senaraiCart.datalelongbid.hargaasas }}
|
||||
<!-- <s class="small text-muted">$230,00</s> -->
|
||||
</td>
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
<h4>RM{{ senaraiCart.hargabida }}</h4>
|
||||
</td>
|
||||
<td
|
||||
width="120"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
<!-- <input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="+100.00"
|
||||
disabled
|
||||
/> -->
|
||||
<button
|
||||
class="btn btn-outline-warning"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#editModal"
|
||||
@click="editModal(senaraiCart)"
|
||||
<button
|
||||
class="btn btn-outline-warning"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#editModal"
|
||||
@click="editModal(senaraiCart)"
|
||||
>
|
||||
Ubah
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="ibox-footer">
|
||||
<table class="table shoping-cart-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Jumlah Bidaan</td>
|
||||
<td
|
||||
width="80"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Ubah
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ibox-footer">
|
||||
<table class="table shoping-cart-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Jumlah Bidaan</td>
|
||||
<td
|
||||
width="80"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
RM9009009
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
RM9009009
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-title" style="padding: 20px">
|
||||
<h5>Ringkasan Cart</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<!-- <span> Jumlah Bidaan </span>
|
||||
<h2 class="font-bold">RM6,540.00</h2> -->
|
||||
|
||||
<!-- <span class="text-muted small">
|
||||
<i
|
||||
>*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
|
||||
yang dimenanangi pembida.</i
|
||||
>
|
||||
</span> -->
|
||||
<span> Yuran Bidaan </span>
|
||||
<h2 class="font-bold">RM10.00</h2>
|
||||
|
||||
<!-- <span class="text-muted small">
|
||||
<i
|
||||
>*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
|
||||
yang dimenanangi pembida.</i
|
||||
>
|
||||
</span> -->
|
||||
<hr />
|
||||
<span class="text-muted small">
|
||||
<i
|
||||
>*Caj RM10.00 akan dikenakan untuk membuat pendaftaran bidaan.
|
||||
Sila klik butang dibawah untuk meneruskan.</i
|
||||
>
|
||||
</span>
|
||||
<div class="m-t-sm">
|
||||
<div class="btn-group">
|
||||
<!-- <a href="#" class="btn btn-white btn-sm"> Batal</a> -->
|
||||
<button
|
||||
@click="feePayment()"
|
||||
target="_blank"
|
||||
class="btn btn-primary"
|
||||
<div class="col-3">
|
||||
<div class="ibox" style="border: #e7eaec solid 1px">
|
||||
<div class="ibox-title" style="padding: 20px">
|
||||
<h5>Ringkasan Cart</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Jumlah Bilangan Surat</p>
|
||||
<p class="mb-0">{{ total_sag }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Jumlah Bidaan</p>
|
||||
<p class="mb-0">RM{{ total_bidaan }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<span> Yuran </span>
|
||||
<h2 class="font-bold">RM10.00</h2>
|
||||
<hr />
|
||||
<span class="text-muted small">
|
||||
<i
|
||||
>*Caj yuran akan dikenakan untuk membuat pendaftaran
|
||||
bidaan.</i
|
||||
>
|
||||
Daftar Bidaan <i class="fa fa-shopping-cart"></i>
|
||||
</button>
|
||||
</span>
|
||||
<div class="m-t-sm">
|
||||
<div class="btn-group">
|
||||
<!-- <a href="#" class="btn btn-white btn-sm"> Batal</a> -->
|
||||
<button
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#payModal"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Teruskan <i class="fa fa-shopping-cart"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-title">
|
||||
<h5>Bayaran Pendaftaran</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<span> Jumlah Bidaan </span>
|
||||
<h2 class="font-bold">RM10.00</h2>
|
||||
|
||||
<hr />
|
||||
<span class="text-muted small">
|
||||
<i
|
||||
>*Jumlah Bidaan akan dikira semula bergantung kepada lelongan
|
||||
yang dimenanangi pembida.</i
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-title">
|
||||
<h5>Support</h5>
|
||||
</div>
|
||||
<div class="ibox-content text-center">
|
||||
<h3><i class="fa fa-phone"></i> +43 100 783 001</h3>
|
||||
<span class="small">
|
||||
Please contact with us if you have any questions. We are
|
||||
avalible 24h.
|
||||
</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-content">
|
||||
<p class="font-bold">Masa Tamat Lelongan</p>
|
||||
<hr />
|
||||
<div>
|
||||
<!-- <a href="#" class="product-name"> Product 1</a> -->
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Ar-Rahn Kota Bharu 2</p>
|
||||
<p class="mb-0">00:15:29</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-content">
|
||||
<p class="font-bold">Masa Tamat Lelongan</p>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Ar-Rahn Rantau Panjang</p>
|
||||
<p class="mb-0">00:20:29</p>
|
||||
<div> -->
|
||||
<!-- <a href="#" class="product-name"> Product 1</a> -->
|
||||
<!-- <div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Ar-Rahn Kota Bharu 2</p>
|
||||
<p class="mb-0">00:15:29</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Ar-Rahn Rantau Panjang</p>
|
||||
<p class="mb-0">00:20:29</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Ar-Rahn OneStop</p>
|
||||
<p class="mb-0">00:15:29</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Ar-Rahn OneStop</p>
|
||||
<p class="mb-0">00:15:29</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="small m-t-xs">
|
||||
Masa Tamat Lelongan: 00:15:29
|
||||
</div> -->
|
||||
<!-- <div class="m-t text-righ">
|
||||
<a href="#" class="btn btn-xs btn-outline btn-primary"
|
||||
>Info <i class="fa fa-long-arrow-right"></i>
|
||||
</a>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <hr /> -->
|
||||
<!-- <div>
|
||||
<a href="#" class="product-name"> Product 2</a>
|
||||
<div class="small m-t-xs">
|
||||
Many desktop publishing packages and web page editors now.
|
||||
</div>
|
||||
<div class="m-t text-righ">
|
||||
<a href="#" class="btn btn-xs btn-outline btn-primary"
|
||||
>Info <i class="fa fa-long-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal ubah bidaan -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="editModal"
|
||||
@@ -284,13 +254,13 @@
|
||||
aria-labelledby="editModalLabel"
|
||||
aria-hidden="true"
|
||||
data-bs-backdrop="static"
|
||||
data-bs-keyboard="false"
|
||||
>
|
||||
<!-- <form @submit.prevent="submit"> -->
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<!-- <h5 class="modal-title" id="editModalLabel">{{norujukan.datalelongbid.norujukan}}</h5> -->
|
||||
<h5 class="modal-title" id="editModalLabel">
|
||||
{{ test.norujukan }}
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
@@ -301,22 +271,104 @@
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row m-2">
|
||||
<!-- <div class="col-2 border"></div> -->
|
||||
<div class="col">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<!-- <h5>No Rujukan: {{ test.norujukan }}</h5> -->
|
||||
<p>Marhun: {{ test.marhun }}</p>
|
||||
<p>Jumlah Berat: {{ test.berat }}g</p>
|
||||
<table class="table table-bordered">
|
||||
<!-- <thead>
|
||||
<tr>
|
||||
<th scope="col">No</th>
|
||||
<th scope="col">Jenis Marhun</th>
|
||||
<th scope="col">Karat</th>
|
||||
<th scope="col">Berat</th>
|
||||
<th scope="col">Nota</th>
|
||||
<th scope="col">Harga Asas</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</thead> -->
|
||||
<tbody>
|
||||
<tr class="table-light">
|
||||
<th scope="col">No</th>
|
||||
<th scope="col">Jenis Marhun</th>
|
||||
<th scope="col">Karat</th>
|
||||
<th scope="col">Berat</th>
|
||||
<th scope="col">Nota</th>
|
||||
<th scope="col">Harga Asas</th>
|
||||
</tr>
|
||||
<tr v-for="(data, index) in test2" :key="index.id">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ data.marhun }}</td>
|
||||
<td>{{ data.karat }}</td>
|
||||
<td>{{ data.berat }}g</td>
|
||||
<td>{{ data.nota }}</td>
|
||||
<td>RM{{ data.hargaasas }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>harga bida: RM{{ norujukan.hargabida }}</p>
|
||||
<div class="row">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5">
|
||||
<label class="col-form-label text-end"
|
||||
>Jumlah Harga Asas</label
|
||||
>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<!-- <input
|
||||
type="text"
|
||||
class="form-control"
|
||||
disabled
|
||||
/> -->
|
||||
<div
|
||||
style="background-color: #e9ecef"
|
||||
class="form-control text-start justify-content-start"
|
||||
disabled
|
||||
>
|
||||
{{ test.hargaasas }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5">
|
||||
<label class="col-form-label">Tambahan Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
v-model="tambahan"
|
||||
type="text"
|
||||
id="tambahanbida"
|
||||
class="form-control"
|
||||
@change="calcTotal(tambahan)"
|
||||
/>
|
||||
<div
|
||||
style="font-size: 10px"
|
||||
class="fst-italic text-danger"
|
||||
>
|
||||
*Minimum tambahan harga bida adalah RM1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5">
|
||||
<label class="col-form-label">Jumlah Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="formEdit.hargabida"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<div class="input-group mb-3">
|
||||
<label class="col-form-label me-2"
|
||||
>Tambahan Harga Bida</label
|
||||
@@ -333,10 +385,10 @@
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="form.hargabida"
|
||||
v-model="formEdit.hargabida"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -354,11 +406,142 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </form> -->
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
<!-- modal padam bidaan -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="deleteModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="deleteModalLabel"
|
||||
aria-hidden="true"
|
||||
data-bs-backdrop="static"
|
||||
data-bs-keyboard="false"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
|
||||
<h5>ADAKAH ANDA PASTI?</h5>
|
||||
<p>Padam item dalam troli.</p>
|
||||
|
||||
<table class="table table-bordered">
|
||||
<tbody>
|
||||
<tr class="bg-light">
|
||||
<th>SAG</th>
|
||||
<th>Harga Bida</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ test.norujukan }}</td>
|
||||
<td>RM{{ data.hargabida }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="text-danger text-sm mt-3">
|
||||
<i>*Tindakan ini tidak dapat dikembalikan</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-secondary me-2"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Kembali
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-danger"
|
||||
@click="deleteCart(data.id)"
|
||||
>
|
||||
Padam
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal bayar yuran -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="payModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="payModalLabel"
|
||||
aria-hidden="true"
|
||||
data-bs-backdrop="static"
|
||||
data-bs-keyboard="false"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editModalLabel">Daftar Bidaan</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
|
||||
<p>ADAKAH ANDA PASTI?</p>
|
||||
<h4 class="text-danger">
|
||||
<i
|
||||
>Caj yuran, RM10 akan dikenakan untuk setiap kali pendaftaran
|
||||
bidaan.</i
|
||||
>
|
||||
</h4>
|
||||
|
||||
<table class="table table-bordered">
|
||||
<tbody>
|
||||
<tr class="bg-light">
|
||||
<th>Jumlah Surat</th>
|
||||
<th>Jumlah Bidaan</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ total_sag }}</td>
|
||||
<td>RM{{ total_bidaan }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- <p class="text-danger text-sm mt-3">
|
||||
<i>*Tindakan ini tidak dapat dikembalikan</i>
|
||||
</p> -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-secondary me-2"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Kembali
|
||||
</button>
|
||||
<button type="submit" class="btn btn-success" @click="feePayment()">
|
||||
Bayar
|
||||
</button>
|
||||
<p
|
||||
class="fst-italic mt-3 fw-lighter"
|
||||
style="text-align: right; font-size: small"
|
||||
>
|
||||
*Pelayar akan dialihkan ke halaman pembayaran jika butang 'Bayar'
|
||||
ditekan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -376,10 +559,13 @@ export default {
|
||||
return {
|
||||
loading: false,
|
||||
senaraiCarts: [],
|
||||
dataLelongBids: [],
|
||||
lelongBidMarhuns: [],
|
||||
norujukan: "",
|
||||
form: {
|
||||
tambahan: "",
|
||||
test: "",
|
||||
test2: [],
|
||||
// dataLelongBids: [],
|
||||
// lelongBidMarhuns: [],
|
||||
data: "",
|
||||
formEdit: {
|
||||
id: "",
|
||||
hargabida: "",
|
||||
},
|
||||
@@ -390,49 +576,69 @@ export default {
|
||||
user_id: "8",
|
||||
lelong_id: "20",
|
||||
},
|
||||
// jumlah_sag: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
total_sag() {
|
||||
localStorage.setItem("cart", this.senaraiCarts.length);
|
||||
return this.senaraiCarts.length;
|
||||
},
|
||||
total_bidaan() {
|
||||
let total = 0;
|
||||
this.senaraiCarts.forEach((val) => {
|
||||
total += parseFloat(val.hargabida);
|
||||
//or if you pass float numbers , use parseFloat()
|
||||
});
|
||||
return total.toFixed(2);
|
||||
// console.log(basket_total);
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
this.listCart();
|
||||
},
|
||||
methods: {
|
||||
validate: function () {},
|
||||
listCart() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/cart/" + localStorage.getItem("id"))
|
||||
.then((response) => {
|
||||
let ref = this;
|
||||
// let ref = this;
|
||||
this.senaraiCarts = response.data;
|
||||
|
||||
this.senaraiCarts.forEach(function (senaraiCarts, index, arr) {
|
||||
ref.dataLelongBids.push(arr[index].datalelongbid);
|
||||
});
|
||||
// this.senaraiCarts.forEach(function (senaraiCarts, index, arr) {
|
||||
// ref.dataLelongBids.push(arr[index].datalelongbid);
|
||||
// });
|
||||
|
||||
this.dataLelongBids.forEach(function (dataLelongBids, index, arr2) {
|
||||
ref.lelongBidMarhuns.push(arr2[index].lelongbidmarhun);
|
||||
});
|
||||
console.log(this.lelongBidMarhuns);
|
||||
// this.dataLelongBids.forEach(function (dataLelongBids, index, arr2) {
|
||||
// ref.lelongBidMarhuns.push(arr2[index].lelongbidmarhun);
|
||||
// });
|
||||
// console.log(this.lelongBidMarhuns);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
editModal(norujukan) {
|
||||
this.norujukan = norujukan;
|
||||
this.form.id = this.norujukan.id;
|
||||
// this.marhuns = this.norujukan.lelongbidmarhun;
|
||||
// this.form.lelongbid_id = this.norujukan.id;
|
||||
|
||||
// this.try = data().form.lelongbid_id
|
||||
// let carName = this.try;
|
||||
// document.getElementById("demo").innerHTML = carName;
|
||||
// console.log(this.form.lelongbid_id);
|
||||
console.log(norujukan);
|
||||
calcTotal(value) {
|
||||
this.formEdit.hargabida =
|
||||
parseFloat(this.tambahan) + parseFloat(this.test.hargaasas);
|
||||
// console.log(this.norujukan);
|
||||
// console.log(value);
|
||||
},
|
||||
editModal(data) {
|
||||
this.data = data;
|
||||
this.test = this.data.datalelongbid;
|
||||
this.test2 = this.data.datalelongbid.lelongbidmarhun;
|
||||
this.formEdit.id = this.data.id;
|
||||
this.tambahan = this.data.hargabida - this.test.hargaasas;
|
||||
this.formEdit.hargabida = this.data.hargabida;
|
||||
console.log(this.data.hargabida);
|
||||
},
|
||||
updateItem() {
|
||||
axios
|
||||
.post("/updateItem", this.form, {
|
||||
.post("/updateItem", this.formEdit, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
@@ -440,24 +646,24 @@ export default {
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
location.reload();
|
||||
// bidaModal.hide();
|
||||
// call Cart component to refresh
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
deleteCart(norujukan) {
|
||||
deleteModal(data) {
|
||||
this.data = data;
|
||||
this.test = this.data.datalelongbid;
|
||||
console.log(data.datalelongbid.norujukan);
|
||||
},
|
||||
deleteCart(id) {
|
||||
axios
|
||||
.get("/deleteItem/" + norujukan, {
|
||||
.get("/deleteItem/" + id, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
// this.lelong_details = response.data[0];
|
||||
// this.response = response.data[0].lelongbid;
|
||||
// this.sags = this.response;
|
||||
console.log(response);
|
||||
location.reload();
|
||||
})
|
||||
@@ -470,9 +676,6 @@ export default {
|
||||
.post("/feepayment", this.formPayment, {})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
// location.reload();
|
||||
// bidaModal.hide();
|
||||
// call Cart component to refresh
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
|
||||
+12
-5
@@ -3,8 +3,16 @@
|
||||
</div> -->
|
||||
|
||||
<Navbar />
|
||||
<div class="spinner-border modal-dialog modal-dialog-centered" v-if="loading" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 70vh; display: grid; place-items: center;"
|
||||
>
|
||||
<div
|
||||
class="spinner-border"
|
||||
role="status"
|
||||
>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="container">
|
||||
<button
|
||||
@@ -15,7 +23,7 @@
|
||||
Back <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<h1>Pay</h1>
|
||||
<h1>Bayar <i class="bi bi-credit-card-2-back-fill"></i></h1>
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-sm-12" style="overflow-x: auto">
|
||||
<div class="ibox">
|
||||
@@ -189,9 +197,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 70vh; display: grid; place-items: center"
|
||||
>
|
||||
<div class="spinner-border" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div v-else class="container">
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
@@ -67,6 +75,7 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
@@ -74,7 +83,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
profile() {
|
||||
// this.loading = true;
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/user/profile/" + localStorage.getItem("nokp"), {
|
||||
headers: {
|
||||
@@ -85,6 +94,7 @@ export default {
|
||||
this.data = response.data[0];
|
||||
// this.total_hargabida = response.data[0].total_hargabida;
|
||||
console.log(response);
|
||||
this.loading=false;
|
||||
// this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div v-for="todo in allTodos" :key="todo.id">
|
||||
<p>{{todo.masakemaskini_data}}</p>
|
||||
</div>
|
||||
<p>{{this.allTodos.length}}</p>
|
||||
<!-- <p>asd</p> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Todos",
|
||||
methods: {
|
||||
...mapActions(["fetchTodos"])
|
||||
},
|
||||
computed: mapGetters(["allTodos"]),
|
||||
created() {
|
||||
this.fetchTodos();
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user