bbh-mobile/src/components/AllWallbut.vue

<template>
  <div id="guide-button">
    <template v-if="showButtonList">
      <div id="old-exhibition1" v-if="titles[4]" @click="isShow(e)">
        <img
          class="exbutton"
          :class="[btnIndex == 4 ? 'hit' : '']"
          src="@/assets/images/exbutton.png"
        />
        <div class="button-text black-text">
          <a :href="jumpUrl[4]" :class="[btnIndex == 4 ? 'hit' : '']">
            {{ titles[e] }}</a
          >
        </div>
      </div>

      <div id="old-exhibition2" v-if="titles[3]" @click="isShow(d)">
        <img
          class="exbutton"
          :class="[btnIndex == 3 ? 'hit' : '']"
          src="@/assets/images/exbutton.png"
        />
        <div class="button-text black-text">
          <a :href="jumpUrl[3]" :class="[btnIndex == 3 ? 'hit' : '']">
            {{ titles[d] }}</a
          >
        </div>
      </div>

      <div id="old-exhibition" @click="isShow(c)">
        <img
          class="exbutton"
          :class="[btnIndex == 2 ? 'hit' : '']"
          src="@/assets/images/exbutton.png"
        />
        <div class="button-text black-text">
          <a :href="jumpUrl[2]" :class="[btnIndex == 2 ? 'hit' : '']">
            {{ titles[c] }}</a
          >
        </div>
      </div>

      <div id="cloud-exhibition" @click="isShow(b)">
        <img
          class="exbutton"
          :class="[btnIndex == 1 ? 'hit' : '']"
          src="@/assets/images/exbutton.png"
        />
        <div class="button-text black-text">
          <a :href="jumpUrl[1]" :class="[btnIndex == 1 ? 'hit' : '']">
            {{ titles[b] }}</a
          >
        </div>
      </div>
    </template>
    <template v-else>
      <div id="front"><img src="@/assets/images/front.png" /></div>
      <div id="back"><img src="@/assets/images/back.png" /></div>
    </template>

    <div id="mainbutton">
      <img
        class="exbutton"
        @touchstart="goStart"
        @touchmove="goMove"
        @touchend="goEnd"
        src="@/assets/images/mainbutton.png"
      />
      <div class="button-text">
        <a :href="jumpUrl[0]">{{ titles[a] }}</a>
      </div>
      <img
        :class="[showButtonList ? '' : 'arrowDown', 'arrow']"
        src="@/assets/images/arrow.png"
        @click.self="buttonList"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    titles: {
      type: Array,
    },
    jumpUrl: {
      type: Array,
    },
  },
  name: "GuideButton",
  data() {
    return {
      a: 0,
      b: 1,
      c: 2,
      d: 3,
      e: 4,
      showButtonList: false,
      hit: false,
      timeOutEvent: 0, // 长按事件定时器
      startPageY: 0,
      currentPageY: 0,
      btnHeight: 40,
      // titles:['点击看展','参加云展','往届博博会'],
      // jumpUrl:['',
      //   'http://www.expo-museums.com/Index/history/column/143',
      //   'http://www.expo-museums.com/Index/column/id/162'],
    };
  },
  methods: {
    change(val) {
      if (val===undefined) return;
      console.log(val);
      // if(val===1) val='德国博物馆'
      // else if(val===2) val='南京博物馆'
      // else if(val===3) val='南通博物馆'
      // else if(val===4) val='广东省博物馆'
      // else val='高淳博物馆'
      if (val === 0) {
        this.a = val;
        this.b = val + 1;
        this.c = val + 2;
        this.d = val + 3;
        this.e = val + 4;
      }
      if (val === 1) {
        this.a = val;
        this.b = val + 1;
        this.c = val + 2;
        this.d = val + 3;
        this.e = val - 1;
      }
      if (val === 2) {
        this.a = val;
        this.b = val + 1;
        this.c = val + 2;
        this.d = val - 1;
        this.e = val - 2;
      }
      if (val === 3) {
        this.a = val;
        this.b = val + 1;
        this.c = val - 1;
        this.d = val - 2;
        this.e = val - 3;
      }
      if (val === 4) {
        this.a = val;
        this.b = val - 1;
        this.c = val - 2;
        this.d = val - 3;
        this.e = val - 4;
      }
    },
    isShow(val) {
      this.buttonList();
      this.change(val);
    },
    pageJump(url) {
      window.location.href = url;
      // console.log('jump');
    },
    buttonList() {
      this.showButtonList = !this.showButtonList;
      // console.log('buttonlist',this.showButtonList);
    },
    goStart(event) {
      let _this = this;
      event.preventDefault();
      clearTimeout(_this.timeOutEvent);
      let touch = event.targetTouches[0];
      // console.log('起点',touch.pageY);
      this.startPageY = touch.pageY;
      // 开始触摸
      _this.timeOutEvent = setTimeout(() => {
        _this.timeOutEvent = 0;
        // console.log('处理长按事件');
        this.showButtonList = true;
      }, 1000);
    },
    goMove(event) {
      event.preventDefault();
      let touch = event.targetTouches[0];
    //   console.log('移动中',touch.pageY);
      //1379-1440
      this.currentPageY = touch.pageY;
    },
    goEnd() {
      // 触发切换事件
      let temp;
      if (this.btnIndex === 4) temp = this.e;
      if (this.btnIndex === 3) temp = this.d;
      if (this.btnIndex === 2) temp = this.c;
      if (this.btnIndex === 1) temp = this.b;
      if (this.btnIndex === 0) temp = this.a;
      this.change(temp);
// 1228 1260
    //   let _this = this;
      clearTimeout(this.timeOutEvent);
    //   _this.timeOutEvent !== 0

        // console.log('处理长按结束事件');
        if (this.btnIndex < this.titles.length && this.btnIndex >= 0) {
          this.pageJump(this.jumpUrl[this.btnIndex]);
        }
        this.showButtonList = false;
        this.startPageY = this.currentPageY = 0; //因为computed会缓存btnIndex，而需要在切换页面之后恢复原状，所以要改变
      
    },
  },
  computed: {
    btnIndex: function () {
      let index;
      let relativeY = this.startPageY - this.currentPageY;
      index = Math.floor(relativeY / this.btnHeight);
      // console.log(index);
      return index;
    },
  },
  beforeUpdate() {
    this.btnHeight = document.getElementById("mainbutton").clientHeight / 1.7;
    // console.log('btnheight',this.btnHeight);
  },
};
</script>


