exchange/resources/assets/js/pages/booking/uploadUserBankSlip.vue

<template>
  <el-main>
    <progress-track v-model="status"></progress-track>

    <div align="center">
      <h4 style="margin-top:5%;">Waiting For Payment</h4>
    </div>

    <el-row justify="center" align="center">
      <table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;">
        <tbody>
          <tr>
            <td class="el-table_2_column_9 is-right ">Amount : </td>
            <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
              <b> {{ booking.amount }} </b>
            </td>
          </tr>
          <tr>
            <td width="200" class="el-table_2_column_9 is-right ">Bankin Amount : </td>
            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
              <b> {{ booking.bankin_amount }} </b>
            </td>
          </tr>
        </tbody>
      </table>
    </el-row>
    <br>


    <!-- action="https://jsonplaceholder.typicode.com/posts/" -->


    <div align="center">

      <vue-countdown :time="booking.timeout">
        <template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
      </vue-countdown>
      <!-- <button v-on:click="startTimer">Start timer</button> -->
    </div>
    <br>



    <!-- upload image -->
    <el-upload v-bind:action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
      list-type="picture-card" align="center">
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>
    <br>
    <!-- upload image end -->

    <!-- <el-form label-width="300px">
        <el-form-item label="Amount (RM) :"> -->
    <div align="center">
      Bankin Amount (RM) :
      <el-form :model="user_slip_form" :rules="rules" ref="user_slip_form">
        <div align="center">
          <el-form-item prop="transfer_amount">
            <el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
            />
          </el-form-item>
          <el-form-item>
              <div align="center">
              <el-button type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
              <router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
                Upload Later
              </router-link>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <br>
      <br>
    </div>
    <!-- </el-form-item>
    </el-form> -->



  </el-main>
</template>
<style>
  .booking-details {
    font-weight: bold;
  }
</style>
<script>
  import VueCountdown from '@xkeshi/vue-countdown'
  import ProgressTrack from '~/components/ProgressTrack'
  import axios from 'axios'

  export default {
    middleware: ['auth'],
    name: 'MyComponent',
    components: {
      'vue-countdown': VueCountdown,
      'progress-track': ProgressTrack
    },
    data() {
      return {
        status: 2,
        start: false,
        dialogImageUrl: '',
        dialogVisible: false,
        booking_id: this.$route.params.id,
        user_slip_form:{
          transfer_amount : ''
        },
        booking: {
          amount: '',
          bankin_amount: '',
          timeout: 1
        },
        rules: {
          transfer_amount: [{
            required: true,
            message: 'Please input amount',
            trigger: 'change'
          }, ],}
      }
    },
    beforeCreate() {
      const loading = this.$loading({
        lock: true,
        text: 'Please wait..',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      axios
        .get('/api/booking/' + this.$route.params.id)
        .then((response) => {
          console.log(response)
          this.booking.amount = response.data.amount
          this.booking.bankin_amount = response.data.bia
          this.booking.timeout = response.data.timeout * 1000
          this.start = true;
          loading.close()
        }).catch((error) => {
          console.log(error)
          loading.close()
          this.$router.push({
            name: 'notfound'
          })
        })
     
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      submitUserSlip(formName) {
         this.$refs[formName].validate((valid) => {
          if (valid) {
            let newConfirmation = {
              amount: this.booking.amount,
              term: this.term
            }
          }
          else{
            return
          }
          });
         let newUserSlip = {
          transfer_amount : this.user_slip_form.transfer_amount
        }
        axios.patch('/api/booking/'+ this.booking_id +'/bankslip-amount', newUserSlip)
          .then((response) => {
            this.$message({
              showClose: true,
              message: 'Your bankinslip has been submitted, please wait admin to approve.',
              type: 'success',
              duration: 5000,
            });
            console.log(response)
             this.$router.push({
              name: 'home'
            })

          })
          .catch((error) => {
            this.$message({
              showClose: true,
              message: 'Please upload your bankin slip first.',
              type: 'warning',
              duration: 10000,
            });
            console.log(error)
            return
          })
      },
      handleTimeExpire() {
        alert('Booking expired')
      },
      startTimer() {
        this.start = true
      },

    }
  }
</script>