mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-29 17:24:14 +00:00
Jack Goh
d80f048f5a
integrated complete page frontend integrated po page frontend integrated po complete page frontend removed ETA for transfer page frontend
325 lines
12 KiB
Vue
325 lines
12 KiB
Vue
<template>
|
|
<el-main>
|
|
<progress-track v-model="status"/>
|
|
|
|
<div align="center">
|
|
<h4 style="margin-top:5%;">Processing Invoice</h4>
|
|
<br>
|
|
<el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
|
|
</div>
|
|
<br>
|
|
|
|
<!-- bankslip -->
|
|
<br>
|
|
<el-row :gutter="12" justify="center" align="center">
|
|
<el-col :span="8">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>Purchase Order</span>
|
|
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
|
</div>
|
|
<el-row :gutter="12" type="flex">
|
|
<el-col :span="12">
|
|
<a target=" _blank" href="#">
|
|
<img v-bind:src="booking_details.user_po_path" class="image">
|
|
</a>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>China Bank Slip</span>
|
|
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
|
</div>
|
|
<el-row :gutter="12" type="flex">
|
|
<el-col :span="12">
|
|
<a target=" _blank" href="#">
|
|
<img v-bind:src="booking_details.china_bankslip_path" class="image">
|
|
</a>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<span>Invoice</span>
|
|
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
|
</div>
|
|
<el-row :gutter="12" type="flex">
|
|
<el-col :span="12">
|
|
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
<br>
|
|
<!-- bank slips END -->
|
|
|
|
<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>
|
|
<!-- <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> -->
|
|
<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>Payment Bankin Slip</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 v-bind:src="booking_details.user_bankslip_path" class="image">
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</el-row>
|
|
</el-main>
|
|
</template>
|
|
<style>
|
|
.booking-details {
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
<script>
|
|
import VueCountdown from '@dmaksimovic/vue-countdown'
|
|
import ProgressTrack from '~/components/ProgressTrack'
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
components: {
|
|
'progress-track': ProgressTrack
|
|
},
|
|
data () {
|
|
return {
|
|
status: 6,
|
|
loading_btn: false,
|
|
booking_details:{
|
|
id: null,
|
|
amount: null,
|
|
bia: null,
|
|
user_bankslip_path: 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/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: {
|
|
|
|
}
|
|
}
|
|
</script>
|