Pass value using props in ThePayCdm component

src/components/cart/TheCart.vue

@@ -25,14 +25,6 @@ export default {
       componentKey: 0,
     };
   },
-  mounted: function () {
-    if (localStorage.getItem("reloaded")) {
-      localStorage.removeItem("reloaded");
-    } else {
-      localStorage.setItem("reloaded", "1");
-      location.reload();
-    }
-  },
   methods: {
     toggleReloadComponent() {
       this.componentKey += 1;

src/components/pay/ListReceipt.vue

@@ -86,7 +86,9 @@ import ReceiptImage from "./ReceiptImage.vue";
 
 export default {
   emits: ["reloadComponent"],
-
+  props: {
+      lelong_id: "",
+  },
   mounted: function () {
     this.listReceipt();
     // this.getInvoice();
@@ -114,7 +116,7 @@ export default {
           },
           params: {
             user_id: localStorage.getItem("id"),
-            lelong_id: 4,
+            lelong_id: this.lelong_id,
           },
         })
         .then((response) => {

src/components/pay/ThePayCdm.vue

@@ -61,7 +61,7 @@
                     <td>RMXXXX</td>
                   </tr>
                   <tr class="uppercase text-danger">
-                    <th colspan="2">Jumlah Yang Perlu Di Bank-In</th>
+                    <th colspan="2">Amaun yang perlu di bank-in</th>
                     <th>RMXXXXX</th>
                   </tr>
                 </tbody>
@@ -76,6 +76,7 @@
             />
             <list-receipt
               v-bind:key="componentKey"
+              v-bind:lelong_id="lelongId"
               v-on:reloadComponent="toggleReloadComponent"
             ></list-receipt>
 
@@ -87,12 +88,20 @@
               :modal="true"
             >
               <div class="text-center m-2">
-                <input type="file" />
+                <input class="form-control" type="file" accept="image/*" v-on:change="selectPhoto" />
+                <!-- <FileUpload
+                  name="demo[]"
+                  url="./upload"
+                  accept="image/*"
+                  :maxFileSize="1500000"
+                  :fileLimit="1"
+                  invalidFileSizeMessage="{0}: Melebihi saiz yang ditetapkan, saiz fail hendaklah tikal melebihi 1.5 MB."
+                /> -->
               </div>
               <template #footer>
                 <Button
-                  class="p-button-sm p-button-danger"
-                  label="Batal"
+                  class="p-button-sm p-button-secondary"
+                  label="Kembali"
                   @click="closeModalFileUpload()"
                 />
                 <Button
@@ -100,7 +109,7 @@
                   label="Simpan"
                   icon="pi pi-check"
                   iconPos="right"
-                  @click="openModalFileUpload()"
+                  @click="addPhotoResit()"
                 />
               </template>
             </Dialog>
@@ -156,6 +165,11 @@ export default {
       isSuccess: false,
       isDisplayFileUpload: false,
       componentKey: 0,
+      formResit: {
+        user_id: localStorage.getItem("id"),
+        lelong_id: this.$route.params.lelongId,
+        gambarResit: "",
+      },
     };
   },
   created() {
@@ -196,6 +210,52 @@ export default {
           console.log(error);
         });
     },
+    selectPhoto(e) {
+      console.log(e);
+      this.formResit.gambarResit = e.target.files[0];
+    },
+    addPhotoResit() {
+      var resitFormData = new FormData();
+      resitFormData.append("gambarResit", this.formResit.gambarResit);
+      resitFormData.append("lelong_id", this.formResit.lelong_id);
+      resitFormData.append("user_id", this.formResit.user_id);
+      axios
+        .post("/addPhotoResit", resitFormData, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          this.isDisplayFileUpload = false;
+          if (response.data.success == true) {
+            this.$swal.fire({
+              icon: "success",
+              title: "Gambar Resit Berjaya Di Muat Naik",
+              confirmButtonColor: "#344871",
+              confirmButtonText: "OK",
+              allowOutsideClick: false,
+              allowEscapeKey: false,
+            });
+            this.componentKey += 1;
+          } else if (response.data.success == false) {
+            console.log(response);
+            this.$swal.fire({
+              toast: true,
+              icon: "error",
+              title: "Gagal! Sila refresh page semula.",
+              animation: false,
+              position: "bottom",
+              showConfirmButton: false,
+              timer: 5000,
+              timerProgressBar: true,
+            });
+            this.componentKey += 1;
+          }
+        })
+        .catch((error) => {
+          alert(error);
+        });
+    },
     openModalFileUpload() {
       this.isDisplayFileUpload = true;
     },