77 lines
1.9 KiB
Vue
77 lines
1.9 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>
|