h5-2019-wechat/src/pages/invitation/index.vue

<template>
  <div class="swiper-container">
    <div class="musicbox" @click="troggle">
      <img :class="playing" :src="'https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/music_'+playing+'.png'" alt="">
    </div>
    <div class="swiper-wrapper">
        <div class="swiper-slide mainPage">
          <div>
            <img class="main_logo" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_logo.png">
            <div class="subPage">
              <div>
                <img :class="['main_main', (swiper || {}).activeIndex === 0 ? 'animated zoomIn': '']" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_main.png">
                <img :class="['main_title', (swiper || {}).activeIndex === 0 ? 'animated fadeInUp': '']" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_maintitle1.png">
                <img :class="['main_happy', (swiper || {}).activeIndex === 0 ? 'animated rotateIn': '']" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_happy.png">
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide yqhPage">
          <div>
            <div class="subPage">
              <div class="sub_title">
                <img :class="['yqh_title', (swiper || {}).activeIndex === 1 ? 'animated zoomIn': '']" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_title.png">
                <img :class="['yqh_title_min', (swiper || {}).activeIndex === 1 ? 'animated fadeInLeft': '']" style="animation-delay: 0.5s;" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_title_min.png">
              </div>
              <div class="yqh">
                <div class="div_xz">
                  <div :class="[(swiper || {}).activeIndex === 1 ? 'animated fadeInUp': '']" style="animation-delay: 1s;width:100%;height:100%;opacity: 0;">
                    <div>
                      <a>
                        <img
                          v-if="userInfo !== null"
                          :src="userInfo.Headimgurl.replace(/http:\/\/.+\.qlogo\.cn\//i, 'http://wx.jinchengjiaye.com/wechat-avatar/') || ''"
                          class="cover"
                          alt
                        >
                      </a>
                      <span>{{userInfo !== null ? userInfo.Nickyname : ''}}：</span>
                    </div>
                    <img class="yqh_xz" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_xz1.png">
                  </div>
                </div>
                <div class="div_xf_top">
                  <img src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_xftop.png">
                </div>
                <div class="div_xf_down">
                  <img src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_xfdown.png">
                </div>
                <img :class="['yqh_happy', (swiper || {}).activeIndex === 1 ? 'animated rotateIn': '']" style="animation-delay: 2s" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_happy.png">
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide hylcPage">
          <div>
            <div class="subPage">
              <div class="sub_title">
                <img :class="['hylc_title', (swiper || {}).activeIndex === 2 ? 'animated zoomIn': '']"  src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_title.png">
                <img :class="['hylc_title_hy', (swiper || {}).activeIndex === 2 ? 'animated fadeInLeft': '']" style="animation-delay: 0.5s;" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_title_hy.png">
              </div>
              <div :class="[(swiper || {}).activeIndex === 2 ? 'animated fadeIn': '']"  style="animation-delay: 1s">
                <ul>
                  <li v-for="(item, index) in meetings" class="flex-h" :key="index">
                    <span :class="[(swiper || {}).activeIndex === 2 ? 'animated fadeInLeft': '']" style="animation-delay: 1.5s;animation-duration:0.5s">{{item.time}}</span>
                    <div :class="['flex-item', (swiper || {}).activeIndex === 2 ? 'animated fadeInRight': '']" style="animation-delay: 1s;animation-duration:1s">{{item.desc}}</div>
                    <span :class="[(swiper || {}).activeIndex === 2 ? 'animated fadeInRight': '']" style="animation-delay: 1.5s;animation-duration:0.5s">{{item.minutes}}</span>
                  </li>
                </ul>
              </div>
              <div class="sub_bottom">
                <img src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_logo.png">
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide chxzPage">
          <div>
            <div class="subPage">
              <div class="sub_title">
                <img :class="['chxz_title', (swiper || {}).activeIndex === 3 ? 'animated zoomIn': '']" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_title.png">
                <img :class="['chxz_title_ch', (swiper || {}).activeIndex === 3 ? 'animated fadeInLeft': '']" style="animation-delay: 0.5s;" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_title_ch.png">
                <img :class="['chxz_desc', (swiper || {}).activeIndex === 3 ? 'animated fadeIn': '']" style="animation-delay: 1s;" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_ch_desc.png">
              </div>
              <el-amap ref="map" vid="amapDemo" :center="mapCenter" :zoom="15" :class="['amap', (swiper || {}).activeIndex === 3 ? 'animated fadeIn': '']" style="animation-delay: 1s;">
                <el-amap-marker :position="mapCenter" :events="events"></el-amap-marker>
              </el-amap>
              <div class="sub_bottom">
                <img src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_logo.png">
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide hydlPage">
          <div>
            <div class="subPage">
              <div class="sub_title">
                <img :class="['hydl_title', (swiper || {}).activeIndex === 4 ? 'animated zoomIn': '']" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/19nhyqh_title.png">
                <img :class="['hydl_title_en', (swiper || {}).activeIndex === 4 ? 'animated fadeIn': '']" style="animation-delay: 0.5s;" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/invitation_letter.png">
              </div>
              <div class="sub_content">
                <img :class="['sub_content_img', (swiper || {}).activeIndex === 4 ? 'animated fadeInUp': '']" src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/welcome.png" alt="">
              </div>
              <div class="sub_bottom">
                <img src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/bottom-logo.png">
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import { createNamespacedHelpers } from 'vuex'
import wx from 'weixin-jsapi'
const { mapState: mapUserState } = createNamespacedHelpers('user')

