From ae0cbb9952f433d78f29baa8c68a70775aa12780 Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Thu, 14 Jun 2018 18:22:45 +0800
Subject: [PATCH] completed order confirmation page

---
 .../assets/js/pages/booking/confirmation.vue  | 133 +++++++++++-------
 1 file changed, 83 insertions(+), 50 deletions(-)

diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index 48449a99..ffb8ce00 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -3,63 +3,54 @@
     <progress-track v-model="status"></progress-track>
 
     <div align="center">
-      <h4 style="margin-top:5%;">Waiting Admin to Confirm</h4>
+      <h4 style="margin-top:5%;">Waiting Bankin Slip To Be Verify</h4>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
     </div>
-  
+    <br>
     <el-row justify="center" align="center">
-      <el-table :data="bookingDetails" style="width: 50%; margin: 0 auto; margin-top: 2%; margin-bottom:2%" :show-header="false" align="center">
-        <el-table-column prop="label" align="right" />
-        <el-table-column class-name="booking-details" prop="data" align="left"/>
-      </el-table>
+      <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" align="center" :show-header="false">
+              <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" align="center" :show-header="false">
+              <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>
-
-    <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
-
-
-    <div align="center">
-      Time Left :
-      <vue-countdown ref="countdown" :seconds="3600" :auto-start="false" label="Time Left :" @time-expire="handleTimeExpire" />
-
-      <!-- <button v-on:click="startTimer">Start timer</button> -->
-    </div>
     <br>
 
-
-
-    <!-- upload image -->
-    <el-upload :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-input placeholder="Enter Amount" style="width: 20%" />
-      <br>
-      <br>
-    </div>
-    <!-- </el-form-item>
-    </el-form> -->
-
-    <div align="center">
-      <el-button type="submit" @click="submitUserSlip">Submit</el-button>
-      <router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
-        Upload Later
-      </router-link>
-    </div>
-
+      <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-row>
   </el-main>
 </template>
 <style>
-.booking-details{
-  font-weight: bold;
-}
+  .booking-details {
+    font-weight: bold;
+  }
 </style>
 <script>
   import VueCountdown from '@dmaksimovic/vue-countdown'
@@ -72,10 +63,52 @@
     data() {
       return {
         status: 3,
+        bookingConfirmTable: [{
+          data1: 'Order Number :',
+          data2: '001'
+        }, {
+          data1: 'Date :',
+          data2: '25/5/2018'
+        }, {
+          data1: 'Customer Marking :',
+          data2: 'CIEF/150ECE'
+        }, {
+          data1: '',
+          data2: ''
+        }, {
+          data1: 'Payment Method :',
+          data2: 'Cash/Bank Transfer'
+        }, {
+          data1: '',
+          data2: ''
+        }],
+        bookingConfirmTable2:[{
+          data1: 'CNY/RMB :',
+          data2: 'CNY 120,500.00'
+        }, {
+          data1: '+ Service Charge :',
+          data2: 'CNY 20.00'
+        }, {
+          data1: '/ RATE :',
+          data2: '1.63'
+        }, {
+          data1: '',
+          data2: 'MYR 73,848.04'
+        }, {
+          data1: '+ GST 6% :',
+          data2: 'MYR 4,430.88'
+        }, {
+          data1: '',
+          data2: 'MYR 78,278.92'
+        }, {
+          data1: '',
+          data2: ''
+        }
+        ]
       }
     },
     methods: {
-     
+
 
     }
   }