cief/exchange
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git synced 2026-08-22 05:44:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'fix/booking-frontend' into 'master'

Browse Source 
Fix/booking frontend

See merge request CIEFWorldwideSdnBhd/exchange!15
This commit is contained in:
Jack Goh
2018-06-14 14:02:11 +00:00
parent 9fa55b3394 2c0b1a4a92
commit c5a509e7b1
13 changed files with 1361 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/js/components/ProgressTrack.vue
+46
View File
@@ -0,0 +1,46 @@
<template>
<el-row>
<el-steps v-bind:value="value" :active="value" :alignCenter="true" process-status="wait" finish-status="success">
<el-step title="Booking"></el-step>
<el-step title="Payment"></el-step>
<el-step title="Order Confirmation"></el-step>
<el-step title="Processing Transfer"></el-step>
<el-step title="Transfer Complete"></el-step>
<el-step title="Order Complete"></el-step>
</el-steps>
</el-row>
</template>
<style type="text/css">
/* .el-row {
margin: 20px 0;
}
.el-steps {
padding-top: 70px;
}
.el-step .el-step__main {
transform: translateY(-70px);
}
.el-step__title.is-wait {
font-size: 10pt;
}
.el-step__title {
line-height: 1.4;
}
.el-step .is-success .el-step__line {
background-color: #67c23a;
} */
</style>
<script>
export default {
props: ['value'],
data: () => ({
status: 1
})
}
</script>
resources/assets/js/middleware/auth.js
+3 -5
View File
@@ -3,11 +3,9 @@ import store from '~/store'
export default async (to, from, next) => {
if (!store.getters['auth/check']) {
next({ name: 'login' })
}
else if (store.getters['auth/user'].role == "admin"){
next({ name : 'admin.home' })
}
else {
} else if (store.getters['auth/user'].role == 'admin') {
next({ name: 'admin.home' })
} else {
next()
}
}
resources/assets/js/pages/auth/login.vue
+15 -10
View File
@@ -80,32 +80,37 @@ export default {
methods: {
async login () {
const loading = this.$loading({
lock: true,
text: 'Logging in',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
// Submit the form.
const { data } = await this.form.post('/api/login')
// Add loading screen
const loading = this.$loading({
lock: true,
text: 'Logging in',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
// Save the token.
this.$store.dispatch('auth/saveToken', {
token: data.token,
remember: this.remember
remember: this.remember,
})
// Fetch the user.
await this.$store.dispatch('auth/fetchUser')
// Redirect home.
if(store.getters['auth/user'].role === 'admin'){
loading.close();
if (store.getters['auth/user'].role === 'admin') {
this.$router.push({ name: 'admin.home' })
loading.close()
}
loading.close();
this.$router.push({ name: 'home' })
loading.close()
}
}
}
resources/assets/js/pages/auth/register.vue
+2 -3
View File
@@ -96,10 +96,9 @@ export default {
await this.$store.dispatch('auth/updateUser', { user: data })
// Redirect home.
if(store.getters['auth/user'].role === 'admin'){
if (store.getters['auth/user'].role === 'admin') {
this.$router.push({ name: 'admin.home' })
}
else{
} else {
this.$router.push({ name: 'home' })
}
}
resources/assets/js/pages/booking/completed.vue
+166
View File
@@ -0,0 +1,166 @@
<template>
<el-main>
<progress-track v-model="status"></progress-track>
<div align="center">
<h4 style="margin-top:5%;">Order Completed</h4>
<br>
</div>
<!-- upload card -->
<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 type="flex" :gutter="12">
<el-col :span="12">
<a target=" _blank" 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="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 type="flex" :gutter="12">
<el-col :span="12">
<a target=" _blank" 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="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 type="flex" :gutter="12">
<el-col :span="12">
<a target=" _blank" 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>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 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: 6,
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>
resources/assets/js/pages/booking/confirmation.vue
+115
View File
@@ -0,0 +1,115 @@
<template>
<el-main>
<progress-track v-model="status"></progress-track>
<div align="center">
<h4 style="margin-top:5%;">Bankin Slip Verification In Progress</h4>
<br>
<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" 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: 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: {
}
}
</script>
resources/assets/js/pages/booking/poComplete.vue
+151
View File
@@ -0,0 +1,151 @@
<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>Purchase Order</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 target=" _blank" 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>China Bank Slip</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 target=" _blank" 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>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 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>
resources/assets/js/pages/booking/transfer.vue
+117
View File
@@ -0,0 +1,117 @@
<template>
<el-main>
<progress-track v-model="status"></progress-track>
<div align="center">
<h4 style="margin-top:5%;">Transfer In Progress</h4>
<br>
<h5> ETA : 3 days 14 Hours </h5>
<br>
<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" 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: 4,
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>
resources/assets/js/pages/booking/uploadPo.vue
+171
View File
@@ -0,0 +1,171 @@
<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 500kb</div>
</el-upload>
<br>
<div class="bottom clearfix" style="text-align:right;">
<el-button @click="uploadPo" type="primary">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 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>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 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: {
uploadPo(){
this.$message({
showClose: true,
message: 'Your PO has been uploaded. We are processing the Invoice.',
type: 'success',
duration: 5000,
});
this.$router.push({
name: 'home'
})
}
}
}
</script>
resources/assets/js/pages/booking/uploadUserBankSlip.vue
+123
View File
@@ -0,0 +1,123 @@
<template>
<el-main>
<progress-track v-model="status"></progress-track>
<div align="center">
<h4 style="margin-top:5%;">Waiting For Payment</h4>
</div>
<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-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-main>
</template>
<style>
.booking-details{
font-weight: bold;
}
</style>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown'
import ProgressTrack from '~/components/ProgressTrack'
export default {
name: 'MyComponent',
components: {
'vue-countdown': VueCountdown,
'progress-track': ProgressTrack
},
data() {
return {
status: 2,
start: false,
dialogImageUrl: '',
dialogVisible: false,
bookingDetails: [
{
label: 'Exchange',
data: 'RMB 10,000',
},
{
label: 'Payment',
data: 'MYR 5,000',
},
]
}
},
mounted() {
this.$refs.countdown.start()
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList)
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
submitUserSlip() {
this.$message({
showClose: true,
message: 'Your bankinslip has been submitted, please wait admin to approve.',
type: 'success',
duration: 5000,
});
this.$router.push({
name: 'home'
})
},
handleTimeExpire() {
alert('Time is up!')
},
startTimer() {
this.start = true
},
}
}
</script>
resources/assets/js/pages/home.vue
+434 -199
View File
@@ -2,285 +2,520 @@
<el-main>
<!-- Input-Amount -->
<!-- Input-Amount -->
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col :span="8"><div class="grid-content bg-purple" align="left"><el-input placeholder="Amount" v-model="Booking.amount"></el-input></div></el-col>
<el-col :span="10"><div class="grid-content bg-purple" align="center"> <el-select v-model="value" placeholder="MYR">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
<el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2"></el-option>
</el-select></div></el-col>
<el-col :span="20">
<div class="grid-content bg-purple" align="center">
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>
</el-row>
<!-- Input-Amount-end -->
<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">
<el-input v-model="booking.amount" placeholder="Amount" />
</div>
</el-col>
</el-row>
<!-- Input-Amount-end -->
<hr>
<!-- Rate-Display -->
<br>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col><div class="grid-content bg-purple" align="right"></div></el-col>
<el-col><div class="grid-content bg-purple" align="left"></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div></el-col>
<el-col><div class="grid-content bg-purple" align="center">Cheque</div></el-col>
<el-col><div class="grid-content bg-purple" align="center">BA</div></el-col>
</el-row>
<!-- Rate-Display -->
<br>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col>
<div class="grid-content bg-purple" align="right" />
</el-col>
<el-col>
<div class="grid-content bg-purple" align="left" />
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">Cheque</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">BA</div>
</el-col>
</el-row>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle></i></div></el-col>
<el-col><div class="grid-content bg-purple" align="left">X1 :</div></el-col>
<el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
<el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
<el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
</el-row>
<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">
<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>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">1.56</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">1.64</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">1.62</div>
</el-col>
</el-row>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col><div class="grid-content bg-purple"></div></el-col>
<el-col><div class="grid-content bg-purple"></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_cash')">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_cheque')">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_ba')">Book</el-button></div></el-col>
</el-row>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col>
<div class="grid-content bg-purple" />
</el-col>
<el-col>
<div class="grid-content bg-purple" />
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">
<el-button type="text" @click="acceptTerm('x1_cash')">Book</el-button>
</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">
<el-button type="text" @click="acceptTerm('x1_cheque')">Book</el-button>
</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">
<el-button type="text" @click="acceptTerm('x1_ba')">Book</el-button>
</div>
</el-col>
</el-row>
<br>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle></i></div></el-col>
<el-col><div class="grid-content bg-purple" align="left">X2 :</div></el-col>
<el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
<el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
<el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
</el-row>
<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">
<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>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">1.56</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">1.64</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">1.62</div>
</el-col>
</el-row>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col><div class="grid-content bg-purple"></div></el-col>
<el-col><div class="grid-content bg-purple"></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="dialogFormVisible = true, acceptTerm('x2_cash')">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="dialogFormVisible = true, acceptTerm('x2_cheque')">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button></div></el-col>
</el-row>
<!-- Rate-Display-end -->
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col>
<div class="grid-content bg-purple" />
</el-col>
<el-col>
<div class="grid-content bg-purple" />
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">
<el-button type="text" @click="acceptTerm('x2_cash')">Book</el-button>
</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">
<el-button type="text" @click="acceptTerm('x2_cheque')">Book</el-button>
</div>
</el-col>
<el-col>
<div class="grid-content bg-purple" align="center">
<el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button>
</div>
</el-col>
</el-row>
<!-- Rate-Display-end -->
<!-- Form_popup -->
<el-dialog title="Booking" :visible.sync="dialogFormVisible" center fullscreen:true>
<el-form><div align="center">
<el-form-item>
<el-input type="text" placeholder="China Beneficiary Account" style="width: 80%" v-model="Booking.account_name"></el-input>
</el-form-item>
<el-form-item>
<el-input type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" v-model="Booking.bank_name"></el-input>
</el-form-item>
<el-form-item>
<el-input type="text" placeholder="Branch / 分行/支行" style="width: 80%" v-model="Booking.bank_branch"></el-input>
</el-form-item>
<el-form-item>
<el-input type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%" v-model="Booking.account_num"></el-input>
</el-form-item></div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">Cancel</el-button>
<el-button type="submit" @click="createBooking">Book Now</el-button>
</span>
</el-dialog>
<!-- Form_popup-end -->
<!-- Form_popup -->
<el-dialog :visible.sync="dialogFormVisible" title="Booking" :fullscreen="true" center>
<el-form>
<div align="center">
<el-form-item>
<el-input v-model="booking.account_name" type="text" placeholder="China Beneficiary Account" style="width: 80%" />
</el-form-item>
<el-form-item>
<el-input v-model="booking.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
</el-form-item>
<el-form-item>
<el-input v-model="booking.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
</el-form-item>
<el-form-item>
<el-input v-model="booking.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
/>
</el-form-item>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">Cancel</el-button>
<el-button type="submit" @click="getCalculationValue">Book Now</el-button>
<!--<el-button type="submit" @click="createBooking">Book Now</el-button>-->
</span>
</el-dialog>
<!-- Form_popup-end -->
<!-- Booking_confirmation_popup -->
<el-dialog title="Booking Confirmation" :visible.sync="dialogFormVisible1" center fullscreen:true>
<!-- Booking_confirmation_popup -->
<el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" :fullscreen="true" center>
<!-- Table_booking_confirmation -->
<el-table :data="tableData1" align="center">
<el-table-column prop="data1" align="right" width="200"></el-table-column>
<el-table-column prop="data2" align="left" width="200"></el-table-column>
</el-table>
<!-- Table_booking_confirmation-end -->
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
<el-button type="primary" @click="dialogFormVisible1 = false">Confirm</el-button>
</span>
</el-dialog>
<!-- Booking_confirmation_popup -->
<br><br>
<hr>
<!-- Booking Table -->
<el-row :gutter="20" >
<div>
<el-table>
<el-table-column label="Order No" sortable width="106">
</el-table-column>
<el-table-column label="Date" sortable width="92">
</el-table-column>
<!-- <el-table-column label="Term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler">
</el-table-column> -->
<el-table-column label="Rate" sortable width="74">
</el-table-column>
<el-table-column label="Amount" sortable justify="center" width="98">
</el-table-column>
<el-table-column label="Transfer Amount (RMB / USD)" :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" width="133">
</el-table-column>
<el-table-column label="ETA" sortable width="92">
</el-table-column>
<!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
</el-table-column> -->
<el-table-column label="Status" :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler">
</el-table-column>
<el-table-column label="Balance Amount (RMB/USD)" sortable width="100">
</el-table-column>
<el-table-column label="Time Left" sortable>
</el-table-column>
<el-table-column label="Tag" width="82" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]"
:filter-method="filterTag" filter-placement="bottom-end">
<template slot-scope="scope">
<el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
<!-- 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 -->
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
<el-button type="primary" @click="createBooking">Confirm</el-button>
</span>
</el-dialog>
<!-- Booking_confirmation_popup -->
<br>
<br>
<hr>
<!-- Booking Table -->
<el-row :gutter="20">
<div>
<el-table :data="bookingTable">
<el-table-column label="No." width="106">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
<el-button type="text" slot-scope="scope" @click="(event) => { BookingStatus(event, scope.row.booking_no) }"> {{scope.row.booking_no}}</el-button>
</el-table-column>
<el-table-column label="Date" prop="date" width="120" sortable/>
<!-- <el-table-column label="Term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler">
</el-table-column> -->
<el-table-column label="Rate" width="74" prop="rate" />
<el-table-column label="Amount" prop="amount" justify="center" width="110" />
<el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
prop="transfer_amount" width="150" />
<!-- <el-table-column label="ETA" sortable width="100"/> -->
<!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
</el-table-column> -->
<!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
<el-table-column label="Status" width="106">
<template slot-scope="scope">
<el-popover trigger="click" placement="top">
<p>{{ scope.row.status_desc }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.status }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
<el-table-column prop="timeout" label="Bankin Timeout" />
<el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
label="" width="180" filter-placement="bottom-end">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
<el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-row>
<!-- Booking Table-end -->
<!-- Booking Table-end -->
</el-main>
</template>
<style>
.el-tag {
cursor: pointer;
}
</style>
<script>
import Form from 'vform'
import LoginWithGithub from '~/components/LoginWithGithub'
import store from '~/store'
import axios from 'axios'
import Form from 'vform'
import LoginWithGithub from '~/components/LoginWithGithub'
import store from '~/store'
import axios from 'axios'
export default {
middleware: ['auth'],
data () {
data() {
return {
Booking: {amount:'', account_name:'', bank_name:'', bank_branch:'', account_num:''},
status: '',
booking: {
amount: '',
account_name: '',
bank_name: '',
bank_branch: '',
account_num: ''
},
term: '',
options1: [{
value: 'RMB',
label: 'RMB to MYR'
label: 'RMB'
}],
options2: [{
value2: 'MYR',
label2: 'MYR to RMB'
label2: 'MYR'
}],
value: '',
value2: '',
input: '',
value: 'RMB',
dialogFormVisible: false,
dialogFormVisible1: false,
formLabelWidth: '0px',
tableData1: [{
bookingTable: [{
date: '12/1/2018',
booking_no: '001',
rate: '1.23',
amount: 'RM 1000',
transfer_amount: 'RMB 10000',
status: '(1/6)',
status_desc: 'Waiting for payment',
timeout: '56:00:00'
},
{
date: '12/1/2018',
booking_no: '002',
rate: '1.23',
amount: 'RM 1000',
transfer_amount: 'RMB 10000',
status: '(2/6)',
status_desc: 'Waiting verification',
timeout: '56:00:00'
},
{
date: '12/1/2018',
booking_no: '003',
rate: '1.23',
amount: 'RM 1000',
transfer_amount: 'RMB 10000',
status: '(3/6)',
status_desc: 'Processing transfer',
timeout: '56:00:00'
},
{
date: '12/1/2018',
booking_no: '004',
rate: '1.23',
amount: 'RM 1000',
transfer_amount: 'RMB 10000',
status: '(4/6)',
status_desc: 'Transfer Complete, please upload your PO',
timeout: '56:00:00'
},
{
date: '12/1/2018',
booking_no: '005',
rate: '1.23',
amount: 'RM 1000',
transfer_amount: 'RMB 10000',
status: '(5/6)',
status_desc: 'Processing invoice',
timeout: '56:00:00'
},
{
date: '12/1/2018',
booking_no: '006',
rate: '1.23',
amount: 'RM 1000',
transfer_amount: 'RMB 10000',
status: '(6/6)',
status_desc: 'Order Completed',
timeout: '56:00:00'
}
],
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: ''
},{
}, {
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: ''
},{
}, {
data1: 'China Beneficiary Acc :',
data2: ''
},{
}, {
data1: '',
data2: 'PENDING'
},{
}, {
data1: '',
data2: ''
},{
}, {
data1: 'Bank In Amount :',
data2: 'MYR 78,278.92'
},{
}, {
data1: '',
data2: ''
}],
};
}]
}
},
methods: {
// TODO fetch booking data on load
formatter(row, column) {
return row.address;
return row.address
},
filterTag(value, row) {
return row.tag === value;
return row.tag === value
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
const property = column['property']
return row[property] === value
},
acceptTerm: function(newterm){
acceptTerm: function (newterm) {
if (this.booking.amount == '') {
this.$message({
message: 'Please input amount',
type: 'warning'
});
return;
}
this.dialogFormVisible = true
this.term = newterm
},
createBooking : function(){
getCalculationValue() {
this.dialogFormVisible = false
this.dialogFormVisible1 = true
let newBooking = {
amount: this.Booking.amount,
account_name: this.Booking.account_name,
bank_name: this.Booking.bank_name,
bank_branch: this.Booking.bank_branch,
account_num: this.Booking.account_num,
term: this.term
},
createBooking: function () {
this.$router.push({
name: 'booking.user.upload'
})
// this.dialogFormVisible1 = true
// let newBooking = {
// amount: this.booking.amount,
// account_name: this.booking.account_name,
// bank_name: this.booking.bank_name,
// bank_branch: this.booking.bank_branch,
// account_num: this.booking.account_num,
// term: this.term
// }
// console.log(newBooking)
// axios.post('api/booking', newBooking)
// .then((response) => {
// console.log(response)
// // this code to insert the input data into the database (success)
// // this.Booking.amount = amount;
// // this.Booking.account_name = account_name;
// // this.Booking.bank_name = bank_name;
// // this.Booking.branch = bank_branch;
// // this.Booking.account_num = account_num;
// // this.term = term;
// })
// .catch((error) => {
// console.log(error)
// })
},
handleDelete(index, row) {
console.log(index, row);
},
BookingStatus(index, row) {
// TODO : Get booking status from server
this.status = 6
switch (this.status) {
case 1:
this.$router.push({
name: 'booking.user.upload'
})
case 2:
this.$router.push({
name: 'booking.user.upload'
})
break;
case 3:
this.$router.push({
name: 'booking.confirmation'
})
break;
case 4:
this.$router.push({
name: 'booking.transfer'
})
break;
case 5:
this.$router.push({
name: 'booking.user.uploadpo'
})
break;
case 6:
this.$router.push({
name: 'booking.complete'
})
break;
default:
break
}
console.log(newBooking);
axios.post('api/booking', newBooking)
// axios.post('api/booking/'+ id + '/status', newBooking)
// .then((response) => {
// console.log(response)
// // this code to insert the input data into the database (success)
// // this.Booking.amount = amount;
// // this.Booking.account_name = account_name;
// // this.Booking.bank_name = bank_name;
// // this.Booking.branch = bank_branch;
// // this.Booking.account_num = account_num;
// // this.term = term;
// })
// .catch((error) => {
// console.log(error)
// })
},
BookingList() {
axios.get('api/booking')
.then((response) => {
console.log(response);
//this code to insert the input data into the database (success)
// this.Booking.amount = amount;
// this.Booking.account_name = account_name;
// this.Booking.bank_name = bank_name;
// this.Booking.branch = bank_branch;
// this.Booking.account_num = account_num;
// this.term = term;
console.log(response)
this.list = response.data
})
.catch((error) => {
console.log(error);
});
},
BookingList(){
axios.get('api/booking')
.then((response) => {
console.log(response);
this.list = response.data;
})
}
},
}
}
}
}
</script>
resources/assets/js/pages/upload.vue
-84
View File
@@ -1,84 +0,0 @@
<template>
<el-main>
<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
<div align="center">
<h3>Your order has been book</h3>
<h3>Please upload the bank slip</h3>
</div>
<div align="center">
Time Left :
<vue-countdown label="Time Left :" v-on:time-expire="handleTimeExpire" :seconds="3600" v-bind:auto-start="false" ref="countdown"></vue-countdown>
<!-- <button v-on:click="startTimer">Start timer</button> -->
</div><br>
<!-- upload image -->
<el-upload
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove" align="center">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog><br>
<!-- upload image end -->
<!-- <el-form label-width="300px">
<el-form-item label="Amount (RM) :"> -->
<div align="center">
Amount (RM) : <el-input placeholder="Enter Amount" style="width: 20%"></el-input><br><br>
</div>
<!-- </el-form-item>
</el-form> -->
<div align="center">
<el-button type="submit">Submit</el-button>
<el-button type="text">Upload Later</el-button>
</div>
</el-main>
</template>
<script>
import VueCountdown from '@dmaksimovic/vue-countdown';
export default {
name: 'my-component',
data() {
return {
start: false,
dialogImageUrl: '',
dialogVisible: false
};
},
mounted() {
this.$refs.countdown.start();
},
components: {
'vue-countdown': VueCountdown
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleTimeExpire () {
alert('Time is up!');
},
startTimer () {
this.start = true;
}
}
}
</script>
resources/assets/js/router/routes.js
+18 -4
View File
@@ -6,23 +6,29 @@ const PasswordReset = () => import('~/pages/auth/password/reset').then(m => m.de
const NotFound = () => import('~/pages/errors/404').then(m => m.default || m)
const Home = () => import('~/pages/home').then(m => m.default || m)
const Upload = () => import('~/pages/upload').then(m => m.default || m)
const Settings = () => import('~/pages/settings/index').then(m => m.default || m)
const SettingsProfile = () => import('~/pages/settings/profile').then(m => m.default || m)
const SettingsPassword = () => import('~/pages/settings/password').then(m => m.default || m)
// Booking
const Upload = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
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)
const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
export default [
{ path: '/', name: 'welcome', component: Welcome },
{ path: '/login', name: 'login', component: Login },
{ path: '/register', name: 'register', component: Register },
{ path: '/password/reset', name: 'password.request', component: PasswordEmail },
{ path: '/password/reset/:token', name: 'password.reset', component: PasswordReset },
{ path: '/home', name: 'home', component: Home },
{ path: '/upload', name: 'upload', component: Upload },
{ path: '/settings',
component: Settings,
children: [
@@ -30,8 +36,16 @@ export default [
{ path: 'profile', name: 'settings.profile', component: SettingsProfile },
{ path: 'password', name: 'settings.password', component: SettingsPassword }
] },
// Booking
{ 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/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 },
{ path: '/admin', name: 'admin.home', component: AdminHome },
{ path: '*', component: NotFound }
]