mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-19 04:24:12 +00:00
payment and billing ui
This commit is contained in:
edmondlang
+131
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="row m-b-15 m-l-5 m-r-10">
|
||||
<div class="col bg-master-lightest rounded" :class="{'b-gray': !selected, 'b-primary': selected, 'bg-primary-lighter': selected}">
|
||||
<div class="row">
|
||||
<div class="col padding-20">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto pointer align-items-center" @click="selected = !selected">
|
||||
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin">{{item.country.id}}05052021</h5>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin">Invoice Date Invoice Date</h5>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin">Status</h5>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin">Amount</h5>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="btn bg-grey no-border" @click="expanded = !expanded">
|
||||
<i class="fa" :class="{'fa-angle-down': !expanded, 'fa-angle-up': expanded}" ></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row b-t b-grey p-t-10" v-show="expanded">
|
||||
<div class="col p-b-10">
|
||||
<div class="row">
|
||||
<div class="col p-l-20 p-r-20 p-t-10 p-b-10">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto invisible">
|
||||
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0">Carrier Tracking Number</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">#1zbr06tw403742920</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0">Due Date</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">11.04.2021</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">Outstanding</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">RM0.00</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col p-l-20 p-r-20 p-t-10 p-b-10">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto invisible">
|
||||
<i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0 normal-text">This package was delivered by</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">#1zbr06tw403742920</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="m-b-0">Date Paid</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5 class="semi-bold m-t-0 m-b-0 large-text">21.01.2021</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="btn btn-outline-complete btn-lg">
|
||||
Invoice Detail
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import componentHandler from '../../../general/mixins/componentHandler';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
expanded: false,
|
||||
selected: false,
|
||||
}
|
||||
},
|
||||
mixins: [componentHandler]
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,128 @@
|
||||
@extends('layouts.base_portal')
|
||||
@section('inner_content')
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-9">
|
||||
<div class="row m-b-15 m-l-5 m-r-10">
|
||||
<div class="col b-a b-grey rounded bg-master-light">
|
||||
<div class="row">
|
||||
<div class="col padding-20">
|
||||
<div class="row align-items-center justify-conten-center">
|
||||
<div class="col-auto pointer">
|
||||
<i class="fa fs-30 fa-fw fa-square-o"></i>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin font-heading">Invoice No</h5>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin">Invoice Date</h5>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin">Status</h5>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h5 class="no-margin">Amount</h5>
|
||||
</div>
|
||||
<div class="col-auto invisible">
|
||||
<div class="btn btn-default no-border">
|
||||
<i class="fa fa-angle-up"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<list-component section="containerListSection" :endpoint="route('api.address.district.list')">
|
||||
<template slot="list" slot-scope="{data}">
|
||||
<payments-billing-components :data="data"></payments-billing-components>
|
||||
</template>
|
||||
</list-component>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-3">
|
||||
<div class="row align-items-center">
|
||||
<div class="col b-a b-grey rounded padding-25">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h6 class="semi-bold muted">Payment Summary</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-auto">
|
||||
<div class="padding-5">
|
||||
<i class="fa fa-angle-up"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col p-l-0">
|
||||
<h6 class="semi-bold text-primary">2 Invoice Selected</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<h6 class="no-margin">x1</h6>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6 class="no-margin">lorem ipsum</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h6 class="no-margin">52x62x635 CM</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<h6 class="no-margin">x1</h6>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6 class="no-margin">lorem ipsum</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h6 class="no-margin">52x62x635 CM</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h6 class="normal m-t-5 m-b-5">Shipping Fee</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h6 class="normal m-t-5 m-b-5">RM 212.15</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h6 class="normal m-t-5 m-b-5">Serrvice Fee</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h6 class="normal m-t-5 m-b-5">RM 41.25</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h6 class="normal m-t-5 m-b-5">Discount</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h6 class="normal m-t-5 m-b-5">RM 0.00</h6>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h6 class="normal">Total Payments</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<h6 class="text-primary bold">RM 3300.00</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
File diff suppressed because one or more lines are too long
+5
-1
@@ -80,4 +80,8 @@ Route::get('/test', function(){
|
||||
$address->street_two = (new \App\Classes\Modules\Addresses\Services\CleansOldAddress())->cleanAddress($address->street_two, $address->district, $address->postcode);
|
||||
$address->save();
|
||||
}
|
||||
})->name('test');
|
||||
})->name('test');
|
||||
|
||||
Route::get('/payments-and-billing', function () {
|
||||
return view('pages.templates.paymentsBilling');
|
||||
})->name('payments-and-billing');
|
||||
Reference in New Issue
Block a user