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

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

    <div align="center" v-if="booking.user_bankslip_path">
      <h4 style="margin-top:5%" >
        Your Bankslip Has Been Rejected, Please Reupload Your Bankslip
      </h4>
      <br>
      <br>
    </div>

     <div v-else 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> RMB {{ 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> MYR {{ booking.bankin_amount }} </b>
            </td>
          </tr>
        </tbody>
      </table>
    </el-row>
    <br>

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

    <div align="center">

      <vue-countdown :countdownend="handleCoutdownend" :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 :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 ref="user_slip_form" :model="user_slip_form" :rules="rules">
        <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 :loading="loading" 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,
      loading: false,
      dialogImageUrl: '',
      dialogVisible: false,
      booking_id: this.$route.params.id,
      user_slip_form: {
        transfer_amount: ''
      },
      booking: {
        amount: '',
        bankin_amount: '',
        timeout: 1,
        user_bankslip_path: null,
        reject_reason: null,
      },
      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

        if (response.data.user_bankslip_path)
        {
          this.booking.user_bankslip_path = response.data.user_bankslip_path
          this.booking.reject_reason = response.data.reject_reason
        }

        this.start = true
        loading.close()

        if (this.booking.timeout < 0) {
          this.$message({
            showClose: true,
            message: 'Booking timeout, please make another booking.',
            type: 'error',
            duration: 30000
          })
          this.$router.push({
            name: 'home'
          })
        }
      }).catch((error) => {
        console.log(error)
        loading.close()
        this.$router.push({
          name: 'notfound'
        })
      })
  },
  methods: {
    handleCoutdownend () {
      this.$message({
        showClose: true,
        message: 'Booking timeout, please make another booking.',
        type: 'error',
        duration: 30000
      })
      this.$router.push({
        name: 'home'
      })
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    submitUserSlip (formName) {
      this.loading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let newConfirmation = {
            amount: this.booking.amount,
            term: this.term
          }
        } else {
          this.loading = false
        }
      })
      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.loading = false
          this.$message({
            showClose: true,
            message: 'Please upload your bankin slip first.',
            type: 'warning',
            duration: 10000
          })
          console.log(error)
        })
    },
    handleTimeExpire () {
      alert('Booking expired')
    },
    startTimer () {
      this.start = true
    }

  }
}
</script>