yangshi_cloudExbition/src/pages/scene/menu.vue

<template>
  <div class="smenu">
    <audio ref="vbgm" class="noshow" loop :src="require(`@/assets/audio/bgm.mp3`)">
    </audio>
    <template v-if="!tourStatus">
      <div class="sdaolan">
        <img :src="require(`@/assets/images/project/daolan_${theme}.png`)" alt="">
        <div @click="toggle" class="daolan">
          <img :src="require(`@/assets/images/project/menu/daolan.png`)" alt="">
          <p>自动观展</p>
        </div>
      </div>
      <ul :style="{
        backgroundImage: `url(${require(`@/assets/images/project/menu_${theme}.png`)})`,
      }">
        <li v-for="(item,i) in menu" :key="i">
          <div @click="onClick(item)">
            <img v-if="item.id!='bgm'" :src="require(`@/assets/images/project/menu/${item.id}.png`)" alt="">
            <img v-else :src="require(`@/assets/images/project/menu/${isBgm?item.muted:item.id}.png`)" alt="">
            <span>{{item.name}}</span>
          </div>
        </li>
      </ul>
    </template>
    <div class="stoptour" v-else>
        <div @click="toggle" class="daolan">
          <img :src="require(`@/assets/images/project/menu/zanting.png`)" alt="">
          <p>暂停观展</p>
        </div>
      </div>
    <transition name="likeAddAnimate">
      <div class="good" v-show="isShowGood">
        <div class="pic">
          <img :src="require(`@/assets/images/project/icon/zan_${theme}.png`)" alt="" />
        </div>
        <div class="num">+{{ goodNum + 1 }}</div>
      </div>
    </transition>
  </div>
</template>

<script>
import { supCount,getsupCount } from "@/config/api";

let menu = [
  {
    id:'home',
    name:'首页',
    path:{name:'home'}
  },
  {
    id:'daka',
    name:'打卡',
    cp:'daka'
  },
  {
    id:'content',
    name:'留言',
    cp:'vcontent'
  },
  {
    id:'zan',
    name:'点赞'
  },
  {
    id:'qrcode',
    name:'分享',
    cp:'qrcode'
  },
  {
    id:'bgm',
    name:'播放',
    muted:'jingyin'
  }
]
export default {
  props:['tourStatus'],
  data(){
    return {
      menu,
      goodNum:1099,
      isShowGood:false,
      isBgm:false
    }
  },
  watch:{
    isBgm(newVal){
      !newVal?this.$refs.vbgm.pause():this.$refs.vbgm.play()
    },
    tourStatus(newVal){
      if (newVal) {
        this.isBgm = false
      }
    }
  },
  methods:{
    onClick(item){
      item.path && this.$router.push(item.path)
      item.cp && this.$emit('opencp',item.cp)
      item.id=='bgm' && (this.isBgm=!this.isBgm)
      item.id=='zan' && this.dianzan()
    },
    dianzan(){
      if (this.isShowGood) return
      getsupCount(res=>{
        this.goodNum = res.data
        this.isShowGood = true
        setTimeout(() => {
          this.isShowGood = false
        }, 2500);
        supCount(()=>{})
      })
    },
    toggle(){
      let fn = this.tourStatus?'stopTour':'startAndPlay'
      this.$bus.$emit('ifrMessage',{
        events:'toggleTour',
        data:fn
      })
    }
  },
  mounted(){
      this.isBgm = true
  }
}
</script>

<style lang="less" scoped>
.smenu{
  position: fixed;
  bottom: 4%;
  transform: translateX(-50%);
  left: 50%;
  z-index: 999;
  display: flex;
  align-items: center;
  .sdaolan,.stoptour{
    margin-right: 20px;
    position: relative;
    cursor: pointer;
    .daolan{
      position: absolute;
      top: 52%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 80px;
      text-align: center;
      >img{
        width: 30px;
      }
    }
  }
  .stoptour{
    .daolan{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 80px;
      text-align: center;
      >img{
        width: 40px;
      }
    }
  }
  >ul{
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 557px;
    height: 91px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    text-align: center;
    >li{
      display: inline-block;
      padding: 0 26px;
      &:not(&:last-of-type){
        border-right: 1px solid #fff;
      }
      >div{
        cursor: pointer;
        >img{
          width: 40px;
        }
      }
    }
  }
}

.likeAddAnimate-enter-active,
.likeAddAnimate-leave-active {
  transition: all 2.5s ease;
}
.likeAddAnimate-enter,
.likeAddAnimate-leave {
  transform: translate(-30%, 0) scale(0);
  opacity: 0;
}
.likeAddAnimate-enter-to,
.likeAddAnimate-leave-to {
  transform: translate(-30%, -110px) scale(1.2);
  opacity: 1;
}
.good {
  position: absolute;
  bottom: 36px;
  right: 160px;
  display: flex;
  .pic {
    width: 35px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .num {
    margin-top: 10px;
    margin-left: 10px;
  }
}

.noshow{
  position: fixed;
  top: -100px;
  left: -100px;
  opacity: 0;
  visibility: hidden;
}
</style>