Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | <template>
<ul class="p-0">
<li v-for="order_bundle in order_bundles" :key="order_bundle.id" class="p-3 mb-3">
<div class="d-flex flex-column">
<div class="row">
<div class="col-6">
<div v-for="(product, index) in order_bundle.bundle.products" :key="product.id + index">
<div v-if="(index - 1) % 2" class="row w-100 p-0 m-0">
<div v-if="order_bundle.bundle.products[index + 1]" class="row w-100 p-0 m-0">
<div class="col-5 p-0 d-flex flex-column">
<div class="m-auto">
<PreloaderImage :classStyle="'m-auto gold-border'" :image="order_bundle.bundle.products[index].image[0].url"/>
</div>
<div class="d-flex flex-column justify-content-between mt-3">
<span class="font-weight-light block-with-text">
{{ order_bundle.bundle.products[index].title }}
</span>
<span class="font-weight-light text-center grey">
${{
order_bundle.bundle.products[index].price
| formatNumber
}}
</span>
</div>
</div>
<div class="col-2 p-0 mx-auto mt-3">
<p class="text-center plus grey">+</p>
</div>
<div class="col-5 p-0 d-flex flex-column">
<div class="m-auto">
<PreloaderImage :classStyle="'m-auto gold-border'" :image="order_bundle.bundle.products[index + 1].image[0].url"/>
</div>
<div class="d-flex flex-column justify-content-between mt-3">
<span class="font-weight-light block-with-text">
{{ order_bundle.bundle.products[index + 1].title }}
</span>
<span class="font-weight-light text-center grey">
${{ order_bundle.bundle.products[index + 1].price | formatNumber }}
</span>
</div>
</div>
</div>
<div v-else class="d-flex justify-content-center">
<div class="col-5 p-0 d-flex flex-column">
<div class="m-auto">
<PreloaderImage :classStyle="'m-auto gold-border'" :image="order_bundle.bundle.products[index].image[0].url"/>
</div>
<div class="d-flex flex-column justify-content-between mt-3">
<span class="font-weight-light block-with-text">
{{ order_bundle.bundle.products[index].title }}
</span>
<span class="font-weight-light text-center grey">
${{ order_bundle.bundle.products[index].price | formatNumber }}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 d-flex flex-column col-6">
<p class="text-uppercase font-weight-bold m-0">
Bundle Price: ${{ order_bundle.bundle.price }}
</p>
<p class="save-price">
You Save: $
{{ order_bundle.bundle.price - order_bundle.bundle.products.reduce((prVal, curVal) => prVal + curVal.price, 0) }}!
</p>
</div>
</div>
<div class="w-100 d-flex justify-content-end">
<span class="icon icon-trash m-2" v-on:click="removeBundle(order_bundle)"></span>
</div>
</div>
</li>
</ul>
</template>
<script>
import { mapActions } from "vuex";
import PreloaderImage from "~/components/PreloaderImage";
export default {
name: "OrderBundles",
props: {
order_bundles: Array,
},
components: { PreloaderImage },
methods: {
...mapActions({
removeBundle: "order/removeBundle",
}),
}
};
</script>
<style scoped>
li {
background: #151515;
}
.image-wrap {
min-width: 25%;
}
.save-price {
color: #5bb85d;
}
.icon-trash {
display: inline-block;
width: 18px;
height: 20px;
background-size: cover;
background-image: url("../../assets/icons/trash-can-solid.svg");
filter: invert(39%) sepia(20%) saturate(3094%) hue-rotate(318deg)
brightness(94%) contrast(92%);
}
.block-with-text {
overflow: hidden;
line-height: 1.2em;
max-height: 2.4em;
text-align: center;
}
</style> |