refueling2.vue 3.73 KB
<template>
  <div  class="refueling2" :style="{backgroundImage:`url(${imgUrl.refueling1.bg})`}">
    <div class="bg-block">
      <img :src="imgUrl.refueling1.title" class="title">
      <audio v-if="nowLesson.content.radio.length" :src="nowLesson.content.radio[0].url" autoplay ref="jiayouAudio"></audio>
      <div class="content-img" :style="{backgroundImage:nowLesson.content.banner[0] ? `url(${nowLesson.content.banner[0].url}`:''}">
        <img :src="imgUrl.refueling2.radio" class="radio-icon" @click="playJiayou()">
        <img :src="imgUrl.refueling2.back" class="left-icon" @click="goNext(nowLesson.content.lastIndex)"/>
        <img :src="imgUrl.refueling2.next" class="right-icon"  v-if="nowLesson.content.nextIndex !== -1" @click="goNext(nowLesson.content.nextIndex)"/>
      </div>
    </div>
    <div class="bottom-block">
    </div>
  </div>
</template>

<script>
  import {refueling1,refueling2} from "../../util/imgUrl";

  export default {
    name: "refueling2",
    props:[
      'nowLesson'
    ],
    data(){
      return{
        imgUrl:{
          refueling1:refueling1,
          refueling2:refueling2
        }
      }
    },
    methods:{
      goNext(i){
        this.$emit('goNext',i)
      },
      // 播放加油包音频
      playJiayou(){
        if(this.$refs.jiayouAudio.paused){
          this.$refs.jiayouAudio.play()
        }else{
          this.$refs.jiayouAudio.pause()
        }
      },
    },
    watch:{
      'nowLesson'(){
        let voice = this.$refs.jiayouAudio;
        let that = this;
        wx.ready(function () {
          that.$nextTick(()=> {
            wx.ready(function () {
              that.$nextTick(()=>{
                if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
                  voice.play();
                } else {
                  //監聽客户端抛出事件"WeixinJSBridgeReady"
                  if (document.addEventListener) {
                    document.addEventListener("WeixinJSBridgeReady", function(){
                      voice.play();
                    }, false);
                  } else if (document.attachEvent) {
                    document.attachEvent("WeixinJSBridgeReady", function(){
                      voice.play();
                    });
                    document.attachEvent("onWeixinJSBridgeReady", function(){
                      voice.play();
                    });
                  }
                }
                wx.ready(()=>{
                  that.$refs.jiayouAudio.play()
                })
              })
            })
          })
        })
      }
    }
  }
</script>

<style scoped lang="less">
@import "../../util/public";
.refueling2{
  height: 100%;
  overflow: hidden;
  width: 100%;
  background-size: 100% 100%;
  .bg-block{
    width: 1154/2 * @toVw;
    height: 690/2 * @toVw;
    transform-origin: 355/2 * @toVw 370/2 * @toVw;
    transform: rotate(90deg);
    background: white;
    text-align: center;
    .title{
      position: relative;
      top: -30/2 * @toVw;
      width: 560 / 2 * @toVw;
    }
    .content-img{
      width: 1078/2 * @toVw;
      height: 550/2 * @toVw;
      margin: -40/2 * @toVw auto 0 auto;
      background: black;
      position: relative;
      border-radius: 8/2 * @toVw;
      background-size: 100% 100%;
      .radio-icon{
        width: 32 * @toVw;
        position: absolute;
        bottom: 20/2 * @toVw;
        left: 20/2 * @toVw;
      }
      .left-icon{
        position: absolute;
        top: 50%;
        width: 32 * @toVw;
        margin-top: -30/2 * @toVw;
        left: 20/2 * @toVw;
      }
      .right-icon{
        position: absolute;
        top: 50%;
        width: 32 * @toVw;
        margin-top: -30/2 * @toVw;
        right: 20/2 * @toVw;
      }
    }
  }
}
</style>