recomponent list ui
This commit is contained in:
Amir
+116
-281
@@ -1,301 +1,136 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
<div class="spinner-border" v-if="loading" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<div v-else class="container">
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Back <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<h1>List</h1>
|
||||
<p>Tarikh Lelong: {{ lelong_details.tarikh_lelong }}</p>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="basic-addon3">Pilih Cawangan</span>
|
||||
<select class="form-select">
|
||||
<option selected value="1">Ar-Rahn Kota Bharu 2</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary">Cari</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-9">
|
||||
<div class="container">
|
||||
<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">
|
||||
<h5>
|
||||
<a href="#">{{ sag.norujukan }}</a>
|
||||
</h5>
|
||||
<ul class="product_price list-unstyled">
|
||||
<li class="old_price">RM{{ sag.hargaasas }}</li>
|
||||
<li class="old_price">{{ sag.marhun }}</li>
|
||||
<li class="old_price">{{ sag.berat }}g</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"
|
||||
>Enter <i class="zmdi zmdi-shopping-cart"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-content">
|
||||
<p class="font-bold">Info</p>
|
||||
<hr />
|
||||
<div>
|
||||
<!-- <a href="#" class="product-name"> Product 1</a> -->
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Cawangan</p>
|
||||
<p class="mb-0">Kota Bharu 2</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Bilangan Lelongan</p>
|
||||
<p class="mb-0">120 SAG</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Masa Mula</p>
|
||||
<p class="mb-0">{{ lelong_details.masamula_lelong }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Masa Tamat</p>
|
||||
<p class="mb-0">{{ lelong_details.masatamat_lelong }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="small m-t-xs">
|
||||
Masa Tamat Lelongan: 00:15:29
|
||||
</div> -->
|
||||
<!-- <div class="m-t text-righ">
|
||||
<a href="#" class="btn btn-xs btn-outline btn-primary"
|
||||
>Info <i class="fa fa-long-arrow-right"></i>
|
||||
</a>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <hr /> -->
|
||||
<!-- <div>
|
||||
<a href="#" class="product-name"> Product 2</a>
|
||||
<div class="small m-t-xs">
|
||||
Many desktop publishing packages and web page editors now.
|
||||
</div>
|
||||
<div class="m-t text-righ">
|
||||
<a href="#" class="btn btn-xs btn-outline btn-primary"
|
||||
>Info <i class="fa fa-long-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="modal fade"
|
||||
id="bidaModal"
|
||||
tabindex="-1"
|
||||
aria-labelledby="bidaModalLabel"
|
||||
aria-hidden="true"
|
||||
data-bs-backdrop="static"
|
||||
data-bs-keyboard="false"
|
||||
>
|
||||
<!-- <form @submit.prevent="submit"> -->
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="bidaModalLabel">
|
||||
{{ norujukan.norujukan }} : {{ norujukan.id }}
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row m-2">
|
||||
<!-- <div class="col-2 border"></div> -->
|
||||
<div class="col">
|
||||
<h5>Harga Asas: RM{{ norujukan.hargaasas }}</h5>
|
||||
<p>Marhun: {{ norujukan.marhun }}</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">No</th>
|
||||
<th scope="col">Jenis Marhun</th>
|
||||
<th scope="col">Karat</th>
|
||||
<th scope="col">Berat</th>
|
||||
<th scope="col">Nota</th>
|
||||
<th scope="col">Harga Asas</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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">
|
||||
<div class="input-group mb-3">
|
||||
<label class="col-form-label me-2"
|
||||
>Tambahan Harga Bida</label
|
||||
>
|
||||
<span class="input-group-text">RM</span>
|
||||
<input type="text" id="tambahanbida" class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="input-group mb-3">
|
||||
<label class="col-form-label me-2">Jumlah Harga Bida</label>
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
v-model="form.hargabida"
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="{{marhun.marhuns}}"
|
||||
/>
|
||||
</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()">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </form> -->
|
||||
</div>
|
||||
<button class="btn m-2 btn-info" @click="forceRerender">Reload Component <i class="bi bi-arrow-down"></i></button>
|
||||
<!-- <router-view {{Modal}}><button class="btn btn-primary">sdsd</button></router-view> -->
|
||||
<!-- <Modal /> -->
|
||||
<Senarai :key="componentKey"/>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Navbar from "./Navbar.vue";
|
||||
import Footer from "./Footer.vue";
|
||||
import Senarai from "./list/Senarai.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,
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Navbar,
|
||||
Footer,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
lelong_details: [],
|
||||
sags: [],
|
||||
norujukan: "",
|
||||
marhuns: [],
|
||||
form: {
|
||||
user_id: localStorage.getItem("id"),
|
||||
lelongbid_id: "",
|
||||
hargabida: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.liveData();
|
||||
Senarai,
|
||||
// Modal,
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/lelongDetails/cawangan", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
params: {
|
||||
caw_id: 3,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.lelong_details = response.data[0];
|
||||
this.response = response.data[0].lelongbid;
|
||||
this.sags = this.response;
|
||||
this.loading = false;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
clickModal(norujukan) {
|
||||
this.norujukan = norujukan;
|
||||
this.marhuns = this.norujukan.lelongbidmarhun;
|
||||
this.form.lelongbid_id = this.norujukan.id;
|
||||
|
||||
// this.try = data().form.lelongbid_id
|
||||
// let carName = this.try;
|
||||
// document.getElementById("demo").innerHTML = carName;
|
||||
// console.log(this.form.lelongbid_id);
|
||||
// console.log(this.marhuns);
|
||||
},
|
||||
addToCart() {
|
||||
axios
|
||||
.post("/addToCart", this.form, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
location.reload();
|
||||
// bidaModal.hide();
|
||||
// call Cart component to refresh
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
forceRerender() {
|
||||
this.componentKey += 1;
|
||||
},
|
||||
},
|
||||
// data() {
|
||||
// return {
|
||||
// v$: useVuelidate(),
|
||||
// loading: false,
|
||||
// tambahabError: false,
|
||||
// errors: [],
|
||||
// cawangan: "1",
|
||||
// lelong_details: [],
|
||||
// sags: [],
|
||||
// norujukan: "",
|
||||
// marhuns: "",
|
||||
// form: {
|
||||
// user_id: localStorage.getItem("id"),
|
||||
// lelongbid_id: "",
|
||||
// test: "",
|
||||
// hargabida: "",
|
||||
// },
|
||||
// myModal: null,
|
||||
// cuba: "",
|
||||
// // hargabida2: 2 + " this.form.test",
|
||||
// };
|
||||
// },
|
||||
// validations: {
|
||||
// cuba: {
|
||||
// required,
|
||||
// minLength: minLength(3),
|
||||
// },
|
||||
// },
|
||||
// computed: {
|
||||
// numberSag() {
|
||||
// return this.sags.length;
|
||||
// },
|
||||
// },
|
||||
// mounted: function () {
|
||||
// this.liveData();
|
||||
// },
|
||||
// methods: {
|
||||
// liveData() {
|
||||
// this.loading = true;
|
||||
// axios
|
||||
// .get("/lelongDetails/cawangan", {
|
||||
// headers: {
|
||||
// Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
// },
|
||||
// params: {
|
||||
// caw_id: "3",
|
||||
// },
|
||||
// })
|
||||
// .then((response) => {
|
||||
// this.lelong_details = response.data[0];
|
||||
// // console.log(this.lelong_details);
|
||||
// this.response = response.data[0].lelongbid;
|
||||
// this.sags = this.response;
|
||||
// this.loading = false;
|
||||
// // this.form.hargabida = this.form.test + 1;
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log(error);
|
||||
// this.lelong_details = [null];
|
||||
// // this.loading = false;
|
||||
// });
|
||||
// },
|
||||
// clickModal(norujukan) {
|
||||
// this.norujukan = norujukan;
|
||||
// this.marhuns = this.norujukan.lelongbidmarhun;
|
||||
// this.form.lelongbid_id = this.norujukan.id;
|
||||
// this.form.test = 1;
|
||||
// this.form.hargabida =
|
||||
// parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
|
||||
// },
|
||||
// calcTotal() {
|
||||
// this.form.hargabida =
|
||||
// parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
|
||||
// // console.log(this.norujukan);
|
||||
// // console.log(value);
|
||||
// },
|
||||
|
||||
// addToCart() {
|
||||
// axios
|
||||
// .post("/addToCart", this.form, {
|
||||
// headers: {
|
||||
// Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
// },
|
||||
// })
|
||||
// .then((response) => {
|
||||
// console.log(response);
|
||||
// // this.$forceUpdate();
|
||||
// // location.reload();
|
||||
// // this.liveData();
|
||||
// // this.myModal._isShown == false;
|
||||
// // call Cart component to refresh
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log(error);
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,422 @@
|
||||
<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">
|
||||
<button
|
||||
class="btn btn-secondary float-start"
|
||||
style="margin: 5px"
|
||||
onclick="history.back()"
|
||||
>
|
||||
Back <i class="bi bi-backspace-fill"></i>
|
||||
</button>
|
||||
<h1>Senarai <i class="bi bi-card-list"></i></h1>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="basic-addon3">Pilih Cawangan</span>
|
||||
<select class="form-select" v-model="cawangan">
|
||||
<option selected value="1">Ar-Rahn Kota Bharu 2</option>
|
||||
<!-- <option v-for="sag in sags" :key="sag.id" value="sag.id">Two</option> -->
|
||||
<!-- <option value="3">Three</option> -->
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary">Cari</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-9">
|
||||
<div class="container">
|
||||
<div class="d-flex">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Sort By</span>
|
||||
<button class="btn btn-outline-primary" checked>Default</button>
|
||||
<button class="btn btn-outline-primary">
|
||||
Ascending Harga Bida
|
||||
</button>
|
||||
<button class="btn btn-outline-primary">
|
||||
Descending Harga Bida
|
||||
</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"
|
||||
>Enter <i class="zmdi zmdi-shopping-cart"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<form>
|
||||
<div class="ibox" style="border: solid 0.5px">
|
||||
<div class="ibox-content">
|
||||
<p class="font-bold">Info</p>
|
||||
<hr />
|
||||
<div>
|
||||
<!-- <a href="#" class="product-name"> Product 1</a> -->
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Cawangan</p>
|
||||
<p class="mb-0">{{ lelong_details.lokasi }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Bilangan Lelongan</p>
|
||||
<p class="mb-0">{{ this.sags.length }} SAG</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Masa Mula</p>
|
||||
<p class="mb-0">{{ lelong_details.masamula_lelong }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="small m-t-xs">
|
||||
<div class="d-flex justify-content-between">
|
||||
<p class="mb-0">Masa Tamat</p>
|
||||
<p class="mb-0">{{ lelong_details.masatamat_lelong }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="small m-t-xs">
|
||||
Masa Tamat Lelongan: 00:15:29
|
||||
</div> -->
|
||||
<!-- <div class="m-t text-righ">
|
||||
<a href="#" class="btn btn-xs btn-outline btn-primary"
|
||||
>Info <i class="fa fa-long-arrow-right"></i>
|
||||
</a>
|
||||
</div> -->
|
||||
</div>
|
||||
<hr />
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="v$.cuba.$model"
|
||||
/>
|
||||
<!-- <hr /> -->
|
||||
<!-- <div>
|
||||
<a href="#" class="product-name"> Product 2</a>
|
||||
<div class="small m-t-xs">
|
||||
Many desktop publishing packages and web page editors now.
|
||||
</div>
|
||||
<div class="m-t text-righ">
|
||||
<a href="#" class="btn btn-xs btn-outline btn-primary"
|
||||
>Info <i class="fa fa-long-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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"
|
||||
>
|
||||
<!-- <form @submit.prevent="validate"> -->
|
||||
<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"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row m-2">
|
||||
<!-- <div class="col-2 border"></div> -->
|
||||
<div class="col">
|
||||
<!-- <h5>Harga Asas: RM{{ norujukan.hargaasas }}</h5> -->
|
||||
<p>Marhun: {{ norujukan.marhun }}</p>
|
||||
<p>Jumlah Berat: {{ norujukan.berat }}g</p>
|
||||
<table class="table table-bordered">
|
||||
<!-- <thead class="table-light">
|
||||
<tr>
|
||||
<th scope="col">No</th>
|
||||
<th scope="col">Jenis Marhun</th>
|
||||
<th scope="col">Karat</th>
|
||||
<th scope="col">Berat</th>
|
||||
<th scope="col">Nota</th>
|
||||
<th scope="col">Harga Asas</th>
|
||||
</tr>
|
||||
</thead> -->
|
||||
<!-- <tbody >
|
||||
</tbody> -->
|
||||
<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-5">
|
||||
<label class="col-form-label text-end"
|
||||
>Jumlah Harga Asas</label
|
||||
>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<!-- <input
|
||||
type="text"
|
||||
class="form-control"
|
||||
disabled
|
||||
/> -->
|
||||
<div
|
||||
style="background-color: #e9ecef"
|
||||
class="form-control text-start justify-content-start"
|
||||
disabled
|
||||
>
|
||||
{{ norujukan.hargaasas }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5">
|
||||
<label class="col-form-label">Tambahan Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
v-model="form.test"
|
||||
type="text"
|
||||
id="tambahanbida"
|
||||
class="form-control"
|
||||
@change="calcTotal()"
|
||||
/>
|
||||
<div
|
||||
style="font-size: 10px"
|
||||
class="fst-italic text-danger"
|
||||
>
|
||||
*Minimum tambahan harga bida adalah RM1
|
||||
</div>
|
||||
<div
|
||||
class="invalid-feedback"
|
||||
id="feedback-1"
|
||||
v-if="errors[0]"
|
||||
>
|
||||
{{ errors[0].message }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-5">
|
||||
<label class="col-form-label">Jumlah Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="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()">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </form> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import Senarai from "../list/Senarai.vue";
|
||||
import { required, minLength, maxLength, between } from "@vuelidate/validators";
|
||||
export default {
|
||||
components: {
|
||||
// Navbar,
|
||||
// Footer,
|
||||
Senarai,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
v$: useVuelidate(),
|
||||
loading: false,
|
||||
tambahabError: false,
|
||||
errors: [],
|
||||
cawangan: "1",
|
||||
lelong_details: [],
|
||||
sags: [],
|
||||
norujukan: "",
|
||||
marhuns: "",
|
||||
componentKey: 0,
|
||||
form: {
|
||||
user_id: localStorage.getItem("id"),
|
||||
lelongbid_id: "",
|
||||
test: "",
|
||||
hargabida: "",
|
||||
},
|
||||
myModal: null,
|
||||
cuba: "",
|
||||
// hargabida2: 2 + " this.form.test",
|
||||
};
|
||||
},
|
||||
validations: {
|
||||
cuba: {
|
||||
required,
|
||||
minLength: minLength(3),
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
numberSag() {
|
||||
return this.sags.length;
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
this.liveData();
|
||||
},
|
||||
methods: {
|
||||
liveData() {
|
||||
this.loading = true;
|
||||
axios
|
||||
.get("/lelongDetails/cawangan", {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
params: {
|
||||
caw_id: "3",
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.lelong_details = response.data[0];
|
||||
// console.log(this.lelong_details);
|
||||
this.response = response.data[0].lelongbid;
|
||||
this.sags = this.response;
|
||||
this.loading = false;
|
||||
// this.form.hargabida = this.form.test + 1;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
this.lelong_details = [null];
|
||||
// this.loading = false;
|
||||
});
|
||||
},
|
||||
clickModal(norujukan) {
|
||||
this.norujukan = norujukan;
|
||||
this.marhuns = this.norujukan.lelongbidmarhun;
|
||||
this.form.lelongbid_id = this.norujukan.id;
|
||||
this.form.test = 1;
|
||||
this.form.hargabida =
|
||||
parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
|
||||
},
|
||||
calcTotal() {
|
||||
this.form.hargabida =
|
||||
parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
|
||||
// console.log(this.norujukan);
|
||||
// console.log(value);
|
||||
},
|
||||
// forceRerender() {
|
||||
// this.componentKey += 1;
|
||||
// },
|
||||
addToCart() {
|
||||
axios
|
||||
.post("/addToCart", this.form, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
// this.Senarai.forceRerender();
|
||||
// this.componentKey += 1;
|
||||
// $ref.foo.forceRerender();
|
||||
|
||||
location.reload();
|
||||
// this.liveData();
|
||||
// this.myModal._isShown == false;
|
||||
// call Cart component to refresh
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user