cief/shipping-portal
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git synced 2026-08-19 04:24:12 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
e7c0e17ee499d4b7515a8db5e8f426b432d1aff6
shipping-portal/resources/assets/vue/components/orders/sections/DeliveryOrdersSectionComponent.vue
T
edmondlang 606325706e air shipment module
2022-06-13 22:58:41 +08:00

459 lines
29 KiB
Vue
Raw Blame History

<template>
<div class="row">
<div class="col no-margin">
<loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
<div class="row align-content-center h-100" v-if="step === 1">
<div class="col-8">
<div class="row m-b-20">
<div class="col-12 col-md-7">
<div class="row m-b-10 text-info">
<div class="col">
<h5 class="m-b-0 m-t-0 bold">Service Type</h5>
</div>
</div>
<div class="row text-center justify-content-center">
<div class="col p-l-5">
<div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" :class="{ 'b-info': parameters.type === 1, 'b-grey': parameters.type !== 1 }" @click="parameters.type = 1">
<div class="row justify-content-center">
<div class="col-8">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABmJLR0QA/wD/AP+gvaeTAAAEJklEQVR4nO3aS6hVVRzH8c8tsUKvjWoQBGGPSZFGg0ot8+YgMBoKEQhBBBFNokFkUhOzGjSoUVnUMIugUQ8pe4gVRhFISpMI7UpGpuiN3vc0WOt0ttt93nufvW93fWFxNov9/6///p211l7rvzaJRCKRSCQSiUQikUgkEolEIpFIJBY5S/E0jqJVUZnDAWzHpZN5rMnxlOqEKyqncM9EnmxCzAoPdtOQdm1BBmEZbsbr0WYe9w7ZXmMZRogy7O4XBPwT60awbxyTFpAw57bwIy4Z0UdjqEPAc/FetP9UeJEtWOoQEC7Gkejj2TH81E5dAsIN+D362Tymr9qoU0B4IPo5jatL8Ddx6hYQXom+vsWFJfmcGE0Q8AJ8Gf29hamS/E6EJggIl+F49PlwiX4rpykCwp3CIvsvzJTpeEr5wS4EvsP7sbwrvGhGYjEK+Kuwh27zG/ZidywHhnVYxZAhBPXJBO0GZSk2YIfwgvnHmVmdo3gVdwuL8r5UJeBC4SLcJSx52hmkdpnHV0JqbgbnFTlY7ALmuQYP4R1huGcF/QlbsSRrUJScPIzbxwxknzAcx7XbWxDfKH5H4XxsxDP4OtP+m0LigoLgsiKOQ1lzYJGAVc6RvVgrpMpa2NKuLBrCaVh3Z7OgzWftiiRgbzZhP/5w9hkMqhvCZc2BdbJJ74Ms53QxPIL7xmx83mi9eFS7Kngi/j4iLGGmFCQk0nDtzilBm+W5+r49MBHYH38f1ON8paoe+H+YA2fwtxHmwG5sxE4hwzuHk8Lm+0XhLDY7PzRxDszHPxevd+K2gvv34A58IZw3FzJID7xc8YI2X3YLCcymMWj8H2PlAP7O0KyfgOuEntYSVuGPYpWQElqG1cL+sL1CP4HrB32yCTBs/Cexpo/PgQW8ShCkhdec/TbKMo1d8d6f8bn658BR4/8FV3SJZ5+OZqvoLuCU0KXbjQ9yIDOl86FPC28PYJOnrHzguPHv6RJPdir4nu4C3qrT7Xv9c3mmcSzarh/CrmzKiP+WHve10Or1Fm5nG54T3lZtsh9OzgqZ3ewa6TSez/mog4nF387C5ifOg7H+2lx90YeTT+buWR3rDw4SQI6y5sAy4v+mh///Ru6OAofZku/+WcHXxuvZ3D3TfXxOslQZ/+EleDwabTHcN3XZSbmqhW+VjBt/34RLtyFQ1GO35+4ZZAhUTe3xvxydbM3VL41BzOKH2Hh+o70t2r40TgBjUnv863WWAdND2K0QTq9awgfgddGI+D+KjnYZfCH6RrT5YNzGS6D2+K8UtjUtYYXe659ckWn8uLCBr5tGxL9GZz95DI/hOmF5sDxeb9Pp9idwY1mNl0Aj4l+pMxx6lQ81M53VmPhn8AIO6SQkD8W6DVU2XBILPf5EIpFIJBKJRCKRSCQSiUQiUSP/AlkkSdKJddQ3AAAAAElFTkSuQmCC" class="w-100">
</div>
</div>
<div class="row">
<div class="col">
<h5 class="no-margin" :class="{ 'text-info': parameters.type === 1, 'semi-bold': parameters.type === 1}">Pick Up</h5>
</div>
</div>
</div>
</div>
<div class="col p-r-5">
<div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" :class="{ 'b-info': parameters.type === 2, 'b-grey': parameters.type !== 2 }" @click="parameters.type = 2">
<div class="row justify-content-center">
<div class="col-8">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABmJLR0QA/wD/AP+gvaeTAAAG00lEQVR4nO2caYwURRSAv4VhOWRBZEEFQgAFFVFARcEjyEpQMCggCoZA/IEHcoioARUNlxKjiTEeqIhRJFFBEQHxwPgDMYCcaqIEMSDBoKKcyyEsO/54r1O9Pd09Bz073UN/yaSnql7XvC6qq1699xaIiYmJiYmJiYmJiSlKWgIzgc1AJXAY2ATMAFoUUK9IMBQ4BCQ9PgeBwQXTLuQMBaqRgVoM9AbO0s+NwKfadop4EFNoiZl5j/nITVGZA0B5LegVGWYiA/NJBrJLVXZ6XjWKGFuQQemdgWwfld2UV40ixmFkUBpnIFumsofyqpEHdQrxoxmQzEK2JId7AiOsA/ibXq/KQNaS2Z4nXXwJ6wAu0+vDGchOctwTg5wwDiKv5RQfuSdVZj/QvBb0ihRDECM5iZgqfZBNpQyoAJZjDOnbC6Rj6BmMGMleR7n9xIOXlnLEcbARMW8OARuAacSvbUxQVABzga2Iy8rtdT0AfAX0K5COoaQDsArvNc7r80QhlA0b/TAbxF/AVKAr4q5yozkycFWIm6uiFnQMLfcAJ5DBWwQ0zeLeSXrfijzoFQmexjhKZ2POsplSrvf+G7BeoScBzEMevgp4IMd+mmkfJ4AmwagWDeYjD14JDHRp7wQsAK5P089NmM3kpSAVDDMjMSeHHi7tfYF9KvNymr6ewgxgFXBlcGqGF8tUGenS9iBwEjMo96bpa4XK/ajX9UDdwDQNIQ2RmXJSv1skgFeQQajGbCyX+/RVBzNTLwJ26vfxgWsdInogD/mTra4e8KXWHwMm6vfD+M+mzir3u5YHYuLDrQLVOkNqw6HaTa9bbHW3IIb034ibyvImb0DcU15cq9c1el2GRO6aAKsR/2Cb01c5c2pjALvq9QdbnTWo84G1wDVaXpemr14uchOAbUB7YBbyWn8O3AnUz03lcLEaec362uoWa90ILa/U8qA0fW1VuY1Aqa2+jvY/HzhCTX/hG0R4py7BuObtiUDbta4L8vD7tey3jp2D2WiSwDM+cuOROLHdAbEJ8XJHigsQ5f+w1ZUhA3Ec2UwuUZldafq6FbOBVOn3j4ABeG883RBj+x/Mbn9HDs9RMIYgin9mq7sO8xqCOBYsp4IfszDn59HI7m3Nrj3AC8BlHvfWR7zaSWpuZqFnOqL0s7a6sVo3T8tztPxomr6+UbnbtNwKidj9TOqrOhFJULLTFHOUjAxLEKWH2ere1LoJWv5eyzf49JNAHrwa96TKqxGj3HpVLWfDUuSVLUN8iUnS7/ShYgei9MW2unXUTBzaQ+om4+QKldmW5vdKkUjeEoy/0f6pBvpn9QQF5iiiuOVlTiBmRjVwNmIAW7HfRj79jFOZd7L47RbILF+PrJdridjggZltjyNrkLWQW8e6fpjZ0dmnnwUqMyZvmoaUAdS03ZyZBNNs9X4pHK+pzEqy92BHngHITKxEdkj7acM6gSSRc3Ezjz7Kgb0qNypvmkaMupg86M2ktwVHqcxe4j9vAKA7MiC/IicWK8Q51kO+BDNj36sNBcOOc2cdquXjiNniRjtM5sIZn6HwPqku/Fe1bjveseLJKrMD7yD8GcEuUs2X+sgZOQks9LgvgfG0PJdPBcNMG2QA9pHq1LXiJH52Xw9MnKV7nnQMNcNI9dKA7Mx/YgbQbz18kTMkKuekHsaBMNnRVoE5886xfXfLQGiMicplkoxeNFh/xrWLVMPZ8tTMoOZ6+KFHX/21/QgSEyl6eiHrVhWp7qtGmNOG5RjtiDG27/fo8wPcl4OiowwTC5nt0m5tHhsc9cMx8eOuzpuAczHB9uFBKRtG3sZ4jEsdbTdj4iRug/Q65tTith6OxhzzivLPXgdhZlEXR1s5xqn6iMf9DTC2n9t6WAJ8re1vBaBvqGiFcbW7nXMXadsq/M2RCzEhUrcEpI7IP1A1kgJXFJQgi3sSyYVx+vLuwwTA22bQ312YmexmQE/FmD4NclM5XDyEWZvOd7R1wOywd2fRp2XquNmHCcwfa8/MQd+88h3wbRblTkhMZA+pKRsJJEEoibjrs+m/IZJnY7/XTi/ENfYfcOlp6J8R2SQXWa75TMtjkId9HomS2ZkK9ESM6XFZ9n8MeZUrkdya0Y6+1yBZrKXUPKFkq3/BsXZWZ75LT8SYPoX89yW5MkL7P0pqRkJbbdt9Gv0XHGvHtOfrNUZsuaBcUXMxOTL1bPWtMXGWyPIx8hDLkUFsB3yBiYE4jelcaIjJlV4GnIecTKyd3+sMHQk6UTPVwvrsRGy2oGgP/OLyO/uQnT7StEZmwUHE1nsXmSVB0xyJHe9GTKaFFMHgxcTExMTExMTExBQt/wPtRjB5yTmw/QAAAABJRU5ErkJggg==" class="w-100">
</div>
</div>
<div class="row">
<div class="col">
<h5 class="no-margin"></h5>
<h5 class="no-margin" :class="{ 'text-info': parameters.type === 2, 'semi-bold': parameters.type === 2}">Drop Off</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-t-20" v-if="parameters.type !== ''">
<div class="col bg-master-lightest p-t-15">
<div class="row m-b-20 text-info">
<div class="col">
<h5 class="m-b-0 m-t-0 bold">Packing list</h5>
</div>
</div>
<div class="row">
<div class="col">
<validation-wrapper-component selectable class="m-b-15" :validator="$v.productType">
<label>Product Type</label>
<selectable-component :endpoint="route('api.segment.air_shipment.price.list')" :section="section" valueColumn="details" :labelColumn="['name']" v-model="productType"></selectable-component>
</validation-wrapper-component>
</div>
<div class="col">
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.productDesc">
<label>Product Description</label>
<input class="form-control" v-model="parameters.product.productDesc">
</validation-wrapper-component>
</div>
</div>
<div class="row">
<div class="col">
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.quantity">
<label>Quantity</label>
<input class="form-control" type="number" v-model="parameters.product.quantity">
</validation-wrapper-component>
</div>
<div class="col">
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.totalWeight">
<label>Total Weight (KG)</label>
<input type="text" class="form-control fs-12" v-model.trim="parameters.product.totalWeight" v-money="weight">
</validation-wrapper-component>
</div>
<div class="col" v-if="productTypeArray['hasGram'] === 'true'">
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.gram">
<label>Gram</label>
<input class="form-control" v-model="parameters.product.gram">
</validation-wrapper-component>
</div>
</div>
<div class="row" v-if="productTypeArray['hasDimensionCharges'] === 'true'">
<div class="col-4">
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.width">
<label>Width</label>
<input class="form-control" v-model="parameters.product.width">
</validation-wrapper-component>
</div>
<div class="col-4">
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.length">
<label>Length</label>
<input class="form-control" v-model="parameters.product.length">
</validation-wrapper-component>
</div>
<div class="col-4">
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.height">
<label>Height</label>
<input class="form-control" v-model="parameters.product.height">
</validation-wrapper-component>
</div>
</div>
<p v-if="productTypeArray['isProhibited'] === 'true'" class="text-danger text-center">This item is blacklisted to ship to bangladish. <span class="text-underline text-complete">Black listed items list</span></p>
<div class="row">
<div class="col">
<div class="btn btn-complete w-100 m-b-15 padding-10" :class="{'disabled': productTypeArray['isProhibited'] === 'true', 'not-allowed': productTypeArray['isProhibited'] === 'true'}" @click="addProduct()">Add Product</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="margin-15 padding-15 bg-master-lightest">
<p class="m-b-15 bold fs-18">Order Summary</p>
<p class="m-b-15 bold fs-15">Products</p>
<div class="row" v-if="productList.length != 0">
<div class="col">
<div class="row m-l-0 m-r-0 m-b-10" v-for="(cartItem, index) in productList">
<div class="col p-t-10 p-b-10 bg-white">
<div class="row">
<div class="col">
<p class="bold no-margin">{{cartItem.productDesc}}</p>
</div>
</div>
<div class="row">
<div class="col">
<p class="muted no-margin">{{ cartItem.quantity }} &nbsp; X &nbsp; {{ cartItem.productType }} - {{ cartItem.totalWeight }}KG</p>
</div>
</div>
</div>
<div class="col-auto bg-white pointer" @click="removeElement(index)">
<div class="row h-100 align-content-center justify-content-center">
<div class="col">
<i class="fa fa-times fs-12"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-l-0 m-r-0 m-b-10 b-a rounded b-primary-light" v-if="parameters.product.productDesc != '' || productType != ''">
<div class="col p-t-10 p-b-10 bg-white">
<div class="row">
<div class="col">
<p class="bold no-margin">{{parameters.product.productDesc}}</p>
</div>
</div>
<div class="row">
<div class="col">
<p class="muted no-margin">{{parameters.product.quantity}} &nbsp; X &nbsp; {{ productTypeArray['name'] }} - {{ parameters.product.totalWeight }}KG</p>
</div>
</div>
</div>
</div>
<div class="row" v-if="parameters.product.productDesc == '' && productType == '' && productList.length == 0">
<div class="col">
<p class="muted">There are no items added yet!</p>
</div>
</div>
<div class="row">
<div class="col">
<p class="bold fs-15">Quotation</p>
<div class="row justify-content-between m-b-5">
<div class="col">Total Weight</div>
<div class="col">{{ parameters.totalWeight }} kg</div>
</div>
<div class="row justify-content-between m-b-5">
<div class="col">Service Type</div>
<div class="col">{{ parameters.type === 1 ? 'Pick Up' : parameters.type === 2 ? 'Drop Off' : '' }}</div>
</div>
<div class="row justify-content-between m-b-5">
<div class="col">Price Per kg</div>
<div class="col">{{ parameters.pricePerKg }} RM</div>
</div>
<div class="row justify-content-between m-b-5">
<div class="col">Shipping Fee</div>
<div class="col">{{ parameters.totalShipping }} RM</div>
</div>
<div class="row justify-content-between">
<div class="col">Special Product Tax</div>
<div class="col">{{ parameters.totalTax }} RM</div>
</div>
<p class="text-complete text-underline pointer">What is this cost?</p>
<div class="row m-t-15 justify-content-between">
<div class="col fs-20 bold">Total</div>
<div class="col fs-20 bold">{{ parameters.totalCombine }} RM</div>
</div>
</div>
</div>
</div>
<div class="row m-t-15">
<div class="col">
<div class="btn btn-success w-100 m-b-15 padding-10" @click="step++">Procced Next</div>
</div>
</div>
</div>
</div>
<div class="row" v-if="step === 2">
<div class="col">
<new-registration-form-component section="loginSection"></new-registration-form-component>
<div class="row m-t-15">
<div class="col-auto">
<div class="btn btn-default w-100 m-b-15 padding-10" @click="step--">back</div>
</div>
<div class="col-auto">
<div class="btn btn-success w-100 m-b-15 padding-10" @click="step++">Procced Next</div>
</div>
</div>
</div>
</div>
<div class="row" v-if="step === 3">
<div class="col-8">
<div class="row m-t-20">
<div class="col bg-master-lightest p-t-15">
<div class="row">
<div class="col">
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.pickUpAddress">
<label>Pick up address</label>
<input class="form-control" v-model="parameters.pickUpAddress">
</validation-wrapper-component>
</div>
<div class="col">
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.pickUpDate">
<label>Pick up date</label>
<date-picker-component v-model.lazy="parameters.pickUpDate"></date-picker-component>
</validation-wrapper-component>
</div>
</div>
<div class="row">
<div class="col">
<validation-wrapper-component class="m-b-15" :validator="$v.parameters.deliveryAddress">
<label>Delivery address</label>
<input class="form-control" v-model="parameters.deliveryAddress">
</validation-wrapper-component>
</div>
</div>
</div>
</div>
<div class="row m-t-20">
<div class="col">
<p>Addon Wrapping service</p>
<div class="row m-l-5">
<div class="col-4 p-r-10 p-l-0">
<div class="padding-20 bg-master-light text-center pointer" @click="parameters.wrappingService = 'Pick Up' " :class="{'bg-complete-light': parameters.wrappingService === 'Pick Up', 'text-white': parameters.wrappingService === 'Pick Up',}">
Wrap my goods
</div>
</div>
<div class="col-4 p-l-10">
<div class="padding-20 bg-master-light text-center pointer" @click="parameters.wrappingService = 'Drop Off'" :class="{'bg-complete-light': parameters.wrappingService === 'Drop Off', 'text-white': parameters.wrappingService === 'Drop Off',}">
No Thanks
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="margin-15 padding-15 bg-master-lightest">
<p class="m-b-15 bold fs-18">Order Summary</p>
<div class="row m-b-15">
<div class="col">
<p class="bold fs-15">Products</p>
<p>1x product1 </p>
</div>
</div>
<div class="row">
<div class="col">
<p class="bold fs-15">Quotation</p>
<div class="row justify-content-between m-b-5">
<div class="col">Total Weight</div>
<div class="col">15 kg</div>
</div>
<div class="row justify-content-between m-b-5">
<div class="col">Service Type</div>
<div class="col">{{ parameters.servicetype }}</div>
</div>
<div class="row justify-content-between m-b-5">
<div class="col">Price Per kg</div>
<div class="col">26 RM</div>
</div>
<div class="row justify-content-between m-b-5">
<div class="col">Shipping Fee</div>
<div class="col">200 RM</div>
</div>
<div class="row justify-content-between">
<div class="col">Special Product Tax</div>
<div class="col">50 RM</div>
</div>
<p class="text-complete text-underline pointer">What is this cost?</p>
<div class="row m-t-15 justify-content-between">
<div class="col fs-20 bold">Total</div>
<div class="col fs-20 bold">50 RM</div>
</div>
</div>
</div>
</div>
<div class="row m-t-15">
<div class="col">
<div class="btn btn-success w-100 m-b-15 padding-10" @click="step++">Procced Next</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import componentHandler from '../../../general/mixins/componentHandler';
import { required } from "vuelidate/lib/validators";
import { VMoney } from 'v-money'
export default {
data(){
return {
section: 'createDelvieryOrderSectionComponent',
weight: {decimal: '.',thousands: ',', precision: 1},
step: 1,
productType: '',
productList: [],
parameters : {
type: '',
product: {
productType: '',
productDesc: '',
quantity: '1',
totalWeight: 10,
gram: '',
width: '',
length: '',
height: '',
},
pickUpAddress: '',
pickUpDate: '',
deliveryAddress: '',
wrappingService: '',
tax: 0,
totalWeight: 0,
pricePerKg: 0,
totalShipping: 0,
totalTax: 0,
totalCombine: 0,
}
}
},
validations: {
productType: { },
parameters: {
product: {
productDesc: { },
quantity: { },
totalWeight: { },
gram: { },
width: { },
length: { },
height: { },
},
pickUpAddress: { },
pickUpDate: { },
deliveryAddress: { },
wrappingService: { },
}
},
computed: {
productTypeArray() {
return this.productType === '' ? '' : JSON.parse(this.productType);
},
},
methods: {
addProduct() {
// todo: change this to vuelidate
if (this.parameters.product.productDesc != '' && this.productType != '') {
// add weight
this.parameters.totalWeight += parseInt(this.parameters.product.totalWeight);
// has tax
if (this.productTypeArray['tax']) {
this.parameters.totalTax += parseInt(this.productTypeArray['tax']);
}
var itemShippingFee = 0;
// pricePerKg * kg
if (this.productTypeArray['pricePerKg']) {
// add pricePerKg
this.parameters.pricePerKg += parseInt(this.productTypeArray['pricePerKg']);
itemShippingFee += parseInt(this.productTypeArray['pricePerKg']) * parseInt(this.parameters.product.totalWeight);
}
// pricePerPcs * quantity
if (this.productTypeArray['pricePerPcs']) {
itemShippingFee += parseInt(this.productTypeArray['pricePerPcs']) * this.parameters.product.quantity;
}
this.productList.push(
{
productType: this.productTypeArray['name'],
productDesc: this.parameters.product.productDesc,
quantity: this.parameters.product.quantity,
gram: '',
width: '',
length: '',
height: '',
totalWeight: this.parameters.product.totalWeight,
itemTax: this.productTypeArray['tax'],
pricePerKg: this.productTypeArray['pricePerKg'],
itemShippingFee: itemShippingFee,
}
);
this.parameters.totalShipping += itemShippingFee;
this.parameters.totalCombine += ( itemShippingFee + parseInt(this.productTypeArray['tax'] == '' ? 0 : this.productTypeArray['tax']) );
this.parameters.product.productDesc = '' ;
this.productType = '';
}
},
removeElement(index) {
var itemRemoved = this.productList.splice(index, 1)[0];
// remove weight
this.parameters.totalWeight -= parseInt(itemRemoved['totalWeight']);
// has tax
if (itemRemoved['itemTax']) {
this.parameters.totalTax -= parseInt(itemRemoved['itemTax']);
}
if (itemRemoved['itemShippingFee']) {
this.parameters.totalShipping -= parseInt(itemRemoved['itemShippingFee']);
}
// remove pricePerKg
if (itemRemoved['pricePerKg']) {
this.parameters.pricePerKg -= parseInt(itemRemoved['pricePerKg']);
}
this.parameters.totalCombine -= ( parseInt(itemRemoved['itemShippingFee']) + parseInt(itemRemoved['itemTax'] == '' ? 0 : parseInt(itemRemoved['itemTax'])) );
}
},
mixins: [componentHandler],
directives: {money: VMoney}
}
</script>
Reference in New Issue View Git Blame Copy Permalink