add calculation module and fix many bugs
This commit is contained in:
Amir Mohamadi
+158
-158
@@ -1,167 +1,167 @@
|
||||
<template>
|
||||
<div class="page about--page">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
<logo/>
|
||||
<span>{{staticData.s1.t1}}</span>
|
||||
<p>{{staticData.s1.t2}}</p>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<p>{{staticData.s1.t3}}</p>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox anim-fadeIn">
|
||||
<div class="img">
|
||||
<div class="shape"></div>
|
||||
<img src="~/assets/img/about/about-s1-i1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p3 row">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<div class="shape reverse"></div>
|
||||
<img src="~/assets/img/about/about-s1-i2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<p>{{staticData.s1.t4}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p4 row">
|
||||
<div class="col-12">
|
||||
<p>{{staticData.s1.t5}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2" v-if="history.length">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title title-shape-center">{{staticData.s2.t1}}</h2>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="timeline anim-fadeIn">
|
||||
|
||||
<template v-for="(item,index) in history">
|
||||
<div class="circle" :key="item._id" :class="!index ? 'active' : null" :data-c-n="index" @click="activeHistory(item,index)">
|
||||
<span>{{mDate(item.year)}}</span>
|
||||
</div>
|
||||
<div class="line" :key="item._id + 1" :data-l-n="index" v-if="index < history.length - 1"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="timeline-content anim-fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 order-1 order-md-0">
|
||||
<div class="txtBox">
|
||||
<h5 ref="title">{{history[0].history_details[$route.params.lang].title}}</h5>
|
||||
<p ref="caption">{{history[0].history_details[$route.params.lang].caption}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 order-0 order-md-1 mb-3 mb-md-0">
|
||||
<div class="imgBox" v-if="history.length">
|
||||
<img ref="image" :src="history[0].image" :alt="history[0].history_details[$route.params.lang].title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3">
|
||||
<div class="container">
|
||||
<h2 class="title title-shape">{{staticData.s3.t1}}</h2>
|
||||
<p v-html="staticData.s3.t2"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s4">
|
||||
<div class="container">
|
||||
<div v-for="(item , index) in staticData.s4" class="panel anim-fadeIn" :class="'p'+(index+1)">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-5 img">
|
||||
<img :src="require('~/assets/img/about/'+ item.img)" alt="">
|
||||
</div>
|
||||
<div class="col-12 col-lg-7 txt">
|
||||
<p>{{item.title}}</p>
|
||||
<a :href="item.link.url" class="btn btn-primary" target="_blank">{{item.link.txt}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CustomersCommunication/>
|
||||
</div>
|
||||
<div class="page about--page">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
<logo/>
|
||||
<span>{{ staticData.s1.t1 }}</span>
|
||||
<p>{{ staticData.s1.t2 }}</p>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<p>{{ staticData.s1.t3 }}</p>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox anim-fadeIn">
|
||||
<div class="img">
|
||||
<div class="shape"></div>
|
||||
<img src="~/assets/img/about/about-s1-i1.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p3 row">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<div class="shape reverse"></div>
|
||||
<img src="~/assets/img/about/about-s1-i2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<p>{{ staticData.s1.t4 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p4 row">
|
||||
<div class="col-12">
|
||||
<p>{{ staticData.s1.t5 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2" v-if="history.length">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title title-shape-center">{{ staticData.s2.t1 }}</h2>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="timeline anim-fadeIn">
|
||||
|
||||
<template v-for="(item,index) in history">
|
||||
<div class="circle" :key="item._id" :class="!index ? 'active' : null" :data-c-n="index" @click="activeHistory(item,index)">
|
||||
<span>{{ mDate(item.year) }}</span>
|
||||
</div>
|
||||
<div class="line" :key="item._id + 1" :data-l-n="index" v-if="index < history.length - 1"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="timeline-content anim-fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 order-1 order-md-0">
|
||||
<div class="txtBox">
|
||||
<h5 ref="title">{{ history[0].history_details[$route.params.lang].title }}</h5>
|
||||
<p ref="caption">{{ history[0].history_details[$route.params.lang].caption }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 order-0 order-md-1 mb-3 mb-md-0">
|
||||
<div class="imgBox" v-if="history.length">
|
||||
<img ref="image" :src="history[0].image" :alt="history[0].history_details[$route.params.lang].title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3">
|
||||
<div class="container">
|
||||
<h2 class="title title-shape">{{ staticData.s3.t1 }}</h2>
|
||||
<p v-html="staticData.s3.t2"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s4">
|
||||
<div class="container">
|
||||
<div v-for="(item , index) in staticData.s4" class="panel anim-fadeIn" :class="'p'+(index+1)">
|
||||
<div class="row">
|
||||
<div class="col-12 col-lg-5 img">
|
||||
<img :src="require('~/assets/img/about/'+ item.img)" alt="">
|
||||
</div>
|
||||
<div class="col-12 col-lg-7 txt">
|
||||
<p>{{ item.title }}</p>
|
||||
<a :href="`/standards_pdf/${item.link.url}`" download class="btn btn-primary" target="_blank">{{ item.link.txt }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CustomersCommunication/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import moment from 'moment-jalaali'
|
||||
import {fadeInAnimation} from '~/mixins/animations'
|
||||
import moment from 'moment-jalaali'
|
||||
import {fadeInAnimation} from '~/mixins/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
history: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.about[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
methods: {
|
||||
activeHistory(item, index) {
|
||||
for (let i = 0; i < this.history.length; i++) {
|
||||
i > index ? $(`.circle[data-c-n="${i}"]`).removeClass('active') : null
|
||||
i > index ? $(`.line[data-l-n="${i - 1}"]`).removeClass('active') : null
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
history: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.about[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
methods: {
|
||||
activeHistory(item, index) {
|
||||
for (let i = 0; i < this.history.length; i++) {
|
||||
i > index ? $(`.circle[data-c-n="${i}"]`).removeClass('active') : null
|
||||
i > index ? $(`.line[data-l-n="${i - 1}"]`).removeClass('active') : null
|
||||
|
||||
i < index ? $(`.circle[data-c-n="${i + 1}"]`).addClass('active') : null
|
||||
i < index ? $(`.line[data-l-n="${i}"]`).addClass('active') : null
|
||||
}
|
||||
|
||||
this.$gsap.timeline({
|
||||
yoyo: true,
|
||||
repeat: 1
|
||||
}).to([this.$refs.image, this.$refs.title, this.$refs.caption],
|
||||
{
|
||||
opacity: 0,
|
||||
duration: 0.1,
|
||||
onComplete: () => {
|
||||
this.$refs.image.src = item.image
|
||||
this.$refs.title.textContent = item.history_details[this.$route.params.lang].title
|
||||
this.$refs.caption.textContent = item.history_details[this.$route.params.lang].caption
|
||||
}
|
||||
})
|
||||
},
|
||||
mDate(date) {
|
||||
if (this.$route.params.lang === 'en') return moment().jYear(date).year()
|
||||
else return date
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const history = await $axios.get(`/api/public/history`)
|
||||
return {
|
||||
history: history.data
|
||||
}
|
||||
i < index ? $(`.circle[data-c-n="${i + 1}"]`).addClass('active') : null
|
||||
i < index ? $(`.line[data-l-n="${i}"]`).addClass('active') : null
|
||||
}
|
||||
}
|
||||
|
||||
this.$gsap.timeline({
|
||||
yoyo: true,
|
||||
repeat: 1
|
||||
}).to([this.$refs.image, this.$refs.title, this.$refs.caption],
|
||||
{
|
||||
opacity: 0,
|
||||
duration: 0.1,
|
||||
onComplete: () => {
|
||||
this.$refs.image.src = item.image
|
||||
this.$refs.title.textContent = item.history_details[this.$route.params.lang].title
|
||||
this.$refs.caption.textContent = item.history_details[this.$route.params.lang].caption
|
||||
}
|
||||
})
|
||||
},
|
||||
mDate(date) {
|
||||
if (this.$route.params.lang === 'en') return moment().jYear(date).year()
|
||||
else return date
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const history = await $axios.get(`/api/public/history`)
|
||||
return {
|
||||
history: history.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+88
-88
@@ -1,96 +1,96 @@
|
||||
<template>
|
||||
<div class="page blog-details--page">
|
||||
<Hero :title="categoryName(post.category)"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="date-category">
|
||||
<div class="page blog-details--page latin-digits">
|
||||
<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>{{categoryName(post.category)}}</span>
|
||||
<span>{{ staticData.t1 }}</span>
|
||||
<span>{{ categoryName(post.category) }}</span>
|
||||
</span>
|
||||
<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>
|
||||
<li>
|
||||
<a target="_blank" title="Twitter" :href="'https://twitter.com/intent/tweet?url=' + domain + $route.fullPath">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" title="WhatsApp" :href="'whatsapp://send?text=' + domain + $route.fullPath">
|
||||
<i class="fab fa-whatsapp"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" title="Linked In" :href="'https://www.linkedin.com/shareArticle?mini=true&url=' + domain + $route.fullPath">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" title="Facebook" :href="'https://www.facebook.com/sharer.php?u=' + domain + $route.fullPath">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{staticData.t3}}</h2>
|
||||
<nuxt-link :to="{name: 'lang-blog',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.t4}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CustomersCommunication/>
|
||||
</div>
|
||||
<span class="date">{{ jDate(post.created_at) }}</span>
|
||||
</div>
|
||||
<div class="ck-content" v-html="post.post_details[$route.params.lang].description"></div>
|
||||
<div class="share">
|
||||
<p>{{ staticData.t2 }}</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a target="_blank" title="Twitter" :href="'https://twitter.com/intent/tweet?url=' + domain + $route.fullPath">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" title="WhatsApp" :href="'whatsapp://send?text=' + domain + $route.fullPath">
|
||||
<i class="fab fa-whatsapp"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" title="Linked In" :href="'https://www.linkedin.com/shareArticle?mini=true&url=' + domain + $route.fullPath">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a target="_blank" title="Facebook" :href="'https://www.facebook.com/sharer.php?u=' + domain + $route.fullPath">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{ staticData.t3 }}</h2>
|
||||
<nuxt-link :to="{name: 'lang-blog',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.t4 }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CustomersCommunication/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from "moment-jalaali"
|
||||
import moment from "moment-jalaali"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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]
|
||||
},
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.post.post_details[this.$route.params.lang].title
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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]
|
||||
},
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.post.post_details[this.$route.params.lang].title
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
||||
+122
-122
@@ -1,131 +1,131 @@
|
||||
<template>
|
||||
<div class="page blog--page">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">{{staticData.t1}}</h2>
|
||||
<p>{{staticData.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="filters anim-fadeIn">
|
||||
<h2 class="title">{{staticData.t3}}</h2>
|
||||
<ul>
|
||||
<li @click="filtering(false)">
|
||||
<p class="active">{{staticData.t7}}</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3">
|
||||
<div class="container">
|
||||
<div class="row posts-container" v-if="filtered_posts.length">
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-12 clearfix post anim-fadeIn" v-for="item in filtered_posts" :key="item._id">
|
||||
<div class="panel">
|
||||
<div class="imgBox imgBox-reverse">
|
||||
<div class="img">
|
||||
<img :src="item.thumb" :alt="item.post_details[$route.params.lang].title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="txtBox">
|
||||
<div class="date-category">
|
||||
<div class="page blog--page latin-digits">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">{{ staticData.t1 }}</h2>
|
||||
<p>{{ staticData.t2 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="filters anim-fadeIn">
|
||||
<h2 class="title">{{ staticData.t3 }}</h2>
|
||||
<ul>
|
||||
<li @click="filtering(false)">
|
||||
<p class="active">{{ staticData.t7 }}</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3">
|
||||
<div class="container">
|
||||
<div class="row posts-container" v-if="filtered_posts.length">
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-12 clearfix post anim-fadeIn" v-for="item in filtered_posts" :key="item._id">
|
||||
<div class="panel">
|
||||
<div class="imgBox imgBox-reverse">
|
||||
<div class="img">
|
||||
<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>{{categoryName(item.category)}}</span>
|
||||
<span>{{ staticData.t4 }}</span>
|
||||
<span>{{ categoryName(item.category) }}</span>
|
||||
</span>
|
||||
<span class="date">{{jDate(item.created_at)}}</span>
|
||||
</div>
|
||||
<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>
|
||||
<div class="row" v-else>
|
||||
<div class="col-12">
|
||||
<p class="no-post posts-container anim-fadeIn">{{staticData.t6}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<span class="date">{{ jDate(item.created_at) }}</span>
|
||||
</div>
|
||||
<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>
|
||||
<div class="row" v-else>
|
||||
<div class="col-12">
|
||||
<p class="no-post posts-container anim-fadeIn">{{ staticData.t6 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment-jalaali'
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
import moment from 'moment-jalaali'
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
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) {
|
||||
$('.blog--page .filters p').removeClass('active')
|
||||
$(event.target).addClass('active')
|
||||
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) {
|
||||
$('.blog--page .filters p').removeClass('active')
|
||||
$(event.target).addClass('active')
|
||||
|
||||
this.$gsap.timeline({
|
||||
yoyo: true,
|
||||
repeat: 1
|
||||
})
|
||||
.to($('.blog--page .posts-container'),
|
||||
{
|
||||
opacity: 0,
|
||||
duration: 0.3,
|
||||
onComplete: () => {
|
||||
this.filter = key
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$gsap.timeline({
|
||||
yoyo: true,
|
||||
repeat: 1
|
||||
})
|
||||
.to($('.blog--page .posts-container'),
|
||||
{
|
||||
opacity: 0,
|
||||
duration: 0.3,
|
||||
onComplete: () => {
|
||||
this.filter = key
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+456
-211
@@ -1,224 +1,469 @@
|
||||
<template>
|
||||
<div class="page calculation--page">
|
||||
<Hero title="نرم افزار محاسبه"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">وزن گریتینگ</h2>
|
||||
<p>بدلیل این که وزن گریتینگ ها به واسطه مواردی همچون مشخصات فنی یا همان دیتیل ساخت از جمله نوع گریتینگ،جنس تسمه و اندازه چشمه ها متغیر است،بدین منظور جهت راحتی و سهولت در انجام کار شما مشتری گرامی، شرکت اراک ریل نرم افزار محاسبه وزن و میزان بار قابل تحمل را برای گریتینگ طراحی و در این صفحه قرار داده است.که با داشتن مشخصات فنی گریتینگ مورد نظر خود میتوانید وزن گریتینگ خود را همراه با گالوانیزه و یا بدون گالوانیزه محاسبه کنید.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="app m-auto" :class="app.method === 'a' ? 'col-12 col-lg-6' : 'col-12'">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<div class="appTitle">
|
||||
<h2 class="title">ظرفیت بارگیری گریتینگ خود را محاسبه کنید</h2>
|
||||
</div>
|
||||
<div class="appMethod">
|
||||
<span>روش محاسبه</span>
|
||||
<el-radio-group v-model="app.method" style="direction: ltr">
|
||||
<el-radio-button label="b">نفر یا وسیله نقلیه</el-radio-button>
|
||||
<el-radio-button label="a">وارد کردن بار</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0" v-if="app.method === 'b'">
|
||||
<div class="appLayout">
|
||||
<h2 class="layoutTitle">انتخاب کلاس لودینگ</h2>
|
||||
<div class="class">
|
||||
<h4>عابر پیاده:</h4>
|
||||
<el-radio v-model="app.class" :label="1">کلاس 1</el-radio>
|
||||
</div>
|
||||
<div class="class">
|
||||
<h4>وسایل نقلیه:</h4>
|
||||
<el-radio v-model="app.class" :label="2">کلاس 2</el-radio>
|
||||
<el-radio v-model="app.class" :label="3">کلاس 3</el-radio>
|
||||
<el-radio v-model="app.class" :label="4">کلاس 4</el-radio>
|
||||
</div>
|
||||
<div class="class">
|
||||
<h4>لیفتراک:</h4>
|
||||
<el-radio v-model="app.class" :label="5">FL1</el-radio>
|
||||
<el-radio v-model="app.class" :label="6">FL2</el-radio>
|
||||
<el-radio v-model="app.class" :label="7">FL3</el-radio>
|
||||
<el-radio v-model="app.class" :label="8">FL4</el-radio>
|
||||
<el-radio v-model="app.class" :label="9">FL5</el-radio>
|
||||
<el-radio v-model="app.class" :label="10">FL6</el-radio>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="app.method === 'a' ? 'col-12' : 'col-12 col-lg-6'">
|
||||
<div class="appLayout">
|
||||
<h2 class="layoutTitle">اطلاعات ورودی</h2>
|
||||
<el-form key="form-a">
|
||||
<el-form-item label="نوع گریتینگ">
|
||||
<el-radio-group v-model="app.type">
|
||||
<el-radio label="elec">الکتروفورج</el-radio>
|
||||
<el-radio label="press">پرسی</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="بار متمرکز (kn)">
|
||||
<el-input v-model="app.pointLoad" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>kn</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="بار گسترده (kn/m2)">
|
||||
<el-input v-model="app.distributedLoad" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>kn/m2</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="گام تسمه های باربر (mm)">
|
||||
|
||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_elec" v-if="app.type === 'elec'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in bearingBarPitch_elec"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_press" v-if="app.type === 'press'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in bearingBarPitch_press"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- <span>mm</span>-->
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="گام تسمه های رابط (mm)">
|
||||
|
||||
<el-select v-model="app.crossBarPitCh" key="bearingBarPitch_elec" v-if="app.type === 'elec'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in crossBarPitCh_elec"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="app.crossBarPitCh" key="bearingBarPitch_press" v-if="app.type === 'press'" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in crossBarPitCh_press"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- <span>mm</span>-->
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="دهنه باربر (mm)">
|
||||
<el-input v-model="app.clearSpan" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>mm</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="ضخامت تسمه های باربر (mm)">
|
||||
<el-input v-model="app.bearingBarThickness" placeholder="وارد کنید"></el-input>
|
||||
<!-- <span>mm</span>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="ارتفاع تسمه های باربر (mm)">
|
||||
<el-select v-model="app.bearingBarHeight" key="bearingBarHeight" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in bearingBarHeight"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!-- <span>mm</span>-->
|
||||
</el-form-item>
|
||||
<div class="calculateBtn">
|
||||
<!-- <el-button>محاسبه</el-button>-->
|
||||
<button class="btn btn-reverse-fill">محاسبه</button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="page calculation--page latin-digits">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">{{ staticData.app.t1 }}</h2>
|
||||
<p>{{ staticData.app.t2 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="app m-auto" :class="app.method === 'custom' ? 'col-12 col-lg-9 col-xl-8 col-xxl-6' : 'col-12'">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<div class="appTitle">
|
||||
<h2 class="title">{{ staticData.app.t3 }}</h2>
|
||||
</div>
|
||||
<div class="appMethod">
|
||||
<span class="txt">{{ staticData.app.t4 }}</span>
|
||||
<el-radio-group v-model="app.method" style="direction: ltr">
|
||||
<template v-if="$route.params.lang === 'fa'">
|
||||
<el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
|
||||
<el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-radio-button label="custom">{{ staticData.app.t6 }}</el-radio-button>
|
||||
<el-radio-button label="classified">{{ staticData.app.t5 }}</el-radio-button>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0" v-if="app.method === 'classified'">
|
||||
<div class="appLayout">
|
||||
<h2 class="layoutTitle">{{ staticData.app.t7 }}</h2>
|
||||
<div class="class">
|
||||
<h4>{{ staticData.app.t8 }}</h4>
|
||||
<el-radio v-model="app.vehicleClass" label="class1">{{ staticData.app.t9 }}</el-radio>
|
||||
</div>
|
||||
<div class="class">
|
||||
<h4>{{ staticData.app.t10 }}</h4>
|
||||
<el-radio v-model="app.vehicleClass" label="class2">{{ staticData.app.t11 }}</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="class3">{{ staticData.app.t12 }}</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="class4">{{ staticData.app.t13 }}</el-radio>
|
||||
</div>
|
||||
<div class="class">
|
||||
<h4>{{ staticData.app.t14 }}</h4>
|
||||
<el-radio v-model="app.vehicleClass" label="FL1">FL1</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="FL2">FL2</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="FL3">FL3</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="FL4">FL4</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="FL5">FL5</el-radio>
|
||||
<el-radio v-model="app.vehicleClass" label="FL6">FL6</el-radio>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :class="app.method === 'custom' ? 'col-12' : 'col-12 col-lg-6'">
|
||||
<div class="appLayout">
|
||||
<h2 class="layoutTitle">{{ staticData.app.t15 }}</h2>
|
||||
<el-form key="form-a">
|
||||
<el-form-item :label="staticData.app.t16">
|
||||
<el-radio-group v-model="app.gratingType">
|
||||
<el-radio label="forge">{{ staticData.app.t17 }}</el-radio>
|
||||
<el-radio label="pressured">{{ staticData.app.t18 }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="staticData.app.t19" v-if="app.method === 'custom'">
|
||||
<el-radio-group v-model="app.loadType">
|
||||
<el-radio label="pointedLoad">{{ staticData.app.t20 }}</el-radio>
|
||||
<el-radio label="distributedLoad">{{ staticData.app.t21 }}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.pointedLoadValue ? 'is-error' : null" :label="staticData.app.t22" v-if="app.method === 'custom' && app.loadType === 'pointedLoad'">
|
||||
<el-input v-model="app.pointedLoadValue" :placeholder="staticData.app.enter"></el-input>
|
||||
<p class="err" v-if="validation.pointedLoadValue">{{ validation.pointedLoadValue.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.distributedLoadValue ? 'is-error' : null" :label="staticData.app.t23" v-if="app.method === 'custom' && app.loadType === 'distributedLoad'">
|
||||
<el-input v-model="app.distributedLoadValue" :placeholder="staticData.app.enter"></el-input>
|
||||
<p class="err" v-if="validation.distributedLoadValue">{{ validation.distributedLoadValue.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.bearingBarPitch ? 'is-error' : null" :label="staticData.app.t24">
|
||||
|
||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_forge" v-if="app.gratingType === 'forge'"
|
||||
:placeholder="staticData.app.select">
|
||||
<el-option
|
||||
v-for="item in calculationValues.bearingBarPitch_forge"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="app.bearingBarPitch" key="bearingBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
|
||||
<el-option
|
||||
v-for="item in calculationValues.bearingBarPitch_pressured"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<p class="err" v-if="validation.bearingBarPitch">{{ validation.bearingBarPitch.msg }}</p>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.crossBarPitch ? 'is-error' : null" :label="staticData.app.t25">
|
||||
|
||||
<el-select v-model="app.crossBarPitch" key="crossBarPitch_forge" v-if="app.gratingType === 'forge'" :placeholder="staticData.app.select">
|
||||
<el-option
|
||||
v-for="item in calculationValues.crossBarPitch_forge"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="app.crossBarPitch" key="crossBarPitch_pressured" v-if="app.gratingType === 'pressured'" :placeholder="staticData.app.select">
|
||||
<el-option
|
||||
v-for="item in calculationValues.crossBarPitch_pressured"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<p class="err" v-if="validation.crossBarPitch">{{ validation.crossBarPitch.msg }}</p>
|
||||
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.clearSpan ? 'is-error' : null" :label="staticData.app.t26">
|
||||
<el-input v-model="app.clearSpan" :placeholder="staticData.app.enter"></el-input>
|
||||
<p class="err" v-if="validation.clearSpan">{{ validation.clearSpan.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.bearingBarThickness ? 'is-error' : null" :label="staticData.app.t27">
|
||||
<el-input v-model="app.bearingBarThickness" :placeholder="staticData.app.enter"></el-input>
|
||||
<p class="err" v-if="validation.bearingBarThickness">{{ validation.bearingBarThickness.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :class="validation.bearingBarHeight ? 'is-error' : null" :label="staticData.app.t28">
|
||||
<el-select v-model="app.bearingBarHeight"
|
||||
key="bearingBarHeight"
|
||||
:placeholder="relativeValues || app.loadType === 'distributedLoad' ? staticData.app.select : staticData.app.t29">
|
||||
<el-option
|
||||
v-for="item in app.loadType === 'distributedLoad' ? calculationValues.bearingBarHeight : relativeValues"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p class="err" v-if="validation.bearingBarHeight">{{ validation.bearingBarHeight.msg }}</p>
|
||||
</el-form-item>
|
||||
<div class="calculateBtn">
|
||||
<button class="btn btn-reverse-fill" @click.prevent="calculate">{{ staticData.app.calculate }}</button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-5">
|
||||
<div class="appResult" v-if="waiting || appResult || validation">
|
||||
<p class="waiting" v-if="waiting">{{ staticData.app.waiting }}</p>
|
||||
<p class="err" v-if="!appResult">{{ staticData.app.validationErr }}</p>
|
||||
<p v-if="appResult" :class="appResult.sigmaStatus ? 'success' : 'failure'">{{ appResult.sigma }}</p>
|
||||
<p v-if="appResult" :class="appResult.deflectionStatus ? 'success' : 'failure'">{{ appResult.deflection }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="tableBox vehicles">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="4" class="center">{{ staticData.table1.title }}</th>
|
||||
<th class="middle">{{ staticData.table1.load }}</th>
|
||||
<th>{{ staticData.table1.imprint }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ staticData.table1.class1.t1 }}</td>
|
||||
<td>{{ staticData.table1.class1.t2 }}</td>
|
||||
<td>{{ staticData.table1.class1.t3 }}</td>
|
||||
<td>{{ staticData.table1.danSqm }}</td>
|
||||
<td>600</td>
|
||||
<td>1000 x 1000</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table1.class2.t1 }}</td>
|
||||
<td>{{ staticData.table1.class2.t2 }}</td>
|
||||
<td>{{ staticData.table1.class2.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>1.000</td>
|
||||
<td>200 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table1.class3.t1 }}</td>
|
||||
<td>{{ staticData.table1.class3.t2 }}</td>
|
||||
<td>{{ staticData.table1.class3.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>3.000</td>
|
||||
<td>200 x 400</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table1.class4.t1 }}</td>
|
||||
<td>{{ staticData.table1.class4.t2 }}</td>
|
||||
<td>{{ staticData.table1.class4.t3 }}</td>
|
||||
<td>{{ staticData.table1.danImprint }}</td>
|
||||
<td>9.000</td>
|
||||
<td>250 x 600</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="notice">{{ staticData.scrollToSee }}</p>
|
||||
<div class="tableBox forklifts">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="6" class="center">{{ staticData.table2.title }}</th>
|
||||
<th class="middle">{{ staticData.table2.load }}</th>
|
||||
<th>{{ staticData.table2.imprint }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>{{ staticData.table2.t1 }}</td>
|
||||
<td>{{ staticData.table2.t2 }}</td>
|
||||
<td>{{ staticData.table2.t3 }}</td>
|
||||
<td>{{ staticData.table2.t4 }}</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl1.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl1.t2 }}</td>
|
||||
<td>21</td>
|
||||
<td>10</td>
|
||||
<td>31</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>2600</td>
|
||||
<td>130 x 130</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl2.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl2.t2 }}</td>
|
||||
<td>31</td>
|
||||
<td>15</td>
|
||||
<td>46</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>4000</td>
|
||||
<td>175 x 150</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl3.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl3.t2 }}</td>
|
||||
<td>44</td>
|
||||
<td>25</td>
|
||||
<td>69</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>6300</td>
|
||||
<td>200 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl4.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl4.t2 }}</td>
|
||||
<td>60</td>
|
||||
<td>40</td>
|
||||
<td>100</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>9000</td>
|
||||
<td>300 x 200</td>
|
||||
</tr>
|
||||
<tr class="odd">
|
||||
<td>{{ staticData.table2.fl5.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl5.t2 }}</td>
|
||||
<td>90</td>
|
||||
<td>60</td>
|
||||
<td>150</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>14000</td>
|
||||
<td>375 x 200</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ staticData.table2.fl6.t1 }}</td>
|
||||
<td>{{ staticData.table2.fl6.t2 }}</td>
|
||||
<td>110</td>
|
||||
<td>80</td>
|
||||
<td>190</td>
|
||||
<td>{{ staticData.table2.danImprint }}</td>
|
||||
<td>17000</td>
|
||||
<td>450 x 200</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="notice">{{ staticData.scrollToSee }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import moment from 'moment-jalaali'
|
||||
import {fadeInAnimation} from '~/mixins/animations'
|
||||
import {fadeInAnimation} from '~/mixins/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
history: null,
|
||||
app: {
|
||||
method: 'a',
|
||||
type: 'elec',
|
||||
class: '',
|
||||
pointLoad: '',
|
||||
distributedLoad: '',
|
||||
bearingBarPitch: '',
|
||||
crossBarPitCh: '',
|
||||
clearSpan: '',
|
||||
bearingBarThickness: '',
|
||||
bearingBarHeight: '',
|
||||
locale: this.$route.params.lang
|
||||
},
|
||||
bearingBarPitch_elec: [30, 35, 41, 50],
|
||||
bearingBarPitch_press: [11, 22, 33, 44, 50, 55],
|
||||
crossBarPitCh_elec: [50, 76, 100],
|
||||
crossBarPitCh_press: [11, 22, 33, 44, 50, 55, 66, 77, 88, 100],
|
||||
bearingBarHeight: [20, 25, 30, 35, 40, 45, 50, 55, 60]
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
app: {
|
||||
method: 'custom',
|
||||
gratingType: 'forge',
|
||||
loadType: 'pointedLoad',
|
||||
vehicleClass: 'class1',
|
||||
pointedLoadValue: '',
|
||||
distributedLoadValue: '',
|
||||
bearingBarPitch: '',
|
||||
crossBarPitch: '',
|
||||
clearSpan: '',
|
||||
bearingBarThickness: '',
|
||||
bearingBarHeight: '',
|
||||
locale: this.$route.params.lang
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.calculation[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
methods: {},
|
||||
head() {
|
||||
return {
|
||||
htmlAttrs: {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
}
|
||||
calculationValues: null,
|
||||
relativeValues: null,
|
||||
validation: {},
|
||||
waiting: false,
|
||||
appResult: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.calculation[this.$route.params.lang]
|
||||
},
|
||||
gratingTypeTrigger() {
|
||||
return this.app.gratingType
|
||||
},
|
||||
crossBarPitchTrigger() {
|
||||
return this.app.crossBarPitch
|
||||
},
|
||||
loadTypeTrigger() {
|
||||
return this.app.loadType
|
||||
},
|
||||
vehicleClassTrigger() {
|
||||
return this.app.vehicleClass
|
||||
},
|
||||
methodTrigger() {
|
||||
return this.app.method
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
loadTypeTrigger(newVal, oldVal) {
|
||||
this.app.bearingBarHeight = ''
|
||||
},
|
||||
gratingTypeTrigger(newVal, oldVal) {
|
||||
this.app.bearingBarPitch = ''
|
||||
this.app.crossBarPitch = ''
|
||||
},
|
||||
crossBarPitchTrigger(newVal, oldVal) {
|
||||
if (this.app.loadType === 'pointedLoad') {
|
||||
this.app.bearingBarHeight = ''
|
||||
const data = {
|
||||
gratingType: this.app.gratingType,
|
||||
crossBarPitch: this.app.crossBarPitch
|
||||
}
|
||||
this.$axios.post('/api/public/calculation/relativeValues', data)
|
||||
.then(res => {
|
||||
this.relativeValues = res.data
|
||||
})
|
||||
.catch(err => {
|
||||
this.relativeValues = null
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
vehicleClassTrigger(newVal, oldVal) {
|
||||
this.app.crossBarPitch = ''
|
||||
if (newVal === 'class1') this.app.loadType = 'distributedLoad'
|
||||
else this.app.loadType = 'pointedLoad'
|
||||
},
|
||||
methodTrigger(newVal, oldVal) {
|
||||
if (newVal === 'classified') {
|
||||
this.app.vehicleClass = 'class1'
|
||||
this.app.loadType = 'distributedLoad'
|
||||
} else {
|
||||
this.app.vehicleClass = ''
|
||||
this.app.loadType = 'pointedLoad'
|
||||
}
|
||||
},
|
||||
waiting() {
|
||||
setTimeout(() => {
|
||||
this.$gsap.to($('.app .appResult'), {opacity: 1, minHeight: 145, height: 'auto', paddingTop: 30, paddingBottom: 30, duration: 0.5})
|
||||
}, 100)
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
methods: {
|
||||
calculate() {
|
||||
this.validation = {}
|
||||
this.waiting = true
|
||||
this.appResult = null
|
||||
this.$axios.post('/api/public/calculate', this.app)
|
||||
.then(res => {
|
||||
this.waiting = false
|
||||
this.appResult = res.data
|
||||
})
|
||||
.catch(err => {
|
||||
this.waiting = false
|
||||
if (err.response.status === 422) this.validation = err.response.data.validation
|
||||
})
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
htmlAttrs: {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const calculationValues = await $axios.get('/api/public/calculation/values')
|
||||
return {
|
||||
calculationValues: calculationValues.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.el-popper .popper__arrow {
|
||||
border-width: 0;
|
||||
filter: none;
|
||||
left: 35px;
|
||||
|
||||
&:lang(fa) {
|
||||
left: auto;
|
||||
right: 35px;
|
||||
}
|
||||
}
|
||||
.el-popper .popper__arrow {
|
||||
border-width: 0;
|
||||
filter: none;
|
||||
left: 35px;
|
||||
|
||||
&:lang(fa) {
|
||||
left: auto;
|
||||
right: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+201
-200
@@ -1,209 +1,210 @@
|
||||
<template>
|
||||
<div class="page contact--page">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="row">
|
||||
<div class="col-12 p1">
|
||||
<h2 class="title">{{staticData.t1}}</h2>
|
||||
<p>{{staticData.t2}}</p>
|
||||
</div>
|
||||
<div class="col-12 p2">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<span>{{staticData.t3}}</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-phone"></i>
|
||||
<a href="tel: +988634132704">Tell: +98 86 3 413 2704 - 7</a>
|
||||
-
|
||||
<a href="tel: +988634132703">Fax: +98 86 3 413 27 03</a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-envelope"></i>
|
||||
<a href="mailto: info@arakrail.com">info@arakrail.com</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 p3">
|
||||
<hr>
|
||||
<b>{{staticData.t4}}</b>
|
||||
<p>{{staticData.t5}}</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="" target="_blank">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" target="_blank">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="" target="_blank">
|
||||
<i class="fab fa-telegram-plane"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 p4">
|
||||
<div class="mapouter">
|
||||
<div class="gmap_canvas">
|
||||
<iframe id="gmap_canvas"
|
||||
src="https://maps.google.com/maps?q=%D8%A7%D8%B1%D8%A7%DA%A9%20%D8%B1%DB%8C%D9%84%20%D8%8C%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%20%D9%85%D8%B1%DA%A9%D8%B2%DB%8C%D8%8C%20%D8%A7%D8%B1%D8%A7%DA%A9%D8%8C%20%D8%B4%D9%87%D8%B1%DA%A9%20%D9%82%D8%B7%D8%A8%20%D8%B5%D9%86%D8%B9%D8%AA%DB%8C%D8%8C%20%D8%AE%DB%8C%D8%A7%D8%A8%D8%A7%D9%86%20%D8%AA%D9%84%D8%A7%D8%B4%D8%8C%20%D9%87%D9%85%D8%AA&t=&z=13&ie=UTF8&iwloc=&output=embed"
|
||||
frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2>{{staticData.t6}}</h2>
|
||||
<form class="form" @submit.prevent="upload">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<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 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-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.first_name ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t8" name="first_name" v-model="formData.first_name">
|
||||
<p v-if="validation.first_name">{{validation.first_name.msg}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.last_name ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t9" name="last_name" v-model="formData.last_name">
|
||||
<p v-if="validation.last_name">{{validation.last_name.msg}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.phone_number ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t10" name="phone_number" v-model="formData.phone_number">
|
||||
<p v-if="validation.phone_number">{{validation.phone_number.msg}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.email ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t11" name="email" v-model="formData.email">
|
||||
<p v-if="validation.email">{{validation.email.msg}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="formRow" :class="validation.message ? 'err' : null">
|
||||
<textarea :placeholder="staticData.t12" name="message" v-model="formData.message"></textarea>
|
||||
<p v-if="validation.message">{{validation.message.msg}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="formRow center-align">
|
||||
<button type="submit" class="btn btn-primary-fill">{{staticData.t13}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="page contact--page">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="row">
|
||||
<div class="col-12 p1">
|
||||
<h2 class="title">{{ staticData.t1 }}</h2>
|
||||
<!-- <p>{{staticData.t2}}</p>-->
|
||||
</div>
|
||||
<div class="col-12 p2">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<span>{{ $store.state.global.address[$route.params.lang] }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-phone"></i>
|
||||
<a :href="'tel:' + $store.state.global.tell">
|
||||
<span>{{ staticData.t15 }}</span>
|
||||
<b class="phone-number">{{ $store.state.global.tell_view }}</b>
|
||||
</a>
|
||||
-
|
||||
<a :href="'tel:' + $store.state.global.fax">
|
||||
<span>{{ staticData.t16 }}</span>
|
||||
<b class="phone-number">{{ $store.state.global.fax_view }}</b>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<i class="fas fa-envelope"></i>
|
||||
<a :href="'mailto:' + $store.state.global.email">{{ $store.state.global.email }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 p3">
|
||||
<hr>
|
||||
<b>{{ staticData.t4 }}</b>
|
||||
<p>{{ staticData.t5 }}</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a :href="$store.state.global.instagram_url" target="_blank">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a :href="$store.state.global.linkedin_url" target="_blank">
|
||||
<i class="fab fa-linkedin-in"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 p4">
|
||||
<div class="mapouter">
|
||||
<div class="gmap_canvas">
|
||||
<iframe id="gmap_canvas"
|
||||
src="https://maps.google.com/maps?q=%D8%A7%D8%B1%D8%A7%DA%A9%20%D8%B1%DB%8C%D9%84%20%D8%8C%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%20%D9%85%D8%B1%DA%A9%D8%B2%DB%8C%D8%8C%20%D8%A7%D8%B1%D8%A7%DA%A9%D8%8C%20%D8%B4%D9%87%D8%B1%DA%A9%20%D9%82%D8%B7%D8%A8%20%D8%B5%D9%86%D8%B9%D8%AA%DB%8C%D8%8C%20%D8%AE%DB%8C%D8%A7%D8%A8%D8%A7%D9%86%20%D8%AA%D9%84%D8%A7%D8%B4%D8%8C%20%D9%87%D9%85%D8%AA&t=&z=13&ie=UTF8&iwloc=&output=embed"
|
||||
frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2>{{ staticData.t6 }}</h2>
|
||||
<form class="form" @submit.prevent="upload">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<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 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-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.first_name ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t8" name="first_name" v-model="formData.first_name">
|
||||
<p v-if="validation.first_name">{{ validation.first_name.msg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.last_name ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t9" name="last_name" v-model="formData.last_name">
|
||||
<p v-if="validation.last_name">{{ validation.last_name.msg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.phone_number ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t10" name="phone_number" v-model="formData.phone_number">
|
||||
<p v-if="validation.phone_number">{{ validation.phone_number.msg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="formRow" :class="validation.email ? 'err' : null">
|
||||
<input type="text" :placeholder="staticData.t11" name="email" v-model="formData.email">
|
||||
<p v-if="validation.email">{{ validation.email.msg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="formRow" :class="validation.message ? 'err' : null">
|
||||
<textarea :placeholder="staticData.t12" name="message" v-model="formData.message"></textarea>
|
||||
<p v-if="validation.message">{{ validation.message.msg }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="formRow center-align">
|
||||
<button type="submit" class="btn btn-primary-fill">{{ staticData.t13 }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
reason: false,
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
phone_number: '',
|
||||
email: '',
|
||||
message: '',
|
||||
locale: this.$route.params.lang
|
||||
},
|
||||
reasons: null,
|
||||
validation: {}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
reason: false,
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
phone_number: '',
|
||||
email: '',
|
||||
message: '',
|
||||
locale: this.$route.params.lang
|
||||
},
|
||||
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)
|
||||
})
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const reasons = await $axios.get(`/api/public/contact/reason`)
|
||||
return {
|
||||
reasons: reasons.data
|
||||
}
|
||||
}
|
||||
}
|
||||
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)
|
||||
})
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const reasons = await $axios.get(`/api/public/contact/reason`)
|
||||
return {
|
||||
reasons: reasons.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mapouter{
|
||||
position: relative;
|
||||
text-align: right;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gmap_canvas{
|
||||
overflow: hidden;
|
||||
background: none !important;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#gmap_canvas{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.mapouter{
|
||||
position: relative;
|
||||
text-align: right;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gmap_canvas{
|
||||
overflow: hidden;
|
||||
background: none !important;
|
||||
height: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#gmap_canvas{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
+221
-222
@@ -1,232 +1,231 @@
|
||||
<template>
|
||||
<div class="page home--page">
|
||||
|
||||
<div class="slider-container">
|
||||
<div id="slider" class="anim-parallax-hero">
|
||||
<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>{{item.slider_details[$route.params.lang].title}}</h1>
|
||||
<p>{{item.slider_details[$route.params.lang].caption}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="s1">
|
||||
<div class="go-down-btn" @click="scrollDown">
|
||||
<em class="fa fa-angle-double-down"></em>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 title-side">
|
||||
<h2 class="title title-shape">{{staticData.s1.title}}</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 caption-side">
|
||||
<p>{{staticData.s1.caption}}</p>
|
||||
<nuxt-link :to="{name: 'lang-about',params:{lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s1.link}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2">
|
||||
<img src="~/assets/img/home/hp-s1-i2.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title title-shape-center">{{staticData.s1_2.t1}}</h2>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<p>{{staticData.s1_2.t2}}</p>
|
||||
<p>{{staticData.s1_2.t3}}</p>
|
||||
<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s1_2.link}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3">
|
||||
<img src="~/assets/img/home/hp-s2-i1.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="container-fluid">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{staticData.s2.t1}}</h2>
|
||||
<div>
|
||||
<p>{{staticData.s2.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<div class="txtBox">
|
||||
<h2 class="title title-subtitle">{{staticData.s2.t5}}</h2>
|
||||
<p>{{staticData.s2.t6}}</p>
|
||||
<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s2.link1}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-shape anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/home/hp-s2-i2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p3 row">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/home/hp-s2-i3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="txtBox">
|
||||
<h2 class="title title-subtitle">{{staticData.s2.t3}}</h2>
|
||||
<p>{{staticData.s2.t4}}</p>
|
||||
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s2.link2}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s4">
|
||||
<img src="~/assets/img/home/hp-s3-i1.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container clearfix">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{staticData.s3.t1}}</h2>
|
||||
<div class="col-12">
|
||||
<p>{{staticData.s3.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="products">
|
||||
<div class="parts p2 row">
|
||||
<div class="col-12 col-sm-6 col-lg-4 mb-5 anim-fadeIn" 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}}" class="product">
|
||||
<div class="imgBox">
|
||||
<img :src="item.cover" :alt="item.product_details[$route.params.lang].name">
|
||||
</div>
|
||||
<p>{{item.product_details[$route.params.lang].name}}</p>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s3.link}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s5">
|
||||
<img src="~/assets/img/home/hp-s4-i1.jpg" alt="" class="section-bg">
|
||||
<div class="txt anim-parallax">
|
||||
<h2 class="title title-shape">{{staticData.s4.t1}} <span>{{staticData.s4.t2}}</span></h2>
|
||||
<p>{{staticData.s4.t3}}</p>
|
||||
<a :href="catalog.file" target="_blank" class="btn btn-reverse-fill">{{staticData.s4.link}}</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CustomersCommunication/>
|
||||
|
||||
<section class="s6">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-2 d-none d-lg-block"></div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<h2 class="title title-shape">{{staticData.s6.t1}}</h2>
|
||||
<p>{{staticData.s6.t2}}</p>
|
||||
<!-- <nuxt-link :to="{name: 'lang-calculation',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.s6.link1}}</nuxt-link>-->
|
||||
<a @click.prevent="notAvailable" href="" class="btn btn-primary">{{staticData.s6.link1}}</a>
|
||||
<a @click.prevent="notAvailable" :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{staticData.s6.link2}}</a>
|
||||
</div>
|
||||
<div class="col-2 img-side d-none d-lg-block">
|
||||
<img src="~/assets/img/home/hp-s6-i1.png" class="anim-fadeIn" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="page home--page">
|
||||
|
||||
<div class="slider-container">
|
||||
<div id="slider" class="anim-parallax-hero">
|
||||
<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>{{ item.slider_details[$route.params.lang].title }}</h1>
|
||||
<p>{{ item.slider_details[$route.params.lang].caption }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="s1">
|
||||
<div class="go-down-btn" @click="scrollDown">
|
||||
<em class="fa fa-angle-double-down"></em>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 title-side">
|
||||
<h2 class="title title-shape">{{ staticData.s1.title }}</h2>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 caption-side">
|
||||
<p>{{ staticData.s1.caption }}</p>
|
||||
<nuxt-link :to="{name: 'lang-about',params:{lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s1.link }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2">
|
||||
<img src="~/assets/img/home/hp-s1-i2.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title title-shape-center">{{ staticData.s1_2.t1 }}</h2>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<p>{{ staticData.s1_2.t2 }}</p>
|
||||
<p>{{ staticData.s1_2.t3 }}</p>
|
||||
<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s1_2.link }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3">
|
||||
<img src="~/assets/img/home/hp-s2-i1.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="container-fluid">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{ staticData.s2.t1 }}</h2>
|
||||
<div>
|
||||
<p>{{ staticData.s2.t2 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p2 row">
|
||||
<div class="col-12 col-lg-6 order-1 order-lg-0">
|
||||
<div class="txtBox">
|
||||
<h2 class="title title-subtitle">{{ staticData.s2.t5 }}</h2>
|
||||
<p>{{ staticData.s2.t6 }}</p>
|
||||
<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s2.link1 }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6 order-0 order-lg-1 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-shape anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/home/hp-s2-i2.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="parts p3 row">
|
||||
<div class="col-12 col-lg-6 mb-5 mb-lg-0">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
|
||||
<div class="img">
|
||||
<img src="~/assets/img/home/hp-s2-i3.jpg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="txtBox">
|
||||
<h2 class="title title-subtitle">{{ staticData.s2.t3 }}</h2>
|
||||
<p>{{ staticData.s2.t4 }}</p>
|
||||
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s2.link2 }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s4">
|
||||
<img src="~/assets/img/home/hp-s3-i1.jpg" alt="" class="section-bg anim-parallax">
|
||||
<div class="container clearfix">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{ staticData.s3.t1 }}</h2>
|
||||
<div class="col-12">
|
||||
<p>{{ staticData.s3.t2 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="products">
|
||||
<div class="parts p2 row">
|
||||
<div class="col-12 col-sm-6 col-lg-4 mb-5 anim-fadeIn" v-for="item in favoriteProducts" :key="item._id">
|
||||
<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}" class="product">
|
||||
<div class="imgBox">
|
||||
<img :src="item.thumb" :alt="item.product_details[$route.params.lang].name">
|
||||
</div>
|
||||
<p>{{ item.product_details[$route.params.lang].name }}</p>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s3.link }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s5">
|
||||
<img src="~/assets/img/home/hp-s4-i1.jpg" alt="" class="section-bg">
|
||||
<div class="txt anim-parallax">
|
||||
<h2 class="title title-shape">{{ staticData.s4.t1 }} <span>{{ staticData.s4.t2 }}</span></h2>
|
||||
<p>{{ staticData.s4.t3 }}</p>
|
||||
<a v-if="catalog && catalog.file" :href="catalog.file[$route.params.lang]" target="_blank" class="btn btn-reverse-fill">{{ staticData.s4.link }}</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CustomersCommunication/>
|
||||
|
||||
<section class="s6">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-2 d-none d-lg-block"></div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<h2 class="title title-shape">{{ staticData.s6.t1 }}</h2>
|
||||
<p>{{ staticData.s6.t2 }}</p>
|
||||
<nuxt-link :to="{name: 'lang-calculation',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.s6.link1 }}</nuxt-link>
|
||||
<a @click.prevent="notAvailable" :href="calc_app_link" target="_blank" class="btn btn-primary-fill">{{ staticData.s6.link2 }}</a>
|
||||
</div>
|
||||
<div class="col-2 img-side d-none d-lg-block">
|
||||
<img src="~/assets/img/home/hp-s6-i1.png" class="anim-fadeIn" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
if (process.client) require('slick-carousel')
|
||||
import {fadeInAnimation, parallaxAnimation, parallaxAnimation_hero} from '~/mixins/animations'
|
||||
if (process.client) require('slick-carousel')
|
||||
import {fadeInAnimation, parallaxAnimation, parallaxAnimation_hero} from '~/mixins/animations'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
slider: null,
|
||||
products: null,
|
||||
catalog: null,
|
||||
calc_app_link: this.$store.state.staticData.calc_app_link,
|
||||
validation: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.homePage[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollDown() {
|
||||
this.$gsap.to(window, {scrollTo: {y: $('.home--page .s1'), offsetY: 90}, duration: 0.9, ease: 'power4.inOut'})
|
||||
},
|
||||
notAvailable() {
|
||||
this.$alert(this.$route.params.lang === 'fa' ? 'این بخش فعلا در دسترس نیست' : 'This section is currently unavailable', '', {
|
||||
confirmButtonText: 'OK',
|
||||
})
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation, parallaxAnimation, parallaxAnimation_hero],
|
||||
mounted() {
|
||||
/////////////////////////////////////// carousel
|
||||
$('#slider').slick({
|
||||
slidesToShow: 1,
|
||||
rtl: this.$route.params.lang === 'fa',
|
||||
dots: true,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: false
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
},
|
||||
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')
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
slider: null,
|
||||
favoriteProducts: null,
|
||||
catalog: null,
|
||||
calc_app_link: this.$store.state.staticData.calc_app_link,
|
||||
validation: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.homePage[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollDown() {
|
||||
this.$gsap.to(window, {scrollTo: {y: $('.home--page .s1'), offsetY: 90}, duration: 0.9, ease: 'power4.inOut'})
|
||||
},
|
||||
notAvailable() {
|
||||
this.$alert(this.$route.params.lang === 'fa' ? 'این بخش فعلا در دسترس نیست' : 'This section is currently unavailable', '', {
|
||||
confirmButtonText: 'OK',
|
||||
})
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation, parallaxAnimation, parallaxAnimation_hero],
|
||||
mounted() {
|
||||
/////////////////////////////////////// carousel
|
||||
$('#slider').slick({
|
||||
slidesToShow: 1,
|
||||
rtl: this.$route.params.lang === 'fa',
|
||||
dots: true,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 6000,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
arrows: false
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const slider = await $axios.get('/api/public/slider')
|
||||
const favoriteProducts = await $axios.get(`/api/public/favoriteProducts`)
|
||||
const catalog = await $axios.get('/api/public/catalog')
|
||||
|
||||
return {
|
||||
slider: slider.data,
|
||||
products: products.data,
|
||||
catalog: catalog.data
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
slider: slider.data,
|
||||
favoriteProducts: favoriteProducts.data,
|
||||
catalog: catalog.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.footer{
|
||||
background: #F0F0F0 !important;
|
||||
}
|
||||
.footer{
|
||||
background: #F0F0F0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
+178
-176
@@ -1,183 +1,185 @@
|
||||
<template>
|
||||
<div class="page product-details--page">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">{{productDetails.page_title}}</h2>
|
||||
<p>{{productDetails.page_description}}</p>
|
||||
<div class="image-preview">
|
||||
<img :src="product.cover" class="anim-fadeIn" ref="preview" :alt="productDetails.name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="images-carousel anim-fadeIn">
|
||||
<div id="images">
|
||||
<div class="imgBox">
|
||||
<img :src="product.cover" :alt="productDetails.name" @click="view(product.cover)">
|
||||
</div>
|
||||
<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" v-if="product.more_section">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{staticData.t1}}</h2>
|
||||
</div>
|
||||
|
||||
<!-- image left -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<h2 class="title title-subtitle">{{productDetails.more_title1}}</h2>
|
||||
<p>{{productDetails.more_description1}}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-shape anim-fadeIn">
|
||||
<img :src="product.more_section_image1" :alt="productDetails.more_title1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- image right -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
|
||||
<img :src="product.more_section_image2" :alt="productDetails.more_title2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h2 class="title title-subtitle">{{productDetails.more_title2}}</h2>
|
||||
<p>{{productDetails.more_description2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3"
|
||||
v-if="!product.render_image1.includes('undefined') ||
|
||||
!product.render_image2.includes('undefined') ||
|
||||
<div class="page product-details--page latin-digits">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">{{ productDetails.page_title }}</h2>
|
||||
<p>{{ productDetails.page_description }}</p>
|
||||
<div class="image-preview">
|
||||
<img :src="product.cover" class="anim-fadeIn" ref="preview" :alt="productDetails.name">
|
||||
<div class="images-carousel anim-fadeIn" v-if="product.images.length">
|
||||
<div id="images">
|
||||
<div class="imgBox">
|
||||
<img class="selected" :src="product.cover" :alt="productDetails.name" @click="view(product.cover)">
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s2" v-if="product.more_section">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="parts p1">
|
||||
<h2 class="title title-shape-center">{{ staticData.t1 }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- image left -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<h2 class="title title-subtitle">{{ productDetails.more_title1 }}</h2>
|
||||
<p>{{ productDetails.more_description1 }}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-shape anim-fadeIn">
|
||||
<img :src="product.more_section_image1" :alt="productDetails.more_title1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- image right -->
|
||||
<div class="parts row align-items-center">
|
||||
<div class="col-6">
|
||||
<div class="imgBox imgBox-reverse imgBox-shape-reverse anim-fadeIn">
|
||||
<img :src="product.more_section_image2" :alt="productDetails.more_title2">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h2 class="title title-subtitle">{{ productDetails.more_title2 }}</h2>
|
||||
<p>{{ productDetails.more_description2 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s3"
|
||||
v-if="product.render_image1 ||
|
||||
product.render_image2 ||
|
||||
product.download_section">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="parts p1" v-if="!product.render_image1.includes('undefined') || !product.render_image1.includes('undefined')">
|
||||
<h2 class="title">{{staticData.t2}}</h2>
|
||||
<p>{{staticData.t3}}</p>
|
||||
</div>
|
||||
|
||||
<div class="row parts p2" v-if="!product.render_image1.includes('undefined') || !product.render_image2.includes('undefined')">
|
||||
<div class="col-12 col-sm-6 mb-5">
|
||||
<img :src="product.render_image1" class="anim-fadeIn" :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-12 col-sm-6 mb-5">
|
||||
<img :src="product.render_image2" class="anim-fadeIn" :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="product.chart_image" class="anim-fadeIn" :alt="productDetails.name" v-if="!product.chart_image.includes('undefined')">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row parts p3" v-if="productDetails.chart_title">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{productDetails.chart_title}}</h2>
|
||||
<p>{{productDetails.chart_description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row parts p4" v-if="product.download_section">
|
||||
<div class="col-12">
|
||||
<h2>{{staticData.t4}}</h2>
|
||||
<div class="files">
|
||||
<div class="file anim-fadeIn" v-for="item in product.pdf_files" :key="item._id">
|
||||
<pdf-icon/>
|
||||
<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">{{staticData.t5}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.t6}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="parts p1" v-if="product.render_image1 || product.render_image1">
|
||||
<h2 class="title">{{ staticData.t2 }}</h2>
|
||||
<p>{{ staticData.t3 }}</p>
|
||||
</div>
|
||||
|
||||
<div class="row parts p2" v-if="product.render_image1 || product.render_image2">
|
||||
<div class="col-12 col-sm-6 mb-5">
|
||||
<img :src="product.render_image1" class="anim-fadeIn" :alt="productDetails.name" v-if="product.render_image1">
|
||||
<p v-if="product.render_image1">{{ productDetails.render_caption1 }}</p>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 mb-5">
|
||||
<img :src="product.render_image2" class="anim-fadeIn" :alt="productDetails.name" v-if="product.render_image2">
|
||||
<p v-if="product.render_image2">{{ productDetails.render_caption2 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row parts p3" v-if="productDetails.chart_title">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{ productDetails.chart_title }}</h2>
|
||||
<p>{{ productDetails.chart_description }}</p>
|
||||
</div>
|
||||
<div class="col-12 mb-5 mt-5">
|
||||
<img :src="product.chart_image" class="anim-fadeIn" :alt="productDetails.name" v-if="product.chart_image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row parts p4" v-if="product.download_section">
|
||||
<div class="col-12">
|
||||
<h2>{{ staticData.t4 }}</h2>
|
||||
<div class="files">
|
||||
<div class="file anim-fadeIn" v-for="item in product.pdf_files" :key="item._id">
|
||||
<pdf-icon/>
|
||||
<p>{{ item.pdf_details[$route.params.lang].name }}</p>
|
||||
<a :href="item.file[$route.params.lang]" :download="item.pdf_details[$route.params.lang].name" target="_blank" class="btn btn-primary-fill">{{ staticData.t5 }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="s4">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.t6 }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
if (process.client) require('slick-carousel')
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
if (process.client) require('slick-carousel')
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
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
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
mounted() {
|
||||
$('#images').slick({
|
||||
slidesToShow: 4,
|
||||
rtl: this.$route.params.lang === 'fa',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 575,
|
||||
settings: {
|
||||
slidesToShow: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.product.product_details[this.$route.params.lang].name
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
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) {
|
||||
this.$refs.preview.src = image
|
||||
$('.product-details--page #images img').removeClass('selected')
|
||||
$(event.target).addClass('selected')
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
mounted() {
|
||||
$('#images').slick({
|
||||
slidesToShow: 4,
|
||||
rtl: this.$route.params.lang === 'fa',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 575,
|
||||
settings: {
|
||||
slidesToShow: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.product.product_details[this.$route.params.lang].name
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
||||
+113
-113
@@ -1,121 +1,121 @@
|
||||
<template>
|
||||
<div class="page products--page">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">{{staticData.s1.t1}}</h2>
|
||||
<p>{{staticData.s1.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="filters anim-fadeIn">
|
||||
<h2 class="title title-subtitle">{{staticData.s2.t1}}</h2>
|
||||
<ul>
|
||||
<li @click="filtering(false)">
|
||||
<p class="active">{{staticData.s2.t3}}</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 products-container" v-if="filtered_products.length">
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-5 anim-fadeIn" 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">
|
||||
<div class="imgBox">
|
||||
<img :src="item.cover" :alt="item.product_details[$route.params.lang].name">
|
||||
</div>
|
||||
<h4>{{item.product_details[$route.params.lang].name}}</h4>
|
||||
<p>{{item.product_details[$route.params.lang].short_description}}</p>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row" v-else>
|
||||
<div class="col-12 products-container">
|
||||
<p class="no-product anim-fadeIn">{{staticData.s2.t2}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s3">
|
||||
<div class="container">
|
||||
<div class="panel anim-fadeIn">
|
||||
<h2 class="title title-shape-center">
|
||||
{{staticData.s3.t1}}
|
||||
<span class="subtitle">{{staticData.s3.t2}}</span>
|
||||
</h2>
|
||||
<p>{{staticData.s3.t3}}</p>
|
||||
<a :href="catalog.file" target="_blank" class="btn btn-reverse-fill">{{staticData.s3.t4}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="page products--page latin-digits">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">{{ staticData.s1.t1 }}</h2>
|
||||
<p>{{ staticData.s1.t2 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="filters anim-fadeIn">
|
||||
<h2 class="title title-subtitle">{{ staticData.s2.t1 }}</h2>
|
||||
<ul>
|
||||
<li @click="filtering(false)">
|
||||
<p class="active">{{ staticData.s2.t3 }}</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 products-container" v-if="filtered_products.length">
|
||||
|
||||
<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-5 anim-fadeIn" 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">
|
||||
<div class="imgBox">
|
||||
<img :src="item.thumb" :alt="item.product_details[$route.params.lang].name">
|
||||
</div>
|
||||
<h4>{{ item.product_details[$route.params.lang].name }}</h4>
|
||||
<p>{{ item.product_details[$route.params.lang].short_description }}</p>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row" v-else>
|
||||
<div class="col-12 products-container">
|
||||
<p class="no-product anim-fadeIn">{{ staticData.s2.t2 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s3">
|
||||
<div class="container">
|
||||
<div class="panel anim-fadeIn">
|
||||
<h2 class="title title-shape-center">
|
||||
{{ staticData.s3.t1 }}
|
||||
<span class="subtitle">{{ staticData.s3.t2 }}</span>
|
||||
</h2>
|
||||
<p>{{ staticData.s3.t3 }}</p>
|
||||
<a v-if="catalog && catalog.file" :href="catalog.file[$route.params.lang]" target="_blank" class="btn btn-reverse-fill">{{ staticData.s3.t4 }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
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: {
|
||||
filtering(key) {
|
||||
$('.products--page .filters p').removeClass('active')
|
||||
$(event.target).addClass('active')
|
||||
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: {
|
||||
filtering(key) {
|
||||
$('.products--page .filters p').removeClass('active')
|
||||
$(event.target).addClass('active')
|
||||
|
||||
this.$gsap.timeline({
|
||||
yoyo: true,
|
||||
repeat: 1
|
||||
})
|
||||
.to($('.products--page .products-container'),
|
||||
{
|
||||
opacity: 0,
|
||||
duration: 0.3,
|
||||
onComplete: () => {
|
||||
this.filter = key
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
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')
|
||||
this.$gsap.timeline({
|
||||
yoyo: true,
|
||||
repeat: 1
|
||||
})
|
||||
.to($('.products--page .products-container'),
|
||||
{
|
||||
opacity: 0,
|
||||
duration: 0.3,
|
||||
onComplete: () => {
|
||||
this.filter = key
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
return {
|
||||
products: products.data,
|
||||
productCategories: productCategories.data,
|
||||
catalog: catalog.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+111
-111
@@ -1,117 +1,117 @@
|
||||
<template>
|
||||
<div class="page projects--page">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">{{staticData.t1}}</h2>
|
||||
<p>{{staticData.t2}}</p>
|
||||
<p>{{staticData.t3}}</p>
|
||||
|
||||
<div class="projects" v-if="projects.length">
|
||||
<div class="project anim-fadeIn" 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>{{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 class="no-project" v-else>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p>{{staticData.t7}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{staticData.t4}}</h2>
|
||||
<nuxt-link :to="{name: 'lang-contact',params:{lang: $route.params.lang}}" class="btn btn-reverse-fill">{{staticData.t5}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="page projects--page">
|
||||
<Hero :title="staticData.hero"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<h2 class="title">{{ staticData.t1 }}</h2>
|
||||
<p>{{ staticData.t2 }}</p>
|
||||
<p>{{ staticData.t3 }}</p>
|
||||
|
||||
<div class="projects" v-if="projects.length">
|
||||
<div class="project anim-fadeIn" 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>{{ 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 class="no-project" v-else>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p>{{ staticData.t7 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{ staticData.t4 }}</h2>
|
||||
<nuxt-link :to="{name: 'lang-contact',params:{lang: $route.params.lang}}" class="btn btn-reverse-fill">{{ staticData.t5 }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
if (process.client) require('slick-carousel')
|
||||
import moment from "moment-jalaali"
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
if (process.client) require('slick-carousel')
|
||||
import moment from "moment-jalaali"
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
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]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
mounted() {
|
||||
this.projects.forEach((item, index) => {
|
||||
$(`#project_${index}`).slick({
|
||||
slidesToShow: 1,
|
||||
centerMode: true,
|
||||
centerPadding: '150px',
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
centerMode: false
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 575,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
centerMode: false
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const projects = await $axios.get(`/api/public/projects`)
|
||||
return {
|
||||
projects: projects.data
|
||||
}
|
||||
}
|
||||
}
|
||||
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).jYear()
|
||||
else return moment(date).year()
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
mounted() {
|
||||
this.projects.forEach((item, index) => {
|
||||
$(`#project_${index}`).slick({
|
||||
slidesToShow: 1,
|
||||
centerMode: true,
|
||||
centerPadding: '150px',
|
||||
infinite: true,
|
||||
arrows: true,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
centerMode: false
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 575,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
centerMode: false
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
})
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.hero
|
||||
}
|
||||
},
|
||||
async asyncData({$axios}) {
|
||||
const projects = await $axios.get(`/api/public/projects`)
|
||||
return {
|
||||
projects: projects.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
<template>
|
||||
<div class="page tech-info--page">
|
||||
<Hero :title="staticData.title"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="content gDesign">
|
||||
<h2 class="first">{{staticData.t1}}</h2>
|
||||
<p>{{staticData.t2}}</p>
|
||||
<p v-html="staticData.t3"></p>
|
||||
<p>{{staticData.t4}}</p>
|
||||
<br>
|
||||
<br>
|
||||
<p>{{staticData.t5}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{staticData.t6}}</h2>
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.t7}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CustomersCommunication/>
|
||||
</div>
|
||||
<div class="page tech-info--page latin-digits">
|
||||
<Hero :title="staticData.title"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="content gDesign">
|
||||
<h2 class="first">{{ staticData.t1 }}</h2>
|
||||
<p>{{ staticData.t2 }}</p>
|
||||
<p v-html="staticData.t3"></p>
|
||||
<p>{{ staticData.t4 }}</p>
|
||||
<br>
|
||||
<br>
|
||||
<p>{{ staticData.t5 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{ staticData.t6 }}</h2>
|
||||
<nuxt-link :to="{name: 'lang-calculation',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.t7 }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CustomersCommunication/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.gDesign[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
},
|
||||
}
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.gDesign[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,79 +1,67 @@
|
||||
<template>
|
||||
<div class="page tech-info--page">
|
||||
<Hero :title="staticData.title"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="content gStandard">
|
||||
<h2 class="first">{{staticData.t1}}</h2>
|
||||
<p>{{staticData.t2}}</p>
|
||||
|
||||
<h2>{{staticData.t3}}</h2>
|
||||
<p>{{staticData.t4}}</p>
|
||||
<p>{{staticData.t5}}</p>
|
||||
|
||||
<h2>{{staticData.t6}}</h2>
|
||||
<p>{{staticData.t7}}</p>
|
||||
<img class="i1 anim-fadeIn" src="~/assets/img/tech-info/g-standard.png" alt="">
|
||||
|
||||
<h2>{{staticData.t8}}</h2>
|
||||
<p>{{staticData.t9}}</p>
|
||||
<img class="i2 anim-fadeIn" src="~/assets/img/tech-info/DIN24537.png" alt="">
|
||||
|
||||
<h2>{{staticData.t10}}</h2>
|
||||
<p>{{staticData.t11}}</p>
|
||||
<p>{{staticData.t12}}</p>
|
||||
<p>{{staticData.t13}}</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>{{staticData.t14}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t15}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t16}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t17}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t18}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{staticData.t19}}</h2>
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.t20}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CustomersCommunication/>
|
||||
</div>
|
||||
<div class="page tech-info--page latin-digits">
|
||||
<Hero :title="staticData.title"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="content gStandard">
|
||||
<h2 class="first">{{ staticData.t1 }}</h2>
|
||||
<p>{{ staticData.t2 }}</p>
|
||||
|
||||
<h2>{{ staticData.t3 }}</h2>
|
||||
<p>{{ staticData.t4 }}</p>
|
||||
<p>{{ staticData.t5 }}</p>
|
||||
|
||||
<h2>{{ staticData.t6 }}</h2>
|
||||
<p>{{ staticData.t7 }}</p>
|
||||
<img class="i1 anim-fadeIn" src="~/assets/img/tech-info/g-standard.png" alt="">
|
||||
|
||||
<h2>{{ staticData.t8 }}</h2>
|
||||
<p>{{ staticData.t9 }}</p>
|
||||
<img class="i2 anim-fadeIn" src="~/assets/img/tech-info/DIN24537.png" alt="">
|
||||
|
||||
<h2>{{ staticData.t10 }}</h2>
|
||||
<p>{{ staticData.t11 }}</p>
|
||||
<p>{{ staticData.t12 }}</p>
|
||||
<p>{{ staticData.t13 }}</p>
|
||||
|
||||
<ul>
|
||||
<li v-for="item in $store.state.staticData.about.en.s4" :key="item.title">
|
||||
<a :href="`/standards_pdf/${item.link.url}`" download target="_blank">{{ item.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{ staticData.t19 }}</h2>
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.t20 }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CustomersCommunication/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.gStandard[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.gStandard[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="page tech-info--page">
|
||||
<div class="page tech-info--page latin-digits">
|
||||
<Hero :title="staticData.title"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
@@ -51,7 +51,7 @@
|
||||
<span>{{staticData.t22}}</span>
|
||||
</p>
|
||||
<p>{{staticData.t23}}</p>
|
||||
|
||||
|
||||
<div class="imgBox anim-fadeIn">
|
||||
<img src="~/assets/img/tech-info/ti-Model-4.jpg" alt="">
|
||||
<p>{{staticData.t24}}</p>
|
||||
|
||||
+81
-71
@@ -1,77 +1,87 @@
|
||||
<template>
|
||||
<div class="page tech-info--page">
|
||||
<Hero :title="staticData.title"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="content gUsage">
|
||||
<h2 class="first">{{staticData.t1}}</h2>
|
||||
<p v-html="staticData.t2"></p>
|
||||
<p>{{staticData.t3}}</p>
|
||||
<p>{{staticData.t4}}</p>
|
||||
<p>{{staticData.t5}}</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>{{staticData.t6}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t7}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t8}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t9}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t10}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t11}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t12}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t13}}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{staticData.t14}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{staticData.t15}}</h2>
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{staticData.t16}}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CustomersCommunication/>
|
||||
</div>
|
||||
<div class="page tech-info--page latin-digits">
|
||||
<Hero :title="staticData.title"/>
|
||||
<section class="s1">
|
||||
<div class="container">
|
||||
<div class="panel">
|
||||
<div class="content gUsage">
|
||||
<h2 class="first">{{ staticData.t1 }}</h2>
|
||||
<p v-html="staticData.t2"></p>
|
||||
<p>{{ staticData.t3 }}</p>
|
||||
<p>{{ staticData.t4 }}</p>
|
||||
<p>{{ staticData.t5 }}</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<p>{{ staticData.t6 }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{ staticData.t7 }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{ staticData.t8 }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{ staticData.t9 }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{ staticData.t10 }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{ staticData.t11 }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{ staticData.t12 }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{ staticData.t13 }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>{{ staticData.t14 }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="first mt-5">{{ staticData.t17 }}</h2>
|
||||
<div class="images">
|
||||
<img src="~/assets/img/grating-usage/4.jpg" :alt="staticData.title">
|
||||
<img src="~/assets/img/grating-usage/8.jpg" :alt="staticData.title">
|
||||
<img src="~/assets/img/grating-usage/13.jpg" :alt="staticData.title">
|
||||
<img src="~/assets/img/grating-usage/88-wood-1.jpg" :alt="staticData.title">
|
||||
<img src="~/assets/img/grating-usage/industri-2.jpg" :alt="staticData.title">
|
||||
<img src="~/assets/img/grating-usage/infills-1b.jpg" :alt="staticData.title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="s2">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2 class="title">{{ staticData.t15 }}</h2>
|
||||
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" class="btn btn-primary">{{ staticData.t16 }}</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<CustomersCommunication/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
import {fadeInAnimation} from "~/mixins/animations"
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.gUsage[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
computed: {
|
||||
staticData() {
|
||||
return this.$store.state.staticData.gUsage[this.$route.params.lang]
|
||||
}
|
||||
},
|
||||
mixins: [fadeInAnimation],
|
||||
head() {
|
||||
return {
|
||||
title: this.staticData.title
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
+183
-182
@@ -1,191 +1,192 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
|
||||
<el-button type="success" @click="upload">بروزرسانی</el-button>
|
||||
</admin-title-bar>
|
||||
|
||||
<div class="col-12">
|
||||
<admin-panel>
|
||||
<h2>تصویر</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="post.cover" alt="" style="width: 100%">
|
||||
<input type="file" ref="cover" @change="preview">
|
||||
<p class="err" v-if="validation.cover">{{validation.cover.msg}}</p>
|
||||
|
||||
<el-form class="secondTitle">
|
||||
<el-form-item prop="category" :class="validation.category ? 'is-error' : ''" label="دسته بندی">
|
||||
<el-select v-model="post.category" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in blogCategories"
|
||||
:key="item._id"
|
||||
:label="item.blogCategory_details.fa.name"
|
||||
:value="item._id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p class="err" v-if="validation.category">{{validation.category.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="published" label="وضعیت انتشار پست">
|
||||
<el-switch v-model="post.published" style="margin-right: 15px;"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<!-- fa -->
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>فارسی</h2>
|
||||
<el-divider></el-divider>
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.fa_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input v-model="post.post_details.fa.title"></el-input>
|
||||
<p class="err" v-if="validation.fa_title">{{validation.fa_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="short_description" :class="validation.fa_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="post.post_details.fa.short_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_short_description">{{validation.fa_short_description.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<h6 style="margin-bottom: 30px;">توضیحات پست</h6>
|
||||
<client-only>
|
||||
<ckeditor v-model="post.post_details.fa.description" :config="editorConfig"></ckeditor>
|
||||
<p class="err" v-if="validation.fa_description">{{validation.fa_description.msg}}</p>
|
||||
</client-only>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<!-- en -->
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>انگلیسی</h2>
|
||||
<el-divider></el-divider>
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.en_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input v-model="post.post_details.en.title"></el-input>
|
||||
<p class="err" v-if="validation.en_title">{{validation.en_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="short_description" :class="validation.en_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="post.post_details.en.short_description"></el-input>
|
||||
<p class="err" v-if="validation.en_short_description">{{validation.en_short_description.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<h6 style="margin-bottom: 30px;">توضیحات پست</h6>
|
||||
<client-only>
|
||||
<ckeditor v-model="post.post_details.en.description" :config="editorConfig_en"></ckeditor>
|
||||
<p class="err" v-if="validation.en_description">{{validation.en_description.msg}}</p>
|
||||
</client-only>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
|
||||
<el-button type="success" @click="upload">بروزرسانی</el-button>
|
||||
</admin-title-bar>
|
||||
|
||||
<div class="col-12">
|
||||
<admin-panel>
|
||||
<h2>تصویر</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="post.cover" alt="" style="width: 100%">
|
||||
<input type="file" ref="cover" @change="preview">
|
||||
<p class="err" v-if="validation.cover">{{ validation.cover.msg }}</p>
|
||||
|
||||
<el-form class="secondTitle">
|
||||
<el-form-item prop="category" :class="validation.category ? 'is-error' : ''" label="دسته بندی">
|
||||
<el-select v-model="post.category" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in blogCategories"
|
||||
:key="item._id"
|
||||
:label="item.blogCategory_details.fa.name"
|
||||
:value="item._id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p class="err" v-if="validation.category">{{ validation.category.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="published" label="وضعیت انتشار پست">
|
||||
<el-switch v-model="post.published" style="margin-right: 15px;"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<!-- fa -->
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>فارسی</h2>
|
||||
<el-divider></el-divider>
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.fa_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input v-model="post.post_details.fa.title"></el-input>
|
||||
<p class="err" v-if="validation.fa_title">{{ validation.fa_title.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="short_description" :class="validation.fa_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="post.post_details.fa.short_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_short_description">{{ validation.fa_short_description.msg }}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<h6 style="margin-bottom: 30px;">توضیحات پست</h6>
|
||||
<client-only>
|
||||
<ckeditor v-model="post.post_details.fa.description" :config="editorConfig"></ckeditor>
|
||||
<p class="err" v-if="validation.fa_description">{{ validation.fa_description.msg }}</p>
|
||||
</client-only>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<!-- en -->
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>انگلیسی</h2>
|
||||
<el-divider></el-divider>
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.en_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input v-model="post.post_details.en.title"></el-input>
|
||||
<p class="err" v-if="validation.en_title">{{ validation.en_title.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="short_description" :class="validation.en_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="post.post_details.en.short_description"></el-input>
|
||||
<p class="err" v-if="validation.en_short_description">{{ validation.en_short_description.msg }}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<h6 style="margin-bottom: 30px;">توضیحات پست</h6>
|
||||
<client-only>
|
||||
<ckeditor v-model="post.post_details.en.description" :config="editorConfig_en"></ckeditor>
|
||||
<p class="err" v-if="validation.en_description">{{ validation.en_description.msg }}</p>
|
||||
</client-only>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
post: null,
|
||||
blogCategories: null,
|
||||
editorConfig: {
|
||||
language: 'fa',
|
||||
extraPlugins: ['bidi', 'justify']
|
||||
},
|
||||
editorConfig_en: {
|
||||
language: 'en',
|
||||
extraPlugins: ['bidi', 'justify']
|
||||
},
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
post: null,
|
||||
blogCategories: null,
|
||||
editorConfig: {
|
||||
language: 'fa',
|
||||
extraPlugins: ['bidi', 'justify']
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'ویرایش پست'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
editorConfig_en: {
|
||||
language: 'en',
|
||||
extraPlugins: ['bidi', 'justify']
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.validation = {}
|
||||
const data = new FormData()
|
||||
|
||||
data.append('fa_title', this.post.post_details.fa.title)
|
||||
data.append('en_title', this.post.post_details.en.title)
|
||||
|
||||
data.append('fa_description', this.post.post_details.fa.description)
|
||||
data.append('en_description', this.post.post_details.en.description)
|
||||
|
||||
data.append('fa_short_description', this.post.post_details.fa.short_description)
|
||||
data.append('en_short_description', this.post.post_details.en.short_description)
|
||||
|
||||
data.append('published', this.post.published)
|
||||
data.append('category', this.post.category)
|
||||
|
||||
if (this.$refs.cover.files[0]) data.append('cover', this.$refs.cover.files[0])
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$axios.put(`/api/private/blog/${this.post._id}`, data, axiosConfig)
|
||||
.then(response => {
|
||||
this.$message({
|
||||
message: 'پست با موفقیت بروزرسانی شد.',
|
||||
type: 'success'
|
||||
})
|
||||
}).catch(error => {
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.message, 'خطا', {
|
||||
confirmButtonText: 'باشه',
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
preview(event) {
|
||||
this.post.cover = URL.createObjectURL(event.target.files[0]);
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
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
|
||||
}
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'ویرایش پست'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.validation = {}
|
||||
const data = new FormData()
|
||||
|
||||
data.append('fa_title', this.post.post_details.fa.title)
|
||||
data.append('en_title', this.post.post_details.en.title)
|
||||
|
||||
data.append('fa_description', this.post.post_details.fa.description)
|
||||
data.append('en_description', this.post.post_details.en.description)
|
||||
|
||||
data.append('fa_short_description', this.post.post_details.fa.short_description)
|
||||
data.append('en_short_description', this.post.post_details.en.short_description)
|
||||
|
||||
data.append('published', this.post.published)
|
||||
data.append('category', this.post.category)
|
||||
|
||||
if (this.$refs.cover.files[0]) data.append('cover', this.$refs.cover.files[0])
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$axios.put(`/api/private/blog/${this.post._id}`, data, axiosConfig)
|
||||
.then(response => {
|
||||
this.$message({
|
||||
message: 'پست با موفقیت بروزرسانی شد.',
|
||||
type: 'success'
|
||||
})
|
||||
this.post = response.data
|
||||
}).catch(error => {
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.message, 'خطا', {
|
||||
confirmButtonText: 'باشه',
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
preview(event) {
|
||||
this.post.cover = URL.createObjectURL(event.target.files[0]);
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
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>
|
||||
|
||||
+107
-82
@@ -1,90 +1,115 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title"></admin-title-bar>
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>افزودن یا بروزرسانی کاتالوگ:</h2>
|
||||
<el-divider></el-divider>
|
||||
<el-form>
|
||||
<input type="file" ref="file">
|
||||
<el-button @click="upload" type="success">افزودن</el-button>
|
||||
<p style="color: red;" v-if="validation.pdf">{{validation.pdf.msg}}</p>
|
||||
</el-form>
|
||||
<el-divider></el-divider>
|
||||
<a v-if="catalog && catalog.file" :href="catalog.file" target="_blank">
|
||||
<el-button>دانلود و مشاهده کاتالوگ فعلی</el-button>
|
||||
</a>
|
||||
</admin-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title"></admin-title-bar>
|
||||
<div class="col-12">
|
||||
<admin-panel>
|
||||
<h2>افزودن یا بروزرسانی کاتالوگ:</h2>
|
||||
</admin-panel>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>کاتالوگ فارسی:</h2>
|
||||
<el-divider></el-divider>
|
||||
<el-form>
|
||||
<input type="file" ref="file_fa">
|
||||
<el-button @click="upload('fa')" type="success">افزودن</el-button>
|
||||
<p style="color: red;" v-if="validation.pdf && locale === 'fa'">{{ validation.pdf.msg }}</p>
|
||||
</el-form>
|
||||
<el-divider></el-divider>
|
||||
<a v-if="catalog && catalog.file && catalog.file.fa" :href="catalog.file.fa" target="_blank">
|
||||
<el-button>دانلود و مشاهده کاتالوگ فعلی</el-button>
|
||||
</a>
|
||||
</admin-panel>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>کاتالوگ انگلیسی:</h2>
|
||||
<el-divider></el-divider>
|
||||
<el-form>
|
||||
<input type="file" ref="file_en">
|
||||
<el-button @click="upload('en')" type="success">افزودن</el-button>
|
||||
<p style="color: red;" v-if="validation.pdf && locale === 'en'">{{ validation.pdf.msg }}</p>
|
||||
</el-form>
|
||||
<el-divider></el-divider>
|
||||
<a v-if="catalog && catalog.file && catalog.file.en" :href="catalog.file.en" target="_blank">
|
||||
<el-button>دانلود و مشاهده کاتالوگ فعلی</el-button>
|
||||
</a>
|
||||
</admin-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
catalog: null,
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'آپلود کاتالوگ اصلی سایت'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.validation = {}
|
||||
const data = new FormData()
|
||||
data.append('pdf', this.$refs.file.files[0])
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.$axios.post(`/api/private/catalog`, data, axiosConfig)
|
||||
.then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'کاتالوگ با موفقیت آپلود شد'
|
||||
})
|
||||
this.$refs.file.value = null
|
||||
this.catalog = res.data
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) this.validation = err.response.data.validation
|
||||
else console.log(err.response.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
async asyncData({$axios}) {
|
||||
let catalog = await $axios.get('/api/public/catalog')
|
||||
return {
|
||||
catalog: catalog.data
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
catalog: null,
|
||||
locale: null,
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'آپلود کاتالوگ اصلی سایت'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload(locale) {
|
||||
this.locale = locale
|
||||
this.validation = {}
|
||||
locale === 'fa' ? this.$refs.file_en.value = null : this.$refs.file_fa.value = null
|
||||
const data = new FormData()
|
||||
data.append('locale', locale)
|
||||
locale === 'fa' ? data.append('pdf', this.$refs.file_fa.files[0]) : data.append('pdf', this.$refs.file_en.files[0])
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.$axios.post(`/api/private/catalog`, data, axiosConfig)
|
||||
.then(res => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'کاتالوگ با موفقیت آپلود شد'
|
||||
})
|
||||
this.$refs.file_fa.value = null
|
||||
this.$refs.file_en.value = null
|
||||
this.catalog = res.data
|
||||
})
|
||||
.catch(err => {
|
||||
if (err.response.status === 422) this.validation = err.response.data.validation
|
||||
else console.log(err.response.data)
|
||||
})
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
async asyncData({$axios}) {
|
||||
let catalog = await $axios.get('/api/public/catalog')
|
||||
return {
|
||||
catalog: catalog.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+60
-51
@@ -1,57 +1,66 @@
|
||||
<template>
|
||||
<div class="col-12">
|
||||
<el-form @submit.native.prevent="loginFunction">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<admin-panel style="width: 50%;margin: 300px auto 0">
|
||||
<h1 style="text-align: center;">ورود به پنل مدیریت</h1>
|
||||
<el-divider></el-divider>
|
||||
<el-form-item prop="username" :class="validation.username ? 'is-error' : ''" label="نام کاربری">
|
||||
<el-input v-model="login.username"></el-input>
|
||||
<p class="err" v-if="validation.username">{{validation.username.msg}}</p>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" :class="validation.password ? 'is-error' : ''" label="پسورد">
|
||||
<el-input v-model="login.password" type="password"></el-input>
|
||||
<p class="err" v-if="validation.password">{{validation.password.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-checkbox v-model="login.remember_me" style="display: block;margin-top: 30px;margin-bottom: 15px;">مرا به خاطر بسپار</el-checkbox>
|
||||
|
||||
<el-button size="small" native-type="submit">ورود</el-button>
|
||||
</admin-panel>
|
||||
<h1 v-if="$auth.loggedIn">{{$auth.user.name}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<el-form @submit.native.prevent="loginFunction">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 d-flex justify-content-center align-items-center" style="min-height: calc(100vh - 60px);">
|
||||
<admin-panel class="login">
|
||||
<h1 style="text-align: center;">ورود به پنل مدیریت</h1>
|
||||
<el-divider></el-divider>
|
||||
<el-form-item prop="username" :class="validation.username ? 'is-error' : ''" label="نام کاربری">
|
||||
<el-input v-model="login.username"></el-input>
|
||||
<p class="err" v-if="validation.username">{{ validation.username.msg }}</p>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" :class="validation.password ? 'is-error' : ''" label="پسورد">
|
||||
<el-input v-model="login.password" type="password"></el-input>
|
||||
<p class="err" v-if="validation.password">{{ validation.password.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-checkbox v-model="login.remember_me" style="display: block;margin-top: 30px;margin-bottom: 15px;">مرا به خاطر بسپار</el-checkbox>
|
||||
|
||||
<el-button size="small" native-type="submit">ورود</el-button>
|
||||
</admin-panel>
|
||||
<h1 v-if="$auth.loggedIn">{{ $auth.user.name }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
login: {
|
||||
username: '',
|
||||
password: '',
|
||||
remember_me: false
|
||||
},
|
||||
validation: {}
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
login: {
|
||||
username: '',
|
||||
password: '',
|
||||
remember_me: false
|
||||
},
|
||||
methods: {
|
||||
loginFunction() {
|
||||
this.validation = {}
|
||||
this.$auth.loginWith('local', {data: this.login})
|
||||
.then(res => {
|
||||
this.$router.push('/admin')
|
||||
})
|
||||
.catch(err => {
|
||||
this.validation = err.response.data.validation
|
||||
})
|
||||
}
|
||||
},
|
||||
layout: 'admin'
|
||||
}
|
||||
validation: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loginFunction() {
|
||||
this.validation = {}
|
||||
this.$auth.loginWith('local', {data: this.login})
|
||||
.then(res => {
|
||||
this.$router.push('/admin')
|
||||
})
|
||||
.catch(err => {
|
||||
this.validation = err.response.data.validation
|
||||
})
|
||||
}
|
||||
},
|
||||
layout: 'admin'
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 150px auto!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
+708
-682
File diff suppressed because it is too large
Load Diff
+144
-122
@@ -1,129 +1,151 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<nuxt-link :to="{name: 'admin-products-new'}">
|
||||
<el-button type="success">جدید</el-button>
|
||||
</nuxt-link>
|
||||
</admin-title-bar>
|
||||
<div class="col-lg-12">
|
||||
<admin-panel>
|
||||
<el-table
|
||||
:data="products"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="#">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="تصویر"
|
||||
width="230">
|
||||
<template slot-scope="scope">
|
||||
<el-image
|
||||
style="width: 100%; height: 100%"
|
||||
:src="scope.row.cover"
|
||||
fit="fit">
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="product_details.fa.name"
|
||||
label="نام"
|
||||
width="">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="category"
|
||||
label="دسته بندی"
|
||||
width="">
|
||||
<template slot-scope="scope">
|
||||
{{categoryName(scope.row.category)}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="ویرایش"
|
||||
width="150"
|
||||
align="left">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="warning" plain icon="el-icon-edit" @click="edit(scope.row._id)"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete" @click="del(scope.row._id)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</admin-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<nuxt-link :to="{name: 'admin-products-new'}">
|
||||
<el-button type="success">جدید</el-button>
|
||||
</nuxt-link>
|
||||
</admin-title-bar>
|
||||
<div class="col-lg-12">
|
||||
<admin-panel>
|
||||
<el-button-group class="filterBtns">
|
||||
<el-button :type="filter ? 'success' : 'primary'" @click="filter = true">محصولات صفحه اصلی</el-button>
|
||||
<el-button :type="!filter ? 'success' : 'primary'" @click="filter = false">تمام محصولات</el-button>
|
||||
</el-button-group>
|
||||
<el-divider></el-divider>
|
||||
<el-table
|
||||
:data="filteredProducts"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="#">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="تصویر"
|
||||
width="230">
|
||||
<template slot-scope="scope">
|
||||
<el-image
|
||||
style="width: 100%; height: 100%"
|
||||
:src="scope.row.thumb"
|
||||
fit="fit">
|
||||
</el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="product_details.fa.name"
|
||||
label="نام"
|
||||
width="">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="category"
|
||||
label="دسته بندی"
|
||||
width="">
|
||||
<template slot-scope="scope">
|
||||
{{ categoryName(scope.row.category) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="ویرایش"
|
||||
width="150"
|
||||
align="left">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="warning" plain icon="el-icon-edit" @click="edit(scope.row._id)"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete" @click="del(scope.row._id)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</admin-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'لیست محصولات',
|
||||
products: null,
|
||||
productCategories: null
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
categoryName(id) {
|
||||
let category = this.productCategories.filter(item => {
|
||||
return item._id === id
|
||||
})
|
||||
return category[0].category_details.fa.name
|
||||
},
|
||||
edit(id) {
|
||||
this.$router.push(`/admin/products/${id}`)
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'لیست محصولات',
|
||||
products: null,
|
||||
productCategories: null,
|
||||
filter: false
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredProducts() {
|
||||
if (this.filter) return this.products.filter(item => item.favorite)
|
||||
else return this.products
|
||||
|
||||
},
|
||||
del(id) {
|
||||
this.$confirm('این محصول حذف شود؟', 'هشدار', {
|
||||
confirmButtonText: 'بله',
|
||||
cancelButtonText: 'لغو',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$axios.delete(`/api/private/products/${id}`)
|
||||
.then(response => {
|
||||
this.products = this.products.filter(item => {
|
||||
return item._id !== id
|
||||
})
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'آیتم حذف شد'
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: err.response.data.message
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: 'عملیات لغو شد'
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
async asyncData({$axios, store}) {
|
||||
let products = await $axios.get(`/api/public/products`)
|
||||
let productCategories = await $axios.get(`/api/public/productCategories`)
|
||||
return {
|
||||
products: products.data,
|
||||
productCategories: productCategories.data
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
categoryName(id) {
|
||||
let category = this.productCategories.filter(item => {
|
||||
return item._id === id
|
||||
})
|
||||
return category[0].category_details.fa.name
|
||||
},
|
||||
edit(id) {
|
||||
this.$router.push(`/admin/products/${id}`)
|
||||
|
||||
},
|
||||
del(id) {
|
||||
this.$confirm('این محصول حذف شود؟', 'هشدار', {
|
||||
confirmButtonText: 'بله',
|
||||
cancelButtonText: 'لغو',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$axios.delete(`/api/private/products/${id}`)
|
||||
.then(response => {
|
||||
this.products = this.products.filter(item => {
|
||||
return item._id !== id
|
||||
})
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: 'آیتم حذف شد'
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: err.response.data.message
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'warning',
|
||||
message: 'عملیات لغو شد'
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
async asyncData({$axios, store}) {
|
||||
let products = await $axios.get(`/api/public/products`)
|
||||
let productCategories = await $axios.get(`/api/public/productCategories`)
|
||||
return {
|
||||
products: products.data,
|
||||
productCategories: productCategories.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.filterBtns {
|
||||
span {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+437
-431
@@ -1,439 +1,445 @@
|
||||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
|
||||
<el-button type="success" @click="upload">ایجاد</el-button>
|
||||
</admin-title-bar>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<p style="margin-bottom: 50px;color: green;font-weight: bold;font-size: 20px;">ابتدا محصول را ثبت کرده، سپس در مرحله بعد عکس های بیشتر و ویژگی های محصول را وارد کنید.</p>
|
||||
<el-form>
|
||||
|
||||
<el-form-item prop="category" :class="validation.category ? 'is-error' : ''" label="دسته بندی">
|
||||
<el-select v-model="formData.category" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in productCategories"
|
||||
:key="item._id"
|
||||
:label="item.category_details.fa.name"
|
||||
:value="item._id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p class="err" v-if="validation.category">{{validation.category.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="published" label="بخش دوم نمایش داده شود">
|
||||
<el-switch v-model="formData.more_section" style="margin-right: 15px;"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="published" label="دارای فایل های قابل دانلود باشد">
|
||||
<el-switch v-model="formData.download_section" style="margin-right: 15px;"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>کاور</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.cover" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="cover" @change="previewCover">
|
||||
<p class="err" v-if="validation.cover">{{validation.cover.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 470px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
|
||||
<h2 style="color: #000;font-weight: bold;font-size: 30px;">فارسی</h2>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_name ? 'is-error' : ''" label="نام">
|
||||
<el-input v-model="formData.product_details.fa.name"></el-input>
|
||||
<p class="err" v-if="validation.fa_name">{{validation.fa_name.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.short_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_short_description">{{validation.fa_short_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش اول صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_page_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.page_title"></el-input>
|
||||
<p class="err" v-if="validation.fa_page_title">{{validation.fa_page_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_page_description ? 'is-error' : ''" label="توضیحات">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.page_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_page_description">{{validation.fa_page_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش دوم صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_title1 ? 'is-error' : ''" label="عنوان اول">
|
||||
<el-input v-model="formData.product_details.fa.more_title1"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_title1">{{validation.fa_more_title1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_description1 ? 'is-error' : ''" label="توضیح اول">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.more_description1"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_description1">{{validation.fa_more_description1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_title2 ? 'is-error' : ''" label="عنوان دوم">
|
||||
<el-input v-model="formData.product_details.fa.more_title2"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_title2">{{validation.fa_more_title2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_description2 ? 'is-error' : ''" label="توضیح دوم">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.more_description2"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_description2">{{validation.fa_more_description2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<h3>بخش سوم صفحه (جدول و توضیحات)</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_chart_title ? 'is-error' : ''" label="عنوان جدول">
|
||||
<el-input v-model="formData.product_details.fa.chart_title"></el-input>
|
||||
<p class="err" v-if="validation.fa_chart_title">{{validation.fa_chart_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_chart_description ? 'is-error' : ''" label="توضیحات جدول">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.chart_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_chart_description">{{validation.fa_chart_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
|
||||
<h2 style="color: #000;font-weight: bold;font-size: 30px;">انگلیسی</h2>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_name ? 'is-error' : ''" label="نام">
|
||||
<el-input v-model="formData.product_details.en.name"></el-input>
|
||||
<p class="err" v-if="validation.en_name">{{validation.en_name.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.short_description"></el-input>
|
||||
<p class="err" v-if="validation.en_short_description">{{validation.en_short_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش اول صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_page_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.page_title"></el-input>
|
||||
<p class="err" v-if="validation.en_page_title">{{validation.en_page_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_page_description ? 'is-error' : ''" label="توضیحات">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.page_description"></el-input>
|
||||
<p class="err" v-if="validation.en_page_description">{{validation.en_page_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش دوم صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_title1 ? 'is-error' : ''" label="عنوان اول">
|
||||
<el-input v-model="formData.product_details.en.more_title1"></el-input>
|
||||
<p class="err" v-if="validation.en_more_title1">{{validation.en_more_title1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_description1 ? 'is-error' : ''" label="توضیح اول">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.more_description1"></el-input>
|
||||
<p class="err" v-if="validation.en_more_description1">{{validation.en_more_description1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_title2 ? 'is-error' : ''" label="عنوان دوم">
|
||||
<el-input v-model="formData.product_details.en.more_title2"></el-input>
|
||||
<p class="err" v-if="validation.en_more_title2">{{validation.en_more_title2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_description2 ? 'is-error' : ''" label="توضیح دوم">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.more_description2"></el-input>
|
||||
<p class="err" v-if="validation.en_more_description2">{{validation.en_more_description2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<h3>بخش سوم صفحه (جدول و توضیحات)</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_chart_title ? 'is-error' : ''" label="عنوان جدول">
|
||||
<el-input v-model="formData.product_details.en.chart_title"></el-input>
|
||||
<p class="err" v-if="validation.en_chart_title">{{validation.en_chart_title.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_chart_description ? 'is-error' : ''" label="توضیحات جدول">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.chart_description"></el-input>
|
||||
<p class="err" v-if="validation.en_chart_description">{{validation.en_chart_description.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>عکس اول بخش دوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.more_section_image1" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="more_section_image1" @change="previewMore_section_image1">
|
||||
<p class="err" v-if="validation.more_section_image1">{{validation.more_section_image1.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 778px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<h2 class="secondTitle">عکس دوم بخش دوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.more_section_image2" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="more_section_image2" @change="previewMore_section_image2">
|
||||
<p class="err" v-if="validation.more_section_image2">{{validation.more_section_image2.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 778px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس اول شماتیک بخش سوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.render_image1" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="render_image1" @change="previewRender_image1">
|
||||
<p class="err" v-if="validation.render_image1">{{validation.render_image1.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 300px عرض و 300px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.fa_render_caption1 ? 'is-error' : ''" label="کپشن فارسی">
|
||||
<el-input v-model="formData.product_details.fa.render_caption1"></el-input>
|
||||
<p class="err" v-if="validation.fa_render_caption1">{{validation.fa_render_caption1.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_render_caption1 ? 'is-error' : ''" label="کپشن انگلیسی">
|
||||
<el-input v-model="formData.product_details.en.render_caption1"></el-input>
|
||||
<p class="err" v-if="validation.en_render_caption1">{{validation.en_render_caption1.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس دوم شماتیک بخش سوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.render_image2" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="render_image2" @change="previewRender_image2">
|
||||
<p class="err" v-if="validation.render_image2">{{validation.render_image2.msg}}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 300px عرض و 300px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.fa_render_caption2 ? 'is-error' : ''" label="کپشن فارسی">
|
||||
<el-input v-model="formData.product_details.fa.render_caption2"></el-input>
|
||||
<p class="err" v-if="validation.fa_render_caption2">{{validation.fa_render_caption2.msg}}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_render_caption2 ? 'is-error' : ''" label="کپشن انگلیسی">
|
||||
<el-input v-model="formData.product_details.en.render_caption2"></el-input>
|
||||
<p class="err" v-if="validation.en_render_caption2">{{validation.en_render_caption2.msg}}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس جدول مشخصات محصول</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.chart_image" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="chart_image" @change="previewChart_image">
|
||||
<p class="err" v-if="validation.chart_image">{{validation.chart_image.msg}}</p>
|
||||
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<admin-title-bar :title="title">
|
||||
<el-button @click="$router.back()" type="primary">برگشت به صفحه قبل</el-button>
|
||||
<el-button type="success" @click="upload">ایجاد</el-button>
|
||||
</admin-title-bar>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<p style="margin-bottom: 50px;color: green;font-weight: bold;font-size: 20px;">ابتدا محصول را ثبت کرده، سپس در مرحله بعد عکس های بیشتر و ویژگی های محصول را وارد کنید.</p>
|
||||
<el-form>
|
||||
|
||||
<el-form-item prop="category" :class="validation.category ? 'is-error' : ''" label="دسته بندی">
|
||||
<el-select v-model="formData.category" placeholder="انتخاب کنید">
|
||||
<el-option
|
||||
v-for="item in productCategories"
|
||||
:key="item._id"
|
||||
:label="item.category_details.fa.name"
|
||||
:value="item._id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<p class="err" v-if="validation.category">{{ validation.category.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="published" label="بخش دوم نمایش داده شود">
|
||||
<el-switch v-model="formData.more_section" style="margin-right: 15px;"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="published" label="دارای فایل های قابل دانلود باشد">
|
||||
<el-switch v-model="formData.download_section" style="margin-right: 15px;"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="published" label="در صفحه اصلی باشد">
|
||||
<el-switch v-model="formData.favorite" style="margin-right: 15px;"></el-switch>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>کاور</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.cover" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="cover" @change="previewCover">
|
||||
<p class="err" v-if="validation.cover">{{ validation.cover.msg }}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 1010px عرض و 534px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
|
||||
<h2 style="color: #000;font-weight: bold;font-size: 30px;">فارسی</h2>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_name ? 'is-error' : ''" label="نام">
|
||||
<el-input v-model="formData.product_details.fa.name"></el-input>
|
||||
<p class="err" v-if="validation.fa_name">{{ validation.fa_name.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.short_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_short_description">{{ validation.fa_short_description.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش اول صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_page_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.page_title"></el-input>
|
||||
<p class="err" v-if="validation.fa_page_title">{{ validation.fa_page_title.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_page_description ? 'is-error' : ''" label="توضیحات">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.page_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_page_description">{{ validation.fa_page_description.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش دوم صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_title1 ? 'is-error' : ''" label="عنوان اول">
|
||||
<el-input v-model="formData.product_details.fa.more_title1"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_title1">{{ validation.fa_more_title1.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_description1 ? 'is-error' : ''" label="توضیح اول">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.more_description1"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_description1">{{ validation.fa_more_description1.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_title2 ? 'is-error' : ''" label="عنوان دوم">
|
||||
<el-input v-model="formData.product_details.fa.more_title2"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_title2">{{ validation.fa_more_title2.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_more_description2 ? 'is-error' : ''" label="توضیح دوم">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.more_description2"></el-input>
|
||||
<p class="err" v-if="validation.fa_more_description2">{{ validation.fa_more_description2.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<h3>بخش سوم صفحه (جدول و توضیحات)</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_chart_title ? 'is-error' : ''" label="عنوان جدول">
|
||||
<el-input v-model="formData.product_details.fa.chart_title"></el-input>
|
||||
<p class="err" v-if="validation.fa_chart_title">{{ validation.fa_chart_title.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.fa_chart_description ? 'is-error' : ''" label="توضیحات جدول">
|
||||
<el-input type="textarea" v-model="formData.product_details.fa.chart_description"></el-input>
|
||||
<p class="err" v-if="validation.fa_chart_description">{{ validation.fa_chart_description.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<el-form>
|
||||
|
||||
<h2 style="color: #000;font-weight: bold;font-size: 30px;">انگلیسی</h2>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_name ? 'is-error' : ''" label="نام">
|
||||
<el-input v-model="formData.product_details.en.name"></el-input>
|
||||
<p class="err" v-if="validation.en_name">{{ validation.en_name.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_short_description ? 'is-error' : ''" label="توضیح کوتاه">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.short_description"></el-input>
|
||||
<p class="err" v-if="validation.en_short_description">{{ validation.en_short_description.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش اول صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_page_title ? 'is-error' : ''" label="عنوان">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.page_title"></el-input>
|
||||
<p class="err" v-if="validation.en_page_title">{{ validation.en_page_title.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_page_description ? 'is-error' : ''" label="توضیحات">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.page_description"></el-input>
|
||||
<p class="err" v-if="validation.en_page_description">{{ validation.en_page_description.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<h3>بخش دوم صفحه</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_title1 ? 'is-error' : ''" label="عنوان اول">
|
||||
<el-input v-model="formData.product_details.en.more_title1"></el-input>
|
||||
<p class="err" v-if="validation.en_more_title1">{{ validation.en_more_title1.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_description1 ? 'is-error' : ''" label="توضیح اول">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.more_description1"></el-input>
|
||||
<p class="err" v-if="validation.en_more_description1">{{ validation.en_more_description1.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_title2 ? 'is-error' : ''" label="عنوان دوم">
|
||||
<el-input v-model="formData.product_details.en.more_title2"></el-input>
|
||||
<p class="err" v-if="validation.en_more_title2">{{ validation.en_more_title2.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_more_description2 ? 'is-error' : ''" label="توضیح دوم">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.more_description2"></el-input>
|
||||
<p class="err" v-if="validation.en_more_description2">{{ validation.en_more_description2.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<h3>بخش سوم صفحه (جدول و توضیحات)</h3>
|
||||
<el-divider></el-divider>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_chart_title ? 'is-error' : ''" label="عنوان جدول">
|
||||
<el-input v-model="formData.product_details.en.chart_title"></el-input>
|
||||
<p class="err" v-if="validation.en_chart_title">{{ validation.en_chart_title.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_chart_description ? 'is-error' : ''" label="توضیحات جدول">
|
||||
<el-input type="textarea" v-model="formData.product_details.en.chart_description"></el-input>
|
||||
<p class="err" v-if="validation.en_chart_description">{{ validation.en_chart_description.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<admin-panel>
|
||||
<h2>عکس اول بخش دوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.more_section_image1" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="more_section_image1" @change="previewMore_section_image1">
|
||||
<p class="err" v-if="validation.more_section_image1">{{ validation.more_section_image1.msg }}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 778px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<h2 class="secondTitle">عکس دوم بخش دوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.more_section_image2" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="more_section_image2" @change="previewMore_section_image2">
|
||||
<p class="err" v-if="validation.more_section_image2">{{ validation.more_section_image2.msg }}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 778px عرض و 395px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس اول شماتیک بخش سوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.render_image1" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="render_image1" @change="previewRender_image1">
|
||||
<p class="err" v-if="validation.render_image1">{{ validation.render_image1.msg }}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 300px عرض و 300px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.fa_render_caption1 ? 'is-error' : ''" label="کپشن فارسی">
|
||||
<el-input v-model="formData.product_details.fa.render_caption1"></el-input>
|
||||
<p class="err" v-if="validation.fa_render_caption1">{{ validation.fa_render_caption1.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_render_caption1 ? 'is-error' : ''" label="کپشن انگلیسی">
|
||||
<el-input v-model="formData.product_details.en.render_caption1"></el-input>
|
||||
<p class="err" v-if="validation.en_render_caption1">{{ validation.en_render_caption1.msg }}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس دوم شماتیک بخش سوم</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.render_image2" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="render_image2" @change="previewRender_image2">
|
||||
<p class="err" v-if="validation.render_image2">{{ validation.render_image2.msg }}</p>
|
||||
<p v-else style="margin-top: 20px;color: green;">ابعاد تصویر باید 300px عرض و 300px ارتفاع باشد، در غیر این صورت عکس به صورت اوتوماتیک برش خواهد خورد.</p>
|
||||
|
||||
<el-form>
|
||||
<el-form-item prop="title" :class="validation.fa_render_caption2 ? 'is-error' : ''" label="کپشن فارسی">
|
||||
<el-input v-model="formData.product_details.fa.render_caption2"></el-input>
|
||||
<p class="err" v-if="validation.fa_render_caption2">{{ validation.fa_render_caption2.msg }}</p>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item prop="title" :class="validation.en_render_caption2 ? 'is-error' : ''" label="کپشن انگلیسی">
|
||||
<el-input v-model="formData.product_details.en.render_caption2"></el-input>
|
||||
<p class="err" v-if="validation.en_render_caption2">{{ validation.en_render_caption2.msg }}</p>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- -->
|
||||
<h2 class="secondTitle">عکس جدول مشخصات محصول</h2>
|
||||
<el-divider></el-divider>
|
||||
<img :src="formData.chart_image" alt="" style="width: 100%;max-width: 300px;display: block">
|
||||
<input type="file" ref="chart_image" @change="previewChart_image">
|
||||
<p class="err" v-if="validation.chart_image">{{ validation.chart_image.msg }}</p>
|
||||
|
||||
</admin-panel>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
cover: '',
|
||||
more_section_image1: '',
|
||||
more_section_image2: '',
|
||||
render_image1: '',
|
||||
render_image2: '',
|
||||
chart_image: '',
|
||||
category: '',
|
||||
more_section: true,
|
||||
download_section: true,
|
||||
product_details: {
|
||||
fa: {
|
||||
name: '',
|
||||
short_description: '',
|
||||
page_title: '',
|
||||
page_description: '',
|
||||
more_title1: '',
|
||||
more_description1: '',
|
||||
more_title2: '',
|
||||
more_description2: '',
|
||||
render_caption1: '',
|
||||
render_caption2: '',
|
||||
chart_title: '',
|
||||
chart_description: ''
|
||||
},
|
||||
en: {
|
||||
name: '',
|
||||
short_description: '',
|
||||
page_title: '',
|
||||
page_description: '',
|
||||
more_title1: '',
|
||||
more_description1: '',
|
||||
more_title2: '',
|
||||
more_description2: '',
|
||||
render_caption1: '',
|
||||
render_caption2: '',
|
||||
chart_title: '',
|
||||
chart_description: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
productCategories: null,
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
cover: '',
|
||||
more_section_image1: '',
|
||||
more_section_image2: '',
|
||||
render_image1: '',
|
||||
render_image2: '',
|
||||
chart_image: '',
|
||||
category: '',
|
||||
more_section: true,
|
||||
download_section: true,
|
||||
favorite: false,
|
||||
product_details: {
|
||||
fa: {
|
||||
name: '',
|
||||
short_description: '',
|
||||
page_title: '',
|
||||
page_description: '',
|
||||
more_title1: '',
|
||||
more_description1: '',
|
||||
more_title2: '',
|
||||
more_description2: '',
|
||||
render_caption1: '',
|
||||
render_caption2: '',
|
||||
chart_title: '',
|
||||
chart_description: ''
|
||||
},
|
||||
en: {
|
||||
name: '',
|
||||
short_description: '',
|
||||
page_title: '',
|
||||
page_description: '',
|
||||
more_title1: '',
|
||||
more_description1: '',
|
||||
more_title2: '',
|
||||
more_description2: '',
|
||||
render_caption1: '',
|
||||
render_caption2: '',
|
||||
chart_title: '',
|
||||
chart_description: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'افزودن محصول'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
async locale(newVal, oldVal) {
|
||||
let productCategories = await this.$axios.get(`/api/public/productCategories/${newVal}`)
|
||||
this.productCategories = productCategories.data
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.validation = ''
|
||||
const data = new FormData();
|
||||
data.append('fa_name', this.formData.product_details.fa.name)
|
||||
data.append('fa_short_description', this.formData.product_details.fa.short_description)
|
||||
data.append('fa_page_title', this.formData.product_details.fa.page_title)
|
||||
data.append('fa_page_description', this.formData.product_details.fa.page_description)
|
||||
data.append('fa_more_title1', this.formData.product_details.fa.more_title1)
|
||||
data.append('fa_more_description1', this.formData.product_details.fa.more_description1)
|
||||
data.append('fa_more_title2', this.formData.product_details.fa.more_title2)
|
||||
data.append('fa_more_description2', this.formData.product_details.fa.more_description2)
|
||||
data.append('fa_render_caption1', this.formData.product_details.fa.render_caption1)
|
||||
data.append('fa_render_caption2', this.formData.product_details.fa.render_caption2)
|
||||
data.append('fa_chart_title', this.formData.product_details.fa.chart_title)
|
||||
data.append('fa_chart_description', this.formData.product_details.fa.chart_description)
|
||||
|
||||
|
||||
data.append('en_name', this.formData.product_details.en.name)
|
||||
data.append('en_short_description', this.formData.product_details.en.short_description)
|
||||
data.append('en_page_title', this.formData.product_details.en.page_title)
|
||||
data.append('en_page_description', this.formData.product_details.en.page_description)
|
||||
data.append('en_more_title1', this.formData.product_details.en.more_title1)
|
||||
data.append('en_more_description1', this.formData.product_details.en.more_description1)
|
||||
data.append('en_more_title2', this.formData.product_details.en.more_title2)
|
||||
data.append('en_more_description2', this.formData.product_details.en.more_description2)
|
||||
data.append('en_render_caption1', this.formData.product_details.en.render_caption1)
|
||||
data.append('en_render_caption2', this.formData.product_details.en.render_caption2)
|
||||
data.append('en_chart_title', this.formData.product_details.en.chart_title)
|
||||
data.append('en_chart_description', this.formData.product_details.en.chart_description)
|
||||
|
||||
data.append('category', this.formData.category)
|
||||
data.append('download_section', this.formData.download_section)
|
||||
data.append('more_section', this.formData.more_section)
|
||||
|
||||
data.append('cover', this.$refs.cover.files[0])
|
||||
data.append('more_section_image1', this.$refs.more_section_image1.files[0])
|
||||
data.append('more_section_image2', this.$refs.more_section_image2.files[0])
|
||||
data.append('render_image1', this.$refs.render_image1.files[0])
|
||||
data.append('render_image2', this.$refs.render_image2.files[0])
|
||||
data.append('chart_image', this.$refs.chart_image.files[0])
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$axios.post(`/api/private/products`, data, axiosConfig)
|
||||
.then(response => {
|
||||
if (response.data) {
|
||||
this.$message({
|
||||
message: 'محصول با موفقیت ثبت شد.',
|
||||
type: 'success'
|
||||
})
|
||||
this.$router.push(`/admin/products/${response.data._id}`)
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.message, 'خطا', {
|
||||
confirmButtonText: 'باشه',
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
previewCover(event) {
|
||||
this.formData.cover = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewMore_section_image1(event) {
|
||||
this.formData.more_section_image1 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewMore_section_image2(event) {
|
||||
this.formData.more_section_image2 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewRender_image1(event) {
|
||||
this.formData.render_image1 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewRender_image2(event) {
|
||||
this.formData.render_image1 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewChart_image(event) {
|
||||
this.formData.chart_image = URL.createObjectURL(event.target.files[0]);
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
async asyncData({$axios, store}) {
|
||||
let productCategories = await $axios.get(`/api/public/productCategories`)
|
||||
return {
|
||||
productCategories: productCategories.data
|
||||
}
|
||||
productCategories: null,
|
||||
validation: {},
|
||||
uploading: false,
|
||||
uploadProgress: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
if (!this.uploading) {
|
||||
return 'افزودن محصول'
|
||||
} else {
|
||||
return this.uploadProgress
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
async locale(newVal, oldVal) {
|
||||
let productCategories = await this.$axios.get(`/api/public/productCategories/${newVal}`)
|
||||
this.productCategories = productCategories.data
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
upload() {
|
||||
this.validation = ''
|
||||
const data = new FormData();
|
||||
data.append('fa_name', this.formData.product_details.fa.name)
|
||||
data.append('fa_short_description', this.formData.product_details.fa.short_description)
|
||||
data.append('fa_page_title', this.formData.product_details.fa.page_title)
|
||||
data.append('fa_page_description', this.formData.product_details.fa.page_description)
|
||||
data.append('fa_more_title1', this.formData.product_details.fa.more_title1)
|
||||
data.append('fa_more_description1', this.formData.product_details.fa.more_description1)
|
||||
data.append('fa_more_title2', this.formData.product_details.fa.more_title2)
|
||||
data.append('fa_more_description2', this.formData.product_details.fa.more_description2)
|
||||
data.append('fa_render_caption1', this.formData.product_details.fa.render_caption1)
|
||||
data.append('fa_render_caption2', this.formData.product_details.fa.render_caption2)
|
||||
data.append('fa_chart_title', this.formData.product_details.fa.chart_title)
|
||||
data.append('fa_chart_description', this.formData.product_details.fa.chart_description)
|
||||
|
||||
|
||||
data.append('en_name', this.formData.product_details.en.name)
|
||||
data.append('en_short_description', this.formData.product_details.en.short_description)
|
||||
data.append('en_page_title', this.formData.product_details.en.page_title)
|
||||
data.append('en_page_description', this.formData.product_details.en.page_description)
|
||||
data.append('en_more_title1', this.formData.product_details.en.more_title1)
|
||||
data.append('en_more_description1', this.formData.product_details.en.more_description1)
|
||||
data.append('en_more_title2', this.formData.product_details.en.more_title2)
|
||||
data.append('en_more_description2', this.formData.product_details.en.more_description2)
|
||||
data.append('en_render_caption1', this.formData.product_details.en.render_caption1)
|
||||
data.append('en_render_caption2', this.formData.product_details.en.render_caption2)
|
||||
data.append('en_chart_title', this.formData.product_details.en.chart_title)
|
||||
data.append('en_chart_description', this.formData.product_details.en.chart_description)
|
||||
|
||||
data.append('category', this.formData.category)
|
||||
data.append('download_section', this.formData.download_section)
|
||||
data.append('more_section', this.formData.more_section)
|
||||
data.append('favorite', this.formData.favorite)
|
||||
|
||||
data.append('cover', this.$refs.cover.files[0])
|
||||
data.append('more_section_image1', this.$refs.more_section_image1.files[0])
|
||||
data.append('more_section_image2', this.$refs.more_section_image2.files[0])
|
||||
data.append('render_image1', this.$refs.render_image1.files[0])
|
||||
data.append('render_image2', this.$refs.render_image2.files[0])
|
||||
data.append('chart_image', this.$refs.chart_image.files[0])
|
||||
|
||||
const axiosConfig = {
|
||||
onUploadProgress: progressEvent => {
|
||||
this.uploading = true
|
||||
this.uploadProgress = 'درحال آپلود ' + Math.floor(((progressEvent.loaded / progressEvent.total) * 100)) + '%'
|
||||
|
||||
if ((progressEvent.loaded / progressEvent.total) * 100 === 100) {
|
||||
this.uploading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$axios.post(`/api/private/products`, data, axiosConfig)
|
||||
.then(response => {
|
||||
if (response.data) {
|
||||
this.$message({
|
||||
message: 'محصول با موفقیت ثبت شد.',
|
||||
type: 'success'
|
||||
})
|
||||
this.$router.push(`/admin/products/${response.data._id}`)
|
||||
}
|
||||
}).catch(error => {
|
||||
if (error.response.status === 422) {
|
||||
this.validation = error.response.data.validation
|
||||
this.$message({
|
||||
type: 'error',
|
||||
message: 'اطلاعات رو بررسی و دوباره تلاش کنید'
|
||||
})
|
||||
} else {
|
||||
this.$alert(error.response.data.message, 'خطا', {
|
||||
confirmButtonText: 'باشه',
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
previewCover(event) {
|
||||
this.formData.cover = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewMore_section_image1(event) {
|
||||
this.formData.more_section_image1 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewMore_section_image2(event) {
|
||||
this.formData.more_section_image2 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewRender_image1(event) {
|
||||
this.formData.render_image1 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewRender_image2(event) {
|
||||
this.formData.render_image2 = URL.createObjectURL(event.target.files[0]);
|
||||
},
|
||||
previewChart_image(event) {
|
||||
this.formData.chart_image = URL.createObjectURL(event.target.files[0]);
|
||||
}
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.title
|
||||
}
|
||||
},
|
||||
layout: 'admin',
|
||||
async asyncData({$axios, store}) {
|
||||
let productCategories = await $axios.get(`/api/public/productCategories`)
|
||||
return {
|
||||
productCategories: productCategories.data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user