materio-d9/web/themes/custom/materiotheme/vuejs/components/Content/Showroom.vue

79 lines
2.2 KiB
Vue

<template>
<article class="showroom">
<section class="images" v-switcher>
<!-- <figure v-html="item.field_visuels"></figure> -->
<figure
v-for="(img, index) in item.images"
:key="img.url"
class="lazy"
v-lazy="index"
>
<img
:data-src="img.style_showroomhome.url"
@click="setLightBox(index)"
/>
</figure>
</section>
<section class="content">
<header>
<h1>{{item.name}}</h1>
</header>
<section class="description" v-html="item.description" />
<address>
<span v-if="item.address.organization">{{ item.address.organization }}</br></span>
<span v-if="item.address.address_line1">{{ item.address.address_line1 }}</br></span>
<span v-if="item.address.locality">{{ item.address.locality }}</br></span>
<span v-if="item.country.country_name">{{ item.country.country_name }}</span>
</address>
<div class="phone" v-html="item.phone" />
<a class="email" :href="'mailto:'+item.email" v-html="item.email" />
<div class="website">
<a _target="_blank" :href="item.website.url">{{ item.website.title }}</a>
</div>
</section>
</article>
</template>
<script>
import { mapState, mapActions } from 'vuex'
// import JSONAPI from 'vuejs/api/json-axios'
import router from 'vuejs/route'
import cardMixins from 'vuejs/components/cardMixins'
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
export default {
name: "Showroom",
router,
mixins: [cardMixins],
props: ['item'],
// data(){
// return {
// alias: this.item.view_node.replace(/^.?\/showroom\//g, '')
// }
// },
computed: {
...mapState({
coolLightBoxItems: state => state.Common.coolLightBoxItems,
coolLightBoxIndex: state => state.Common.coolLightBoxIndex
}),
},
methods:{
...mapActions({
setcoolLightBoxItems: 'Common/setcoolLightBoxItems',
setcoolLightBoxIndex: 'Common/setcoolLightBoxIndex'
}),
setLightBox (index) {
this.setcoolLightBoxItems(this.item.images)
this.setcoolLightBoxIndex(index)
}
}
}
</script>
<style lang="scss" scoped>
</style>