export default {
  name: '',
  data () {
    return {
      swiper: null,
      marker: null,
      events: {
        click: () => {
          console.log(wx)
          wx.openLocation({
            latitude: 31.941891, // 纬度，浮点数，范围为90 ~ -90
            longitude: 118.818648, // 经度，浮点数，范围为180 ~ -180。
            name: '银城皇冠假日酒店'
          })
        }
      },
      audio: null,
      musicurl: 'https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/nh/nh_music.mp3',
      playing: 'off',
      markers: [],
      mapCenter: [118.818648, 31.941891],
      meetings: [{
        time: '13:30-13:40',
        desc: '分段入场: 城中、江宁、合肥、大华、物色、银荔方、耘初',
        minutes: '10分钟'
      }, {
        time: '13:40-13:55',
        desc: '分段入场: 江北、锦城、荟盛行、海南',
        minutes: '15分钟'
      }, {
        time: '13:55-14:10',
        desc: '分段入场: 无锡、杭州、徐州、营销中心、荟房',
        minutes: '15分钟'
      }, {
        time: '14:30-14:35',
        desc: '视频',
        minutes: '5分钟'
      }, {
        time: '14:35-14:55',
        desc: '何总发言',
        minutes: '20分钟'
      }, {
        time: '14:55-15:25',
        desc: '案例分享2个(江宁、江北)',
        minutes: '30分钟'
      }, {
        time: '15:25-15:50',
        desc: '邀请集团领导发言',
        minutes: '25分钟'
      }, {
        time: '15:50-17:10',
        desc: '表彰优秀员工、团队',
        minutes: '80分钟'
      }, {
        time: '17:10-17:30',
        desc: '下达2019目标、誓师授旗',
        minutes: '20分钟'
      }, {
        time: '17:30-18:30',
        desc: '翻台、暖场互动',
        minutes: '60分钟'
      }, {
        time: '18:30-20:30',
        desc: '晚宴+节目+抽奖+互动',
        minutes: '120分钟'
      }],
      trigger: 'ontouchend' in window.document ? 'touchstart' : 'click'
    }
  },
  computed: {
    ...mapUserState({
      userInfo: item => item.userInfo
    })
  },
  mounted () {
    this.swiper = new Swiper('.swiper-container', {
      direction: 'vertical'
    })
    window.setTimeout(this.play, 1000)
    window.document.addEventListener(this.trigger, this.autoplay, false)
  },
  methods: {
    play () {
      if (this.musicurl) {
        if (!this.audio) {
          this.audio = window.document.createElement('audio')
          this.audio.src = this.musicurl
          this.audio.autoplay = 'autoplay'
          this.audio.preload = true
          this.audio.loop = true
        }
        this.audio.play()
        this.playing = 'on'
      }
    },
    stop () {
      this.audio.pause()
      this.playing = 'off'
    },
    troggle () {
      if (this.playing === 'on') {
        this.stop()
      } else {
        this.play()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "page.scss";
</style>