rekod bidaan ui, bayar ui, payment gateway,
This commit is contained in:
Amir
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
<div class="container" style="height: 70vh">
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Kembali <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<h1>Rekod Bidaan <i class="bi bi-receipt"></i></h1>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<button @click="renderListBid" class="badge btn-secondary">
|
||||
Reload <i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
<ListBid :key="ListBidComponent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
// import BidDetail from "./bidhistory/BidDetail.vue";
|
||||
import ListBid from "./bidhistory/ListBid.vue";
|
||||
|
||||
export default {
|
||||
name: "BidHistory",
|
||||
data() {
|
||||
return {
|
||||
ListBidComponent: 0,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Navbar,
|
||||
Footer,
|
||||
ListBid,
|
||||
},
|
||||
methods: {
|
||||
renderListBid() {
|
||||
this.ListBidComponent += 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
+45
-23
@@ -18,7 +18,7 @@
|
||||
Kembali <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<h1>Cart <i class="bi bi-cart3"></i></h1>
|
||||
<h1>Troli <i class="bi bi-cart3"></i></h1>
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-sm-12" style="overflow-x: auto">
|
||||
<div class="ibox">
|
||||
@@ -64,7 +64,7 @@
|
||||
<h3 class="text-primary">
|
||||
{{ senaraiCart.datalelongbid.norujukan }}
|
||||
</h3>
|
||||
|
||||
|
||||
<dl class="small m-b-none">
|
||||
<p>
|
||||
Marhun:
|
||||
@@ -131,7 +131,7 @@
|
||||
<div class="col-3">
|
||||
<div class="ibox" style="border: #e7eaec solid 1px">
|
||||
<div class="ibox-title" style="padding: 20px">
|
||||
<h5>Ringkasan Cart</h5>
|
||||
<h5>Ringkasan Troli</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="small m-t-xs">
|
||||
@@ -167,6 +167,11 @@
|
||||
Teruskan <i class="fa fa-shopping-cart"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button @click="feePayment()" class="btn btn-primary">
|
||||
try bavayar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -202,7 +207,7 @@
|
||||
<div class="modal-body">
|
||||
<div class="row m-2">
|
||||
<div class="col">
|
||||
<p>Marhun: {{ test.marhun }}</p>
|
||||
<!-- <p>Marhun: {{ test.marhun }}</p> -->
|
||||
<p>Jumlah Berat: {{ test.berat }}g</p>
|
||||
<table class="table table-bordered">
|
||||
<tbody>
|
||||
@@ -234,7 +239,7 @@
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<div
|
||||
style="background-color: #e9ecef"
|
||||
style="background-color: #e9ecef; padding-bottom: 0px"
|
||||
class="form-control text-start justify-content-start"
|
||||
disabled
|
||||
>
|
||||
@@ -243,12 +248,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="row justify-content-center mb-3">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label">Tambahan Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
v-model="tambahan"
|
||||
@@ -257,17 +262,19 @@
|
||||
class="form-control"
|
||||
@change="calcTotal()"
|
||||
/>
|
||||
<div
|
||||
style="font-size: 13px"
|
||||
class="fst-italic text-danger"
|
||||
v-if="v$.tambahan.$error"
|
||||
>
|
||||
<div class="text-start">
|
||||
*Minimum tambahan harga bida adalah RM1.
|
||||
</div>
|
||||
<div class="text-start">
|
||||
*Gandaan ringgit sahaja dibenarkan.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div
|
||||
style="font-size: 15px"
|
||||
class="fst-italic text-danger"
|
||||
v-if="v$.tambahan.$error"
|
||||
>
|
||||
<div class="text-end">
|
||||
*Minimum tambahan harga bida adalah RM1.
|
||||
</div>
|
||||
<div class="text-end">
|
||||
*Gandaan ringgit sahaja dibenarkan.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -473,10 +480,10 @@ export default {
|
||||
},
|
||||
formPayment: {
|
||||
email: "amirhamzan30@gmail.com",
|
||||
notel: "01920192",
|
||||
notel: "0198900990",
|
||||
name: "amir",
|
||||
user_id: "8",
|
||||
lelong_id: "20",
|
||||
lelong_id: "3",
|
||||
},
|
||||
};
|
||||
},
|
||||
@@ -501,6 +508,16 @@ export default {
|
||||
this.listCart();
|
||||
},
|
||||
methods: {
|
||||
trybayar() {
|
||||
axios
|
||||
.post("/feepayment", this.formPayment)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
listCart() {
|
||||
this.loading = true;
|
||||
axios
|
||||
@@ -569,13 +586,18 @@ export default {
|
||||
},
|
||||
feePayment() {
|
||||
axios
|
||||
.post("/feepayment", this.formPayment, {})
|
||||
.post("/feepayment", this.formPayment)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
window.open(
|
||||
response.data.message + '?auto_submit=true'
|
||||
);
|
||||
|
||||
// window.location.href = response.data.message + '?auto_submit=true';
|
||||
})
|
||||
.catch((error) => {
|
||||
// console.log("test");
|
||||
console.log(error);
|
||||
console.log(this.formPayment);
|
||||
// console.log(this.formPayment);
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
<div class="container" style="height: 70vh">
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Kembali <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<h1>Rekod Bidaan <i class="bi bi-receipt"></i></h1>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Navbar,
|
||||
Footer,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -25,7 +25,7 @@
|
||||
<router-link class="nav-link" to="/cart">Cart</router-link>
|
||||
</li> -->
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/history">Rekod Bidaan</router-link>
|
||||
<router-link class="nav-link" to="/bidhistory">Rekod Bidaan</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/pay">Bayar</router-link>
|
||||
@@ -37,7 +37,7 @@
|
||||
</ul>
|
||||
|
||||
<router-link class="btn btn-primary me-5" to="/cart"
|
||||
>Cart <i class="bi bi-cart3"></i
|
||||
>Troli <i class="bi bi-cart3"></i
|
||||
><span class="span_cart">{{
|
||||
this.allCarts.length
|
||||
}}</span></router-link
|
||||
|
||||
+32
-325
@@ -1,20 +1,6 @@
|
||||
<template>
|
||||
<!-- <div class="top-0 fixed w-full">
|
||||
</div> -->
|
||||
|
||||
<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 v-else class="container">
|
||||
<div class="container">
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
@@ -25,335 +11,56 @@
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<h1>Bayar <i class="bi bi-credit-card-2-front"></i></h1>
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-sm-12" style="overflow-x: auto">
|
||||
<div class="ibox">
|
||||
<!-- <div class="container">
|
||||
<div class="row justify-content-between">
|
||||
<span class="pull-right">(<strong>5</strong>) items</span>
|
||||
<h5>Items in your cart</h5>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="ibox-content">
|
||||
<div class="table-responsive">
|
||||
<table class="table shoping-cart-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Maklumat Marhun</td>
|
||||
|
||||
<td
|
||||
width="80"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Harga Bida
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content" v-for="sag in sags" :key="sag.id">
|
||||
<div class="table-responsive">
|
||||
<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">
|
||||
{{ sag.norujukan }}
|
||||
</h3>
|
||||
</td>
|
||||
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
<h4>RM{{ sag.hargabida }}</h4>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="ibox-content">
|
||||
<div class="table-responsive">
|
||||
<table class="table shoping-cart-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="90">
|
||||
<div class="cart-product-imitation"></div>
|
||||
</td>
|
||||
<td class="desc">
|
||||
<h3>
|
||||
<a href="#"> Photo editor </a>
|
||||
</h3>
|
||||
<p class="small">
|
||||
Page when looking at its layout. The point of using
|
||||
Lorem Ipsum is
|
||||
</p>
|
||||
<dl class="small m-b-none">
|
||||
<dt>Description lists</dt>
|
||||
<dd>
|
||||
A description list is perfect for defining terms.
|
||||
</dd>
|
||||
</dl>
|
||||
<div class="m-t-sm">
|
||||
<a href="#" class="text-muted"
|
||||
><i class="fa fa-gift"></i> Add gift package</a
|
||||
>
|
||||
|
|
||||
<a href="#" class="text-muted"
|
||||
><i class="fa fa-trash"></i> Remove item</a
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td>$700,00</td>
|
||||
<td width="65">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="1"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h4>$70,00</h4>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="ibox-content">
|
||||
<!-- <button class="btn btn-primary pull-right">
|
||||
<i class="fa fa fa-shopping-cart"></i> Checkout
|
||||
</button>
|
||||
<button class="btn btn-white">
|
||||
<i class="fa fa-arrow-left"></i> Continue shopping
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<h3 class="text-start">Belum Selesai </h3>
|
||||
<h5>
|
||||
<button @click="renderToPay" class="badge btn-secondary">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-title" style="padding: 20px">
|
||||
<h5>Jumlah</h5>
|
||||
</div>
|
||||
|
||||
<div class="ibox-content">
|
||||
<!-- <span> Jumlah Bidaan </span> -->
|
||||
<h2 class="font-bold">RM{{ total_hargabida }}</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> -->
|
||||
<a href="#" class="btn btn-primary">Bayar </a>
|
||||
</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> -->
|
||||
<ToPay :key="toPayComponent" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="d-flex">
|
||||
<h3 class="text-start">Rekod Bayaran </h3>
|
||||
<h5>
|
||||
<button @click="renderPaymentHistory" class="badge btn-secondary">
|
||||
<i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
</h5>
|
||||
</div>
|
||||
<PaymentHistory :key="paymentHistoryComponent" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
import axios from "axios";
|
||||
import ToPay from "./result/ToPay.vue";
|
||||
import PaymentHistory from "./result/PaymentHistory.vue";
|
||||
|
||||
export default {
|
||||
name: "Cart",
|
||||
components: {
|
||||
Navbar,
|
||||
Footer,
|
||||
},
|
||||
name: "Pay",
|
||||
components: { Navbar, Footer, ToPay, PaymentHistory },
|
||||
data() {
|
||||
return {
|
||||
sags: Array,
|
||||
total_hargabida: "",
|
||||
loading: false,
|
||||
toPayComponent: 0,
|
||||
paymentHistoryComponent: 0,
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.resultBid();
|
||||
},
|
||||
methods: {
|
||||
resultBid() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/result/" + localStorage.getItem("id"), {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.sags = response.data[0].sag;
|
||||
this.total_hargabida = response.data[0].total_hargabida;
|
||||
console.log(response);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
renderToPay() {
|
||||
this.toPayComponent += 1;
|
||||
},
|
||||
renderPaymentHistory() {
|
||||
this.paymentHistoryComponent += 1;
|
||||
},
|
||||
},
|
||||
// data() {
|
||||
// return {
|
||||
// countDown: 10,
|
||||
// };
|
||||
// },
|
||||
// method: {
|
||||
// countDownTimer() {
|
||||
// if (this.countDown > 0) {
|
||||
// setTimeout(() => {
|
||||
// this.countDown -= 1;
|
||||
// this.countDownTimer();
|
||||
// }, 1000);
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// created: this.countDownTimer(),
|
||||
};
|
||||
</script>
|
||||
|
||||
<style >
|
||||
body {
|
||||
margin-top: 20px;
|
||||
background: #eee;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
}
|
||||
.cart-product-imitation {
|
||||
text-align: center;
|
||||
padding-top: 30px;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
.product-imitation.xl {
|
||||
padding: 120px 0;
|
||||
}
|
||||
.product-desc {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ecommerce .tag-list {
|
||||
padding: 0;
|
||||
}
|
||||
.ecommerce .fa-star {
|
||||
color: #d1dade;
|
||||
}
|
||||
.ecommerce .fa-star.active {
|
||||
color: #f8ac59;
|
||||
}
|
||||
.ecommerce .note-editor {
|
||||
border: 1px solid #e7eaec;
|
||||
}
|
||||
table.shoping-cart-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
table.shoping-cart-table tr td {
|
||||
border: none;
|
||||
text-align: right;
|
||||
}
|
||||
table.shoping-cart-table tr td.desc,
|
||||
table.shoping-cart-table tr td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
table.shoping-cart-table tr td:last-child {
|
||||
width: 80px;
|
||||
}
|
||||
.ibox {
|
||||
clear: both;
|
||||
margin-bottom: 25px;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ibox.collapsed .ibox-content {
|
||||
display: none;
|
||||
}
|
||||
.ibox:after,
|
||||
.ibox:before {
|
||||
display: table;
|
||||
}
|
||||
.ibox-title {
|
||||
-moz-border-bottom-colors: none;
|
||||
-moz-border-left-colors: none;
|
||||
-moz-border-right-colors: none;
|
||||
-moz-border-top-colors: none;
|
||||
background-color: #ffffff;
|
||||
border-color: #e7eaec;
|
||||
border-image: none;
|
||||
border-style: solid solid none;
|
||||
border-width: 3px 0 0;
|
||||
color: inherit;
|
||||
margin-bottom: 0;
|
||||
padding: 14px 15px 7px;
|
||||
min-height: 48px;
|
||||
}
|
||||
.ibox-content {
|
||||
background-color: #ffffff;
|
||||
color: inherit;
|
||||
padding: 15px 20px 20px 20px;
|
||||
border-color: #e7eaec;
|
||||
border-image: none;
|
||||
border-style: solid solid none;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
.ibox-footer {
|
||||
color: inherit;
|
||||
border-top: 1px solid #e7eaec;
|
||||
font-size: 90%;
|
||||
background: #ffffff;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<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="">
|
||||
<div class="container">
|
||||
<div v-for="data in listBid" :key="data.id">
|
||||
<div class="d-flex">
|
||||
<p>Lelong ID:</p>
|
||||
<p>{{ data.lelong_id }}</p>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<p>Tarikh Lelong:</p>
|
||||
<p>{{ data.t_lelong }}</p>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="card">{{ data.lelongbid.length }} surat</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "BidDetail",
|
||||
data() {
|
||||
return {
|
||||
listBid: [],
|
||||
loading : false
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.liveData();
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/bidder/listBidItembWeb/" + localStorage.getItem("id"), {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.listBid = response.data;
|
||||
console.log(response);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -149,7 +149,7 @@
|
||||
<div class="modal-body">
|
||||
<div class="row m-2">
|
||||
<div class="col">
|
||||
<p>Marhun: {{ norujukan.marhun }}</p>
|
||||
<!-- <p>Marhun: {{ norujukan.marhun }}</p> -->
|
||||
<p>Jumlah Berat: {{ norujukan.berat }}g</p>
|
||||
<table class="table table-bordered">
|
||||
<tbody>
|
||||
@@ -172,7 +172,7 @@
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label text-end"
|
||||
>Jumlah Harga Asas</label
|
||||
>
|
||||
@@ -190,12 +190,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5">
|
||||
<div class="row justify-content-center mb-3">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label">Tambahan Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
v-model="tambahan"
|
||||
@@ -204,23 +204,25 @@
|
||||
class="form-control"
|
||||
@change="calcTotal()"
|
||||
/>
|
||||
<div
|
||||
style="font-size: 13px"
|
||||
class="fst-italic text-danger"
|
||||
v-if="v$.tambahan.$error"
|
||||
>
|
||||
<div class="text-start">
|
||||
*Minimum tambahan harga bida adalah RM1.
|
||||
</div>
|
||||
<div class="text-start">
|
||||
*Gandaan ringgit sahaja dibenarkan.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div
|
||||
style="font-size: 13px"
|
||||
class="fst-italic text-danger"
|
||||
v-if="v$.tambahan.$error"
|
||||
>
|
||||
<div class="text-end">
|
||||
*Minimum tambahan harga bida adalah RM1.
|
||||
</div>
|
||||
<div class="text-end">
|
||||
*Gandaan ringgit sahaja dibenarkan.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label">Jumlah Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
@@ -311,7 +313,7 @@ export default {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
params: {
|
||||
caw_id: "3",
|
||||
caw_id: "4",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<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>
|
||||
<!-- <div class="card"> -->
|
||||
<!-- <div class="card-header">
|
||||
<table class="table"></table>
|
||||
</div> -->
|
||||
<div class="card-body mb-5">
|
||||
<table class="table table-bordered">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Tarikh Lelong</th>
|
||||
<th scope="col">Jumlah</th>
|
||||
<th scope="col">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(data, index) in paymentHistory" :key="data.id">
|
||||
<th scope="row">{{ index + 1 }}</th>
|
||||
<td>{{data.tarikh_lelong}}</td>
|
||||
<td>RM{{data.total}}</td>
|
||||
<td>{{data.status}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "HistoryResult",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
paymentHistory: [],
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.liveData();
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/history/" + localStorage.getItem("id"), {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.paymentHistory = response.data;
|
||||
console.log(this.paymentHistory);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<!-- <div class="top-0 fixed w-full">
|
||||
</div> -->
|
||||
|
||||
<!-- <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 v-else class="container">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-sm-12" style="overflow-x: auto">
|
||||
<div class="ibox">
|
||||
<!-- <div class="container">
|
||||
<div class="row justify-content-between">
|
||||
<span class="pull-right">(<strong>5</strong>) items</span>
|
||||
<h5>Items in your cart</h5>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="ibox-content">
|
||||
<div class="table-responsive">
|
||||
<table class="table shoping-cart-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Maklumat Marhun</td>
|
||||
|
||||
<td
|
||||
width="80"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
Harga Bida
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content" v-for="sag in sags" :key="sag.id">
|
||||
<div class="table-responsive">
|
||||
<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">
|
||||
{{ sag.norujukan }}
|
||||
</h3>
|
||||
</td>
|
||||
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
<h4>RM{{ sag.hargabida }}</h4>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="ibox-content">
|
||||
<div class="table-responsive">
|
||||
<table class="table shoping-cart-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td width="90">
|
||||
<div class="cart-product-imitation"></div>
|
||||
</td>
|
||||
<td class="desc">
|
||||
<h3>
|
||||
<a href="#"> Photo editor </a>
|
||||
</h3>
|
||||
<p class="small">
|
||||
Page when looking at its layout. The point of using
|
||||
Lorem Ipsum is
|
||||
</p>
|
||||
<dl class="small m-b-none">
|
||||
<dt>Description lists</dt>
|
||||
<dd>
|
||||
A description list is perfect for defining terms.
|
||||
</dd>
|
||||
</dl>
|
||||
<div class="m-t-sm">
|
||||
<a href="#" class="text-muted"
|
||||
><i class="fa fa-gift"></i> Add gift package</a
|
||||
>
|
||||
|
|
||||
<a href="#" class="text-muted"
|
||||
><i class="fa fa-trash"></i> Remove item</a
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td>$700,00</td>
|
||||
<td width="65">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="1"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<h4>$70,00</h4>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="ibox-content">
|
||||
<!-- <button class="btn btn-primary pull-right">
|
||||
<i class="fa fa fa-shopping-cart"></i> Checkout
|
||||
</button>
|
||||
<button class="btn btn-white">
|
||||
<i class="fa fa-arrow-left"></i> Continue shopping
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-title" style="padding: 20px">
|
||||
<h5>Jumlah</h5>
|
||||
</div>
|
||||
|
||||
<div class="ibox-content">
|
||||
<!-- <span> Jumlah Bidaan </span> -->
|
||||
<h2 class="font-bold">RM{{ total_hargabida }}</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> -->
|
||||
<a href="#" class="btn btn-primary">Bayar </a>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <HistoryResult /> -->
|
||||
<!-- <Footer /> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "../Navbar.vue";
|
||||
import Footer from "../Footer.vue";
|
||||
// import HistoryResult from "./HistoryResult.vue"
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "Cart",
|
||||
components: {
|
||||
Navbar,
|
||||
Footer,
|
||||
// HistoryResult,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
sags: Array,
|
||||
total_hargabida: "",
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.resultBid();
|
||||
},
|
||||
methods: {
|
||||
resultBid() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/result/" + localStorage.getItem("id"), {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.sags = response.data[0].sag;
|
||||
this.total_hargabida = response.data[0].total_hargabida;
|
||||
console.log(response);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
// data() {
|
||||
// return {
|
||||
// countDown: 10,
|
||||
// };
|
||||
// },
|
||||
// method: {
|
||||
// countDownTimer() {
|
||||
// if (this.countDown > 0) {
|
||||
// setTimeout(() => {
|
||||
// this.countDown -= 1;
|
||||
// this.countDownTimer();
|
||||
// }, 1000);
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// created: this.countDownTimer(),
|
||||
};
|
||||
</script>
|
||||
|
||||
<style >
|
||||
body {
|
||||
margin-top: 20px;
|
||||
background: #eee;
|
||||
}
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.text-navy {
|
||||
color: #1ab394;
|
||||
}
|
||||
.cart-product-imitation {
|
||||
text-align: center;
|
||||
padding-top: 30px;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
.product-imitation.xl {
|
||||
padding: 120px 0;
|
||||
}
|
||||
.product-desc {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.ecommerce .tag-list {
|
||||
padding: 0;
|
||||
}
|
||||
.ecommerce .fa-star {
|
||||
color: #d1dade;
|
||||
}
|
||||
.ecommerce .fa-star.active {
|
||||
color: #f8ac59;
|
||||
}
|
||||
.ecommerce .note-editor {
|
||||
border: 1px solid #e7eaec;
|
||||
}
|
||||
table.shoping-cart-table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
table.shoping-cart-table tr td {
|
||||
border: none;
|
||||
text-align: right;
|
||||
}
|
||||
table.shoping-cart-table tr td.desc,
|
||||
table.shoping-cart-table tr td:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
table.shoping-cart-table tr td:last-child {
|
||||
width: 80px;
|
||||
}
|
||||
.ibox {
|
||||
clear: both;
|
||||
margin-bottom: 25px;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ibox.collapsed .ibox-content {
|
||||
display: none;
|
||||
}
|
||||
.ibox:after,
|
||||
.ibox:before {
|
||||
display: table;
|
||||
}
|
||||
.ibox-title {
|
||||
-moz-border-bottom-colors: none;
|
||||
-moz-border-left-colors: none;
|
||||
-moz-border-right-colors: none;
|
||||
-moz-border-top-colors: none;
|
||||
background-color: #ffffff;
|
||||
border-color: #e7eaec;
|
||||
border-image: none;
|
||||
border-style: solid solid none;
|
||||
border-width: 3px 0 0;
|
||||
color: inherit;
|
||||
margin-bottom: 0;
|
||||
padding: 14px 15px 7px;
|
||||
min-height: 48px;
|
||||
}
|
||||
.ibox-content {
|
||||
background-color: #ffffff;
|
||||
color: inherit;
|
||||
padding: 15px 20px 20px 20px;
|
||||
border-color: #e7eaec;
|
||||
border-image: none;
|
||||
border-style: solid solid none;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
.ibox-footer {
|
||||
color: inherit;
|
||||
border-top: 1px solid #e7eaec;
|
||||
font-size: 90%;
|
||||
background: #ffffff;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
</style>
|
||||
+10
-2
@@ -4,10 +4,11 @@ import Register from '../components/Register.vue';
|
||||
import Dashboard from './../components/Dashboard.vue';
|
||||
import Cart from './../components/Cart.vue';
|
||||
import List from './../components/List.vue'
|
||||
import Pay from './../components/Pay.vue'
|
||||
import Pay from '../components/Pay.vue'
|
||||
import Profile from './../components/Profile.vue'
|
||||
import BidHistory from '../components/BidHistory.vue'
|
||||
// import Modals from './../components/Modal.vue'
|
||||
import { Modal } from "bootstrap";
|
||||
// import { Modal } from "bootstrap";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
@@ -57,6 +58,13 @@ const routes = [
|
||||
component: Profile,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
{
|
||||
path: '/bidhistory',
|
||||
name: 'BidHistory',
|
||||
component: BidHistory,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
// {
|
||||
// name: 'Modal',
|
||||
|
||||
Reference in New Issue
Block a user