add main components
This commit is contained in:
Amir
@@ -24,7 +24,6 @@ export default {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.list {
|
||||
|
||||
@@ -259,7 +259,7 @@
|
||||
<button
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#bidModal"
|
||||
class="btn btn-primary"
|
||||
class="btn btn-primary mt-3"
|
||||
>
|
||||
Daftar Bidaan <i class="fa fa-shopping-cart"></i>
|
||||
</button>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
|
||||
<div class="container-fluid">
|
||||
<router-link class="navbar-brand text-primary fw-bold" to="/">Sistem Lelong</router-link>
|
||||
<router-link class="navbar-brand text-primary fw-bold" v-bind:to="{name: 'home'}">Sistem Lelong</router-link>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
@@ -16,7 +16,7 @@
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/">Home</router-link>
|
||||
<router-link class="nav-link" v-bind:to="{name: 'home'}">Home</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/list">Senarai</router-link>
|
||||
@@ -25,10 +25,10 @@
|
||||
<router-link class="nav-link" to="/cart">Cart</router-link>
|
||||
</li> -->
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/bid-history">Rekod Bidaan</router-link>
|
||||
<router-link class="nav-link" v-bind:to="{name: 'bid-record'}">Rekod Bidaan</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/payment-history">Keputusan</router-link>
|
||||
<router-link class="nav-link" v-bind:to="{name: 'result'}">Keputusan</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" to="/profile">Profil</router-link>
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
<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 v-else class="container">
|
||||
<!-- <button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Kembali <i class="bi bi-backspace-fill"></i>
|
||||
</button> -->
|
||||
<h1>Profil <i class="bi bi-person-video"></i></h1>
|
||||
<div class="card">
|
||||
<!-- <div class="card-header"><h4>Profil</h4></div> -->
|
||||
<div class="card-body">
|
||||
<img
|
||||
src="../assets/profile.png"
|
||||
alt="profile photo"
|
||||
style="width: 225px; height: 230px"
|
||||
/>
|
||||
<div v-if="this.status">
|
||||
<div class="row justify-content-center mt-4 mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Nama
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.name }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Username
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.username }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
No Kad Pengenalan
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.nokp }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
No Tel Bimbit
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.notelbimbit }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Front IC
|
||||
</div>
|
||||
<div class="col-5 text_border" style="height: 200px">
|
||||
{{ data.filename }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Rear IC
|
||||
</div>
|
||||
<div class="col-5 text_border" style="height: 200px">
|
||||
{{ data_2.filename }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>Tiada Data</div>
|
||||
</div>
|
||||
<!-- <div class="card-footer">
|
||||
<p>*Sila hubungi *** jika terdapat masalah</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Navbar,
|
||||
Footer,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
data_2: [],
|
||||
loading: false,
|
||||
status: false,
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.profile();
|
||||
},
|
||||
methods: {
|
||||
profile() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/user/profile/" + localStorage.getItem("nokp"), {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.data.success == true) {
|
||||
this.status = true;
|
||||
this.data = response.data.message[0];
|
||||
this.data_2 = response.data.message[1];
|
||||
this.loading = false;
|
||||
} else {
|
||||
this.status = false;
|
||||
console.log(response.data.message);
|
||||
this.loading = false;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert(error);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text_border {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<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>
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Bil</th>
|
||||
<th scope="col">No Rujukan</th>
|
||||
<th scope="col">Harga Bida</th>
|
||||
<th scope="col">Tarikh/Masa Bidaan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(data, index) in listBid.slice().reverse()"
|
||||
v-bind:key="data.id"
|
||||
>
|
||||
<th scope="row">{{ index + 1 }}</th>
|
||||
<td></td>
|
||||
<td>RM{{ data.hargabida }}</td>
|
||||
<td>{{ data.masa_bidaan }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
name: "BidDetail",
|
||||
data() {
|
||||
return {
|
||||
listBid: [],
|
||||
loading: false,
|
||||
userId: localStorage.getItem("id"),
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.liveData();
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/bidder/listbiditem", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
params: {
|
||||
user_id: this.userId,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
const n = 716298462.79;
|
||||
const formatted = n.toLocaleString("en-MY");
|
||||
console.log(formatted);
|
||||
this.listBid = response.data;
|
||||
console.log(this.listBid);
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<the-template>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-10">
|
||||
<base-card>
|
||||
<h5>REKOD BIDAAN</h5>
|
||||
<button
|
||||
v-on:click="reloadComponent()"
|
||||
class="badge btn-secondary m-2"
|
||||
>
|
||||
Reload <i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
<div class="m-2 mt-3">
|
||||
<label for="bid-date">Pilih Tarikh</label>
|
||||
<input type="date" id="bid-date" name="bid-date" />
|
||||
</div>
|
||||
<bid-record-list v-bind:key="statusComponent"></bid-record-list>
|
||||
</base-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</the-template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BidRecordList from "./BidRecordList.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
"bid-record-list": BidRecordList,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusComponent: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
reloadComponent() {
|
||||
this.statusComponent += 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<the-template>
|
||||
<base-card>
|
||||
<p>this is the bid record</p>
|
||||
</base-card>
|
||||
</the-template>
|
||||
</template>
|
||||
@@ -1,5 +1,939 @@
|
||||
<template>
|
||||
<the-template>
|
||||
<p>this is the cart</p>
|
||||
</the-template>
|
||||
</template>
|
||||
<the-template>
|
||||
<base-card>
|
||||
<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>
|
||||
<!-- <button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Kembali <i class="bi bi-backspace-fill"></i>
|
||||
</button> -->
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<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">
|
||||
<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
|
||||
</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 class="desc">
|
||||
<h3 class="text-primary">
|
||||
{{ senaraiCart.datalelongbid.norujukan }}
|
||||
</h3>
|
||||
|
||||
<dl class="small m-b-none">
|
||||
<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">
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#deleteModal"
|
||||
@click="deleteModal(senaraiCart)"
|
||||
>
|
||||
Hapus
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td
|
||||
width="30"
|
||||
style="width: 145.82px; text-align: center"
|
||||
>
|
||||
RM{{ senaraiCart.datalelongbid.hargaasas }}
|
||||
</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"
|
||||
>
|
||||
<button
|
||||
class="btn btn-warning"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#editModal"
|
||||
@click="editModal(senaraiCart)"
|
||||
>
|
||||
Ubah
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div
|
||||
class="ibox"
|
||||
v-if="feeStatus == 2"
|
||||
style="border: #e7eaec solid 1px"
|
||||
>
|
||||
<div class="ibox-title" style="padding: 20px">
|
||||
<h5>Yuran</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-danger">
|
||||
<i>*Anda perlu membayar yuran sebelum membuat bidaan.</i>
|
||||
</span>
|
||||
<div class="m-t-sm">
|
||||
<!-- <div class="btn-group">
|
||||
<button
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#payModal"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Teruskan <i class="fa fa-shopping-cart"></i>
|
||||
</button>
|
||||
</div> -->
|
||||
<div class="btn-group">
|
||||
<button
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#payModal"
|
||||
class="btn btn-success"
|
||||
>
|
||||
Bayar Yuran
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ibox"
|
||||
v-if="feeStatus == 1"
|
||||
style="border: #e7eaec solid 1px"
|
||||
>
|
||||
<!-- <div class="ibox-title" style="padding: 20px">
|
||||
<h5>Yuran</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> -->
|
||||
<h4 class="text-success">
|
||||
Yuran Telah Berjaya Dibayar
|
||||
<i class="bi bi-check2-circle"></i>
|
||||
</h4>
|
||||
<hr />
|
||||
<span class="fw-bold">
|
||||
<i>*Anda boleh membuat bidaan.</i>
|
||||
</span>
|
||||
<!-- <div class="m-t-sm">
|
||||
|
||||
<div class="btn-group">
|
||||
<button
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#payModal"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
Bayar Yuran
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox" style="border: #e7eaec solid 1px">
|
||||
<div class="ibox-title" style="padding: 20px">
|
||||
<h5>Ringkasan Troli</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
|
||||
>
|
||||
</span> -->
|
||||
<div v-if="feeStatus == 1" class="m-t-sm">
|
||||
<div class="btn-group">
|
||||
<button
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#bidModal"
|
||||
class="btn btn-success mt-3"
|
||||
>
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div>{{$store.state.cart}}</div> -->
|
||||
<!-- <div>{{ myValue.lelong_id }}</div> -->
|
||||
|
||||
<!-- modal ubah bidaan -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="editModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="editModalLabel"
|
||||
aria-hidden="true"
|
||||
data-bs-backdrop="static"
|
||||
>
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editModalLabel">
|
||||
{{ test.norujukan }}
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
ref="ubahClose"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row m-2">
|
||||
<div class="col">
|
||||
<!-- <p>Marhun: {{ test.marhun }}</p> -->
|
||||
<p>Jumlah Berat: {{ test.berat }}g</p>
|
||||
<table class="table table-bordered">
|
||||
<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>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-3">
|
||||
<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>
|
||||
<div
|
||||
style="
|
||||
background-color: #e9ecef;
|
||||
padding-bottom: 0px;
|
||||
"
|
||||
class="
|
||||
form-control
|
||||
text-start
|
||||
justify-content-start
|
||||
"
|
||||
disabled
|
||||
>
|
||||
{{ test.hargaasas }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
v-model="tambahan"
|
||||
type="text"
|
||||
id="tambahanbida"
|
||||
class="form-control"
|
||||
@change="calcTotal()"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-3">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-danger me-2"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-success"
|
||||
@click="updateItem()"
|
||||
>
|
||||
Terima
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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"
|
||||
ref="padamClose"
|
||||
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 daftar bidaan -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="bidModal"
|
||||
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"
|
||||
ref="daftarBidaanClose"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
|
||||
<h3>ADAKAH ANDA PASTI?</h3>
|
||||
<h6 class="text-danger">
|
||||
<i>*Bidaan tidak dapat diubah selepas dihantar.</i>
|
||||
</h6>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-danger me-2"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Tidak
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-success"
|
||||
@click="bidderSelectBidItem()"
|
||||
>
|
||||
Ya
|
||||
</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>
|
||||
|
||||
<!-- 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">Bayar Yuran</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> -->
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</base-card>
|
||||
</the-template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import { required, integer, numeric, minValue } from "@vuelidate/validators";
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Cart",
|
||||
data() {
|
||||
return {
|
||||
v$: useVuelidate(),
|
||||
loading: false,
|
||||
senaraiCarts: [],
|
||||
tambahan: "",
|
||||
test: "",
|
||||
test2: [],
|
||||
abc: "",
|
||||
data: "",
|
||||
feeStatus: "2",
|
||||
formEdit: {
|
||||
id: "",
|
||||
hargabida: "",
|
||||
},
|
||||
formPayment: {
|
||||
email: localStorage.getItem("email"),
|
||||
notel: localStorage.getItem("notelbimbit"),
|
||||
name: localStorage.getItem("name"),
|
||||
user_id: localStorage.getItem("id"),
|
||||
lelong_id: localStorage.getItem("lelong_id"),
|
||||
},
|
||||
test: localStorage.getItem("id"),
|
||||
formCheck: {
|
||||
user_id: localStorage.getItem("id"),
|
||||
lelong_id: localStorage.getItem("lelong_id"),
|
||||
},
|
||||
formRegisterBid: {
|
||||
lelong_id: localStorage.getItem("lelong_id"),
|
||||
user_id: localStorage.getItem("id"),
|
||||
name: localStorage.getItem("name"),
|
||||
},
|
||||
};
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
tambahan: { required, numeric, integer, minValue: minValue(1) },
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
total_sag() {
|
||||
return this.senaraiCarts.length;
|
||||
},
|
||||
total_bidaan() {
|
||||
let total = 0;
|
||||
this.senaraiCarts.forEach((val) => {
|
||||
total += parseFloat(val.hargabida);
|
||||
});
|
||||
return total.toFixed(2);
|
||||
},
|
||||
// ...mapGetters(["idLelong"])
|
||||
// ...mapState(["idLelong"]),
|
||||
...mapGetters(["idLelong"]),
|
||||
myValue() {
|
||||
return this.$store.state.lelong_id;
|
||||
},
|
||||
count() {
|
||||
return store.state.lelong_id;
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
this.checkFeePayment();
|
||||
this.listCart();
|
||||
},
|
||||
methods: {
|
||||
trybayar() {
|
||||
axios
|
||||
.post("/feepayment", this.formPayment)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
listCart() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/cart/" + localStorage.getItem("id"))
|
||||
.then((response) => {
|
||||
this.senaraiCarts = response.data;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
calcTotal() {
|
||||
this.formEdit.hargabida =
|
||||
parseFloat(this.tambahan) + parseFloat(this.test.hargaasas);
|
||||
},
|
||||
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() {
|
||||
this.v$.$validate();
|
||||
if (!this.v$.$error) {
|
||||
axios
|
||||
.post("/updateItem", this.formEdit, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
this.$refs.ubahClose.click();
|
||||
location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
}
|
||||
},
|
||||
deleteModal(data) {
|
||||
this.data = data;
|
||||
this.test = this.data.datalelongbid;
|
||||
console.log(data.datalelongbid.norujukan);
|
||||
},
|
||||
deleteCart(id) {
|
||||
axios
|
||||
.get("/deleteItem/" + id, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
this.$refs.padamClose.click();
|
||||
location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
feePayment() {
|
||||
axios
|
||||
.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";
|
||||
console.log(response);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
alert(error);
|
||||
});
|
||||
},
|
||||
checkFeePayment() {
|
||||
axios
|
||||
.get("/bidder/historyFeePay", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
params: {
|
||||
user_id: localStorage.getItem("id"),
|
||||
lelong_id: localStorage.getItem("lelong_id"),
|
||||
},
|
||||
})
|
||||
// .post("/addToCart", this.form, {
|
||||
// headers: {
|
||||
// Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
// },
|
||||
// }
|
||||
.then((response) => {
|
||||
this.feeStatus = response.data.status;
|
||||
// console.log(this.idLelong);
|
||||
// console.log(response.data.status);
|
||||
// this.$refs.padamClose.click();
|
||||
// location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
bidderSelectBidItem() {
|
||||
axios
|
||||
.post("/bidder/biditem", this.formRegisterBid, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
this.$refs.daftarBidaanClose.click();
|
||||
|
||||
location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
@@ -16,7 +16,6 @@
|
||||
</p>
|
||||
|
||||
<a
|
||||
href="/"
|
||||
class="
|
||||
col-md-4
|
||||
d-flex
|
||||
@@ -36,7 +35,7 @@
|
||||
|
||||
<ul class="nav col-md-4 justify-content-center">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link px-2 text-muted"
|
||||
<a class="nav-link px-2 text-muted"
|
||||
>Permodalan Kelantan Berhad</a
|
||||
>
|
||||
</li>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<router-link class="navbar-brand" v-bind:to="{ name: 'Dashboard' }">Sistem Lelong</router-link>
|
||||
<router-link class="navbar-brand" v-bind:to="{ name: 'home' }">Sistem Lelong</router-link>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
@@ -16,7 +16,7 @@
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<router-link class="nav-link" v-bind:to="{ name: 'Dashboard' }"
|
||||
<router-link class="nav-link" v-bind:to="{ name: 'home' }"
|
||||
>Utama</router-link
|
||||
>
|
||||
</li>
|
||||
|
||||
@@ -0,0 +1,334 @@
|
||||
<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="row">
|
||||
<div v-if="this.status">
|
||||
<div class="">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button disabled class="btn m-3 mb-1 btn-secondary">
|
||||
Jumlah Surat: {{ this.sags.length }}
|
||||
</button>
|
||||
<button disabled class="btn m-3 mb-1 btn-secondary">
|
||||
Masa Mula Lelong: {{ lelong_details.masamula_lelong }}
|
||||
</button>
|
||||
<button disabled class="btn m-3 mb-1 btn-secondary">
|
||||
Masa Tamat Lelong: {{ lelong_details.masatamat_lelong }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row clearfix">
|
||||
<div
|
||||
v-for="sag in sags"
|
||||
:key="sag.id"
|
||||
class="col-lg-4 col-md-4 col-sm-12"
|
||||
style="margin: 10px 0px"
|
||||
>
|
||||
<div class="card product_item" style="padding: 15px">
|
||||
<div class="body">
|
||||
<div class="product_details">
|
||||
<h6 class="text-primary">
|
||||
{{ sag.norujukan }}
|
||||
</h6>
|
||||
<ul class="product_price list-unstyled">
|
||||
<!-- <li class="old_price">{{ sag.marhun }}</li> -->
|
||||
<li class="old_price">{{ sag.berat }}g</li>
|
||||
<li class="old_price">
|
||||
<b>RM{{ sag.hargaasas }}</b>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="cp_img">
|
||||
<div class="hover">
|
||||
<a
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#bidaModal"
|
||||
@click="clickModal(sag)"
|
||||
class="btn btn-primary btn-sm waves-effect"
|
||||
>Masuk <i class="zmdi zmdi-shopping-cart"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else style="min-height: 60vh">
|
||||
<h1 class="mt-5">Sila Isi Ruangan 'Pilih Cawangan' Di Atas.</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal marhun -->
|
||||
<div
|
||||
class="modal fade"
|
||||
id="bidaModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="bidaModalLabel"
|
||||
aria-hidden="true"
|
||||
data-bs-backdrop="static"
|
||||
data-bs-keyboard="false"
|
||||
>
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="bidaModalLabel">
|
||||
{{ norujukan.norujukan }}
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
ref="tambahClose"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row m-2">
|
||||
<div class="col">
|
||||
<!-- <p>Marhun: {{ norujukan.marhun }}</p> -->
|
||||
<p>Jumlah Berat: {{ norujukan.berat }}g</p>
|
||||
<table class="table table-bordered">
|
||||
<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="(marhun, index) in marhuns" :key="marhun.id">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ marhun.marhun }}</td>
|
||||
<td>{{ marhun.karat }}</td>
|
||||
<td>{{ marhun.berat }}g</td>
|
||||
<td>{{ marhun.nota }}</td>
|
||||
<td>RM{{ marhun.hargaasas }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-3">
|
||||
<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>
|
||||
<div
|
||||
style="background-color: #e9ecef"
|
||||
class="form-control text-start justify-content-start"
|
||||
disabled
|
||||
>
|
||||
{{ norujukan.hargaasas }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
v-model="tambahan"
|
||||
type="text"
|
||||
id="tambahanbida"
|
||||
class="form-control"
|
||||
@change="calcTotal()"
|
||||
/>
|
||||
</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-3">
|
||||
<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="form.hargabida"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-danger me-2"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit" class="btn btn-success" @click="addToCart()">
|
||||
Tambah Ke Troli
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </form> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
// import Senarai from "../list/Senarai.vue";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import { required, integer, numeric, minValue } from "@vuelidate/validators";
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
// components: {
|
||||
// Senarai,
|
||||
// },
|
||||
props: ["selectedCawangan"],
|
||||
data() {
|
||||
return {
|
||||
status: false,
|
||||
v$: useVuelidate(),
|
||||
loading: false,
|
||||
tambahabError: false,
|
||||
errors: [],
|
||||
lelong_details: [],
|
||||
sags: [],
|
||||
norujukan: "",
|
||||
marhuns: "",
|
||||
componentKey: 0,
|
||||
tambahan: "",
|
||||
form: {
|
||||
user_id: localStorage.getItem("id"),
|
||||
lelongbid_id: "",
|
||||
hargabida: "",
|
||||
},
|
||||
myModal: null,
|
||||
};
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
tambahan: { required, numeric, integer, minValue: minValue(1) },
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
numberSag() {
|
||||
return this.sags.length;
|
||||
},
|
||||
...mapGetters(["allCarts"]),
|
||||
},
|
||||
mounted: function () {
|
||||
this.liveData();
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
this.status = false;
|
||||
axios
|
||||
.get("/lelongDetails/cawangan", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
params: {
|
||||
caw_id: this.selectedCawangan,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.data.success == true) {
|
||||
this.status = true;
|
||||
this.lelong_details = response.data.message[0];
|
||||
this.response = response.data.message[0].lelongbid;
|
||||
this.sags = this.response;
|
||||
this.loading = false;
|
||||
} else {
|
||||
this.status = false;
|
||||
this.loading = false;
|
||||
console.log(response.data.message);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
this.lelong_details = [null];
|
||||
});
|
||||
},
|
||||
clickModal(norujukan) {
|
||||
this.allCarts.forEach(function (element) {
|
||||
if (element.lelongbid_id == norujukan.id) {
|
||||
// return true;
|
||||
console.log("ada");
|
||||
} else {
|
||||
// console.log("tiada");
|
||||
}
|
||||
});
|
||||
|
||||
this.norujukan = norujukan;
|
||||
this.marhuns = this.norujukan.lelongbidmarhun;
|
||||
this.form.lelongbid_id = this.norujukan.id;
|
||||
this.tambahan = 1;
|
||||
this.form.hargabida =
|
||||
parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
|
||||
},
|
||||
calcTotal() {
|
||||
this.form.hargabida =
|
||||
parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
|
||||
},
|
||||
|
||||
addToCart() {
|
||||
this.v$.$validate();
|
||||
if (!this.v$.$error) {
|
||||
axios
|
||||
.post("/addToCart", this.form, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
this.loading = true;
|
||||
this.$refs.tambahClose.click();
|
||||
this.loading = false;
|
||||
location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
// alert("Failed");
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,5 +1,85 @@
|
||||
<template>
|
||||
<the-template>
|
||||
<p>this is the list</p>
|
||||
<div class="container">
|
||||
<h1>Senarai <i class="bi bi-card-list"></i></h1>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="basic-addon3">Cawangan</span>
|
||||
<select class="form-select" @change="pilihCawangan($event)">
|
||||
<option value="disabled" selected disabled>
|
||||
Sila Pilih Cawangan
|
||||
</option>
|
||||
<option
|
||||
v-for="data in cawangan"
|
||||
:key="data.id"
|
||||
v-bind:value="data.caw_id"
|
||||
>
|
||||
{{ data.caw_name }}
|
||||
</option>
|
||||
<input type="hidden" />
|
||||
</select>
|
||||
</div>
|
||||
<h6>
|
||||
<button class="badge m-2 btn-secondary" @click="forceRerender">
|
||||
Reload <i class="bi bi-arrow-down"></i>
|
||||
</button>
|
||||
</h6>
|
||||
<list-item
|
||||
v-bind:key="componentKey"
|
||||
v-bind:selectedCawangan="selectCawangan"
|
||||
></list-item>
|
||||
</div>
|
||||
</the-template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ListItem from "./ListItem.vue";
|
||||
// import Modal from "./Modal.vue"
|
||||
import axios from "axios";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import { required, minLength, maxLength, between } from "@vuelidate/validators";
|
||||
// import Vue from 'vue';
|
||||
// Vue.forceUpdate();
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
componentKey: 0,
|
||||
cawangan: "",
|
||||
selectCawangan: "",
|
||||
};
|
||||
},
|
||||
components: {
|
||||
"list-item": ListItem,
|
||||
// Modal,
|
||||
},
|
||||
mounted: function () {
|
||||
this.getIdCawangan();
|
||||
},
|
||||
methods: {
|
||||
forceRerender() {
|
||||
this.componentKey += 1;
|
||||
},
|
||||
pilihCawangan(e) {
|
||||
let test = e.target.value;
|
||||
this.selectCawangan = test;
|
||||
this.componentKey += 1;
|
||||
},
|
||||
getIdCawangan() {
|
||||
axios
|
||||
.get("/listcawlelongtodaystarted", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.cawangan = response.data.lelong;
|
||||
console.log(response.data.lelong);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,5 +1,127 @@
|
||||
<template>
|
||||
<the-template>
|
||||
<p>this is the profile</p>
|
||||
</the-template>
|
||||
</template>
|
||||
<the-template>
|
||||
<base-card>
|
||||
<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">
|
||||
<h5>PROFIL</h5>
|
||||
<div class="card-body">
|
||||
<!-- <img
|
||||
src="../../assets/profile.png"
|
||||
alt="profile photo"
|
||||
style="width: 225px; height: 230px"
|
||||
/> -->
|
||||
<div v-if="this.status">
|
||||
<div class="row justify-content-center mt-4 mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Nama
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.name }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Username
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.username }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
No Kad Pengenalan
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.nokp }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
No Tel Bimbit
|
||||
</div>
|
||||
<div class="col-5 text_border">{{ data.notelbimbit }}</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Front IC
|
||||
</div>
|
||||
<div class="col-5 text_border" style="height: 200px">
|
||||
{{ data.filename }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-1">
|
||||
<div class="col-2 text_border text-start" style="border: none">
|
||||
Rear IC
|
||||
</div>
|
||||
<div class="col-5 text_border" style="height: 200px">
|
||||
{{ data_2.filename }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>Tiada Data</div>
|
||||
</div>
|
||||
</div>
|
||||
</base-card>
|
||||
</the-template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
data: [],
|
||||
data_2: [],
|
||||
loading: false,
|
||||
status: false,
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.profile();
|
||||
},
|
||||
methods: {
|
||||
profile() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/user/profile/" + localStorage.getItem("nokp"), {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.data.success == true) {
|
||||
this.status = true;
|
||||
this.data = response.data.message[0];
|
||||
this.data_2 = response.data.message[1];
|
||||
this.loading = false;
|
||||
} else {
|
||||
this.status = false;
|
||||
console.log(response.data.message);
|
||||
this.loading = false;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert(error);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.text_border {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,51 @@
|
||||
<template>
|
||||
<the-template>
|
||||
<p>this is the result</p>
|
||||
</the-template>
|
||||
</template>
|
||||
<the-template>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-7">
|
||||
<base-card>
|
||||
<h5>KEPUTUSAN</h5>
|
||||
<table class="table table-bordered table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Bil</th>
|
||||
<th scope="col">Tarikh</th>
|
||||
<th scope="col">Jumlah</th>
|
||||
<th scope="col">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>12/03/2020</td>
|
||||
<td>RM1212.00</td>
|
||||
<td class="text-danger">Belum Selesai</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>12/03/2020</td>
|
||||
<td>RM1212.00</td>
|
||||
<td class="text-success">Selesai</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>12/03/2020</td>
|
||||
<td>RM1212.00</td>
|
||||
<td class="text-success">Selesai</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</base-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</the-template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
+4
-3
@@ -1,6 +1,6 @@
|
||||
import { createApp } from 'vue'
|
||||
// import App from './App.vue'
|
||||
import Master from './Master.vue'
|
||||
import App from './App.vue'
|
||||
// import Master from './Master.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
// import useVuelidate from '@vuelidate/core'
|
||||
@@ -12,7 +12,8 @@ import 'bootstrap-icons/font/bootstrap-icons.css'
|
||||
import TheTemplate from './components/layouts/TheTemplate.vue'
|
||||
import BaseCard from './components/base/BaseCard.vue'
|
||||
|
||||
const app = createApp(Master);
|
||||
const app = createApp(App);
|
||||
// const app = createApp(Master);
|
||||
|
||||
app.component('the-template', TheTemplate);
|
||||
app.component('base-card', BaseCard);
|
||||
|
||||
+18
-10
@@ -18,7 +18,7 @@
|
||||
|
||||
// import TheLogin from '../components/authentication/TheLogin.vue'
|
||||
// import TheRegister from '../components/authentication/TheRegister.vue'
|
||||
import TheHome from '../components/home/TheHome.vue'
|
||||
// import TheHome from '../components/home/TheHome.vue'
|
||||
// import TheCart from '../components/cart/TheCart.vue'
|
||||
// import TheResult from '../components/result/TheResult.vue'
|
||||
// import TheProfile from '../components/profile/TheProfile.vue'
|
||||
@@ -120,6 +120,15 @@ import TheHome from '../components/home/TheHome.vue'
|
||||
|
||||
// export default router;
|
||||
|
||||
// import TheLogin from '../components/authentication/TheLogin.vue'
|
||||
// import TheRegister from '../components/authentication/TheRegister.vue'
|
||||
import TheHome from '../components/home/TheHome.vue'
|
||||
import TheCart from '../components/cart/TheCart.vue'
|
||||
import TheResult from '../components/result/TheResult.vue'
|
||||
import TheProfile from '../components/profile/TheProfile.vue'
|
||||
import TheBidRecord from '../components/bid-record/TheBidRecord.vue'
|
||||
import TheList from '../components/list/TheList.vue'
|
||||
|
||||
import { createRouter, createWebHistory, createMemoryHistory } from "vue-router";
|
||||
import Login from '../components/Login.vue';
|
||||
import Register from '../components/Register.vue';
|
||||
@@ -127,7 +136,6 @@ 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 Profile from './../components/Profile.vue'
|
||||
import BidHistory from '../components/BidHistory.vue'
|
||||
import Test from "../components/Test.vue"
|
||||
import IndexPaymentHistory from '../components/result/IndexPaymentHistory.vue'
|
||||
@@ -151,7 +159,7 @@ const routes = [
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'Dashboard',
|
||||
name: 'home',
|
||||
component: TheHome,
|
||||
// meta: { requiresAuth: true }
|
||||
},
|
||||
@@ -159,14 +167,14 @@ const routes = [
|
||||
{
|
||||
path: '/cart',
|
||||
name: 'cart',
|
||||
component: Cart,
|
||||
component: TheCart,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
{
|
||||
path: '/list',
|
||||
name: 'list',
|
||||
component: List,
|
||||
component: TheList,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
@@ -180,21 +188,21 @@ const routes = [
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'profile',
|
||||
component: Profile,
|
||||
component: TheProfile,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
{
|
||||
path: '/bid-history',
|
||||
path: '/bid-record',
|
||||
name: 'bid-record',
|
||||
component: BidHistory,
|
||||
component: TheBidRecord,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
{
|
||||
path: '/payment-history',
|
||||
path: '/result',
|
||||
name: 'result',
|
||||
component: IndexPaymentHistory,
|
||||
component: TheResult,
|
||||
// meta: { requiresAuth: true }
|
||||
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user