mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-22 13:54:17 +00:00
added transfer amount and exchange amount to upload user bank slip
added complete steps for user added empty get booking status
This commit is contained in:
Jack Goh
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<el-row>
|
||||
<el-steps :active="1" aligncenter="true" process-status="wait" finish-status="success">
|
||||
<el-steps :active="1" alignCenter="true" process-status="wait" finish-status="success">
|
||||
<el-step title="Booking"></el-step>
|
||||
<el-step title="Wating for upload Bank in Slip"></el-step>
|
||||
<el-step title="Wating Payment"></el-step>
|
||||
<el-step title="Order Confirmation"></el-step>
|
||||
<el-step title="Processing Transfer"></el-step>
|
||||
<el-step title="Transfer Complete"></el-step>
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
.el-row {
|
||||
/* .el-row {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@@ -25,7 +25,6 @@
|
||||
transform: translateY(-70px);
|
||||
}
|
||||
.el-step__title.is-wait {
|
||||
text-align: left;
|
||||
font-size: 10pt;
|
||||
}
|
||||
.el-step__title {
|
||||
@@ -34,75 +33,5 @@
|
||||
|
||||
.el-step .is-success .el-step__line {
|
||||
background-color: #67c23a;
|
||||
}
|
||||
|
||||
.el-table td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.el-table__body tr.current-row>td {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.el-table--enable-row-hover .el-table__body tr:hover>td {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper table {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.textcenter {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.textleft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.textright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.order-wrapper {
|
||||
border: solid 3px #333333;
|
||||
border-radius: 20px;
|
||||
padding: 20px 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.order-wrapper::before {
|
||||
content: "";
|
||||
background-color: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-top: solid 3px #333333;
|
||||
border-right: solid 3px #333333;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
top: -24px;
|
||||
left: 250px;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-right: solid 3px #333333;
|
||||
}
|
||||
|
||||
.order-table .el-table__body-wrapper table tbody tr:nth-child(3) td:nth-child(5) {
|
||||
border-bottom: solid 1px black;
|
||||
}
|
||||
|
||||
.order-table .el-table__body-wrapper table tbody tr:nth-child(4) td:nth-child(5) {
|
||||
border-bottom: solid 1px black;
|
||||
}
|
||||
|
||||
.order-table .el-table__body-wrapper table tbody tr:nth-child(5) td:nth-child(5) {
|
||||
border-bottom: solid 1px black;
|
||||
}
|
||||
|
||||
.order-table .el-table__body-wrapper table tbody tr:nth-child(6) td:nth-child(5) {
|
||||
border-bottom: solid 2px black;
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
@@ -1,35 +1,48 @@
|
||||
<template>
|
||||
<el-main>
|
||||
<progress-track></progress-track>
|
||||
<!-- action="https://jsonplaceholder.typicode.com/posts/" -->
|
||||
|
||||
<div align="center">
|
||||
<h3>Your order has been book</h3>
|
||||
<h3>Please upload the bank slip</h3>
|
||||
<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"/>
|
||||
<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>
|
||||
</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 :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>
|
||||
</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%"/><br><br>
|
||||
Bankin Amount (RM) :
|
||||
<el-input placeholder="Enter Amount" style="width: 20%" />
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
<!-- </el-form-item>
|
||||
</el-form> -->
|
||||
@@ -43,51 +56,67 @@
|
||||
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
start: false,
|
||||
dialogImageUrl: '',
|
||||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
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
|
||||
},
|
||||
|
||||
}
|
||||
<style>
|
||||
.booking-details{
|
||||
font-weight: bold;
|
||||
}
|
||||
</script>
|
||||
</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 {
|
||||
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>
|
||||
@@ -145,7 +145,7 @@
|
||||
</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="No."
|
||||
label="Status"
|
||||
width="106">
|
||||
<template slot-scope="scope">
|
||||
<el-popover trigger="hover" placement="top">
|
||||
@@ -159,7 +159,7 @@
|
||||
<!-- <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="200" filter-placement="bottom-end" >
|
||||
width="180" filter-placement="bottom-end" >
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@@ -207,7 +207,8 @@ export default {
|
||||
dialogFormVisible: false,
|
||||
dialogFormVisible1: false,
|
||||
formLabelWidth: '0px',
|
||||
bookingTable: [{
|
||||
bookingTable: [
|
||||
{
|
||||
date: '12/1/2018',
|
||||
booking_no: '001',
|
||||
rate: '1.23',
|
||||
@@ -216,7 +217,58 @@ export default {
|
||||
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'
|
||||
@@ -331,6 +383,23 @@ export default {
|
||||
// console.log(error)
|
||||
// })
|
||||
},
|
||||
BookingStatus(id){
|
||||
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) => {
|
||||
|
||||
Reference in New Issue
Block a user