Files
portal/resources/assets/vue/components/order/elements/OrderComponent.vue
T
omair saleh 9fe0757baf big commit
2021-03-22 08:46:33 +08:00

118 lines
7.6 KiB
Vue

<template>
<div class="row m-b-10 parentContainer bg-white no-margin">
<div class="col">
<div class="row no-margin align-items-center justify-content-center p-t-10 p-b-10">
<div class="col">
<div class="row no-margin align-items-center justify-content-center">
<div class="col no-padding all-caps">
<div class="row">
<div class="col fs-10">
<span class="bold">#{{order.marking}}</span>
</div>
</div>
<div class="row d-none">
<div class="col">
<div class="fs-9 muted all-caps">Importer:
<a :href="route('dashboard.importer', order.company.id)">
<span class="fs-9 text-complete bold">CIEF/685CLY</span>
</a>
</div>
</div>
</div>
</div>
<div class="col text-right p-r-0 all-caps hide">
<div class="row">
<div class="col fs-10">
<span class="bold text-danger">pending supplier</span>
<!---->
</div>
</div>
<div class="row fs-9 ">
<div class="col muted">
<span class="inline v-align-middle">Waiting for supplier to deliver order to warehouse</span>
<!---->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="order-history-border"></div>
</div>
</div>
<div class="row fs-12 p-t-15 p-b-15 m-l-0 m-r-0 ">
<div class="col-3 d-none d-md-block">
<div class="row no-margin">
<div class="col no-padding relative b-a b-grey b-dashed qr-container">
<a :href="route('order.qr.download', order.id)" target="_blank">
<div class="absolute padding-10 bg-white b-b b-l b-grey b-dashed pdf-button" style="right: 0px; top: 0px;">
<svg
xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" style="fill: rgb(0, 0, 0);">
<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>
<path d="M22.575,162.325v-152.65h80.195l38.055,38.055v114.595z" fill="#ffffff"></path>
<path d="M102.34,10.75l37.41,37.41v113.09h-116.1v-150.5h78.69M103.2,8.6h-81.7v154.8h120.4v-116.1l-38.7,-38.7z" fill="#c74343"></path>
<path d="M102.125,48.375v-38.7h0.645l38.055,38.055v0.645z" fill="#ffd9d9"></path>
<path d="M103.2,11.61l35.69,35.69h-35.69v-35.69M103.2,8.6h-2.15v40.85h40.85v-2.15l-38.7,-38.7zM52.245,129c-3.01,0 -4.945,-2.365 -4.945,-4.515c0,-5.805 7.74,-10.75 17.845,-14.19c4.3,-7.525 8.385,-16.985 11.18,-25.585c-2.365,-6.235 -3.87,-12.04 -3.87,-16.125c0,-2.365 0.43,-4.3 1.29,-5.59c1.075,-1.72 2.795,-2.795 4.73,-2.795c1.935,0 3.44,1.075 4.3,2.795c0.645,1.29 1.075,3.01 1.075,5.375c0,4.085 -1.075,9.89 -3.225,16.555c2.795,7.095 7.095,14.405 12.04,19.78c7.74,-0.645 13.975,-0.43 17.845,0.86c4.3,1.505 5.375,3.87 5.375,5.805c0,1.935 -0.86,6.235 -7.955,6.235c-6.02,0 -11.825,-3.44 -16.77,-8.385c-7.955,0.86 -16.125,2.58 -23.005,4.945c-5.16,8.385 -10.75,14.835 -15.91,14.835zM51.6,124.485c0,0 0.215,0.215 0.645,0.215c2.365,0 5.59,-3.225 9.03,-8.17c-5.805,2.58 -9.675,5.375 -9.675,7.955zM97.18,108.575c3.44,2.795 7.095,4.515 10.965,4.515c3.655,0 3.655,-1.29 3.655,-1.935c0,-0.86 -1.72,-1.505 -2.365,-1.72c-2.15,-0.645 -5.16,-1.075 -9.03,-1.075c-1.075,0.215 -2.15,0.215 -3.225,0.215zM78.905,90.73c-2.15,6.02 -4.73,12.255 -7.74,17.845c5.375,-1.505 11.18,-2.58 16.555,-3.225c-3.44,-4.515 -6.45,-9.675 -8.815,-14.62zM78.475,64.5c-0.43,0 -0.645,0 -1.075,0.645c-0.215,0.43 -0.645,1.505 -0.645,3.44c0,2.58 0.43,5.59 1.505,9.03c0.86,-3.655 1.29,-6.88 1.29,-9.46c0,-1.935 -0.43,-3.01 -0.43,-3.44c-0.215,-0.215 -0.43,-0.215 -0.645,-0.215z" fill="#c74343"></path>
</g>
</g>
</svg>
</div>
</a>
<img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl={&quot;hash&quot;:&quot;{1*23456}&quot;,&quot;id&quot;:3573}" class="w-100">
</div>
</div>
<div class="row hide">
<div class="col">
<div class="row m-b-15">
<div class="col">
<small class="muted all-caps">Delivery Address</small>
</div>
</div>
<div class="row">
<div class="col">
<div class="bold m-b-5">Business Address</div>
<div class="hint-text semi-bold">016-337 8188</div>
<div class="m-t-15 m-b-15 hint-text">20 Jalan Taming 8 Taming Jaya Industrial Park Balakong 43300 Selangor Malaysia</div>
<small class="block text-complete pointer all-caps">Change Address</small>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<qr-notice-component :id="order.id"></qr-notice-component>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
'data': {
type: Object,
required: true
}
},
data() {
return {
order: this.data
}
},
watch: {
'data': function() {
this.order = this.data;
}
},
}
</script>