hamid.zarghami1@gmail.com
576 lines
21 KiB
Vue
576 lines
21 KiB
Vue
<template>
|
|
<div class="menu--page page--container">
|
|
<section class="s1 clearfix">
|
|
<div class="container">
|
|
<div class="mainSectionAnimation">
|
|
<livePictureMap set_class="d-none d-md-block imgMap"/>
|
|
|
|
<div class="shape1">
|
|
<WatermarksCircleShape1/>
|
|
</div>
|
|
<div class="shape2">
|
|
<WatermarksLeafShape1/>
|
|
</div>
|
|
<div class="shape3">
|
|
<WatermarksLeafShape1/>
|
|
</div>
|
|
|
|
<img class="mainA" src="~/assets/img/menuPage/livePicture/main.png" alt="">
|
|
<img class="kebabA d-none d-md-block" src="~/assets/img/menuPage/livePicture/kabab.png" alt="">
|
|
<img class="chickenA d-none d-md-block" src="~/assets/img/menuPage/livePicture/juj.png" alt="">
|
|
<img class="fishA d-none d-md-block" src="~/assets/img/menuPage/livePicture/fish.png" alt="">
|
|
|
|
<div class="caption kebabC d-none d-md-block">
|
|
<h3>کباب قفقازی</h3>
|
|
<p>فیله گوساله</p>
|
|
</div>
|
|
<div class="caption chickenC d-none d-md-block">
|
|
<h3>جوجه کباب مخصوص</h3>
|
|
<p>شنسل مرغ</p>
|
|
</div>
|
|
<div class="caption fishC d-none d-md-block">
|
|
<h3>ماهی قزل آلا سرخ شده</h3>
|
|
<p>ماهی قزل آلا بدون استخوان</p>
|
|
</div>
|
|
<div class="caption sauceC d-none d-md-block">
|
|
<h3>سس مخصوص رستوران برگ</h3>
|
|
</div>
|
|
|
|
<div class="tapHere kebabT d-none d-md-block">
|
|
<div class="tc1"></div>
|
|
<div class="tc2"></div>
|
|
</div>
|
|
<div class="tapHere chickenT d-none d-md-block">
|
|
<div class="tc1"></div>
|
|
<div class="tc2"></div>
|
|
</div>
|
|
<div class="tapHere fishT d-none d-md-block">
|
|
<div class="tc1"></div>
|
|
<div class="tc2"></div>
|
|
</div>
|
|
<div class="tapHere sauceT d-none d-md-block">
|
|
<div class="tc1"></div>
|
|
<div class="tc2"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="mainCaption">
|
|
<div class="relativePos">
|
|
<div class="bg">
|
|
<p>
|
|
"ما تلاش میکنیم منوی غذای خودرا به تازگی و سلامتی ممکن، با استفاده از سبزیجات محلی و فصلی نگهداریم.همچنین از مواد غیرطبیعی
|
|
و افزودنی های غذایی در طبخ غذا ها استفاده نمیکنیم." </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="s2 section">
|
|
<div class="food--menu relativePos">
|
|
<div class="container">
|
|
<div class="waterMark">
|
|
<WatermarksMenuS2W1/>
|
|
</div>
|
|
<div class="row">
|
|
|
|
<div class="col-12 col-md-6 menuColumn"
|
|
v-for="category in foodCategories"
|
|
:key="category._id"
|
|
v-if="!category.type.isCafeMenu && category.type.showOnWebSite && categoryFoodLength(category._id)">
|
|
<h2 class="menu--heading">{{ '/ ' + category.name + '.' }}</h2>
|
|
<div class="f1 lists">
|
|
<div class="foodFrame relativePos" v-for="food in menu" v-if="food.category === category._id">
|
|
<h3>{{ food.name }}</h3>
|
|
<p v-if="food.description">{{ food.description }}</p>
|
|
<span v-if="food.price">{{ food.price.toLocaleString() }} ريال</span>
|
|
<span v-else>برای قیمت تماس بگیرید</span>
|
|
<!-- <img v-if="food.image" :src="food.image" :alt="food.name">-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="bg--shapes">
|
|
<div class="circle2">
|
|
<WatermarksCircleShape2/>
|
|
</div>
|
|
<WatermarksLeafShape2 class="leaf2"/>
|
|
<WatermarksLeafShape3 class="leaf3"/>
|
|
<div class="leaf4">
|
|
<WatermarksLeafShape1/>
|
|
</div>
|
|
<div class="leaf5">
|
|
<WatermarksLeafShape1/>
|
|
</div>
|
|
<WatermarksLeafShape3 class="leaf6"/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="coffee--menu relativePos" v-if="cafeMenuCategories">
|
|
<div class="container">
|
|
<div class="waterMark">
|
|
<WatermarksMenuS2W2/>
|
|
</div>
|
|
<div class="row">
|
|
|
|
<div class="col-12 col-md-6 menuColumn"
|
|
v-for="category in foodCategories"
|
|
:key="category._id"
|
|
v-if="category.type.isCafeMenu && category.type.showOnWebSite && categoryFoodLength(category._id)">
|
|
<h2 class="menu--heading">{{ '/ ' + category.name + '.' }}</h2>
|
|
<div class="c1 lists">
|
|
<div class="foodFrame relativePos" v-for="food in menu" :key="food._id" v-if="food.category === category._id">
|
|
<h3>{{ food.name }}</h3>
|
|
<p v-if="food.description">{{ food.description }}</p>
|
|
<span v-if="food.price">{{ food.price.toLocaleString() }} ريال</span>
|
|
<span v-else>برای قیمت تماس بگیرید</span>
|
|
<img v-if="food.image" :src="food.image" :alt="food.name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="bg--shapes">
|
|
<div class="nut1">
|
|
<WatermarksCoffeeNut/>
|
|
</div>
|
|
<WatermarksCoffeeNut class="nut2"/>
|
|
<WatermarksLeafShape4 class="leaf1"/>
|
|
<WatermarksLeafShape4 class="leaf2"/>
|
|
<WatermarksCoffeeCup class="cup"/>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
<section class="s3 section">
|
|
<WatermarksWave class="wave"/>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 d-lg-none ext--title">
|
|
<h2>منوی ویژه مهمانی</h2>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-12 align-self-start info">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="top">
|
|
<IconsTea/>
|
|
<h3>چای رایگان</h3>
|
|
<p>چای سبز / چای سیاه</p>
|
|
</div>
|
|
<div class="bott">
|
|
<IconsMenuIcon/>
|
|
<h3>قیمت ها برحسب منو</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="top">
|
|
<IconsClock/>
|
|
<h3>از شنبه تا چهارشنبه</h3>
|
|
<p>20:00 - 23:30</p>
|
|
</div>
|
|
<div class="bott">
|
|
<IconsTakeAway/>
|
|
<h3>به همراه پیک</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="reservation">
|
|
<nuxt-link :to="{name: 'reservation'}">رزرو کنید</nuxt-link>
|
|
</div>
|
|
</div>
|
|
<div id="partyMenu" v-if="partySet.length" class="col-lg-8 col-12 party--menu">
|
|
<div class="row">
|
|
<div class="col-12 d-none d-lg-block title">
|
|
<h2>منوی ویژه مهمانی</h2>
|
|
</div>
|
|
<div class="col-12 offers">
|
|
<h3>{{ shownMenu(menuIndex).title }}</h3>
|
|
<p>{{ shownMenu(menuIndex).description }}</p>
|
|
<span v-if="shownMenu(menuIndex).price">{{ shownMenu(menuIndex).price.toLocaleString() + ' ريال ' }}</span>
|
|
<span v-else>برای قیمتتماس بگیرید</span>
|
|
</div>
|
|
<div class="indicators">
|
|
<ul>
|
|
<li v-for="(item , index) in partySet"
|
|
:key="item._id"
|
|
:data-indicator="index"
|
|
:class="index === 0 ? 'active' : ''"
|
|
@click="menuIndicator(index)"
|
|
>
|
|
<span>{{ index + 1 }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Vue from 'vue'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
foodCategories: null,
|
|
menu: null,
|
|
partySet: null,
|
|
menuIndex: 0
|
|
}
|
|
},
|
|
computed: {
|
|
cafeMenuCategories() {
|
|
return Boolean(this.foodCategories.filter(item => item.type.isCafeMenu).length)
|
|
}
|
|
},
|
|
methods: {
|
|
categoryFoodLength(id) {
|
|
return Boolean(this.menu.filter(item => item.category === id).length)
|
|
},
|
|
menuIndicator(index) {
|
|
this.$gsap.timeline()
|
|
.to($('.menu--page .s3 .offers'), {
|
|
opacity: 0,
|
|
duration: 0.1,
|
|
onComplete: () => {
|
|
this.menuIndex = index
|
|
}
|
|
})
|
|
.to($('.menu--page .s3 .offers'), {opacity: 1, duration: 0.1})
|
|
|
|
$('.menu--page .s3 .indicators li').removeClass('active')
|
|
$(`.menu--page .s3 .indicators li[data-indicator="${index}"]`).addClass('active')
|
|
|
|
},
|
|
shownMenu(index) {
|
|
return {
|
|
title: this.partySet[index].title,
|
|
description: this.partySet[index].description,
|
|
price: this.partySet[index].price
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// console.log(typeof $(".menu--page .coffee--menu").height())
|
|
const renderDelay = 300 // milliseconds
|
|
setTimeout(() => {
|
|
/////////////////////////////////////////////////////////////////////////
|
|
/// global vars
|
|
const that = this
|
|
|
|
const _du = this.$store.state.animations.scroll.duration
|
|
const _th = this.$store.state.animations.scroll.triggerHook
|
|
const _rev = this.$store.state.animations.scroll.reverse
|
|
////////////////////////////////////// cafe menu color theme
|
|
// const cafe_theme = this.$scrollmagic.scene({
|
|
// triggerElement: '.menu--page .coffee--menu',
|
|
// triggerHook: _th,
|
|
// duration: () => {
|
|
// if (this.$router.history.current.name === 'menu') {
|
|
// return $(".menu--page .coffee--menu").height() + 80;
|
|
// } else {
|
|
// return 0
|
|
// }
|
|
// },
|
|
// reverse: true
|
|
// })
|
|
// .on('start end', () => {
|
|
// if (this.$router.history.current.name === 'menu') {
|
|
// $(":root").css({
|
|
// '--theme': '#513616',
|
|
// '--theme-hover': '#352716',
|
|
// '--bg-color': 'rgba(0,0,0,0.4)'
|
|
// })
|
|
// $('body').addClass('cafe--theme')
|
|
// document.querySelector('meta[name="theme-color"]').setAttribute("content", '#513616');
|
|
// }
|
|
// })
|
|
// .on('leave', () => {
|
|
// $(":root").css({
|
|
// '--theme': '#8DC640',
|
|
// '--theme-hover': '#5E943C',
|
|
// '--bg-color': '#F2F2F2'
|
|
// })
|
|
// $('body').removeClass('cafe--theme')
|
|
// document.querySelector('meta[name="theme-color"]').setAttribute("content", '#8DC640');
|
|
// })
|
|
//
|
|
// this.$scrollmagic.addScene(cafe_theme)
|
|
|
|
/////////////////////////////////////// mobile lists
|
|
if (window.innerWidth < 768) {
|
|
$(".menu--page .s2 .lists").slideUp()
|
|
}
|
|
|
|
$(window).resize(function () {
|
|
if (window.innerWidth >= 768) {
|
|
$(".menu--page .s2 .lists").slideDown()
|
|
} else {
|
|
$(".menu--page .s2 .lists").slideUp()
|
|
}
|
|
})
|
|
|
|
$('.menu--page .s2 .menu--heading').click(function () {
|
|
$(this).next().slideToggle()
|
|
})
|
|
|
|
/////////////////////////////////////// foodFrame images
|
|
$(".menu--page .foodFrame h3").hover(function () {
|
|
if (window.innerWidth >= 768) {
|
|
$(".menu--page .foodFrame h3").mousemove(function (e) {
|
|
let left = e.offsetX - 255
|
|
let top = e.offsetY - 155
|
|
|
|
$("~ img", this).css({
|
|
display: 'block',
|
|
opacity: 1,
|
|
top: top,
|
|
left: left
|
|
})
|
|
})
|
|
}
|
|
}, function () {
|
|
if (window.innerWidth >= 768) {
|
|
$("~ img", this).css({opacity: 0})
|
|
setTimeout(() => {
|
|
$("~ img", this).css({display: 'none'})
|
|
}, 200)
|
|
}
|
|
})
|
|
|
|
/////////////////////////////////////// live picture program
|
|
$("#kebab").hover(() => {
|
|
this.$gsap.timeline()
|
|
.to($(".kebabA"), {opacity: 1, duration: 0})
|
|
.to($(".kebabA"), {
|
|
scale: 1.2,
|
|
y: function () {
|
|
if (window.innerWidth > 1400) {
|
|
return -50
|
|
} else if (window.innerWidth > 1200) {
|
|
return -40
|
|
} else if (window.innerWidth >= 992) {
|
|
return -30
|
|
} else if (window.innerWidth >= 768) {
|
|
return -25
|
|
}
|
|
},
|
|
x: function () {
|
|
if (window.innerWidth > 1400) {
|
|
return 30
|
|
} else if (window.innerWidth > 1200) {
|
|
return 25
|
|
} else if (window.innerWidth >= 992) {
|
|
return 20
|
|
} else if (window.innerWidth >= 768) {
|
|
return 15
|
|
}
|
|
},
|
|
duration: 0.3
|
|
})
|
|
.to($(".kebabC"), {opacity: 1, duration: 0.3}, 0)
|
|
.to($(".kebabT"), {opacity: 0, duration: 0.3}, 0)
|
|
|
|
|
|
}, () => {
|
|
this.$gsap.timeline()
|
|
.to($(".kebabA"), {scale: 1, y: 0, x: 0, duration: 0.3})
|
|
.to($(".kebabA"), {opacity: 0, duration: 0})
|
|
.to($(".kebabC"), {opacity: 0, duration: 0.3}, 0)
|
|
.to($(".kebabT"), {opacity: 1, duration: 0.3}, 0)
|
|
})
|
|
|
|
$("#fish").hover(() => {
|
|
this.$gsap.timeline()
|
|
// .to($(".fishA"),0,{opacity:1})
|
|
// .to($(".fishA"),0.3,{scale: 1.5,y: -120,x: -60})
|
|
.to($(".fishC"), {opacity: 1, duration: 0.3}, 0)
|
|
.to($(".fishT"), {opacity: 0, duration: 0.3}, 0)
|
|
}, () => {
|
|
this.$gsap.timeline()
|
|
// .to($(".fishA"),0.3,{scale: 1,y:0,x: 0})
|
|
// .to($(".fishA"),0,{opacity:0})
|
|
.to($(".fishC"), {opacity: 0, duration: 0.3}, 0)
|
|
.to($(".fishT"), {opacity: 1, duration: 0.3}, 0)
|
|
})
|
|
|
|
$("#chicken").hover(() => {
|
|
this.$gsap.timeline()
|
|
.to($(".chickenA"), {opacity: 1, duration: 0})
|
|
.to($(".chickenA"), {
|
|
scale: 1.2,
|
|
y: function () {
|
|
if (window.innerWidth > 1400) {
|
|
return 45
|
|
} else if (window.innerWidth > 1200) {
|
|
return 35
|
|
} else if (window.innerWidth >= 992) {
|
|
return 30
|
|
} else if (window.innerWidth >= 768) {
|
|
return 20
|
|
}
|
|
},
|
|
x: function () {
|
|
if (window.innerWidth > 1400) {
|
|
return -35
|
|
} else if (window.innerWidth > 1200) {
|
|
return -30
|
|
} else if (window.innerWidth >= 992) {
|
|
return -25
|
|
} else if (window.innerWidth >= 768) {
|
|
return -20
|
|
}
|
|
},
|
|
duration: 0.3
|
|
})
|
|
.to($(".chickenC"), {opacity: 1, duration: 0.3}, 0)
|
|
.to($(".chickenT"), {opacity: 0, duration: 0.3}, 0)
|
|
}, () => {
|
|
this.$gsap.timeline()
|
|
.to($(".chickenA"), {scale: 1, y: 0, x: 0, duration: 0.3})
|
|
.to($(".chickenA"), {opacity: 0, duration: 0})
|
|
.to($(".chickenC"), {opacity: 0, duration: 0.3}, 0)
|
|
.to($(".chickenT"), {opacity: 1, duration: 0.3}, 0)
|
|
})
|
|
|
|
$("#sauce").hover(() => {
|
|
this.$gsap.timeline()
|
|
.to($(".sauceC"), {opacity: 1, duration: 0.3}, 0)
|
|
.to($(".sauceT"), {opacity: 0, duration: 0.3}, 0)
|
|
}, () => {
|
|
this.$gsap.timeline()
|
|
.to($(".sauceC"), {opacity: 0, duration: 0.3}, 0)
|
|
.to($(".sauceT"), {opacity: 1, duration: 0.3}, 0)
|
|
})
|
|
|
|
/////// tap animation
|
|
const tapAnim = this.$gsap.timeline({repeat: -1})
|
|
.to($(".tc1"), {scale: 1.3, opacity: 0.4, duration: 0.3, stagger: 2.5}, 0)
|
|
.to($(".tc1"), {scale: 0.5, opacity: 0.4, duration: 0.4, stagger: 2.5}, 0.3)
|
|
.to($(".tc2"), {scale: 2, opacity: 0.3, duration: 0.8, stagger: 2.5}, 0)
|
|
.to($(".tc2"), {scale: 0.8, opacity: 0.3, duration: 0.9, stagger: 2.5}, 0.8)
|
|
.to($(".tc1"), {opacity: 0, duration: 0.3, stagger: 2.5}, 1.2)
|
|
.to($(".tc2"), {opacity: 0, duration: 0.3, stagger: 2.5}, 1.2)
|
|
|
|
|
|
/////////////////////////////////////// scroll animations
|
|
|
|
////////////////////////////////////////////////////
|
|
const globalPageAnimationVars = {
|
|
opacity: 0,
|
|
y: 10,
|
|
duration: _du
|
|
}
|
|
/////////////// watermarks animation
|
|
const watermarks = $('.menu--page .waterMark')
|
|
const watermarksTl = []
|
|
const watermarksScene = []
|
|
|
|
for (let i = 0; i < watermarks.length; i++) {
|
|
watermarksTl[i] = this.$gsap.from($(watermarks[i]), globalPageAnimationVars).pause()
|
|
watermarksScene[i] = this.$scrollmagic.scene({
|
|
triggerElement: watermarks[i],
|
|
triggerHook: _th
|
|
}).on('progress', e => {
|
|
if (e.progress === 1) watermarksTl[i].play()
|
|
})
|
|
this.$scrollmagic.addScene(watermarksScene[i])
|
|
}
|
|
/////////////// foodFrames animation
|
|
const foodFrames = $('.menu--page .foodFrame')
|
|
const foodFrameTl = []
|
|
const foodFrameScene = ['0']
|
|
|
|
for (let i = 0; i < foodFrames.length; i++) {
|
|
foodFrameTl[i] = this.$gsap.from($(foodFrames[i]), globalPageAnimationVars).pause()
|
|
foodFrameScene[i] = this.$scrollmagic.scene({
|
|
triggerElement: foodFrames[i],
|
|
triggerHook: _th
|
|
}).on('progress', e => {
|
|
if (e.progress === 1) foodFrameTl[i].play()
|
|
})
|
|
this.$scrollmagic.addScene(foodFrameScene[i])
|
|
}
|
|
/////////////// menu heading animation
|
|
const menuHeadings = $('.menu--page .menu--heading')
|
|
const menuHeadingTl = []
|
|
const menuHeadingScene = []
|
|
|
|
for (let i = 0; i < menuHeadings.length; i++) {
|
|
menuHeadingTl[i] = this.$gsap.from($(menuHeadings[i]), globalPageAnimationVars).pause()
|
|
menuHeadingScene[i] = this.$scrollmagic.scene({
|
|
triggerElement: menuHeadings[i],
|
|
triggerHook: _th
|
|
}).on('progress', e => {
|
|
if (e.progress === 1) menuHeadingTl[i].play()
|
|
})
|
|
this.$scrollmagic.addScene(menuHeadingScene[i])
|
|
}
|
|
/////////////// watermark shapes animations
|
|
const watermarkShapes = $('.menu--page .bg--shapes').children()
|
|
const watermarkShapesTl = []
|
|
const watermarkShapesScene = []
|
|
|
|
for (let i = 0; i < watermarkShapes.length; i++) {
|
|
watermarkShapesTl[i] = this.$gsap.from($(watermarkShapes[i]), {opacity: 0, duration: _du, ease: 'power0'}).pause()
|
|
watermarkShapesScene[i] = this.$scrollmagic.scene({
|
|
triggerElement: watermarkShapes[i],
|
|
triggerHook: 0.7
|
|
})
|
|
.on('progress', e => {
|
|
if (e.progress > 0) watermarkShapesTl[i].play()
|
|
})
|
|
|
|
this.$scrollmagic.addScene(watermarkShapesScene[i])
|
|
}
|
|
/////////////// party set animation
|
|
const partySetAnim = this.$gsap.timeline({paused: true})
|
|
.from($(".menu--page .s3 .wave"), {y: 30, opacity: 0, duration: 0.2, ease: 'power2.inOut'})
|
|
.from($(".menu--page .s3 .info"), {x: 500, opacity: 0, duration: 0.4, ease: 'power2.inOut'})
|
|
.from($(".menu--page .s3 .title,.menu--page .s3 .ext--title"), {x: -500, opacity: 0, duration: 0.4, ease: 'power2.inOut'}, 0)
|
|
.from($(".menu--page .s3 .offers").children(), {y: 30, opacity: 0, duration: 0.3, stagger: 0.08, ease: 'power1.inOut'})
|
|
.from($(".menu--page .s3 .indicators"), {y: 30, opacity: 0, duration: 0.3, ease: "back.inOut(10)"}, '-=0.2')
|
|
|
|
const partySetScene = this.$scrollmagic.scene({
|
|
triggerElement: '.menu--page .s3 .info',
|
|
triggerHook: 1
|
|
}).on('start', () => {
|
|
partySetAnim.play()
|
|
})
|
|
this.$scrollmagic.addScene(partySetScene)
|
|
/////////////////////////////////////////////////////////////////////////
|
|
}, renderDelay)
|
|
},
|
|
async asyncData({$axios, store , error}) {
|
|
try {
|
|
const foodCategories = await $axios.get(`/api/public/foodCategories/getAll`)
|
|
const menu = await $axios.get('/api/public/foods/allWebsite')
|
|
const partySet = await $axios.get('/api/public/partySets')
|
|
return {
|
|
foodCategories: foodCategories.data,
|
|
menu: menu.data,
|
|
partySet: partySet.data
|
|
}
|
|
} catch (e) {
|
|
if (e?.response?.status === 401) {
|
|
error({
|
|
status: 401,
|
|
message: 'شما اجازه دسترسی به این صفحه را ندارید لطفا دوباره وارد شوید'
|
|
})
|
|
} else {
|
|
error({
|
|
status: 500,
|
|
message: "مشکلی در گرفتن اطلاعات بوجود آمده است",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|