mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-27 08:14:28 +00:00
added po complete page
This commit is contained in:
Jack Goh
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"></progress-track>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Transfer Completed</h4>
|
||||
<h5> Please upload your PO </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 class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove"
|
||||
:file-list="fileList" multiple>
|
||||
<i class="el-icon-upload"></i>
|
||||
<div class="el-upload__text">Drop file here or
|
||||
<em>click to upload</em>
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 1mb</div>
|
||||
</el-upload>
|
||||
<br>
|
||||
<!-- upload image end -->
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Proof : China BankSlip</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row type="flex" :gutter="12">
|
||||
<el-col :span="12">
|
||||
<a href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</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>
|
||||
<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>
|
||||
<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-row>
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
.booking-details {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: 5,
|
||||
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: {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track v-model="status"></progress-track>
|
||||
|
||||
<div align="center">
|
||||
<h4 style="margin-top:5%;">Processing Invoice</h4>
|
||||
<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>PO</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
|
||||
<el-row type="flex" :gutter="12">
|
||||
<el-col :span="12">
|
||||
<a href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</a>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>Proof : China BankSlip</span>
|
||||
<!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
|
||||
</div>
|
||||
<el-row type="flex" :gutter="12">
|
||||
<el-col :span="12">
|
||||
<a href="https://placeholder.com">
|
||||
<img width="100%" height="100%" src="http://via.placeholder.com/700x800">
|
||||
</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>
|
||||
<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>
|
||||
<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-row>
|
||||
</el-main>
|
||||
</template>
|
||||
<style>
|
||||
.booking-details {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import VueCountdown from '@dmaksimovic/vue-countdown'
|
||||
import ProgressTrack from '~/components/ProgressTrack'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'progress-track': ProgressTrack
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: 5,
|
||||
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: {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -27,7 +27,12 @@
|
||||
</div>
|
||||
<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
|
||||
</el-upload>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="bottom clearfix" style="text-align:right;">
|
||||
<el-button type="primary">Submit</el-button>
|
||||
</div>
|
||||
<!-- upload image end -->
|
||||
|
||||
</el-card>
|
||||
|
||||
@@ -15,6 +15,7 @@ const Upload = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.de
|
||||
const Confirmation = () => import('~/pages/booking/confirmation').then(m => m.default || m)
|
||||
const Transfer = () => import('~/pages/booking/transfer').then(m => m.default || m)
|
||||
const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default || m)
|
||||
const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
|
||||
const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
|
||||
|
||||
|
||||
@@ -40,7 +41,8 @@ export default [
|
||||
{ path: '/booking/upload-user-bankslip', name: 'booking.user.upload', component: Upload },
|
||||
{ path: '/booking/confirmation', name: 'booking.confirmation', component: Confirmation },
|
||||
{ path: '/booking/transfer', name: 'booking.transfer', component: Transfer },
|
||||
{ path: '/booking/uploadPo', name: 'booking.user.uploadpo', component: UploadPo },
|
||||
{ path: '/booking/upload-po', name: 'booking.user.uploadpo', component: UploadPo },
|
||||
{ path: '/booking/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
|
||||
{ path: '/booking/complete', name: 'booking.complete', component: Completed },
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user