cief/exchange
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git synced 2026-08-24 23:04:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'frontend/making-every-user-page-responsive' into 'master'

Browse Source 
Frontend/making every user page responsive

See merge request CIEFWorldwideSdnBhd/exchange!74
This commit is contained in:
Jack Goh
2018-07-20 09:44:31 +00:00
parent c63c4e6811 1cccefdb8a
commit d3a995c6b5
10 changed files with 766 additions and 1523 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/SettingActiveBankController.php
+1 -1
View File
@@ -10,7 +10,7 @@ class SettingActiveBankController extends Controller
public function index()
{
$active_bank_setting = SettingActiveBank::latest()->first();
return response()->json($active_bank_setting, 201);
return response()->json($active_bank_setting, 200);
}
public function update(Request $request)
resources/assets/js/components/ProgressTrack.vue
+9 -5
View File
@@ -1,6 +1,6 @@
<template>
<el-row>
<el-steps :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
<el-steps class="progressBar" :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
<el-step title="Booking"/>
<el-step title="Payment"/>
<el-step title="Order Confirmation"/>
@@ -13,10 +13,14 @@
</template>
<style type="text/css">
/* .el-row {
margin: 20px 0;
}
@media screen and (max-width: 800px) {
.progressBar {
width: 60%;
}
}
/*
.el-steps {
padding-top: 70px;
}
resources/assets/js/pages/booking/completed.vue
+126 -260
View File
@@ -1,278 +1,144 @@
<template>
<el-main>
<progress-track v-model="status"/>
<div align="center">
<h4 style="margin-top:5%;">Order Completed</h4>
<br>
<h1>Order Completed</h1>
<div class="goBackButton">
<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">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">Purchase Order</div>
<div class="row">
<div class="card-body">
<a target=" _blank" :href="booking_details.user_po_path">
<img v-bind:src="booking_details.user_po_path" class="uploadedImage">
</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 v-bind:src="booking_details.invoice_path" class="image">
</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">{{ booking_details.marking }}</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>
<div class="col">
<div class="card">
<div class="card-header">China Bank Slip</div>
<div class="row">
<div class="card-body">
<a target=" _blank" :href="booking_details.china_bankslip_path">
<img v-bind:src="booking_details.china_bankslip_path" class="uploadedImage">
</a>
</div>
</div>
</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>
</div>
<div class="col">
<div class="card">
<div class="card-header">Invoice</div>
<div class="row">
<div class="card-body">
<img class="uploadedImage" src="http://via.placeholder.com/900x1615">
</div>
</div>
</div>
</div>
</div>
<!-- order details -->
<div class="card">
<div class="card-header">Order Details</div>
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
<td>Date :</td>
<td>{{ booking_details.created_at }}</td>
</tr>
<tr>
<td>Customer Marking :</td>
<td>{{ booking_details.marking }}</td>
</tr>
<tr>
<td>Term: </td>
<td>{{ booking_details.term }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>CNY/RMB :</td>
<td>CNY {{ booking_details.amount }}</td>
</tr>
<tr>
<td>+ Service Charge :</td>
<td>CNY {{ booking_details.service_charge }}</td>
</tr>
<tr>
<td>RATE :</td>
<td>{{ booking_details.rate }}</td>
</tr>
<tr>
<td></td>
<td><b>MYR {{ booking_details.bia }}</b></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">Order Bankin Slip</div>
<div class="row">
<div class="card-body">
<a target="_blank" :href="booking_details.user_bankslip_path">
<img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
</a>
</div>
</div>
</div>
</el-main>
</template>
<style>
.booking-details {
font-weight: bold;
h1 {
margin-top:5%;
font-size:3vw;
text-align:center;
margin-bottom:3%;
}
.goBackButton {
text-align:center;
margin-bottom:3%;
}
.uploadedImage {
border: 1px solid #ddd;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 150px;
display: block;
}
.uploadedImage:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.card {
margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
.table {
font-size: 3.5vmin;
}
h1 {
font-size: 1em;
}
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
resources/assets/js/pages/booking/confirmation.vue
+87 -209
View File
@@ -1,226 +1,104 @@
<template>
<el-main>
<progress-track v-model="status"/>
<div align="center">
<h4 style="margin-top:5%;">Bankin Slip Verification In Progress</h4>
<br>
<h1>Bankin Slip Verification in Progress</h1>
<div class="goBackButton">
<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>
<!-- <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">{{ booking_details.marking }}</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 class="card">
<div class="card-header">Order Details</div>
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
<td>Date :</td>
<td>{{ booking_details.created_at }}</td>
</tr>
<tr>
<td>Customer Marking :</td>
<td>{{ booking_details.marking }}</td>
</tr>
<tr>
<td>Term: </td>
<td>{{ booking_details.term }}</td>
</tr>
</tbody>
</table>
</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 class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>CNY/RMB :</td>
<td>CNY {{ booking_details.amount }}</td>
</tr>
<tr>
<td>+ Service Charge :</td>
<td>CNY {{ booking_details.service_charge }}</td>
</tr>
<tr>
<td>RATE :</td>
<td>{{ booking_details.rate }}</td>
</tr>
<tr>
<td></td>
<td><b>MYR {{ booking_details.bia }}</b></td>
</tr>
</tbody>
</table>
</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>
</div>
</div>
<br>
<el-row justify="center" align="center">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Banking Slip</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
<div class="card">
<div class="card-header">Order Bankin Slip</div>
<div class="row">
<div class="card-body">
<a target="_blank" :href="booking_details.user_bankslip_path">
<img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
</a>
</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>
</div>
</div>
</el-main>
</template>
<style>
.booking-details {
font-weight: bold;
h1 {
margin-top:5%;
text-align:center;
font-size:3vw;
margin-bottom:3%;
}
.goBackButton {
text-align:center;
margin-bottom:3%;
}
.uploadedImage {
border: 1px solid #ddd;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 150px;
display: block;
}
.uploadedImage:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
@media screen and (max-width: 767px) {
.table {
font-size: 3.5vmin;
}
h1 {
font-size: 1em;
}
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
resources/assets/js/pages/booking/po.vue
+113 -260
View File
@@ -1,281 +1,123 @@
<template>
<el-main>
<progress-track v-model="status"/>
<div align="center">
<h4 style="margin-top:5%;">Processing Invoice</h4>
<br>
<h1>Processing Invoice</h1>
<div class="goBackButton">
<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">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">Purchase Order</div>
<div class="row">
<div class="card-body">
<a target=" _blank" :href="booking_details.user_po_path">
<img v-bind:src="booking_details.user_po_path" class="image">
<img v-bind:src="booking_details.user_po_path" class="uploadedImage">
</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>
</div>
<el-row :gutter="12" type="flex">
<el-col :span="12">
</div>
</div>
<div class="col">
<div class="card">
<div class="card-header">China Bank Slip</div>
<div class="row">
<div class="card-body">
<a target=" _blank" :href="booking_details.china_bankslip_path">
<img v-bind:src="booking_details.china_bankslip_path" class="image">
<img v-bind:src="booking_details.china_bankslip_path" class="uploadedImage">
</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/900x1615">
</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">{{ booking_details.marking }}</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>
<div class="col">
<div class="card">
<div class="card-header">Invoice</div>
<div class="row">
<div class="card-body">
<img class="uploadedImage" src="http://via.placeholder.com/900x1615">
</div>
</div>
</div>
<el-row :gutter="12">
<el-col :span="22" style="text-align:center">
<a target="_blank" :href="booking_details.user_bankslip_path">
<img v-bind:src="booking_details.user_bankslip_path" class="image">
</a>
</el-col>
</el-row>
</el-card>
</el-row>
</div>
</div>
<!-- order details -->
<div class="card">
<div class="card-header">Order Details</div>
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
<td>Date :</td>
<td>{{ booking_details.created_at }}</td>
</tr>
<tr>
<td>Customer Marking :</td>
<td>{{ booking_details.marking }}</td>
</tr>
<tr>
<td>Term: </td>
<td>{{ booking_details.term }}</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>CNY/RMB :</td>
<td>CNY {{ booking_details.amount }}</td>
</tr>
<tr>
<td>+ Service Charge :</td>
<td>CNY {{ booking_details.service_charge }}</td>
</tr>
<tr>
<td>RATE :</td>
<td>{{ booking_details.rate }}</td>
</tr>
<tr>
<td></td>
<td><b>MYR {{ booking_details.bia }}</b></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">Order Bankin Slip</div>
<div class="row">
<div class="card-body">
<a target="_blank" :href="booking_details.user_bankslip_path">
<img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
</a>
</div>
</div>
</div>
</el-main>
</template>
<style>
.booking-details {
font-weight: bold;
h1 {
margin-top:5%;
font-size:3vw;
text-align:center;
margin-bottom:3%;
}
.image {
.goBackButton {
text-align:center;
margin-bottom:3%;
}
.uploadedImage {
border: 1px solid #ddd;
border-radius: 4px;
margin-left: auto;
@@ -283,9 +125,20 @@
width: 150px;
display: block;
}
.image:hover {
.uploadedImage:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.card {
margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
.table {
font-size: 3.5vmin;
}
h1 {
font-size: 1em;
}
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
resources/assets/js/pages/booking/poComplete.vue
+59 -203
View File
@@ -60,213 +60,69 @@
<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">{{ booking_details.marking }}</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>
<!-- order details -->
<div class="card">
<div class="card-header">Order Details</div>
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
<td>Date :</td>
<td>{{ booking_details.created_at }}</td>
</tr>
<tr>
<td>Customer Marking :</td>
<td>{{ booking_details.marking }}</td>
</tr>
<tr>
<td>Term: </td>
<td>{{ booking_details.term }}</td>
</tr>
</tbody>
</table>
</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 class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>CNY/RMB :</td>
<td>CNY {{ booking_details.amount }}</td>
</tr>
<tr>
<td>+ Service Charge :</td>
<td>CNY {{ booking_details.service_charge }}</td>
</tr>
<tr>
<td>RATE :</td>
<td>{{ booking_details.rate }}</td>
</tr>
<tr>
<td></td>
<td><b>MYR {{ booking_details.bia }}</b></td>
</tr>
</tbody>
</table>
</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>
</div>
<br>
<div class="card">
<div class="card-header">Payment Bankin Slip</div>
<div class="row">
<div class="card-body">
<a target="_blank" :href="booking_details.user_bankslip_path">
<img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
</a>
</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>
</div>
</div>
</el-main>
</template>
<style>
resources/assets/js/pages/booking/transfer.vue
+99 -210
View File
@@ -1,226 +1,115 @@
<template>
<el-main>
<progress-track v-model="status"/>
<div align="center">
<h4 style="margin-top:5%;">Bankin Slip Aprroved <br><br> Transfer In Progress</h4>
<br>
<h1>Bankin Slip Approved</h1>
<h2>Transfer In Progress</h2>
<div class="goBackButton">
<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>
<!-- <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">{{ booking_details.marking }}</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>
<!-- order details -->
<div class="card">
<div class="card-header">Order Details</div>
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
<td>Date :</td>
<td>{{ booking_details.created_at }}</td>
</tr>
<tr>
<td>Customer Marking :</td>
<td>{{ booking_details.marking }}</td>
</tr>
<tr>
<td>Term: </td>
<td>{{ booking_details.term }}</td>
</tr>
</tbody>
</table>
</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 class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>CNY/RMB :</td>
<td>CNY {{ booking_details.amount }}</td>
</tr>
<tr>
<td>+ Service Charge :</td>
<td>CNY {{ booking_details.service_charge }}</td>
</tr>
<tr>
<td>RATE :</td>
<td>{{ booking_details.rate }}</td>
</tr>
<tr>
<td></td>
<td><b>MYR {{ booking_details.bia }}</b></td>
</tr>
</tbody>
</table>
</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>
</div>
<div class="card">
<div class="card-header">Order Bankin Slip</div>
<div class="row">
<div class="card-body">
<a target="_blank" :href="booking_details.user_bankslip_path">
<img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
</a>
</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>
</div>
</div>
</el-main>
</template>
<style>
.booking-details {
font-weight: bold;
h1 {
margin-top:5%;
font-size:3vw;
text-align:center;
}
h2 {
font-size:2vw;
text-align:center;
margin-bottom:3%;
}
.goBackButton {
text-align:center;
margin-bottom:3%;
}
.uploadedImage {
border: 1px solid #ddd;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 150px;
display: block;
}
.uploadedImage:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.card {
margin-bottom: 3%;
}
@media screen and (max-width: 767px) {
.table {
font-size: 3.5vmin;
}
h1 {
font-size: 1em;
}
h2 {
font-size: 0.8em;
}
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
resources/assets/js/pages/booking/uploadPo.vue
+148 -236
View File
@@ -1,260 +1,172 @@
<template>
<el-main>
<progress-track v-model="status"/>
<div align="center">
<h4 style="margin-top:5%;">Transfer Completed</h4>
<h5> Please upload your purchase order </h5>
<br>
</div>
<!-- upload card -->
<br>
<el-row :gutter="12" justify="center" align="center">
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Upload PO</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
<!-- upload image -->
<el-main>
<progress-track v-model="status"/>
<h1>Transfer Completed</h1>
<h2> Please upload your purchase order </h2>
<!-- upload card -->
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">Upload PO</div>
<!-- upload image -->
<div class="card-body">
<el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
:on-remove="handleRemove"
class="upload-demo"
drag
multiple>
:on-remove="handleRemove"
class="upload-demo uploadAreaOne"
drag
multiple>
<i class="el-icon-upload"/>
<div class="el-upload__text">Drop file here or
<em>click to upload</em>
</div>
<div slot="tip" class="el-upload__tip">jpg/png/pdf files with a size less than 3mb</div>
</el-upload>
<br>
<el-upload
class="upload-demo uploadAreaTwo"
:action="'/api/booking/' + booking_id + '/upload-po'"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:file-list="fileList">
<el-button size="small" type="primary">Click to upload</el-button>
<div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
</el-upload>
<div class="bottom clearfix" style="text-align:right;">
<el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
</div>
<!-- upload image end -->
</el-card>
</el-col>
<el-col :span="12">
<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="booking_details.china_bankslip_path">
<img v-bind:src="booking_details.china_bankslip_path" class="image">
</a>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<br>
<!-- order details -->
<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> -->
<!-- upload image end -->
</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">{{ booking_details.marking }}</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>
<div class="col">
<div class="card">
<div class="card-header">China Bank Slip</div>
<div class="card-body">
<a target="_blank" :href="booking_details.china_bankslip_path">
<img v-bind:src="booking_details.china_bankslip_path" class="bankinSlipImage">
</a>
</div>
</div>
</div>
</div>
<!-- order details -->
<div class="card">
<div class="card-header">Order Details</div>
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>Order Number :</td>
<td>{{ booking_details.id }}</td>
</tr>
<tr>
<td>Date :</td>
<td>{{ booking_details.created_at }}</td>
</tr>
<tr>
<td>Customer Marking :</td>
<td>{{ booking_details.marking }}</td>
</tr>
<tr>
<td>Term: </td>
<td>{{ booking_details.term }}</td>
</tr>
</tbody>
</table>
</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 class="col">
<table class="table table-striped">
<tbody>
<tr>
<td>CNY/RMB :</td>
<td>CNY {{ booking_details.amount }}</td>
</tr>
<tr>
<td>+ Service Charge :</td>
<td>CNY {{ booking_details.service_charge }}</td>
</tr>
<tr>
<td>RATE :</td>
<td>{{ booking_details.rate }}</td>
</tr>
<tr>
<td></td>
<td><b>MYR {{ booking_details.bia }}</b></td>
</tr>
</tbody>
</table>
</div>
</div>
</el-card>
</el-row>
<br>
<el-row justify="center" align="center">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Order Bankin Slip</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
</div>
</div>
<div class="card">
<div class="card-header">Order Bankin Slip</div>
<div class="row">
<div class="card-body">
<a target="_blank" :href="booking_details.user_bankslip_path">
<img v-bind:src="booking_details.user_bankslip_path" class="bankinSlipImage">
</a>
</div>
<el-row :gutter="12">
<el-col :span="22" style="text-align:center">
<a target="_blank" :href="booking_details.user_bankslip_path">
<img v-bind:src="booking_details.user_bankslip_path" class="image">
</a>
</el-col>
</el-row>
</el-card>
</el-row>
</div>
</div>
</el-main>
</template>
<style>
.booking-details {
font-weight: bold;
}
.image {
border: 1px solid #ddd;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 150px;
display: block;
* {
box-sizing: border-box;
}
.image:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
h1 {
margin-top:5%;
font-size:3vw;
text-align:center;
}
h2 {
font-size:2vw;
text-align:center;
margin-bottom:3%;
}
.booking-details {
font-weight: bold;
}
.bankinSlipImage {
border: 1px solid #ddd;
border-radius: 4px;
margin-left: auto;
margin-right: auto;
width: 150px;
display: block;
}
.bankinSlipImage:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.uploadAreaTwo {
display: none;
}
.card {
margin-bottom: 3%;
}
@media only screen and (max-width : 767px) {
.uploadAreaOne {
display: none;
}
.uploadAreaTwo {
display: unset;
}
.table {
font-size: 3.5vmin;
}
h1 {
font-size: 1em;
}
h2 {
font-size: 0.8em;
}
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
resources/assets/js/pages/booking/uploadUserBankSlip.vue
+99 -95
View File
@@ -1,102 +1,107 @@
<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 <br>
Reason : {{ booking.reject_reason }}
</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>
<table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;" align="center">
<tr>
<td align="center">
{{bankDetail.company_name}}<br/>
{{bankDetail.bank_name}} : {{bankDetail.acc_no}}
</td>
</tr>
</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>
<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 <br>
Reason : {{ booking.reject_reason }}
</h4>
<br>
<br>
</div>
<div v-else align="center">
<h1>Waiting For Payment</h1>
</div>
</el-form>
<br>
<br>
</div>
<!-- </el-form-item>
</el-form> -->
<div class="row">
<table class="table table-striped">
<tbody>
<tr>
<td>Amount : </td>
<td><b>RMB {{ booking.amount }}</b></td>
</tr>
<tr>
<td>Bankin Amount : </td>
<td><b> MYR {{ booking.bankin_amount }}</b></td>
</tr>
<tr>
<td colspan="2">
<b>{{ bankDetail.company_name }}</b><br>
{{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
</td>
</tr>
</tbody>
</table>
</div>
<div class="row timer">
<div class="col">
<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>
</div>
</div>
<!-- upload image -->
<div class="row upload">
<div class="col">
<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>
</div>
</div>
<!-- upload image end -->
<div class="row bankinAmount">
<div class="col">
Bankin Amount (RM) :<br>
<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
<el-form-item prop="transfer_amount">
<el-input class="transferAmountInput" v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount"/>
</el-form-item>
<el-form-item>
<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>
</el-form-item>
</el-form>
</div>
</div>
</el-main>
</template>
<style>
.booking-details {
font-weight: bold;
h1 {
margin-top:5%;
font-size:3vw;
text-align:center;
margin-bottom:3%;
}
.timer, .upload, .bankinAmount {
text-align: center;
}
.transferAmountInput {
width: 20%;
}
.row {
margin-bottom: 3%;
}
td:last-child {
text-align:center;
}
@media screen and (max-width: 767px) {
.transferAmountInput {
width: 60%;
}
.table {
font-size: 3.5vmin;
}
h1 {
font-size: 1em;
}
}
</style>
<script>
@@ -142,8 +147,7 @@ export default {
x2_bank_id: null,
beneficiary_id: null
},
bankDetail : {},
bankDetail: {}
}
},
beforeCreate () {
@@ -189,7 +193,7 @@ export default {
})
})
},
beforeMount(){
beforeMount() {
this.updateBankDetail();
},
methods: {
resources/assets/js/pages/home.vue
+25 -44
View File
@@ -7,7 +7,6 @@
I need :
<el-select v-model="value" placeholder="RMB">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
<!-- <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2" /> -->
</el-select>
</div>
</el-col>
@@ -15,7 +14,7 @@
<br>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
<div class="grid-content bg-purple" align="left">
<div class="grid-content bg-purple" align="right">
<el-input v-model="booking.amount" placeholder="Amount" />
</div>
</el-col>
@@ -29,7 +28,7 @@
<div class="grid-content bg-purple" align="right" />
</el-col>
<el-col>
<div class="grid-content bg-purple" align="left" />
<div class="grid-content bg-purple" align="right" />
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div>
@@ -44,15 +43,14 @@
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col>
<el-tooltip class="item" effect="dark" content="Payment to China Supplier" placement="left">
<el-tooltip class="item" effect="dark" content="Payment to China Supplier" placement="right">
<div class="grid-content bg-purple" align="right">
<i type="button" class="el-icon-question" circle/>
</div>
</el-tooltip>
</el-col>
<!-- <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div></el-col> -->
<el-col>
<div class="grid-content bg-purple" align="left">X1 :</div>
<div class="grid-content bg-purple" align="right">X1 :</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">{{ rate.x1_cash }}</div>
@@ -92,14 +90,14 @@
<br>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col>
<el-tooltip class="item" effect="dark" content="Payment to China Supplier Only" placement="left">
<el-tooltip class="item" effect="dark" content="Payment to China Supplier Only" placement="right">
<div class="grid-content bg-purple" align="right">
<i type="button" class="el-icon-question" circle/>
</div>
</el-tooltip>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="left">X2 :</div>
<div class="grid-content bg-purple" align="right">X2 :</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">{{ rate.x2_cash }}</div>
@@ -166,69 +164,51 @@
<!-- Booking_confirmation_popup -->
<el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" center>
<!-- Table_booking_confirmation -->
<!-- <el-table :data="bookingConfirmTable" align="center">
<el-table-column prop="data1" align="right" width="200" />
<el-table-column prop="data2" align="left" width="200" />
</el-table> -->
<!-- Table_booking_confirmation-end -->
<table class="table-responsive el-table" style="display:table; width:80%; margin: 0 auto;">
<table class="table table-striped">
<tbody>
<tr>
<td class="el-table_2_column_9 is-right ">Date : </td>
<td class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.date }}</td>
<td>Date : </td>
<td> {{ bookingConfirmTable.date }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">Customer Marking : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.marking }}</td>
<td>Customer Marking : </td>
<td> {{ bookingConfirmTable.marking }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">Payment Method : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.payment_method }}</td>
<td>Payment Method : </td>
<td> {{ bookingConfirmTable.payment_method }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">CNY/RMB : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.amount }}</td>
<td>CNY/RMB : </td>
<td> {{ bookingConfirmTable.amount }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">+ Service Charge : </td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RMB {{ bookingConfirmTable.service_charge }}</td>
<td>+ Service Charge : </td>
<td> RMB {{ bookingConfirmTable.service_charge }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right "> RATE :</td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.rate }}</td>
<td> RATE :</td>
<td> {{ bookingConfirmTable.rate }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right "/>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RM {{ bookingConfirmTable.bankin_amount }}</td>
<td>China Beneficiary Acc :</td>
<td> {{ bookingConfirmTable.account_name }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right "/>
<td width="200" class="el-table_2_column_9 is-left "/>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">China Beneficiary Acc :</td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.account_name }}</td>
</tr>
<tr>
<td width="200" class="el-table_2_column_9 is-right ">Bank in Amount :</td>
<td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
<td>Bank in Amount :</td>
<td>
<b> RM {{ bookingConfirmTable.bankin_amount }}</b>
</td>
</tr>
</tbody>
</table>
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
<el-button :loading="loading" type="primary" @click="createBooking">Confirm</el-button>
</span>
</el-dialog>
<!-- Booking_confirmation_popup -->
<br>
<br>
<hr>
@@ -285,6 +265,7 @@
</el-button>
</div>
<!-- Booking Table-end -->
</div>
</el-main>
</template>
<style>