104 lines
No EOL
3.8 KiB
Vue
104 lines
No EOL
3.8 KiB
Vue
<template>
|
|
<div>
|
|
<baseTemplate
|
|
:currentCarInfo="year + ' ' + make + ' ' + model"
|
|
neededCarInfo="What is your damage?"
|
|
>
|
|
<div class="damage-section text-center">
|
|
<div class="choose-damage row">
|
|
<div class="col">
|
|
<imageButton
|
|
btnImg="windshield-damage.svg"
|
|
altText="Windshield"
|
|
damageTitle="Windshield"
|
|
ariaLabel="Windshield"
|
|
v-on:click="chooseDamage('windshield')"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<imageButton
|
|
btnImg="side-window-damage.svg"
|
|
altText="Side Window"
|
|
damageTitle="Side door"
|
|
ariaLabel="Side door"
|
|
v-on:click="chooseDamage('side-window')"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<imageButton
|
|
btnImg="back-glass-damage.svg"
|
|
altText="Back Glass"
|
|
damageTitle="Back glass"
|
|
ariaLabel="Back glass"
|
|
v-on:click="chooseDamage('side-glass')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<transition name="fade">
|
|
<div v-if="damage" class="how-bad mt-3">
|
|
<span class="text-center fs-6 fw-bold">How bad is it?</span>
|
|
<div class="choose-how-bad row mt-2">
|
|
<div class="col">
|
|
<imageButton
|
|
btnImg="windshield-damage.svg"
|
|
altText="Windshield"
|
|
damageTitle="Windshield"
|
|
ariaLabel="Windshield"
|
|
/>
|
|
</div>
|
|
<div class="col">
|
|
<imageButton
|
|
btnImg="side-window-damage.svg"
|
|
altText="Side Window"
|
|
damageTitle="Side door"
|
|
ariaLabel="Side door"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<div class="next-action row">
|
|
<div class="col">
|
|
<div v-on:click="goBack" class="change">
|
|
<span>Change Vehicle</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</baseTemplate>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import baseTemplate from '../BaseTemplate';
|
|
import imageButton from '@/sharedcomponents/Buttons/ImageButton'
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'SelectCar',
|
|
computed: {
|
|
...mapState(['year', 'make', 'model'])
|
|
},
|
|
data(){
|
|
return {
|
|
damage: ''
|
|
}
|
|
},
|
|
methods: {
|
|
chooseDamage(damage){
|
|
this.damage = damage
|
|
console.log(this.damage)
|
|
},
|
|
goBack(){
|
|
this.$store.state.slideTransition = 'slide_reverse';
|
|
this.$store.commit('removeStyle')
|
|
this.$router.push(`/select-style?year=${this.$store.state.year}&make=${this.$store.state.make}`);
|
|
}
|
|
},
|
|
components: {
|
|
baseTemplate,
|
|
imageButton
|
|
}
|
|
}
|
|
</script> |