mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/izyim.git
synced 2026-08-19 04:24:00 +00:00
Omair Saleh
80 lines
4.8 KiB
Vue
80 lines
4.8 KiB
Vue
<template>
|
|
<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">
|
|
<div class="row no-margin">
|
|
<div class="col no-padding relative b-a b-grey b-dashed qr-container">
|
|
<a :href="route('order.download.qr', {orderId: this.order.id, type: 'pdf'})" target="_blank">
|
|
<div class="absolute padding-10 bg-white b-b b-l b-grey b-dashed pdf-button" style="right: 0; top: 0;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
|
|
width="30" height="30"
|
|
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><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='this.qrURL()' 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>
|
|
<order-delivery-address-component :data="this.data"></order-delivery-address-component>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-9 p-l-0">
|
|
<div class="row m-l-0 m-r-0 m-b-10">
|
|
<div class="col p-l-0">
|
|
<small class="muted all-caps">Order History</small>
|
|
</div>
|
|
</div>
|
|
<order-history-component :data="this.data"></order-history-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
.pdf-button {
|
|
visibility: hidden;
|
|
}
|
|
.qr-container:hover .pdf-button {
|
|
visibility: visible;
|
|
}
|
|
</style>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
'data': {
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
order: this.data,
|
|
}
|
|
},
|
|
watch: {
|
|
'data': function() {
|
|
this.order = this.data;
|
|
}
|
|
},
|
|
methods: {
|
|
route: route,
|
|
qrURL(){
|
|
return 'https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl={"hash":"{1*23456}","id":'+this.order.id+'}';
|
|
}
|
|
}
|
|
}
|
|
</script> |