new Vue({
el: '#app',
data() {
return {
dimensions: [
"31 x 16 x 10", "33 x 20 x 15", "35 x 25 x 17", "40 x 31 x 20", "40 x 35 x 25", "41 x 40 x 30", "45 x 45 x 37", "50 x 50 x 40", "60 x 50 x 50"
],
weights: [
"0 - 1", "1 - 2", "2 - 3", "3 - 5", "5 - 7", "7 - 10", "10 - 15", "15 - 20", "20 - 30"
],
selectedDimension: -1,
selectedWeight: -1,
prices: [
0.83, 1.65, 2.48, 4.13, 5.83, 8.2, 12.49, 16.67, 25
]
}
},
computed: {
highestSelection() {
return this.selectedDimension > this.selectedWeight? this.selectedDimension : this.selectedWeight;
},
managementFee() {
return 0; // add your calculation here
},
returnRate() {
return 0; // add your calculation here
},
storageFee() {
return 0; // add your calculation here
},
shipmentItaly() {
return this.highestSelection != -1 ? this.prices[this.highestSelection]: 0; // example only. add your calculation here
},
shipmentEurope() {
return this.shipmentItaly * 1.2; // example only. add your calculation here
},
shipmentWorldwide() {
return this.shipmentItaly * 2; // example only. add your calculation here
}
},
filters: {
price(val) {
return val.toFixed(2);
}
}
})
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
#app {
font-family: 'Roboto Mono', monospace;
display: grid;
gap: 1rem;
justify-content: center;
}
#app > * {
padding: 1rem;
background: #eee;
}
.dimensions, .weights {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-auto-flow: column;
gap: .5rem;
}
.prices {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
<div class="dimensions"><label v-for="(dimension, i) in dimensions" :key="`dimension-${i}`"><input type="radio" name="dimension" v-model="selectedDimension" :value="i">{{ dimension }} cm</label></div>
<div class="weights"><label v-for="(weight, i) in weights" :key="`weight-${i}`"><input type="radio" name="weight" v-model="selectedWeight" :value="i">{{ weight }} kg</label></div>
<div class="prices">
<div>MANAGEMENT FEE</div>
<div>RETURN RATE</div>
<div>STORAGE FEE</div>
<div>{{ managementFee | price }} €</div>
<div>{{ returnRate | price }} €</div>
<div>{{ storageFee | price }} €</div>
</div>
<div class="shipments">
<div>{{ shipmentItaly | price }} € Italy Shipping</div>
<div>{{ shipmentEurope | price }} € Europe Shipping</div>
<div>{{ shipmentWorldwide | price }} € WORLDWIDE* ZONE 6</div>
</div>
</div>