<style scoped>
/* #guide-button>div:henter .button-text{
    color:#ffffff;
} */
.hit {
  transform: scale(1.03);
  color: #ffffff;
  opacity: 1;
  transition: all 1s ease;
}
#mainbutton {
  position: absolute;
  top: 5.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 18.9rem;
  max-width:302px;
  max-height: 68px;
  height: 4.3rem;
  /* background: linear-gradient(180deg, #D16914, transparent);
  border-radius: 6px;*/
}
.arrow {
  position: inherit;
  top: 30%;
  right: 1.7rem;
  width: 1.2rem;
}
.arrow.arrowDown {
  transform-origin: center;
  transform: rotate(180deg);
}
.exbutton {
  width: 18.9rem;
  opacity: 0.8;
}
div.button-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  text-align: center;
  font-weight: normal;
  color: #ffffff;
  font-size: 1rem;
  font-family: "Microsoft YaHei", "serif";
  opacity: 1;
}
div.black-text {
  color: #000000;
}
#cloud-exhibition {
  position: absolute;
  top: 2.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 18.9rem;
  height: 4.3rem;
  z-index: 999;
}
#old-exhibition {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18.9rem;
  height: 4.3rem;
  z-index: 999;
}
#old-exhibition1,
#old-exhibition2 {
  position: absolute;
  top: -5.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 18.9rem;
  height: 4.3rem;
  z-index: 999;
}
#old-exhibition2 {
  top: -2.8rem;
}
a {
  text-decoration: none;
  color: inherit;
}

#front {
  position: absolute;
  top: 4.9rem;
  left: 50%;
  transform: translateX(-50%);
  width: 18.1rem;
}
#front img {
  width: 100%;
}
#back {
  position: absolute;
  top: 4.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 16.2rem;
}
#back img {
  width: 100%;
}
</style>