back-end done
This commit is contained in:
Amir Mohamadi
+26
-10
@@ -1,22 +1,17 @@
|
||||
<template>
|
||||
<div class="page blog-details--page">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<Hero :title="categoryName(post.category)"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="date-category">
|
||||
<span class="category">
|
||||
<span>{{staticData.t1}}</span>
|
||||
<span>News</span>
|
||||
<span>{{categoryName(post.category)}}</span>
|
||||
</span>
|
||||
<span class="date">30/05/2020</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h2>لیست مقالات و اخبار</h2>
|
||||
<br>
|
||||
<br>
|
||||
<p>ما می خواهیم اطلاعات بیشتری در مورد ما بدانید ، بنابراین ما اخبار ، رویدادها یا تحولات گریتینگ اراک ریل و صنعتی را که ما به آن تعلق داریم برای شما ارسال می کنیم ،بنابراین شما می دانید که چگونه ما در جای خود قرار گرفته ایم.</p>
|
||||
<span class="date">{{jDate(post.created_at)}}</span>
|
||||
</div>
|
||||
<div class="content" v-html="post.post_details[$route.params.lang].description"></div>
|
||||
<div class="share">
|
||||
<p>{{staticData.t2}}</p>
|
||||
<ul>
|
||||
@@ -60,16 +55,37 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment-jalaali"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
domain: 'https://www.arakrail.com/'
|
||||
post: null,
|
||||
blogCategories: null,
|
||||
domain: 'https://www.arakrail.com'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.blog_details[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
categoryName(id) {
|
||||
return this.blogCategories.filter(item => item._id === id)[0].blogCategory_details[this.$route.params.lang].name
|
||||
},
|
||||
jDate(date) {
|
||||
if (this.$route.params.lang === 'fa') return moment(date).format('jYYYY/jMM/jDD')
|
||||
else return date.split(' ')[0]
|
||||
},
|
||||
},
|
||||
async asyncData({$axios, params}) {
|
||||
const post = await $axios.get(`/api/public/blog/${params.post}`)
|
||||
const blogCategories = await $axios.get(`/api/public/blogCategories`)
|
||||
return {
|
||||
post: post.data,
|
||||
blogCategories: blogCategories.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+55
-33
@@ -16,10 +16,12 @@
|
||||
<div class="filters">
|
||||
<h2 class="title">{{staticData.t3}}</h2>
|
||||
<ul>
|
||||
<li>همه</li>
|
||||
<li>مقالات</li>
|
||||
<li>اخبار</li>
|
||||
<li>آموزش ها</li>
|
||||
<li @click="filtering(false)">
|
||||
<p class="active">همه</p>
|
||||
</li>
|
||||
<li v-for="item in blogCategories" :key="item._id" @click="filtering(item._id)">
|
||||
<p>{{item.blogCategory_details[$route.params.lang].name}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -29,49 +31,34 @@
|
||||
|
||||
<section class="s3">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 clearfix post">
|
||||
<div class="row" v-if="filtered_posts.length">
|
||||
|
||||
<div class="col-12 clearfix post" v-for="item in filtered_posts" :key="item._id">
|
||||
<div class="panel">
|
||||
<div class="imgBox imgBox-reverse">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/blog/blog-post.jpg" alt="">
|
||||
<img :src="item.thumb" :alt="item.post_details[$route.params.lang].title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="txtBox">
|
||||
<div class="date-category">
|
||||
<span class="category">
|
||||
<span>{{staticData.t4}}</span>
|
||||
<span>News</span>
|
||||
<span>{{categoryName(item.category)}}</span>
|
||||
</span>
|
||||
<span class="date">30/05/2020</span>
|
||||
<span class="date">{{jDate(item.created_at)}}</span>
|
||||
</div>
|
||||
<h4>گریتینگ چیست</h4>
|
||||
<p>گریتینگ چیست در این نوشته به پاسخ به سوال گریتینگ چیست خواهیم پرداخت گریتینگ در اصل به صفحات مشبکی گفته میشود که به دلیل داشتن خصوصیات بارزی مانند وزن پایین تر, امکان عبور هوا و نور, قیمت تمام شده پایین تر, ظاهری زیباتر و مزایای بسیار دیگری نسبت به سایر محصولات مشابه خود امروزه جایگاه ویژه ای در صنایع گوناگون و همچنین شهرسازی بدست آورده است و هر روزه بر کاربرد آن افزوده میشود. با توجه به این افزایش کاربرد امروز گریتینگ ها را در […]</p>
|
||||
<nuxt-link :to="{name: 'lang-blog-post',params: {lang: $route.params.lang,post: 1}}" class="btn btn-primary">{{staticData.t5}}</nuxt-link>
|
||||
<h4>{{item.post_details[$route.params.lang].title}}</h4>
|
||||
<p>{{item.post_details[$route.params.lang].short_description}}</p>
|
||||
<nuxt-link :to="{name: 'lang-blog-post',params: {lang: $route.params.lang,post: item._id}}" class="btn btn-primary">{{staticData.t5}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 clearfix post">
|
||||
<div class="panel">
|
||||
<div class="imgBox imgBox-reverse">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/blog/blog-post.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="txtBox">
|
||||
<div class="date-category">
|
||||
<span class="category">
|
||||
<span>Category /</span>
|
||||
<span>News</span>
|
||||
</span>
|
||||
<span class="date">30/05/2020</span>
|
||||
</div>
|
||||
<h4>گریتینگ چیست</h4>
|
||||
<p>گریتینگ چیست در این نوشته به پاسخ به سوال گریتینگ چیست خواهیم پرداخت گریتینگ در اصل به صفحات مشبکی گفته میشود که به دلیل داشتن خصوصیات بارزی مانند وزن پایین تر, امکان عبور هوا و نور, قیمت تمام شده پایین تر, ظاهری زیباتر و مزایای بسیار دیگری نسبت به سایر محصولات مشابه خود امروزه جایگاه ویژه ای در صنایع گوناگون و همچنین شهرسازی بدست آورده است و هر روزه بر کاربرد آن افزوده میشود. با توجه به این افزایش کاربرد امروز گریتینگ ها را در […]</p>
|
||||
<nuxt-link :to="{name: 'lang-blog-post',params: {lang: $route.params.lang,post: 2}}" class="btn btn-primary">{{staticData.t5}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row" v-else>
|
||||
<div class="col-12">
|
||||
<p class="no-post">هیچ پستی در این دسته بندی موجود نمیباشد.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,10 +67,45 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment-jalaali'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
posts: null,
|
||||
blogCategories: null,
|
||||
filter: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.blog[this.$route.params.lang]
|
||||
},
|
||||
filtered_posts() {
|
||||
if (!this.filter) return this.posts
|
||||
else return this.posts.filter(item => item.category === this.filter)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
categoryName(id) {
|
||||
return this.blogCategories.filter(item => item._id === id)[0].blogCategory_details[this.$route.params.lang].name
|
||||
},
|
||||
jDate(date) {
|
||||
if (this.$route.params.lang === 'fa') return moment(date).format('jYYYY/jMM/jDD')
|
||||
else return date.split(' ')[0]
|
||||
},
|
||||
filtering(key) {
|
||||
this.filter = key
|
||||
$('.blog--page .filters p').removeClass('active')
|
||||
$(event.target).addClass('active')
|
||||
}
|
||||
},
|
||||
async asyncData({$axios, store}) {
|
||||
let posts = await $axios.get(`/api/public/blog`)
|
||||
const blogCategories = await $axios.get(`/api/public/blogCategories`)
|
||||
return {
|
||||
posts: posts.data,
|
||||
blogCategories: blogCategories.data
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user