Swift
81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
<template>
|
|
<div class="FAQ--page page">
|
|
<hero title="سوالات متداول">
|
|
<!-- <button class="btn btn-primary" @click.prevent="faqModal = true">سوال خود را بپرسید</button>-->
|
|
</hero>
|
|
<section class="s1">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div v-for="(item, index) in faqs" :key="item._id" class="col-12 mb-3">
|
|
<div
|
|
:id="`q${item._id}`"
|
|
class="q-a fadeInAnim"
|
|
:class="index === 0 ? 'first' : null"
|
|
@click="toggle(item._id)"
|
|
>
|
|
<i class="fas fa-chevron-down"></i>
|
|
<h3>{{ item.question }}</h3>
|
|
<div class="answer">
|
|
<b>پاسخ</b>
|
|
<p>{{ item.answer }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!faqs.length" class="col-12 no-post">
|
|
<h2>هیچ پستی در این صفحه وجود نداد.</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- <el-dialog title="سوال خودرا بپرسید" :visible.sync="faqModal">-->
|
|
<!-- <el-input type="textarea" autocomplete="off"></el-input>-->
|
|
<!-- <span slot="footer" class="dialog-footer">-->
|
|
<!-- <el-button @click="faqModal = false">لغو</el-button>-->
|
|
<!-- <el-button class="submit" type="success" @click="faqModal = false">ثبت</el-button>-->
|
|
<!-- </span>-->
|
|
<!-- </el-dialog>-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FadeInAnimation from '~/mixins/FadeInAnimation'
|
|
|
|
export default {
|
|
name: 'FAQPage',
|
|
mixins: [FadeInAnimation],
|
|
async asyncData({ $axios, error }) {
|
|
try {
|
|
const faqs = await $axios.get(`/api/public/faq`)
|
|
return {
|
|
faqs: faqs.data
|
|
}
|
|
} catch (e) {
|
|
error({ status: 404, message: 'There is a problem here' })
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
faqs: null,
|
|
faqModal: false
|
|
}
|
|
},
|
|
head() {
|
|
return {
|
|
title: 'آسان سرویس | سوالات متداول'
|
|
}
|
|
},
|
|
mounted() {
|
|
$('.FAQ--page .q-a:not(.first)').addClass('collapsed')
|
|
$('.FAQ--page .q-a.collapsed .answer').slideUp()
|
|
},
|
|
methods: {
|
|
toggle(id) {
|
|
$(`#q${id}`).toggleClass('collapsed')
|
|
$(`#q${id} .answer`).slideToggle()
|
|
}
|
|
}
|
|
}
|
|
</script>
|