75 lines
2.1 KiB
Vue
75 lines
2.1 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">
|
|
<radioCard />
|
|
</div>
|
|
<div class="col">
|
|
<radioCard />
|
|
</div>
|
|
<div class="col">
|
|
<radioCard />
|
|
</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">
|
|
<radioCard />
|
|
</div>
|
|
<div class="col">
|
|
<radioCard />
|
|
</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 '@/commonComponents/baseTemplate/baseTemplate';
|
|
import radioCard from '@/uxComponents/radioCard/radioCard';
|
|
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,
|
|
radioCard
|
|
}
|
|
}
|
|
</script>
|