74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<v-row no-gutters>
|
|
<v-col cols="12" >
|
|
<p class="mb-2 body">{{address.firstname}} {{address.lastname}}</p>
|
|
<p class="mb-2 body" v-if="address.streetNoOne">{{address.streetNoOne}}<span v-if="address.streetNoTwo">, {{address.streetNoTwo}}</span> </p>
|
|
<p class="mb-2 body" v-else>{{address.street[0]}}<span v-if="address.street[1]">, {{address.street[1]}}</span> </p>
|
|
<p class="mb-2 body">
|
|
{{address.city}},
|
|
<span v-if="stateName.length">{{stateName[0].label}} - </span>
|
|
{{address.postcode}}
|
|
</p>
|
|
<p class="mb-2 body">
|
|
<span v-if="address.countryId">{{address.countryId}}</span>
|
|
</p>
|
|
<p class="mb-2 body">
|
|
T:<a href="tel:"> {{address.telephone}}</a>
|
|
</p>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { createHelpers } from "vuex-map-fields";
|
|
import { fetchStates } from "@/services/util.service";
|
|
const { mapFields } = createHelpers({
|
|
getterType: "accountOne/getField",
|
|
mutationType: "accountOne/updateField"
|
|
});
|
|
/*eslint-disable*/
|
|
export default {
|
|
name: "BillingAddressComponent",
|
|
props: ["address"],
|
|
components: {},
|
|
data: () => ({
|
|
stateName: [],
|
|
}),
|
|
computed: {
|
|
userAuth: function() {
|
|
return this.$store.state.auth.userAuth;
|
|
},
|
|
verifyAddress: function() {
|
|
if (this.userAuth) {
|
|
return this.$store.state.accountOne.address;
|
|
}
|
|
},
|
|
countryAndStatesList() {
|
|
return this.$store.state.accountOne.allCountries;
|
|
},
|
|
allCountries: function() {
|
|
return this.$store.state.accountOne.allCountries.map(countries => {
|
|
return {
|
|
value: countries.id,
|
|
label: countries.fullNameEnglish
|
|
};
|
|
});
|
|
},
|
|
...mapFields(["one"]),
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {},
|
|
created() {
|
|
if(this.address){
|
|
this.stateNameList = fetchStates(this.address.countryId,this.countryAndStatesList);
|
|
this.stateName = this.stateNameList.filter(obj => {
|
|
if (obj.value == this.address.regionId) return obj;
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|