mirror of
https://gitlab.com/uldvstar/exchange-2.0.git
synced 2026-08-19 04:24:16 +00:00
update wallet-ui
This commit is contained in:
edmondlang
@@ -1,196 +0,0 @@
|
||||
<template>
|
||||
<div class="row h-100 parentContainer">
|
||||
<div class="col">
|
||||
<div class="col-auto p-l-0 p-r-10">
|
||||
<div class="btn btn-xs btn-primary p-t-0 p-b-0 text-primary-lighter requestModal" style="background-color: rgba(255, 255, 255, 0.2);" data-type="topUpModal">
|
||||
<i class="fa fa-plus fs-14 m-t-5"></i>
|
||||
</div>
|
||||
</div>
|
||||
<modal-component styleType="fill-in" type="topUpModal">
|
||||
<div class="row zig-zag-top">
|
||||
<div class="col bg-white padding-25">
|
||||
|
||||
|
||||
<div class="row m-b-20">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="btn btn-xs btn-complete no-border btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="paymentMethod.status = !paymentMethod.status">
|
||||
<div class="row">
|
||||
<div class="col p-t-10 p-b-10">
|
||||
{{paymentMethod.name}}
|
||||
</div>
|
||||
<div class="col-auto bg-complete-light">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="col">
|
||||
<i class="fa" :class="[{'fa-angle-down': !paymentMethod.status}, {'fa-angle-up': paymentMethod.status}]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-100">
|
||||
<div class="absolute w-100 b-l b-b b-r b-complete" :class="[{'hide': !paymentMethod.status}]" style="top: 100%; right: 0; z-index: 1;">
|
||||
<div class="row text-left no-margin bg-white">
|
||||
<div class="col no-padding">
|
||||
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Bank Transfer'}, {'text-white': paymentMethod.name === 'Bank Transfer'}, {'hover-complete': paymentMethod.name !== 'Bank Transfer'}]" @click="updatePaymentType({name: 'Bank Transfer', id: 'cash'})">
|
||||
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-10">Bank Transfer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cash Deposit'}, {'text-white': paymentMethod.name === 'Cash Deposit'}, {'hover-complete': paymentMethod.name !== 'Cash Deposit'}]" @click="updatePaymentType({name: 'Cash Deposit', id: 'cash'})">
|
||||
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-10">Cash Deposit</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cheque'}, {'text-white': paymentMethod.name === 'Cheque'}, {'hover-complete': paymentMethod.name !== 'Cheque'}]" @click="updatePaymentType({name: 'Cheque', id: 'cheque'})">
|
||||
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-10">Cheque</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Banker\'s Acceptance'}, {'text-white': paymentMethod.name === 'Banker\'s Acceptance'}, {'hover-complete': paymentMethod.name !== 'Banker\'s Acceptance'}]" @click="updatePaymentType({name: 'Banker\'s Acceptance', id: 'ba'})">
|
||||
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-10">Banker's Acceptance</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Online Transfer'}, {'text-white': paymentMethod.name === 'Online Transfer'}, {'hover-complete': paymentMethod.name !== 'Online Transfer'}]" @click="updatePaymentType({name: 'Online Transfer', id: 'ot'})">
|
||||
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-10">Online Transfer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-r-0">
|
||||
<div class="col p-r-0">
|
||||
<validation-wrapper-component :validator="$v.amount">
|
||||
<label>Amount</label>
|
||||
<input class="form-control" name="amount" v-model.lazy="amount">
|
||||
<!-- <input class="form-control" name="amount" v-model.lazy="amount" v-money="{decimal: '.',thousands: ',', precision: 2}"> -->
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
<div class="col-auto b-r b-t b-b b-grey">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="col">
|
||||
<!-- <div class="font-heading fs-10 muted">{{this.data.fixed_currency.short_code}}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" v-if="paymentMethod.name == 'Online Transfer'">
|
||||
<div class="col">
|
||||
|
||||
<div class="row m-t-10">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.bankName === 'Maybank'}]" @click="selectOnlinePaymentBank({bankName: 'Maybank', id: 'maybank'})">
|
||||
<img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_maybank.png" alt="">
|
||||
Maybank2u
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row m-t-10">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.bankName === 'Cimb'}]" @click="selectOnlinePaymentBank({bankName: 'Cimb', id: 'cimb'})">
|
||||
<img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_cimb.png" alt="">
|
||||
Cimb
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 p-r-0">
|
||||
<button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
<div class="col p-l-0">
|
||||
<button class="btn btn-xs all-caps b-rad-none btn-success btn-block" v-if="!(paymentMethod.name === 'Online Transfer' && onlinePayment.status === false)" @click="submitForm()">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</modal-component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import { required } from "vuelidate/lib/validators";
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
loading: false,
|
||||
// amount: (Math.round((this.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2),
|
||||
amount: (Math.round(1000 * 100) / 100).toFixed(2),
|
||||
paymentMethod: {
|
||||
name: 'Bank Transfer',
|
||||
id: 'cash',
|
||||
status: false
|
||||
},
|
||||
onlinePayment: {
|
||||
bankName: '',
|
||||
id: '',
|
||||
status: false
|
||||
},
|
||||
}
|
||||
},
|
||||
validations () {
|
||||
return {
|
||||
amount: { required }
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
updatePaymentType(payment){
|
||||
this.paymentMethod = {
|
||||
name: payment.name,
|
||||
id: payment.id,
|
||||
status: false,
|
||||
}
|
||||
},
|
||||
selectOnlinePaymentBank(bankName){
|
||||
this.onlinePayment = {
|
||||
bankName: bankName.bankName,
|
||||
id: bankName.id,
|
||||
status: true,
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
+1
-1
@@ -141,7 +141,7 @@
|
||||
<div class="col-3">
|
||||
<div class="row">
|
||||
<div class="col-10 m-b-15">
|
||||
<wallet-balance-component></wallet-balance-component>
|
||||
<wallet-component></wallet-component>
|
||||
</div>
|
||||
</div>
|
||||
<booking-form-component :data="company" section="customerProfileSection"></booking-form-component>
|
||||
|
||||
+1
-1
@@ -537,7 +537,7 @@
|
||||
</div>
|
||||
<div class="col-2 p-l-0 p-r-0 order-last">
|
||||
<verification-warning-component v-if="!isLoading && company.bookings.length" :data="company"></verification-warning-component>
|
||||
<wallet-balance-component></wallet-balance-component>
|
||||
<wallet-component></wallet-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+21
-9
File diff suppressed because one or more lines are too long
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row m-l-0 m-b-10 m-r-0 parentContainer" :class="[{'b-a': item.status === 4}, {'b-danger': item.status === 4}]" >
|
||||
<div class="col">
|
||||
<div class="row" v-if="item.type === 3">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col p-t-10 p-b-10 p-r-0" :class="[{'bg-master-lighter': item.status === 1}, {'bg-white': item.status !== 1 && item.status !== 4}]">
|
||||
<div class="row m-b-5">
|
||||
<div class="col-auto">
|
||||
<div class="font-heading fs-8 muted all-caps">Status</div>
|
||||
<div class="font-heading fs-10 bold" :class="[{'text-danger': item.status === 1 || item.status === 4}, {'text-success': item.status !== 1 && item.status !== 4}]">
|
||||
{{ item.status === 1 ? 'Processing Payment' : 'Success'}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto p-l-0">
|
||||
<div class="font-heading fs-8 muted all-caps">Payment Amount</div>
|
||||
<div class="font-heading fs-10 bold">
|
||||
<!-- {{item.original_currency.short_code}} {{(Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}} -->
|
||||
MYR 1000
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<!-- <div class="font-heading fs-8 all-caps" >{{ item.status === 1 ? 'Paid On: ' + customerBooking.updated_at : 'Transferred On:' + item.updated_at }}</div> -->
|
||||
<div class="font-heading fs-8 all-caps">Paid On: 25-12-2021 11:15:45 AM </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto pointer " v-if="item.status !== 3 && item.status !== 2" :class="[{'bg-master-light': item.status === 1}, {'bg-master-lighter': item.status === 2}]">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col">
|
||||
<i class="fa" :class="[{'fa-cloud-download': item.status === 1 || item.status === 2}, {'fa-ban': item.status === 4}, {'muted': item.status === 1 || item.status === 2}, {'text-danger': item.status === 4}]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto bg-success" v-if="item.status === 2 || item.status === 3">
|
||||
<!-- <document-file-viewer-component class="h-100" :file="item.documents.files[0]">
|
||||
<template slot="button">
|
||||
<div class="row align-items-center h-100">
|
||||
<div class="col">
|
||||
<i class="fa fa-cloud-download text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</document-file-viewer-component> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
// expandPaymentDetails: false,
|
||||
item: {
|
||||
status: 1,
|
||||
type: 3
|
||||
},
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col bg-white padding-40 b-rad-lg">
|
||||
<div class="row m-b-10">
|
||||
<div class="col text-center">
|
||||
<div class="fs-11">Plese enter the {{topUpType}} amount.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-20">
|
||||
<div class="col no-padding">
|
||||
<div class="form-group form-group-default m-b-0">
|
||||
<label>Amount</label>
|
||||
<input type="text" placeholder="0.00" value="0" class="form-control" v-money="money">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 p-l-0 p-r-0">
|
||||
<button class="btn btn-sm all-caps b-rad-none btn-default bg-master-lighter btn-block" data-dismiss="modal">Cancel</button>
|
||||
</div>
|
||||
<div class="col p-l-0 p-r-0">
|
||||
<button class="btn btn-sm all-caps b-rad-none btn-success btn-block">Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
import {VMoney} from 'v-money'
|
||||
export default {
|
||||
props: {
|
||||
topUpType:{
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mixins: [ModalFormHandler],
|
||||
directives: {money: VMoney}
|
||||
}
|
||||
</script>
|
||||
@@ -18,7 +18,7 @@
|
||||
<div class="col-2">25/11/2015</div>
|
||||
<div class="col">Payment to bill #121221121</div>
|
||||
<div class="col-2"></div>
|
||||
<div class="col-2 text-danger">2,123</div>
|
||||
<div class="col-2 text-danger">- 2,123</div>
|
||||
<div class="col-2">12,123</div>
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3 m-l-15">
|
||||
<wallet-balance-component></wallet-balance-component>
|
||||
<wallet-component></wallet-component>
|
||||
<div class="row m-t-20">
|
||||
<div class="col">
|
||||
<div class="row m-b-10">
|
||||
@@ -44,9 +44,6 @@
|
||||
<div class="row m-b-10">
|
||||
<div class="col bg-white m-l-15 m-r-15 padding-15 rounded">
|
||||
<div class="row m-l-5">
|
||||
<div class="col-auto btn-rounded bg-master-light d-flex justify-content-center align-content-center">
|
||||
<div class="padding-5 text-white"><i class="fa fa-check fs-15 lh-40"></i></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@@ -69,9 +66,6 @@
|
||||
<div class="row m-b-10">
|
||||
<div class="col bg-white m-l-15 m-r-15 padding-15 rounded">
|
||||
<div class="row m-l-5">
|
||||
<div class="col-auto btn-rounded bg-master-light d-flex justify-content-center align-content-center">
|
||||
<div class="padding-5 text-white"><i class="fa fa-times fs-15 lh-40"></i></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@@ -94,9 +88,6 @@
|
||||
<div class="row m-b-10">
|
||||
<div class="col bg-white m-l-15 m-r-15 padding-15 rounded">
|
||||
<div class="row m-l-5">
|
||||
<div class="col-auto btn-rounded bg-master-light d-flex justify-content-center align-content-center">
|
||||
<div class="padding-5 text-white"><i class="fa fa-exclamation fs-15 lh-40"></i></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
@@ -115,6 +106,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wallet-top-up-history-component></wallet-top-up-history-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -67,14 +67,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto m-r-20 d-none d-md-inline">
|
||||
<div class="row align-items-center p-t-5 p-b-5 b-a b-thick" style="border-color: #ffffff3d">
|
||||
<div class="col-auto">
|
||||
<div class="fs-12 text-primary-lighter">MYR 0.00</div>
|
||||
</div>
|
||||
<top-up-account-component></top-up-account-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto m-r-20 d-none d-md-inline">
|
||||
<div class="row align-items-center p-t-5 p-b-5 b-a b-thick d-inline-flex h-100" style="border-color: #ffffff3d">
|
||||
<div class="col-auto">
|
||||
|
||||
+4
-1
@@ -76,8 +76,11 @@ Route::get('/transfer/merge/{marking}', function ($marking) {
|
||||
})->name('booking.merge');
|
||||
|
||||
Route::get('/wallet-transactions', function () {
|
||||
Route::get('/online_payment/redirect', 'Billplz\CallbackBillplzController@callback')->name('online_payment.redirect');
|
||||
|
||||
Route::get('/wallet/{marking}/details', function () {
|
||||
return view('pages.wallet.index');
|
||||
})->name('wallet.transactions');
|
||||
})->name('wallet.details');
|
||||
|
||||
Route::get('/test', function(){
|
||||
|
||||
|
||||
Reference in New Issue
Block a user