fix reload component - cart, list
This commit is contained in:
Amir
@@ -1,167 +0,0 @@
|
||||
<template >
|
||||
<!-- component -->
|
||||
<div class="min-h-screen flex justify-center items-center bg-white">
|
||||
<div
|
||||
class="
|
||||
p-10
|
||||
border-[1px]
|
||||
-mt-10
|
||||
border-slate-200
|
||||
rounded-md
|
||||
flex flex-col
|
||||
items-center
|
||||
space-y-3
|
||||
"
|
||||
>
|
||||
<form>
|
||||
<div class="py-8">
|
||||
<!-- <img
|
||||
width="30"
|
||||
class="-mt-10"
|
||||
src="https://www.paypalobjects.com/images/shared/momgram@2x.png"
|
||||
/> -->
|
||||
<p class="font-bold text-[#0070ba]">Sistem Lelong</p>
|
||||
</div>
|
||||
<input
|
||||
class="p-3 border-[1px] border-slate-500 rounded-sm w-80"
|
||||
placeholder="E-Mail or Phone number"
|
||||
id="username"
|
||||
name="username"
|
||||
model="form.username"
|
||||
/>
|
||||
<!-- <form>
|
||||
<v-text-field
|
||||
label="Email"
|
||||
name="Login"
|
||||
type="text"
|
||||
class="p-3 border-[1px] border-slate-500 rounded-sm w-80"
|
||||
> </v-text-field>
|
||||
</form> -->
|
||||
<div class="flex flex-col space-y-1">
|
||||
<input
|
||||
class="p-3 border-[1px] border-slate-500 rounded-sm w-80"
|
||||
placeholder="Password"
|
||||
id="password"
|
||||
name="password"
|
||||
model="form.password"
|
||||
/>
|
||||
<p class="font-bold text-[#0070ba]">Forgot password?</p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-col space-y-5 w-full">
|
||||
<button
|
||||
class="
|
||||
w-full
|
||||
bg-[#0070ba]
|
||||
rounded-3xl
|
||||
p-3
|
||||
text-white
|
||||
font-bold
|
||||
transition
|
||||
duration-200
|
||||
hover:bg-[#003087]
|
||||
"
|
||||
>
|
||||
Log in
|
||||
</button>
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
border-t-[1px] border-t-slate-300
|
||||
w-full
|
||||
relative
|
||||
"
|
||||
>
|
||||
<div class="-mt-1 font-bod bg-white px-5 absolute">Or</div>
|
||||
</div>
|
||||
<button
|
||||
class="
|
||||
w-full
|
||||
border-blue-900
|
||||
hover:border-[#003087] hover:border-[2px]
|
||||
border-[1px]
|
||||
rounded-3xl
|
||||
p-3
|
||||
text-[#0070ba]
|
||||
font-bold
|
||||
transition
|
||||
duration-200
|
||||
"
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class="flex space-x-1 p-20 text-sm">
|
||||
<p class="hover:underline cursor-pointer">German</p>
|
||||
<div class="border-r-[1px] border-r-slate-300"></div>
|
||||
<p class="font-bold hover:underline cursor-pointer">English</p>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
class="
|
||||
absolute
|
||||
bottom-0
|
||||
w-full
|
||||
p-3
|
||||
bg-[#F7F9FA]
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
space-x-3
|
||||
text-[14px]
|
||||
font-medium
|
||||
text-[#666]
|
||||
"
|
||||
>
|
||||
<a
|
||||
href="https://www.paypal.com/us/smarthelp/contact-us"
|
||||
target="_blank"
|
||||
class="hover:underline underline-offset-1 cursor-pointer"
|
||||
>Contact Us</a
|
||||
>
|
||||
<a
|
||||
href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full"
|
||||
target="_blank"
|
||||
class="hover:underline underline-offset-1 cursor-pointer"
|
||||
>Privacy</a
|
||||
>
|
||||
<a
|
||||
href="https://www.paypal.com/de/webapps/mpp/ua/legalhub-full"
|
||||
target="_blank"
|
||||
class="hover:underline underline-offset-1 cursor-pointer"
|
||||
>Legal</a
|
||||
>
|
||||
<a
|
||||
href="https://www.paypal.com/de/webapps/mpp/ua/upcoming-policies-full"
|
||||
target="_blank"
|
||||
class="hover:underline underline-offset-1 cursor-pointer"
|
||||
>Policy
|
||||
</a>
|
||||
<a
|
||||
href="https://www.paypal.com/de/webapps/mpp/country-worldwide"
|
||||
target="_blank"
|
||||
class="hover:underline underline-offset-1 cursor-pointer"
|
||||
>Worldwide
|
||||
</a>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,230 +0,0 @@
|
||||
<template>
|
||||
<!-- component -->
|
||||
<body class="font-mono bg-gray-400">
|
||||
<!-- Container -->
|
||||
<div class="container mx-auto">
|
||||
<div class="flex justify-center px-6 my-12">
|
||||
<!-- Row -->
|
||||
<div class="w-full xl:w-1/2 lg:w-11/12 flex border-[1px]">
|
||||
<!-- Col -->
|
||||
<!-- <div
|
||||
class="
|
||||
w-full
|
||||
h-auto
|
||||
bg-gray-400
|
||||
hidden
|
||||
lg:block lg:w-5/12
|
||||
bg-cover
|
||||
rounded-l-lg
|
||||
"
|
||||
style="
|
||||
background-image: url('https://source.unsplash.com/Mv9hjnEUHR4/600x800');
|
||||
"
|
||||
></div> -->
|
||||
<!-- Col -->
|
||||
<div class="w-full bg-white p-5 rounded-lg lg:rounded-l-none">
|
||||
<h3 class="pt-4 text-2xl text-center">Create an Account!</h3>
|
||||
<form class="px-8 pt-6 pb-8 mb-4 bg-white rounded">
|
||||
<div class="mb-4 md:flex md:justify-between">
|
||||
<div class="mb-4 md:mr-2 md:mb-0">
|
||||
<label
|
||||
class="block mb-2 text-sm font-bold text-gray-700"
|
||||
for="firstName"
|
||||
>
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
class="
|
||||
w-full
|
||||
px-3
|
||||
py-2
|
||||
text-sm
|
||||
leading-tight
|
||||
text-gray-700
|
||||
border
|
||||
rounded
|
||||
shadow
|
||||
appearance-none
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
id="firstName"
|
||||
type="text"
|
||||
placeholder="First Name"
|
||||
/>
|
||||
</div>
|
||||
<div class="md:ml-2">
|
||||
<label
|
||||
class="block mb-2 text-sm font-bold text-gray-700"
|
||||
for="lastName"
|
||||
>
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
class="
|
||||
w-full
|
||||
px-3
|
||||
py-2
|
||||
text-sm
|
||||
leading-tight
|
||||
text-gray-700
|
||||
border
|
||||
rounded
|
||||
shadow
|
||||
appearance-none
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
id="lastName"
|
||||
type="text"
|
||||
placeholder="Last Name"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label
|
||||
class="block mb-2 text-sm font-bold text-gray-700"
|
||||
for="email"
|
||||
>
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
class="
|
||||
w-full
|
||||
px-3
|
||||
py-2
|
||||
mb-3
|
||||
text-sm
|
||||
leading-tight
|
||||
text-gray-700
|
||||
border
|
||||
rounded
|
||||
shadow
|
||||
appearance-none
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4 md:flex md:justify-between">
|
||||
<div class="mb-4 md:mr-2 md:mb-0">
|
||||
<label
|
||||
class="block mb-2 text-sm font-bold text-gray-700"
|
||||
for="password"
|
||||
>
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
class="
|
||||
w-full
|
||||
px-3
|
||||
py-2
|
||||
mb-3
|
||||
text-sm
|
||||
leading-tight
|
||||
text-gray-700
|
||||
border border-red-500
|
||||
rounded
|
||||
shadow
|
||||
appearance-none
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="******************"
|
||||
/>
|
||||
<p class="text-xs italic text-red-500">
|
||||
Please choose a password.
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:ml-2">
|
||||
<label
|
||||
class="block mb-2 text-sm font-bold text-gray-700"
|
||||
for="c_password"
|
||||
>
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
class="
|
||||
w-full
|
||||
px-3
|
||||
py-2
|
||||
mb-3
|
||||
text-sm
|
||||
leading-tight
|
||||
text-gray-700
|
||||
border
|
||||
rounded
|
||||
shadow
|
||||
appearance-none
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
id="c_password"
|
||||
type="password"
|
||||
placeholder="******************"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6 text-center">
|
||||
<button
|
||||
class="
|
||||
w-full
|
||||
px-4
|
||||
py-2
|
||||
font-bold
|
||||
text-white
|
||||
bg-blue-500
|
||||
rounded-full
|
||||
hover:bg-blue-700
|
||||
focus:outline-none focus:shadow-outline
|
||||
"
|
||||
type="button"
|
||||
>
|
||||
Register Account
|
||||
</button>
|
||||
</div>
|
||||
<hr class="mb-6 border-t" />
|
||||
<div class="text-center">
|
||||
<a
|
||||
class="
|
||||
inline-block
|
||||
text-sm text-blue-500
|
||||
align-baseline
|
||||
hover:text-blue-800
|
||||
"
|
||||
href="#"
|
||||
>
|
||||
Forgot Password?
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<!-- <a
|
||||
class="
|
||||
inline-block
|
||||
text-sm text-blue-500
|
||||
align-baseline
|
||||
hover:text-blue-800
|
||||
"
|
||||
href="./index.html"
|
||||
>
|
||||
Already have an account? Login!
|
||||
</a> -->
|
||||
<!-- <router-link to="/login">Login</router-link><br /> -->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</template>
|
||||
<script>
|
||||
// import Login from './Login.vue'
|
||||
|
||||
export default {
|
||||
name: "Register",
|
||||
// components: [
|
||||
// Login,
|
||||
// ]
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,931 @@
|
||||
<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="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"
|
||||
@keyup="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>
|
||||
</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",
|
||||
emits: ["reloadComponent"],
|
||||
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) {
|
||||
this.$refs.ubahClose.click();
|
||||
this.loading = true;
|
||||
axios
|
||||
.post("/updateItem", this.formEdit, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
// this.$refs.ubahClose.click();
|
||||
this.loading = false;
|
||||
this.$emit("reloadComponent");
|
||||
// location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
this.loading = false;
|
||||
});
|
||||
} else {
|
||||
}
|
||||
},
|
||||
deleteModal(data) {
|
||||
this.data = data;
|
||||
this.test = this.data.datalelongbid;
|
||||
console.log(data.datalelongbid.norujukan);
|
||||
},
|
||||
deleteCart(id) {
|
||||
this.$refs.padamClose.click();
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/deleteItem/" + id, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.loading = false;
|
||||
console.log(response);
|
||||
this.$emit("reloadComponent");
|
||||
// location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false;
|
||||
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() {
|
||||
this.$refs.daftarBidaanClose.click();
|
||||
this.loading = true;
|
||||
axios
|
||||
.post("/bidder/biditem", this.formRegisterBid, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.loading = false;
|
||||
console.log(response);
|
||||
this.$emit("reloadComponent");
|
||||
|
||||
// location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false;
|
||||
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>
|
||||
+11
-921
@@ -1,939 +1,29 @@
|
||||
<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>
|
||||
<cart-list
|
||||
v-bind:key="componentKey"
|
||||
v-on:reloadComponent="toggleReloadComponent"
|
||||
></cart-list>
|
||||
</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";
|
||||
|
||||
import CartList from "./CartList.vue";
|
||||
export default {
|
||||
name: "Cart",
|
||||
components: {
|
||||
"cart-list": CartList,
|
||||
},
|
||||
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"),
|
||||
},
|
||||
componentKey: 0,
|
||||
};
|
||||
},
|
||||
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);
|
||||
});
|
||||
toggleReloadComponent() {
|
||||
this.componentKey += 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
@@ -1,280 +0,0 @@
|
||||
<template>
|
||||
<div id="accordion-collapse" data-accordion="collapse">
|
||||
<h2 id="accordion-collapse-heading-1">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
flex
|
||||
justify-between
|
||||
items-center
|
||||
p-5
|
||||
w-full
|
||||
font-medium
|
||||
text-left
|
||||
rounded-t-xl
|
||||
border border-b-0 border-gray-200
|
||||
focus:ring-4 focus:ring-gray-200
|
||||
dark:focus:ring-gray-800 dark:border-gray-700
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
bg-gray-100
|
||||
dark:bg-gray-800
|
||||
text-gray-900
|
||||
dark:text-white
|
||||
"
|
||||
data-accordion-target="#accordion-collapse-body-1"
|
||||
aria-expanded="true"
|
||||
aria-controls="accordion-collapse-body-1"
|
||||
>
|
||||
<span>What is Flowbite?</span>
|
||||
<svg
|
||||
data-accordion-icon=""
|
||||
class="w-6 h-6 rotate-180 shrink-0"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="accordion-collapse-body-1"
|
||||
class=""
|
||||
aria-labelledby="accordion-collapse-heading-1"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
p-5
|
||||
border border-b-0 border-gray-200
|
||||
dark:border-gray-700 dark:bg-gray-900
|
||||
"
|
||||
>
|
||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||
Flowbite is an open-source library of interactive components built on
|
||||
top of Tailwind CSS including buttons, dropdowns, modals, navbars, and
|
||||
more.
|
||||
</p>
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
Check out this guide to learn how to
|
||||
<a
|
||||
href="https://flowbite.com/docs/getting-started/introduction/"
|
||||
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>get started</a
|
||||
>
|
||||
and start developing websites even faster with components on top of
|
||||
Tailwind CSS.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="accordion-collapse-heading-2">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
flex
|
||||
justify-between
|
||||
items-center
|
||||
p-5
|
||||
w-full
|
||||
font-medium
|
||||
text-left text-gray-500
|
||||
border border-b-0 border-gray-200
|
||||
focus:ring-4 focus:ring-gray-200
|
||||
dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
data-accordion-target="#accordion-collapse-body-2"
|
||||
aria-expanded="false"
|
||||
aria-controls="accordion-collapse-body-2"
|
||||
>
|
||||
<span>Is there a Figma file available?</span>
|
||||
<svg
|
||||
data-accordion-icon=""
|
||||
class="w-6 h-6 shrink-0"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="accordion-collapse-body-2"
|
||||
class="hidden"
|
||||
aria-labelledby="accordion-collapse-heading-2"
|
||||
>
|
||||
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
|
||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||
Flowbite is first conceptualized and designed using the Figma software
|
||||
so everything you see in the library has a design equivalent in our
|
||||
Figma file.
|
||||
</p>
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
Check out the
|
||||
<a
|
||||
href="https://flowbite.com/figma/"
|
||||
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>Figma design system</a
|
||||
>
|
||||
based on the utility classes from Tailwind CSS and components from
|
||||
Flowbite.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h2 id="accordion-collapse-heading-3">
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
flex
|
||||
justify-between
|
||||
items-center
|
||||
p-5
|
||||
w-full
|
||||
font-medium
|
||||
text-left text-gray-500
|
||||
border border-gray-200
|
||||
focus:ring-4 focus:ring-gray-200
|
||||
dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400
|
||||
hover:bg-gray-100
|
||||
dark:hover:bg-gray-800
|
||||
"
|
||||
data-accordion-target="#accordion-collapse-body-3"
|
||||
aria-expanded="false"
|
||||
aria-controls="accordion-collapse-body-3"
|
||||
>
|
||||
<span>What are the differences between Flowbite and Tailwind UI?</span>
|
||||
<svg
|
||||
data-accordion-icon=""
|
||||
class="w-6 h-6 shrink-0"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</h2>
|
||||
<div
|
||||
id="accordion-collapse-body-3"
|
||||
class="hidden"
|
||||
aria-labelledby="accordion-collapse-heading-3"
|
||||
>
|
||||
<div class="p-5 border border-t-0 border-gray-200 dark:border-gray-700">
|
||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||
The main difference is that the core components from Flowbite are open
|
||||
source under the MIT license, whereas Tailwind UI is a paid product.
|
||||
Another difference is that Flowbite relies on smaller and standalone
|
||||
components, whereas Tailwind UI offers sections of pages.
|
||||
</p>
|
||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||
However, we actually recommend using both Flowbite, Flowbite Pro, and
|
||||
even Tailwind UI as there is no technical reason stopping you from
|
||||
using the best of two worlds.
|
||||
</p>
|
||||
<p class="mb-2 text-gray-500 dark:text-gray-400">
|
||||
Learn more about these technologies:
|
||||
</p>
|
||||
<ul class="pl-5 list-disc text-gray-500 dark:text-gray-400">
|
||||
<li>
|
||||
<a
|
||||
href="https://flowbite.com/pro/"
|
||||
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>Flowbite Pro</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://tailwindui.com/"
|
||||
rel="nofollow"
|
||||
class="text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>Tailwind UI</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="
|
||||
max-w-2xl
|
||||
mx-auto
|
||||
overflow-hidden
|
||||
bg-white
|
||||
rounded-lg
|
||||
shadow-md
|
||||
dark:bg-gray-800
|
||||
"
|
||||
>
|
||||
<img
|
||||
class="object-cover w-full h-64"
|
||||
src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
|
||||
alt="Article"
|
||||
/>
|
||||
|
||||
<div class="p-6">
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-medium text-blue-600 uppercase dark:text-blue-400"
|
||||
>Product</span
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="
|
||||
block
|
||||
mt-2
|
||||
text-2xl
|
||||
font-semibold
|
||||
text-gray-800
|
||||
transition-colors
|
||||
duration-200
|
||||
transform
|
||||
dark:text-white
|
||||
hover:text-gray-600 hover:underline
|
||||
"
|
||||
>I Built A Successful Blog In One Year</a
|
||||
>
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie
|
||||
parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris
|
||||
egestas quam volutpat viverra. In pretium nec senectus erat. Et
|
||||
malesuada lobortis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
class="object-cover h-10 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60"
|
||||
alt="Avatar"
|
||||
/>
|
||||
<a
|
||||
href="#"
|
||||
class="mx-2 font-semibold text-gray-700 dark:text-gray-200"
|
||||
>Jone Doe</a
|
||||
>
|
||||
</div>
|
||||
<span class="mx-1 text-xs text-gray-600 dark:text-gray-300"
|
||||
>21 SEP 2015</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="card text-center">
|
||||
<div class="card-header fw-bold text-uppercase">Keputusan Bidaan</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p>Tahniah! Bidaan anda menang.</p>
|
||||
<!-- <button class="btn btn-primary">Bayar Bidaan</button> -->
|
||||
<router-link class="btn btn-primary" to="/pay">Bayar</router-link>
|
||||
</div>
|
||||
|
||||
<!-- <div class="card-footer"></div> -->
|
||||
<div class="card-footer">Sila hubungi ******* untuk maklumat lanjut</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
@@ -1,23 +0,0 @@
|
||||
<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>
|
||||
@@ -150,7 +150,7 @@
|
||||
type="text"
|
||||
id="tambahanbida"
|
||||
class="form-control"
|
||||
@change="calcTotal()"
|
||||
@keyup="calcTotal()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -214,6 +214,7 @@ import { required, integer, numeric, minValue } from "@vuelidate/validators";
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
emits: ["reloadComponent"],
|
||||
props: {
|
||||
selectedCawangan: { type: String },
|
||||
reloadId: { type: Number },
|
||||
@@ -297,9 +298,10 @@ export default {
|
||||
this.norujukan = norujukan;
|
||||
this.marhuns = this.norujukan.lelongbidmarhun;
|
||||
this.form.lelongbid_id = this.norujukan.id;
|
||||
this.tambahan = 1;
|
||||
// this.tambahan = ;
|
||||
this.form.hargabida =
|
||||
parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
|
||||
// parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
|
||||
parseFloat(this.norujukan.hargaasas);
|
||||
},
|
||||
calcTotal() {
|
||||
this.form.hargabida =
|
||||
@@ -309,6 +311,8 @@ export default {
|
||||
addToCart() {
|
||||
this.v$.$validate();
|
||||
if (!this.v$.$error) {
|
||||
this.$refs.tambahClose.click();
|
||||
this.loading = true;
|
||||
axios
|
||||
.post("/addToCart", this.form, {
|
||||
headers: {
|
||||
@@ -317,13 +321,13 @@ export default {
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
this.loading = true;
|
||||
this.$refs.tambahClose.click();
|
||||
|
||||
this.loading = false;
|
||||
this.$emit("reloadComponent", this.reloadId);
|
||||
this.$emit("reloadComponent");
|
||||
// location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
|
||||
@@ -1,331 +0,0 @@
|
||||
<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>
|
||||
@@ -43,7 +43,6 @@ import { required, minLength, maxLength, between } from "@vuelidate/validators";
|
||||
// Vue.forceUpdate();
|
||||
|
||||
export default {
|
||||
emits: ["reloadComponent"],
|
||||
data() {
|
||||
return {
|
||||
componentKey: 0,
|
||||
@@ -60,8 +59,7 @@ export default {
|
||||
this.getIdCawangan();
|
||||
},
|
||||
methods: {
|
||||
toggleReloadComponent(value) {
|
||||
console.log("jdi");
|
||||
toggleReloadComponent() {
|
||||
this.componentKey += 1;
|
||||
},
|
||||
forceRerender() {
|
||||
|
||||
@@ -81,8 +81,9 @@ export default {
|
||||
.get(
|
||||
"/bayar/" +
|
||||
localStorage.getItem("id") +
|
||||
"/" +
|
||||
localStorage.getItem("lelong_id"),
|
||||
"/1" ,
|
||||
// +
|
||||
// localStorage.getItem("lelong_id"),
|
||||
{
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
|
||||
@@ -1,7 +1,15 @@
|
||||
<template>
|
||||
<the-template>
|
||||
<base-card>
|
||||
<div class="container">
|
||||
<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="row">
|
||||
<div class="col">
|
||||
<div class="d-flex justify-content-between">
|
||||
@@ -10,8 +18,12 @@
|
||||
class="btn btn-secondary m-3 ms-0"
|
||||
>Kembali</router-link
|
||||
>
|
||||
<h5 class="m-3">Keputusan Tarikh Lelong: {{tarikhLelong}}</h5>
|
||||
<router-link v-bind:to="{name: 'pay'}" class="btn btn-primary m-3 me-0">Bayar</router-link>
|
||||
<h5 class="m-3">Keputusan Tarikh Lelong: {{ tarikhLelong }}</h5>
|
||||
<router-link
|
||||
v-bind:to="{ name: 'pay' }"
|
||||
class="btn btn-primary m-3 me-0"
|
||||
>Bayar</router-link
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div class="accordion" id="accordionExample">
|
||||
@@ -83,7 +95,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
lists: [],
|
||||
tarikhLelong: '',
|
||||
tarikhLelong: "",
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
@@ -91,12 +104,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get(
|
||||
"/bayar/" +
|
||||
localStorage.getItem("id") +
|
||||
"/" +
|
||||
localStorage.getItem("lelong_id"),
|
||||
"/bayar/" + localStorage.getItem("id") + "/1",
|
||||
// +
|
||||
// localStorage.getItem("lelong_id"),
|
||||
{
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
@@ -105,12 +118,14 @@ export default {
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.statusText == "OK") {
|
||||
this.loading = false;
|
||||
this.lists = response.data.data;
|
||||
this.tarikhLelong = response.data.tarikh_lelong;
|
||||
} else {
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loading = false;
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user