add calculation module and fix many bugs
This commit is contained in:
Amir Mohamadi
+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>
|
||||
|
||||
Reference in New Issue
Block a user