danak/arakrail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

back-end done

Browse Source
This commit is contained in:
Amir Mohamadi
2020-12-10 16:36:48 +03:30
parent 80a7abafb7
commit bc5e617778
92 changed files with 5217 additions and 3379 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_lang/blog/_post.vue
+26 -10
View File
@@ -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>
pages/_lang/blog/index.vue
+55 -33
View File
@@ -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
}
}
}
pages/_lang/contact/index.vue
+49 -16
View File
@@ -69,46 +69,45 @@
<div class="row">
<div class="col-12">
<h2>{{staticData.t6}}</h2>
<form class="form">
<form class="form" @submit.prevent="upload">
<div class="row">
<div class="col-12">
<div class="formRow center-align">
<div class="formRow center-align" :class="validation.reason ? 'err' : null">
<select name="reason" v-model="formData.reason">
<option disabled selected :value="false">{{staticData.t7}}</option>
<option value="wtf">دلیل خاصی ندارم والا هوثلم سر رفته بود</option>
<option value="">2</option>
<option value="">3</option>
<option v-for="item in reasons" :key="item._id" :value="item.reason_details.fa.reason">{{item.reason_details[$route.params.lang].reason}}</option>
</select>
<p v-if="validation.reason">{{validation.reason.msg}}</p>
</div>
</div>
<div class="col-6">
<div class="formRow err">
<div class="formRow" :class="validation.first_name ? 'err' : null">
<input type="text" :placeholder="staticData.t8" name="first_name" v-model="formData.first_name">
<p>err</p>
<p v-if="validation.first_name">{{validation.first_name.msg}}</p>
</div>
</div>
<div class="col-6">
<div class="formRow">
<div class="formRow" :class="validation.last_name ? 'err' : null">
<input type="text" :placeholder="staticData.t9" name="last_name" v-model="formData.last_name">
<p>err</p>
<p v-if="validation.last_name">{{validation.last_name.msg}}</p>
</div>
</div>
<div class="col-6">
<div class="formRow">
<div class="formRow" :class="validation.phone_number ? 'err' : null">
<input type="text" :placeholder="staticData.t10" name="phone_number" v-model="formData.phone_number">
<p>err</p>
<p v-if="validation.phone_number">{{validation.phone_number.msg}}</p>
</div>
</div>
<div class="col-6">
<div class="formRow">
<div class="formRow" :class="validation.email ? 'err' : null">
<input type="text" :placeholder="staticData.t11" name="email" v-model="formData.email">
<p>err</p>
<p v-if="validation.email">{{validation.email.msg}}</p>
</div>
</div>
<div class="col-12">
<div class="formRow">
<div class="formRow" :class="validation.message ? 'err' : null">
<textarea :placeholder="staticData.t12" name="message" v-model="formData.message"></textarea>
<p>err</p>
<p v-if="validation.message">{{validation.message.msg}}</p>
</div>
</div>
<div class="col-12">
@@ -138,13 +137,47 @@
email: '',
message: '',
locale: this.$route.params.lang
}
},
reasons: null,
validation: {}
}
},
computed: {
staticData() {
return this.$store.state.staticData.contact[this.$route.params.lang]
}
},
methods: {
upload() {
this.validation = {}
const data = this.formData
this.$axios.post(`/api/public/contact`, data)
.then(res => {
this.$message({
message: this.staticData.t14,
type: 'success'
})
this.formData = {
reason: false,
first_name: '',
last_name: '',
phone_number: '',
email: '',
message: '',
locale: this.$route.params.lang
}
})
.catch(err => {
if (err.response.status === 422) this.validation = err.response.data.validation
else console.log(err.response.data.message)
})
}
},
async asyncData({$axios}) {
const reasons = await $axios.get(`/api/public/contact/reason`)
return {
reasons: reasons.data
}
}
}
</script>
pages/_lang/index.vue
+26 -56
View File
@@ -2,25 +2,11 @@
<div class="page home--page">
<div id="slider">
<div class="hero clearfix">
<div class="bg"></div>
<div class="hero clearfix" v-for="item in slider" :key="item._id">
<div class="bg" :style="{backgroundImage: `url(${item.image})`}"></div>
<div class="txt--home">
<h1>{{staticData.hero.t1}}</h1>
<p>{{staticData.hero.t2}}</p>
</div>
</div>
<div class="hero clearfix">
<div class="bg"></div>
<div class="txt--home">
<h1>{{staticData.hero.t1}}</h1>
<p>{{staticData.hero.t2}}</p>
</div>
</div>
<div class="hero clearfix">
<div class="bg"></div>
<div class="txt--home">
<h1>{{staticData.hero.t1}}</h1>
<p>{{staticData.hero.t2}}</p>
<h1>{{item.slider_details[$route.params.lang].title}}</h1>
<p>{{item.slider_details[$route.params.lang].caption}}</p>
</div>
</div>
</div>
@@ -41,6 +27,7 @@
</div>
</div>
</section>
<section class="s1-2">
<img src="~/assets/img/home/hp-s1-i2.jpg" alt="" class="section-bg">
<div class="container">
@@ -58,6 +45,7 @@
</div>
</div>
</section>
<section class="s2">
<img src="~/assets/img/home/hp-s2-i1.jpg" alt="" class="section-bg">
<div class="container">
@@ -99,6 +87,7 @@
</div>
</div>
</section>
<section class="s3">
<img src="~/assets/img/home/hp-s3-i1.jpg" alt="" class="section-bg">
<div class="container clearfix">
@@ -112,11 +101,11 @@
</div>
<div class="products">
<div class="parts p2 row">
<div class="col-4" v-for="item in products">
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item.url}}">
<div class="col-4" v-for="(item,index) in products" :key="item._id" v-if="index <= 5">
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}">
<div class="imgBox">
<img :src="require(`~/assets/img/home/${item.img}`)" alt="">
<p>{{item.txt}}</p>
<img :src="item.cover" :alt="item.product_details[$route.params.lang].name">
<p>{{item.product_details[$route.params.lang].name}}</p>
</div>
</nuxt-link>
</div>
@@ -132,7 +121,7 @@
<div class="txt">
<h2 class="title title-shape">{{staticData.s4.t1}} <span>{{staticData.s4.t2}}</span></h2>
<p>{{staticData.s4.t3}}</p>
<a :href="catalog_link" target="_blank" download="catalog.pdf" class="btn btn-reverse-fill">{{staticData.s4.link}}</a>
<a :href="catalog.file" target="_blank" class="btn btn-reverse-fill">{{staticData.s4.link}}</a>
</div>
</section>
<CustomersCommunication/>
@@ -160,39 +149,9 @@
export default {
data() {
return {
products: [
{
img: 'hp-s3-i5.jpg',
txt: 'گریتینگ پله',
url: '1'
},
{
img: 'hp-s3-i6.jpg',
txt: 'گریتینگ گالوانیزه',
url: '2'
},
{
img: 'hp-s3-i7.jpg',
txt: 'گریتینگ آلومینیوم',
url: '3'
},
{
img: 'hp-s3-i8.jpg',
txt: 'گریتینگ الکتروفورج',
url: '4'
},
{
img: 'hp-s3-i9.jpg',
txt: 'پنل گریتینگ',
url: '5'
},
{
img: 'hp-s3-i10.jpg',
txt: 'گریتینگ تسمه در تسمه',
url: '6'
}
],
catalog_link: this.$store.state.staticData.catalog_link,
slider: null,
products: null,
catalog: null,
calc_app_link: this.$store.state.staticData.calc_app_link,
validation: []
}
@@ -232,6 +191,17 @@
autoplay: true,
autoplaySpeed: 6000
})
},
async asyncData({$axios}) {
const slider = await $axios.get('/api/public/slider')
const products = await $axios.get(`/api/public/products`)
const catalog = await $axios.get('/api/public/catalog')
return {
slider: slider.data,
products: products.data,
catalog: catalog.data
}
}
}
</script>
pages/_lang/products/_product.vue
+55 -55
View File
@@ -4,41 +4,26 @@
<section class="s1">
<div class="container">
<div class="panel">
<h2 class="title">گریتینگ تولید شده به روش الکتروفورج با چهار پهلوی تابیده</h2>
<p>استفاده از تجهیزات مدرن تولید و تیم مهندسی قوی موجب شده تا شرکت اراک ریل دارای گسترده ترین رنج محصولات گریتینگ را داشته باشد و همچنین ما را قادر می سازد تا در صورت نیاز، محصول را مطابق با نیاز شما طراحی کرده و مطابق با استانداردهای بین اللملی تولید کنیم</p>
<h2 class="title">{{productDetails.page_title}}</h2>
<p>{{productDetails.page_description}}</p>
<div class="image-preview">
<img src="~/assets/img/products/product-01.jpg" alt="">
<img :src="product.cover" ref="preview" :alt="productDetails.name">
</div>
</div>
<div class="images-carousel">
<div id="images">
<div class="imgBox">
<img src="~/assets/img/products/product-01.jpg" alt="">
<img :src="product.cover" :alt="productDetails.name" @click="view(product.cover)">
</div>
<div class="imgBox">
<img src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img src="~/assets/img/products/product-01.jpg" alt="">
<div class="imgBox" v-for="item in product.images" :key="item._id">
<img :src="item.image" :alt="productDetails.name" @click="view(item.image)">
</div>
</div>
</div>
</div>
</section>
<section class="s2">
<section class="s2" v-if="product.more_section">
<div class="container">
<div class="panel">
<div class="parts p1">
@@ -48,12 +33,12 @@
<!-- image left -->
<div class="parts row align-items-center">
<div class="col-6">
<h2 class="title title-subtitle">خط برش تسمه</h2>
<p>خط برش اولین مرحله از فرآیند تولید است که در آن ، کویل های فولادی به صورت طولی مطابق با الزامات گریتینگهای فلزی تولید می شوند ، تسمه از کویلهای برش خورده آماده شده و به صورت ساده و یا دندانه دار برای استفاده در مرحله بعدی بسته بندی می گردد.</p>
<h2 class="title title-subtitle">{{productDetails.more_title1}}</h2>
<p>{{productDetails.more_description1}}</p>
</div>
<div class="col-6">
<div class="imgBox imgBox-shape">
<img src="~/assets/img/services/s2-i1.jpg" alt="">
<img :src="product.more_section_image1" :alt="productDetails.more_title1">
</div>
</div>
</div>
@@ -62,12 +47,12 @@
<div class="parts row align-items-center">
<div class="col-6">
<div class="imgBox imgBox-reverse imgBox-shape-reverse">
<img src="~/assets/img/services/s2-i2.jpg" alt="">
<img :src="product.more_section_image2" :alt="productDetails.more_title2">
</div>
</div>
<div class="col-6">
<h2 class="title title-subtitle">تولید پنل گریتینگ الکتروفورج</h2>
<p>در این مرحله تسمه ها به همراه چهار پهلوی تابیده شده در سیستم قرارداده شده و دستگاه الکتروفورج با ایجاد همزمان جریان بالای الکتریکی و فشار مکانیکی، سبب می شود تا تسمه های باربر و رابط در نقاط اتصال به دمای ذوب نزدیک شده و دو قطعه کاملا در هم فرو رفته و اتصال کاملا یکنواخت و یک پارچه ای ایجاد گردد.</p>
<h2 class="title title-subtitle">{{productDetails.more_title2}}</h2>
<p>{{productDetails.more_description2}}</p>
</div>
</div>
@@ -75,54 +60,46 @@
</div>
</section>
<section class="s3">
<section class="s3"
v-if="!product.render_image1.includes('undefined') ||
!product.render_image2.includes('undefined') ||
product.download_section">
<div class="container">
<div class="panel">
<div class="parts p1">
<div class="parts p1" v-if="!product.render_image1.includes('undefined') || !product.render_image1.includes('undefined')">
<h2 class="title">نمایش گرافیکی مشخصات</h2>
<p>در شماتیک زیر مشخصات اولیه گریتینگ نمایش داده شده است</p>
</div>
<div class="row parts p2">
<div class="row parts p2" v-if="!product.render_image1.includes('undefined') || !product.render_image2.includes('undefined')">
<div class="col-6 mb-5">
<img src="~/assets/img/products/pd-s3-i1.jpg" alt="">
<p>نمایش ایزومتریک گریتینگ الکتروفورج</p>
<img :src="product.render_image1" :alt="productDetails.name" v-if="!product.render_image1.includes('undefined')">
<p v-if="!product.render_image1.includes('undefined')">{{productDetails.render_caption1}}</p>
</div>
<div class="col-6 mb-5">
<img src="~/assets/img/products/pd-s3-i2.jpg" alt="">
<p>نمای روبرو از گریتینگ الکتروفورج</p>
<img :src="product.render_image2" :alt="productDetails.name" v-if="!product.render_image2.includes('undefined')">
<p v-if="!product.render_image2.includes('undefined')">{{productDetails.render_caption2}}</p>
</div>
<div class="col-12 mb-5">
<img src="~/assets/img/products/chart.jpg" alt="">
<img :src="product.chart_image" :alt="productDetails.name" v-if="!product.chart_image.includes('undefined')">
</div>
</div>
<div class="row parts p3">
<div class="row parts p3" v-if="productDetails.chart_title">
<div class="col-12">
<h2 class="title">جدول مشخصات گامها و ضخامتهای گریتینگها قابل تولید</h2>
<p>با توجه به شماتیک گریتینگ ارائه شده در نمای بالا، تنوع گسترده ای از گریتینگها به روش الکتروفورج قابل تولید می باشد.
مشخصات زیر گریتینگهای متداول به لحاظ تولید در شرکت اراک ریل بوده و در صورت نیاز کارشناسان این شرکت آماده مشاوره در این زمینه باشند.</p>
<h2 class="title">{{productDetails.chart_title}}</h2>
<p>{{productDetails.chart_description}}</p>
</div>
</div>
<div class="row parts p4">
<div class="row parts p4" v-if="product.download_section">
<div class="col-12">
<h2>فایل های قابل دانلود</h2>
<div class="files">
<div class="file">
<div class="file" v-for="item in product.pdf_files" :key="item._id">
<pdf-icon/>
<p>نام فایل</p>
<a href="" target="_blank" class="btn btn-primary-fill">دانلود</a>
</div>
<div class="file">
<pdf-icon/>
<p>نام فایل</p>
<a href="" target="_blank" class="btn btn-primary-fill">دانلود</a>
</div>
<div class="file">
<pdf-icon/>
<p>نام فایل</p>
<a href="" target="_blank" class="btn btn-primary-fill">دانلود</a>
<p>{{item.pdf_details[$route.params.lang].name}}</p>
<a :href="item.file" :download="item.pdf_details[$route.params.lang].name" target="_blank" class="btn btn-primary-fill">دانلود</a>
</div>
</div>
</div>
@@ -146,16 +123,39 @@
<script>
if (process.client) require('slick-carousel')
export default {
data() {
return {
product: null
}
},
computed: {
staticData() {
return this.$store.state.staticData.products_details[this.$route.params.lang]
},
productDetails() {
return this.product.product_details[this.$route.params.lang]
}
},
methods: {
view(image) {
// console.log(image)
this.$refs.preview.src = image
}
},
mounted() {
$('#images').slick({
slidesToShow: 4,
rtl: this.$route.params.lang === 'fa'
rtl: this.$route.params.lang === 'fa',
infinite: false
})
},
async asyncData({$axios, params}) {
let product = await $axios.get(`/api/public/product/${params.product}`)
let productCategories = await $axios.get(`/api/public/productCategories`)
return {
product: product.data,
productCategories: productCategories.data
}
}
}
</script>
pages/_lang/products/index.vue
+53 -53
View File
@@ -11,59 +11,34 @@
</section>
<section class="s2">
<div class="container">
<!-- <div class="filters">-->
<!-- <h2 class="title title-subtitle">{{staticData.s2.t1}}</h2>-->
<!-- <ul>-->
<!-- <li-->
<!-- v-for="item in staticData.s2.filters"-->
<!-- :key="item.key"-->
<!-- @click="filter(item.key)">-->
<!-- <p>{{item.txt}}</p>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<div class="row">
<div class="col-3 mb-5">
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: 1}}" class="product">
<img src="~/assets/img/products/product-01.jpg" alt="">
<h4>گریتینگ</h4>
<p>توضیحات کوتاه</p>
<div class="filters">
<h2 class="title title-subtitle">{{staticData.s2.t1}}</h2>
<ul>
<li @click="filtering(false)">
<p class="active">همه</p>
</li>
<li
v-for="item in productCategories"
:key="item._id"
@click="filtering(item._id)">
<p>{{item.category_details[$route.params.lang].name}}</p>
</li>
</ul>
</div>
<div class="row" v-if="filtered_products.length">
<div class="col-3 mb-5" v-for="item in filtered_products" :key="item._id">
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}" class="product">
<img :src="item.cover" :alt="item.product_details[$route.params.lang].name">
<h4>{{item.product_details[$route.params.lang].name}}</h4>
<p>{{item.product_details[$route.params.lang].short_description}}</p>
</nuxt-link>
</div>
<div class="col-3 mb-5">
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: 2}}" class="product">
<img src="~/assets/img/products/product-01.jpg" alt="">
<h4>گریتینگ</h4>
<p>توضیحات کوتاه</p>
</nuxt-link>
</div>
<div class="col-3 mb-5">
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: 3}}" class="product">
<img src="~/assets/img/products/product-01.jpg" alt="">
<h4>گریتینگ</h4>
<p>توضیحات کوتاه</p>
</nuxt-link>
</div>
<div class="col-3 mb-5">
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: 4}}" class="product">
<img src="~/assets/img/products/product-01.jpg" alt="">
<h4>گریتینگ</h4>
<p>توضیحات کوتاه</p>
</nuxt-link>
</div>
<div class="col-3 mb-5">
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: ''}}" class="product">
<img src="~/assets/img/products/product-01.jpg" alt="">
<h4>گریتینگ</h4>
<p>توضیحات کوتاه</p>
</nuxt-link>
</div>
<div class="col-3 mb-5">
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: ''}}" class="product">
<img src="~/assets/img/products/product-01.jpg" alt="">
<h4>گریتینگ</h4>
<p>توضیحات کوتاه</p>
</nuxt-link>
</div>
<div class="row" v-else>
<div class="col-12">
<p class="no-product">هیچ محصولی در این دسته بندی موجود نمیباشد.</p>
</div>
</div>
</div>
@@ -76,7 +51,7 @@
<span class="subtitle">{{staticData.s3.t2}}</span>
</h2>
<p>{{staticData.s3.t3}}</p>
<a href="" target="_blank" class="btn btn-reverse-fill">{{staticData.s3.t4}}</a>
<a :href="catalog.file" target="_blank" class="btn btn-reverse-fill">{{staticData.s3.t4}}</a>
</div>
</div>
</section>
@@ -85,14 +60,39 @@
<script>
export default {
data() {
return {
products: null,
productCategories: null,
catalog: null,
filter: false
}
},
computed: {
staticData() {
return this.$store.state.staticData.products[this.$route.params.lang]
},
filtered_products() {
if (!this.filter) return this.products
else return this.products.filter(item => item.category === this.filter)
}
},
methods: {
filter(key) {
filtering(key) {
this.filter = key
$('.products--page .filters p').removeClass('active')
$(event.target).addClass('active')
}
},
async asyncData({$axios, store}) {
const products = await $axios.get(`/api/public/products`)
const productCategories = await $axios.get(`/api/public/productCategories`)
const catalog = await $axios.get('/api/public/catalog')
return {
products: products.data,
productCategories: productCategories.data,
catalog: catalog.data
}
}
}
pages/_lang/projects/index.vue
+39 -101
View File
@@ -10,92 +10,23 @@
<div class="projects">
<div class="project">
<div id="project1">
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
<div class="project" v-for="(item,index) in projects" :key="item._id">
<div :id="`project_${index}`">
<div class="imgBox" v-for="image in item.images" :key="image._id">
<img class="bg" :src="image.image" alt="">
<img class="img" :src="image.image" alt="">
</div>
</div>
<div class="caption">
<h4>پروژه ی فلان جا</h4>
<p>1399/07/04</p>
</div>
</div>
<div class="project">
<div id="project2">
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
</div>
<div class="caption">
<h4>پروژه ی فلان جا</h4>
<p>1399/07/04</p>
</div>
</div>
<div class="project">
<div id="project3">
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
<div class="imgBox">
<img class="bg" src="~/assets/img/products/product-01.jpg" alt="">
<img class="img" src="~/assets/img/products/product-01.jpg" alt="">
</div>
</div>
<div class="caption">
<h4>پروژه ی فلان جا</h4>
<p>1399/07/04</p>
<h4>{{item.project_details[$route.params.lang].name}}</h4>
<p class="description">{{item.project_details[$route.params.lang].description}}</p>
<p>
<span>{{staticData.t6}}</span>
<span>{{jDate(item.date)}}</span>
</p>
</div>
</div>
</div>
</div>
</div>
@@ -114,35 +45,42 @@
</template>
<script>
import moment from "moment-jalaali"
if (process.client) require('slick-carousel')
export default {
data() {
return {
projects: null
}
},
computed: {
staticData() {
return this.$store.state.staticData.projects[this.$route.params.lang]
}
},
methods: {
jDate(date) {
if (this.$route.params.lang === 'fa') return moment(date).format('jYYYY/jMM/jDD')
else return date.split(' ')[0]
}
},
mounted() {
$('#project1').slick({
slidesToShow: 1,
centerMode: true,
centerPadding: '150px',
infinite: true,
arrows: true
})
$('#project2').slick({
slidesToShow: 1,
centerMode: true,
centerPadding: '150px',
infinite: true,
arrows: true
})
$('#project3').slick({
slidesToShow: 1,
centerMode: true,
centerPadding: '150px',
infinite: true,
arrows: true
this.projects.forEach((item, index) => {
$(`#project_${index}`).slick({
slidesToShow: 1,
centerMode: true,
centerPadding: '150px',
infinite: true,
arrows: true
})
})
},
async asyncData({$axios}) {
const projects = await $axios.get(`/api/public/projects`)
return {
projects: projects.data
}
}
}
</script>