71 lines
2.4 KiB
Vue
71 lines
2.4 KiB
Vue
<template>
|
||
<div class="rubric-block">
|
||
<div class="rubric-block__header">
|
||
<h2 class="h2 rubric-block__header-title">
|
||
Рубрики
|
||
</h2>
|
||
<button class="button m--arrow rubric-block__link" v-if="$route.name !== 'rubric'" @click="next('rubric')">Смотреть все</button>
|
||
<div class="p rubric-block__description">
|
||
IT-радио - это уникальная платформа для обмена опытом, знаниями и обсуждения актуальных вопросов, связанных с разработкой программного обеспечения, искусственного интеллекта, интернета вещей и других направлений IT-индустрии
|
||
</div>
|
||
</div>
|
||
<template v-if="showLoader">
|
||
<div class="loader">
|
||
<div class="spinner"/>
|
||
Загрузка данных
|
||
</div>
|
||
</template>
|
||
<div v-else class="rubric-block__list">
|
||
<div class="rubric-block__item" v-for="rubrik in rubriks" :key="`rubrik_${rubrik.id}`">
|
||
<div class="title rubric-block__title">{{rubrik.name}}</div>
|
||
<div class="p rubric-block__description m--50">{{rubrik.title}}</div>
|
||
<button class="button m--arrow rubric-block__btn" @click="showModalRubric(rubrik.id)">Узнать больше</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<RubricModal :showModal="isShowModalRubric" @hideModal="hiddenModalRubric" :selectRubric="ModalTemplate"/>
|
||
</template>
|
||
|
||
<script>
|
||
import RubricModal from "@/components/rubric-modal.vue";
|
||
import {app} from "@/services";
|
||
|
||
export default {
|
||
name: 'rubric-block',
|
||
components: {RubricModal},
|
||
data(){
|
||
return{
|
||
isShowModalRubric: false,
|
||
ModalTemplate:null,
|
||
rubriks: [],
|
||
showLoader: false,
|
||
}
|
||
},
|
||
created() {
|
||
this.getRubriks();
|
||
},
|
||
methods:{
|
||
getRubriks() {
|
||
this.showLoader = true;
|
||
app.getRubriks().then((data) => {
|
||
this.showLoader = false;
|
||
this.rubriks = data;
|
||
}).catch(err => {
|
||
this.showLoader = false;
|
||
console.log(err)
|
||
})
|
||
},
|
||
showModalRubric(key){
|
||
this.ModalTemplate = key
|
||
this.isShowModalRubric = true;
|
||
},
|
||
hiddenModalRubric(){
|
||
this.isShowModalRubric = false;
|
||
},
|
||
next(name){
|
||
this.$router.push({name})
|
||
}
|
||
}
|
||
}
|
||
</script>
|