mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-29 09:14:12 +00:00
Jack Goh
4e0f1dbe0a
added exception if userbankslip not save show error added tax rate to supplier booking added order number and payment for to booking seeder
303 lines
7.1 KiB
Vue
303 lines
7.1 KiB
Vue
<template>
|
||
<el-main>
|
||
<progress-track v-model="status"/>
|
||
<div align="center" v-if="booking.user_bankslip_path">
|
||
<h4 style="margin-top:5%" >
|
||
Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
|
||
Reason : {{ booking.reject_reason }}
|
||
</h4>
|
||
<br>
|
||
<br>
|
||
</div>
|
||
<div v-else align="center">
|
||
<h1>Waiting For Payment</h1>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<table class="table table-striped">
|
||
<tbody>
|
||
<tr>
|
||
<td>Amount : </td>
|
||
<td><b>RMB {{ booking.amount }}</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Bankin Amount : </td>
|
||
<td><b> MYR {{ booking.bankin_amount }}</b></td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2">
|
||
<b>{{ bankDetail.company_name }}</b><br>
|
||
{{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="row timer">
|
||
<div class="col">
|
||
<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
|
||
<template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
|
||
</vue-countdown>
|
||
</div>
|
||
</div>
|
||
<!-- upload image -->
|
||
<div class="row upload">
|
||
<div class="col">
|
||
<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'"
|
||
:on-preview="handlePictureCardPreview"
|
||
:on-remove="handleRemove"
|
||
:on-error="uploadError"
|
||
accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
|
||
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>
|
||
</div>
|
||
</div>
|
||
<!-- upload image end -->
|
||
<div class="row bankinAmount">
|
||
<div class="col">
|
||
Bankin Amount (RM) :<br>
|
||
<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
|
||
<el-form-item prop="transfer_amount">
|
||
<el-input class="transferAmountInput" v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount"/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
|
||
<router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
|
||
Upload Later
|
||
</router-link>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</el-main>
|
||
</template>
|
||
<style>
|
||
h1 {
|
||
margin-top:5%;
|
||
font-size:3vw;
|
||
text-align:center;
|
||
margin-bottom:3%;
|
||
}
|
||
.timer, .upload, .bankinAmount {
|
||
text-align: center;
|
||
}
|
||
|
||
.transferAmountInput {
|
||
width: 20%;
|
||
}
|
||
.row {
|
||
margin-bottom: 3%;
|
||
}
|
||
td:last-child {
|
||
text-align:center;
|
||
}
|
||
@media screen and (max-width: 767px) {
|
||
.transferAmountInput {
|
||
width: 60%;
|
||
}
|
||
.table {
|
||
font-size: 3.5vmin;
|
||
}
|
||
h1 {
|
||
font-size: 1em;
|
||
}
|
||
}
|
||
</style>
|
||
<script>
|
||
import VueCountdown from '@xkeshi/vue-countdown'
|
||
import ProgressTrack from '~/components/ProgressTrack'
|
||
import axios from 'axios'
|
||
|
||
export default {
|
||
middleware: ['auth'],
|
||
name: 'MyComponent',
|
||
components: {
|
||
'vue-countdown': VueCountdown,
|
||
'progress-track': ProgressTrack
|
||
},
|
||
data () {
|
||
return {
|
||
status: 2,
|
||
start: false,
|
||
loading: false,
|
||
dialogImageUrl: '',
|
||
dialogVisible: false,
|
||
booking_id: this.$route.params.id,
|
||
user_slip_form: {
|
||
transfer_amount: ''
|
||
},
|
||
booking: {
|
||
amount: '',
|
||
bankin_amount: '',
|
||
timeout: 1,
|
||
term : '123',
|
||
user_bankslip_path: null,
|
||
reject_reason: null,
|
||
},
|
||
rules: {
|
||
transfer_amount: [{
|
||
required: true,
|
||
message: 'Please input amount',
|
||
trigger: 'change'
|
||
}]
|
||
},
|
||
active_bank_setting: {
|
||
x1_bank_id: null,
|
||
x2_bank_id: null,
|
||
beneficiary_id: null
|
||
},
|
||
bankDetail: {}
|
||
}
|
||
},
|
||
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.amount = response.data.amount;
|
||
this.booking.bankin_amount = response.data.bia;
|
||
this.booking.timeout = response.data.timeout * 1000;
|
||
this.booking.term = response.data.term;
|
||
|
||
if (response.data.user_bankslip_path)
|
||
{
|
||
this.booking.user_bankslip_path = response.data.user_bankslip_path
|
||
this.booking.reject_reason = response.data.reject_reason
|
||
}
|
||
console.log(this.booking);
|
||
this.start = true;
|
||
|
||
if (this.booking.timeout < 0){
|
||
this.$message({
|
||
showClose: true,
|
||
message: 'Booking timeout, please make another booking.',
|
||
type: 'error',
|
||
duration: 30000
|
||
})
|
||
this.$router.push({
|
||
name: 'home'
|
||
})
|
||
}
|
||
}).catch((error) => {
|
||
this.$router.push({
|
||
name: 'notfound'
|
||
})
|
||
console.log(error)
|
||
})
|
||
axios.get('/api/active-bank')
|
||
.then((response) => {
|
||
this.active_bank_setting = response.data;
|
||
var url = '';
|
||
if(this.booking.term === 'x1_cash' || this.booking.term === 'x1_cheque' ||this.booking.term === 'x1_ba'){
|
||
url = '/api/malaysia-bank/' + this.active_bank_setting.x1_bank_id;
|
||
}
|
||
else if(this.booking.term === 'x2_cash' || this.booking.term === 'x2_cheque' ||this.booking.term === 'x2_ba'){
|
||
url = '/api/malaysia-bank/' + this.active_bank_setting.x2_bank_id;
|
||
}
|
||
|
||
axios.get(url)
|
||
.then((response) => {
|
||
this.bankDetail = response.data;
|
||
loading.close()
|
||
})
|
||
.catch((error) => {
|
||
loading.close()
|
||
console.log(error);
|
||
this.$message({
|
||
showClose: true,
|
||
message: 'Fetch data fail',
|
||
type: 'error',
|
||
duration: 10000
|
||
});
|
||
});
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
this.$message({
|
||
showClose: true,
|
||
message: 'Fetch bank details fail',
|
||
type: 'error',
|
||
duration: 10000
|
||
});
|
||
});
|
||
},
|
||
methods: {
|
||
handleCoutdownend () {
|
||
this.$message({
|
||
showClose: true,
|
||
message: 'Booking timeout, please make another booking.',
|
||
type: 'error',
|
||
duration: 30000
|
||
})
|
||
this.$router.push({
|
||
name: 'home'
|
||
})
|
||
},
|
||
handleRemove (file, fileList) {
|
||
// console.log(file, fileList)
|
||
},
|
||
uploadError(file,fileList){
|
||
this.$message.warning(`Incorrect file format or file size too big.`)
|
||
},
|
||
handlePictureCardPreview (file) {
|
||
this.dialogImageUrl = file.url
|
||
this.dialogVisible = true
|
||
},
|
||
submitUserSlip (formName) {
|
||
this.loading = true
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
let newConfirmation = {
|
||
amount: this.booking.amount,
|
||
term: this.term
|
||
}
|
||
} else {
|
||
this.loading = false
|
||
}
|
||
})
|
||
let newUserSlip = {
|
||
transfer_amount: this.user_slip_form.transfer_amount
|
||
}
|
||
axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount', newUserSlip)
|
||
.then((response) => {
|
||
this.$message({
|
||
showClose: true,
|
||
message: 'Your bankinslip has been submitted, please wait admin to approve.',
|
||
type: 'success',
|
||
duration: 5000
|
||
})
|
||
|
||
this.$router.push({
|
||
name: 'home'
|
||
})
|
||
})
|
||
.catch((error) => {
|
||
this.loading = false
|
||
this.$message({
|
||
showClose: true,
|
||
message: 'Please upload your bankin slip first.',
|
||
type: 'warning',
|
||
duration: 10000
|
||
})
|
||
console.log(error)
|
||
})
|
||
},
|
||
handleTimeExpire () {
|
||
alert('Booking expired')
|
||
},
|
||
startTimer () {
|
||
this.start = true;
|
||
}
|
||
}
|
||
}
|
||
</script>
|