exchange/resources/assets/js/pages/admin/booking/verification.vue

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

    <div align="center">
      <h4 style="margin-top:5%;"></h4>
      <br>
      <h5> Verify User Bankslip </h5>
      <br>
      <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
    </div>
    <br>
    <el-row justify="center" align="center">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>Order Details</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
        </div>
        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
            
              <div class="el-table__body-wrapper is-scrolling-none">
                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
                  <colgroup>
                    <col name="el-table_2_column_9" width="200">
                    <col name="el-table_2_column_10" width="200">
                  </colgroup>
                  <tbody>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell">Order Number :</div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell">{{ booking_details.id }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell">Date :</div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell">{{ booking_details.created_at }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell">Customer Marking :</div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell">CIEF/150ECE</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell"></div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell"></div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell">Term :</div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell">{{ booking_details.term }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_2_column_9 is-right ">
                        <div class="cell"></div>
                      </td>
                      <td class="el-table_2_column_10 is-left ">
                        <div class="cell"></div>
                      </td>
                    </tr>
                    <!---->
                  </tbody>
                </table>
                <!---->
                <!---->
              </div>
              <!---->
              <!---->
              <!---->
              <!---->
              <div class="el-table__column-resize-proxy" style="display: none;"></div>
            </div>
          </div>
          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
              <div class="hidden-columns">
                <div></div>
                <div></div>
              </div>
              <!---->
              <div class="el-table__body-wrapper is-scrolling-none">
                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
                  <colgroup>
                    <col name="el-table_3_column_11" width="200">
                    <col name="el-table_3_column_12" width="200">
                  </colgroup>
                  <tbody>
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell">CNY/RMB :</div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell">CNY {{ booking_details.amount }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell">+ Service Charge :</div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell">/ RATE :</div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell">{{ booking_details.rate }}</div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell"></div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell">MYR {{ booking_details.bia }}</div>
                      </td>
                    </tr>
                    <!-- <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell">+ GST 6% :</div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell">MYR 4,430.88</div>
                      </td>
                    </tr> -->
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell"></div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
                      </td>
                    </tr>
                    <tr class="el-table__row">
                      <td class="el-table_3_column_11 is-right ">
                        <div class="cell"></div>
                      </td>
                      <td class="el-table_3_column_12 is-left ">
                        <div class="cell"></div>
                      </td>
                    </tr>
                    <!---->
                  </tbody>
                </table>
                <!---->
                <!---->
              </div>
              <!---->
              <!---->
              <!---->
              <!---->
              <div class="el-table__column-resize-proxy" style="display: none;"></div>
            </div>
          </div>
        </div>
        <!-- <el-row :gutter="12">
          <el-col :span="12">
            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
              <el-table-column prop="data1" align="right" width="200" />
              <el-table-column prop="data2" align="left" width="200" />
            </el-table>
          </el-col>
          <el-col :span="12">
            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
              <el-table-column prop="data1" align="right" width="200" />
              <el-table-column prop="data2" align="left" width="200" />
            </el-table>
          </el-col>
        </el-row> -->
      </el-card>
    </el-row>
    <br>

    <el-row justify="center" align="center">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>BankinSlip</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
        </div>
        <el-row :gutter="12">
          <el-col :span="22" style="text-align:center">
            <img src="http://via.placeholder.com/600x400" class="image">
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card">
        <el-row :gutter="12">
          <el-col :span="22" style="text-align:center">
            <el-button :loading="loading" @click="approveUserSlip" type="success">Aprroved</el-button>
            <el-button :loading="loading" @click="rejectUserSlip" type="danger">Rejected</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
  </el-main>
</template>
<style>
  .booking-details {
    font-weight: bold;
  }
</style>
<script>
  import ProgressTrack from '~/components/AdminProgressTrack'
  import axios from 'axios'

  export default {
    components: {
      'progress-track': ProgressTrack
    },
    data() {
      return {
        status: 2,
        loading: false,
        booking_details:{
          id: null,
          amount: null,
          bia: null,
        }
      }
    },
    beforeCreate () {
    const loading = this.$loading({
      lock: true,
      text: 'Please wait..',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })

    axios
      .get('/api/admin/booking/' + this.$route.params.id)
      .then((response) => {
        this.booking_details = response.data
        loading.close()

      }).catch((error) => {
        console.log(error)
        loading.close()
        this.$router.push({
          name: 'notfound'
        })
      })
  },
    methods: {
      approveUserSlip() {
        // axios.get('api/booking')
        //   .then((response) => {
        //     console.log(response)
        //     this.list = response.data
        //   })
      },
      rejectUserSlip() {
        // axios.get('api/booking')
        //   .then((response) => {
        //     console.log(response)
        //     this.list = response.data
        //   })
      },
    }
  }
</script>