mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/portal.git
synced 2026-08-21 05:24:09 +00:00
313 lines
28 KiB
PHP
313 lines
28 KiB
PHP
<div class="row d-none" :class="[{'d-flex': !$store.getters.isAdmin}]" v-if="!$store.getters.isAdmin">
|
|
<div class="col">
|
|
<div class="row" v-show="!$store.getters.isShowing('createOrderForm')">
|
|
<div class="col">
|
|
<div class="row" v-show="!$store.getters.getOrder">
|
|
<div class="col">
|
|
<div class="row m-b-20">
|
|
<div class="col">
|
|
<div class="row m-b-50 text-center">
|
|
<div class="col">
|
|
<div class="row align-items-center justify-content-center m-b-10">
|
|
<div class="col-auto p-r-10">
|
|
<h5 class="light">Welcome Abroad, we provide logistics services.</h5>
|
|
</div>
|
|
<div class="col-auto b-a b-thick b-primary padding-5">
|
|
<h5 class="light no-margin">Powered by technology, delivered by experts.</h5>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="light no-margin">Unlock your potential with digital freight forwarding that creates outstanding supply chains management. <span class="bold text-primary">From the supplier to our warehouse, then to your doorsteps.</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center justify-content-center m-b-50">
|
|
<div class="col-10">
|
|
<div class="row">
|
|
<div class="col p-t-10 p-b-25 p-l-25 p-r-25 bg-master-lightest b-r b-grey">
|
|
<div class="row m-b-15">
|
|
<div class="col text-center">
|
|
<img src="/images/qr.svg" width="100" height="150">
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="bold all-caps fs-10"><i class="fa fa-circle text-primary m-r-10"></i>Step 1</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin">Place an order with us, and send the QR Code label to your supplier to attach to your order's packages</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col p-t-10 p-b-25 p-l-25 p-r-25 bg-master-lightest b-r b-grey">
|
|
<div class="row m-b-15">
|
|
<div class="col text-center">
|
|
<img src="/images/package.svg" width="120" height="150">
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="bold all-caps fs-10"><i class="fa fa-circle text-primary m-r-10"></i>Step 2</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin">We receive your packages at the preferred warehouse you selected, and arrange for shipping.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col p-t-10 p-b-25 p-l-25 p-r-25 bg-master-lightest">
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<img src="/images/package_hands.svg" width="160" height="150">
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="bold all-caps fs-10"><i class="fa fa-circle text-primary m-r-10"></i>Step 3</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin">We deliver your packages to your doorsteps at your selected delivery address.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-10 text-center">
|
|
<button type="button" class="btn btn-lg fs-12 btn-outline-complete b-rad-none m-r-15">Ask us a Question</button>
|
|
<button type="button" class="btn btn-lg fs-12 btn-primary b-rad-none" @click="$store.dispatch('toggleSection', {name: 'createOrderForm', status: true})">Lets create a new order <i class="fa fa-angle-right m-l-10"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-50" v-show="$store.getters.getOrder">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="d-none d-sm-inline absolute hint-text dotted-grid" style="width: 200px;height: 100px; right: 10px; bottom: 0; z-index: 1; opacity: 0.3;"></div>
|
|
<div class="col bg-info-primary-gradient text-white b-rad-lg padding-25">
|
|
<div class="row align-items-center">
|
|
<div class="d-none d-sm-inline col-3 text-center no-padding">
|
|
<img src="/images/qr-box.svg" class="w-75">
|
|
</div>
|
|
<div class="col">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<h6 class="text-white bold no-margin">Making A New Order ?</h6>
|
|
<p class="no-margin fs-12">Place an order with us, and send the QR Code label to your supplier to attach to your order's packages</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex row m-b-10 align-items-center">
|
|
<div class="col-auto">
|
|
<div class="row align-items-end">
|
|
<div class="col-auto">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin small hint-text fs-10">Our Warehouse</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin bold">Guang Zhou</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto hide">
|
|
<div class="btn btn-xs btn-primary bg-primary-light btn-rounded fs-12 ">
|
|
<i class="fa fa-map-marker"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="row align-items-end">
|
|
<div class="col-auto">
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin small hint-text fs-10">Your Delivery Address</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="no-margin bold">Home</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto hide">
|
|
<div class="btn btn-xs btn-primary bg-primary-light btn-rounded fs-12 ">
|
|
<i class="fa fa-map-marker"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="btn btn-sm btn-primary bg-primary-darker btn-rounded my-3 my-sm-0 fs-12 no-border" style="padding: inherit;">
|
|
<div class="row align-items-center flex-nowrap" @click="$store.dispatch('toggleSection', {name: 'hideOneClickButtonText', status: !$store.getters.isShowing('hideOneClickButtonText')})">
|
|
<div class="col-auto" v-show="$store.getters.isShowing('hideOneClickButtonText')" style="width: 172px; height: 20px;">
|
|
<loading-component style="height: 20px; top: 0;" color="white"></loading-component>
|
|
</div>
|
|
<div class="col-auto no-padding">
|
|
<i class="fa fa-hand-o-up bg-primary-dark p-t-10 p-b-10 p-l-15 p-r-15 btn-rounded"></i>
|
|
</div>
|
|
<div class="col p-r-25" v-show="!$store.getters.isShowing('hideOneClickButtonText')" style="width: 172px;">
|
|
Place Order with 1-Click
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-l-0 m-r-0 m-b-10 align-items-center hint-text">
|
|
<div class="col-auto b-b b-white p-t-5 p-l-30 hint-text"></div>
|
|
<div class="auto m-r-10 m-l-10">
|
|
<small class="fs-10 small all-caps">Or Select a different warehouse & delivery address</small>
|
|
</div>
|
|
<div class="col-auto b-b b-white p-t-5 p-l-30 hint-text"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div @click="$store.dispatch('toggleSection', {name: 'createOrderForm', status: true})" class="btn btn-lg btn-primary bg-primary-darker b-a b-white b-thick p-t-0 p-b-0 p-l-0 fs-12 b-rad-none">
|
|
<div class="row align-items-center no-margin">
|
|
<div class="col-auto bg-primary-dark padding-10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="20" height="20"
|
|
viewBox="0 0 172 172"
|
|
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#ffffff"><path d="M81.33047,19.35c-1.71013,0 -3.3514,0.68069 -4.56035,1.88965l-13.16035,13.16035l13.16035,13.16035c1.20896,1.20895 2.85022,1.88965 4.56035,1.88965h49.81953c3.53669,0 6.45,-2.91331 6.45,-6.45v-17.2c0,-3.53669 -2.91331,-6.45 -6.45,-6.45zM34.4,21.5c-7.09901,0 -12.9,5.80099 -12.9,12.9c0,7.09901 5.80099,12.9 12.9,12.9c6.3679,0 11.67787,-4.67316 12.70684,-10.7584c0.06423,0.00569 0.12868,0.0085 0.19316,0.0084c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15c-0.06454,0.0013 -0.129,0.0055 -0.19316,0.0126c-1.02727,-6.08723 -6.33751,-10.7626 -12.70684,-10.7626zM81.33047,23.65h49.81953c1.21481,0 2.15,0.93519 2.15,2.15v17.2c0,1.21481 -0.93519,2.15 -2.15,2.15h-49.81953c-0.56887,0 -1.11657,-0.22634 -1.52012,-0.62988l-10.12012,-10.12012l10.12012,-10.12012c0.40354,-0.40355 0.95125,-0.62988 1.52012,-0.62988zM34.4,25.8c4.77512,0 8.6,3.82488 8.6,8.6c0,4.77512 -3.82488,8.6 -8.6,8.6c-4.77512,0 -8.6,-3.82488 -8.6,-8.6c0,-4.77512 3.82488,-8.6 8.6,-8.6zM122.55,27.95c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM34.4,32.25c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM55.9,32.25c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM122.55,36.55c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM34.4,49.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM34.4,58.05c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM34.4,66.65c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM81.33047,70.95c-1.71013,0 -3.3514,0.68069 -4.56035,1.88965l-13.16035,13.16035l13.16035,13.16035c1.20896,1.20895 2.85022,1.88965 4.56035,1.88965h62.71953c3.53669,0 6.45,-2.91331 6.45,-6.45v-17.2c0,-3.53669 -2.91331,-6.45 -6.45,-6.45zM34.4,73.1c-7.09901,0 -12.9,5.80099 -12.9,12.9c0,7.09901 5.80099,12.9 12.9,12.9c6.3679,0 11.67787,-4.67316 12.70684,-10.7584c0.06423,0.00569 0.12868,0.0085 0.19316,0.0084c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15c-0.06454,0.0013 -0.129,0.0055 -0.19316,0.0126c-1.02727,-6.08723 -6.33751,-10.7626 -12.70684,-10.7626zM81.33047,75.25h62.71953c1.21481,0 2.15,0.93519 2.15,2.15v17.2c0,1.21481 -0.93519,2.15 -2.15,2.15h-62.71953c-0.56887,0 -1.11657,-0.22634 -1.52012,-0.62988l-10.12012,-10.12012l10.12012,-10.12012c0.40354,-0.40355 0.95125,-0.62988 1.52012,-0.62988zM34.4,77.4c4.77512,0 8.6,3.82488 8.6,8.6c0,4.77512 -3.82488,8.6 -8.6,8.6c-4.77512,0 -8.6,-3.82488 -8.6,-8.6c0,-4.77512 3.82488,-8.6 8.6,-8.6zM135.45,79.55c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM34.4,83.85c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM55.9,83.85c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM135.45,88.15c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM34.4,101.05c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM34.4,109.65c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM34.4,118.25c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM81.33047,122.55c-1.71013,0 -3.3514,0.68069 -4.56035,1.88965l-13.16035,13.16035l13.16035,13.16035c1.20896,1.20895 2.85022,1.88965 4.56035,1.88965h36.91953c3.53669,0 6.45,-2.91331 6.45,-6.45v-17.2c0,-3.53669 -2.91331,-6.45 -6.45,-6.45zM34.4,124.7c-7.09901,0 -12.9,5.80099 -12.9,12.9c0,7.09901 5.80099,12.9 12.9,12.9c6.3679,0 11.67787,-4.67316 12.70684,-10.7584c0.06423,0.00569 0.12868,0.0085 0.19316,0.0084c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15c-0.06454,0.0013 -0.129,0.0055 -0.19316,0.0126c-1.02727,-6.08723 -6.33751,-10.7626 -12.70684,-10.7626zM81.33047,126.85h36.91953c1.21481,0 2.15,0.93519 2.15,2.15v17.2c0,1.21481 -0.93519,2.15 -2.15,2.15h-36.91953c-0.56887,0 -1.11657,-0.22634 -1.52012,-0.62988l-10.12012,-10.12012l10.12012,-10.12012c0.40354,-0.40355 0.95125,-0.62988 1.52012,-0.62988zM34.4,129c4.77512,0 8.6,3.82488 8.6,8.6c0,4.77512 -3.82488,8.6 -8.6,8.6c-4.77512,0 -8.6,-3.82488 -8.6,-8.6c0,-4.77512 3.82488,-8.6 8.6,-8.6zM109.65,131.15c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM34.4,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM55.9,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM109.65,139.75c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15z"></path></g></g></svg>
|
|
</div>
|
|
<div class="col p-r-0">
|
|
<h6 class="no-margin bold fs-14 text-white">Create New Order <i class="fa fa-long-arrow-right m-l-20 fs-16"></i></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<order-form-component v-show="$store.getters.isShowing('createOrderForm')"></order-form-component>
|
|
<list-component v-show="!$store.getters.isShowing('createOrderForm')" section="orderList" :endpoint="route('api.order.list')" :options="{per_page: 10, CompanyModuleId :$store.getters.getCompanyModuleId}" :columns=3>
|
|
<template slot="list" slot-scope="{data}">
|
|
<div class="row m-l-0 m-r-0 m-b-30">
|
|
<div class="col">
|
|
<div class="row align-items-center bg-master-lightest">
|
|
<div class="col no-padding">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="peelable-corner overflow-hidden relative b-t b-l b-grey">
|
|
<img src="/images/qr.svg" class="w-100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<small class="fs-10 all-caps muted">Order No.</small>
|
|
<h6 class="no-margin small">KLM59238745</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<small class="fs-10 all-caps muted">Warehouse</small>
|
|
<h6 class="no-margin small">Guang Zhou</h6>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<small class="fs-10 all-caps muted">Delivery Address</small>
|
|
<h6 class="no-margin small">Home</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row b-t b-grey bg-master-lightest">
|
|
<div class="col">
|
|
<div class="row text-center">
|
|
<div class="col b-r b-grey text-info p-t-5 p-b-10">
|
|
<small class="fs-10 all-caps bold">Received</small>
|
|
<h6 class="bold no-margin text-info">7</h6>
|
|
</div>
|
|
<div class="col b-r b-grey text-primary p-t-5 p-b-10">
|
|
<small class="fs-10 all-caps bold">In Transit</small>
|
|
<h6 class="bold no-margin text-primary">3</h6>
|
|
</div>
|
|
<div class="col text-success p-t-5 p-b-10">
|
|
<small class="fs-10 all-caps bold">Delivered</small>
|
|
<h6 class="bold no-margin text-success">4</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row p-t-5 p-b-15 b-t b-grey bg-master-lightest">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<small class="fs-10 all-caps muted">Marking</small>
|
|
<h6 class="no-margin small">1653GLM</h6>
|
|
</div>
|
|
<div class="col">
|
|
<small class="fs-10 all-caps muted">Date</small>
|
|
<h6 class="no-margin small">10-08-2021</h6>
|
|
</div>
|
|
<div class="col-auto text-right">
|
|
<small class="fs-10 all-caps muted">Total CBM</small>
|
|
<h6 class="no-margin semi-bold">0.00</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col no-padding">
|
|
<div class="row">
|
|
<div class="col">
|
|
<a href="{{route('order.show')}}">
|
|
<div class="btn btn-sm btn-default bg-master-lighter no-border btn-block b-rad-none">More Details</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto no-padding">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="btn btn-sm btn-default bg-master-light text-info btn-block b-rad-none no-border">
|
|
<i class="fa fa-ellipsis-v"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</list-component>
|
|
</div>
|
|
</div> |