mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-27 08:14:28 +00:00
Jack Goh
333 lines
12 KiB
Vue
333 lines
12 KiB
Vue
<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-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
|
||
:on-remove="handleRemove"
|
||
class="upload-demo"
|
||
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>
|
||
|
||
<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 href="https://placeholder.com">
|
||
<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> -->
|
||
</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-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>
|
||
<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 {
|
||
booking_id: this.$route.params.id,
|
||
status: 5,
|
||
loading_btn: false,
|
||
booking_details:{
|
||
id: null,
|
||
amount: null,
|
||
bia: null,
|
||
user_bankslip_path: null,
|
||
china_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: {
|
||
uploadPo () {
|
||
this.loading_btn = true
|
||
axios
|
||
.post('/api/booking/' + this.$route.params.id + '/confirm-po')
|
||
.then((response) => {
|
||
console.log(response)
|
||
this.$message({
|
||
showClose: true,
|
||
message: 'Your PO has been uploaded. We are processing the Invoice.',
|
||
type: 'success',
|
||
duration: 5000
|
||
})
|
||
this.$router.push({
|
||
name: 'home'
|
||
})
|
||
this.loading_btn = false
|
||
}).catch((error) => {
|
||
this.$message({
|
||
showClose: true,
|
||
message: 'Please upload purchase order',
|
||
type: 'error',
|
||
duration: 30000
|
||
})
|
||
this.loading_btn = false
|
||
})
|
||
},
|
||
handleRemove (file, fileList) {
|
||
console.log(file, fileList)
|
||
},
|
||
handlePreview (file) {
|
||
console.log(file)
|
||
},
|
||
handleExceed (files, fileList) {
|
||
this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`)
|
||
},
|
||
beforeRemove (file, fileList) {
|
||
return this.$confirm(`确定移除 ${file.name}？`)
|
||
}
|
||
}
|
||
}
|
||
</script>
|