barg-restuarant/pages/menu/index.vue

<template>
  <section class="home--page page--container d-flex justify-content-center">
    <SiteHeader/>
    <div class="d-flex flex-column align-self-center" style="padding: 50px 8px; text-align: center">
      <div class="download-app d-flex flex-column justify-content-center">
        <div class="d-flex align-self-center mb-4" style="width: 100%">
          <el-card class="box-card" style="width: 100%; border-radius: 17px">
            <div class="row">
              <div class="col-12 d-flex justify-content-evenly align-items-center">
                <div class="logo-image"><img src="/favicon.png" style="width: 40px" alt=""></div>
                <div class="d-flex flex-column justify-content-start" style="text-align: right">
                  <p style="font-size: 18px; font-weight: bold">BARG CATERING</p>
                  <p style="font-size: 16px; font-weight: bold" class="mt-2">کترینگ برگ</p>
                </div>
              </div>
              <div class="col-12 mt-3">
                <a href="/1.pdf" class="contactBtnSocial">
                  <span class="m-1"><i class="fal fa-download"></i></span>
                  <span>مشاهده منو</span>
                </a>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    <SiteFooter/>
  </section>
</template>

<script>
export default {
  layout: 'blank',
  data() {
    return {
      payment: null
    }
  },
  computed: {},
  watch: {},
  methods:{
    copyText(){
      const copyText = document.getElementById("code");
      navigator.clipboard.writeText(copyText.innerText);
      this.$message({
        message: 'کپی شد!',
        type: 'success',
        center: false
      });
    },
    back(){

    }
  },
  async asyncData({$axios, query, error}) {

  }
}
</script>

<style scoped>

</style>


<!-- <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> -->