look1.vue

<template>
  <div :style="{backgroundImage:`url(${imgUrl.bg})`}" class="look1">
    <img :src="imgUrl.reqiqiu" class="reqiqiu"/>
    <img :src="imgUrl.qiqiu" class="qiqiu"/>
    <img :src="imgUrl.feiji" class="feiji"/>
    <div class="content">
      <div class="title">
        <img :src="imgUrl.title1"/>
      </div>
      <audio ref="jiayouAudio" v-if="nowLesson.content.radio.length > 0" :src="nowLesson.content.radio[0].url" @ended="lookAudioType = 2" @play="lookAudioType = 1" preload="auto" autoplay ></audio>
      <div class="radio">
        <img :src="imgUrl.r1" class="r1">
        <img :src="imgUrl.r2" class="r2" v-show="lookAudioType===2">
        <img :src="imgUrl.playing" class="r2" v-show="lookAudioType===1">
        <div class="r2 text" v-show="lookAudioType===0">
          loading
          <span>.</span>
          <span>.</span>
          <span>.</span>
        </div>
        <img :src="imgUrl.r3" class="r3">
        <img :src="imgUrl.rp" class="rp" @click="playLook1Audio" v-if="lookAudioType!==1">
        <img :src="imgUrl.rs" class="rs" @click="stopLook1Audio" v-if="lookAudioType===1">
      </div>
      <div class="today-block">
        <img :src="imgUrl.tadayBg"/>
        <div class="today-text">
          <div v-html="formatBr(nowLesson.content.today)">
          </div>
        </div>
      </div>
      <div class="title2-block">
        <img :src="imgUrl.title2" class="title2"/>
        <div class="directory-text">
          <div  v-html="formatBr(nowLesson.content.directory)">
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-block">
      <img :src="imgUrl.bank" @click="goNext('')"/>
      <img :src="imgUrl.go" v-if="nowLesson.content.nextIndex !== -1" @click="goNext(nowLesson.content.nextIndex,true)" />
    </div>
  </div>
</template>

<script>
  import {getwechatParam,get} from "../../service/api";
  import {look1} from "../../util/imgUrl";
  export default {
    name: "look1",
    props:[
      'nowLesson'
    ],
    data(){
      return {
        imgUrl:look1,
        lookAudioType:0,
        timeCheck:0,
      }
    },
    mounted(){
      this.initPage();
      window._hmt.push(['_trackPageview', '/#/PV/look']);
    },
    methods:{
      timeS(){
        if(this.timeCheck > 0){
          this.timeCheck --;
          setTimeout( ()=> {
            this.timeS();
          },1000)
        }
      },
      // 播放看一看音频
      playLook1Audio(){
        this.$refs.jiayouAudio.play();
        this.lookAudioType = 1
      },
      // 暂停看一看音频
      stopLook1Audio(){
        this.$refs.jiayouAudio.pause();
        this.lookAudioType = 2
      },
      autoPlayAudio(){
        let that = this;
        let voice = this.$refs.jiayouAudio;
        document.addEventListener("WeixinJSBridgeReady",function(){
          voice.play();
        },false);
        wx.ready(function () {
          that.$nextTick(()=> {
            wx.ready(function () {
              that.$nextTick(()=>{
                if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
                  voice.play();
                  console.log(1)
                } else {
                  //監聽客户端抛出事件"WeixinJSBridgeReady"
                  if (document.addEventListener) {
                    document.addEventListener("WeixinJSBridgeReady", function(){
                      voice.play();
                      console.log(2)
                    }, false);
                  } else if (document.attachEvent) {
                    document.attachEvent("WeixinJSBridgeReady", function(){
                      voice.play();
                      console.log(3)
                    });
                    document.attachEvent("onWeixinJSBridgeReady", function(){
                      voice.play();
                      console.log(4)
                    });
                  }
                }
                wx.ready(()=>{
                  that.$refs.jiayouAudio.play();
                  console.log(123)
                })
              })
            })
          })
        })
      },
      initPage(){
        this.timeCheck = this.nowLesson.content.timeLang;
        this.timeS();
        getwechatParam({
          api_list:'onMenuShareAppMessage',
          url:window.location.href.split('#')[0]
        }).then(res=>{
          let that = this;
          wx.config({
            debug: false,
            appId: res.appId,
            timestamp: parseInt(res.timestamp),
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: res.jsApiList
          });
          let voice = this.$refs.jiayouAudio;

          this.autoPlayAudio()
        });
      },
      goNext(i,next){
        this.stopLook1Audio();
        this.$emit('goNext',{i:i,next:!!next})
      },
      formatBr(str){
        str = str.replace(/\r\n/g,"<br/>");
        str = str.replace(/\n/g,"<br/>");
        str = str.replace(/\r/g,"<br/>");
        return str
      },
    },
    watch:{
      'nowLesson'(){
        this.autoPlayAudio
      }
    },
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .look1{
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: 100% 100%;
    .bottom-block{
      position: fixed;
      width: 100%;
      text-align: center;
      bottom: 5 * @toVw;
      z-index: 5;
      margin-top: 15 * @toVw;
      .timeout-block{
        display: inline-block;
        position: relative;
        .time-check{
          color: white;
          position: absolute;
          top: 7 * @toVw;
          width: 2em;
          text-align: right;
          left: 73 * @toVw;
        }
      }
      img{
        width: 127 * @toVw;
      }
      img:first-child{
        margin-right: 25 * @toVw;
      }

    }
    .reqiqiu{
      position: absolute;
      left: -30/ 2 * @toVw;
      width: 56 * @toVw;
      z-index: 1;
    }
    .qiqiu{
      position: absolute;
      z-index: 1;
      width: 42 *@toVw;
      left: -30/ 2 * @toVw;
      top: 700/ 2 * @toVw;
    }
    .feiji{
      position: absolute;
      z-index: 1;
      width: 84 * @toVw;
      right: -10 * @toVw;
      top: 120 * @toVw;
    }
    .content{
      left: 20 * @toVw;
      right: 20 * @toVw;
      top:15 * @toVw;
      bottom: 45 * @toVw;
      overflow: auto;
      position: fixed;
      background: white;
      border-radius: 5px;
      padding: 10 * @toVw;

      .title{
        img{
          width: 100%;
        }
      }
      .radio{
        text-align: center;
        position: relative;
        height: 55 * @toVw;
        .r1{
          position: absolute;
          bottom: 10 * @toVw;
          width: 225.5 * @toVw;
          right: 10 * @toVw;
        }
        .r2{
          position: absolute;
          right: 45 * @toVw;
          width: 118*@toVw;
          bottom: 13 * @toVw;
          color: #666;
          &.text{
            height: 28 * @toVw;
            line-height: 28 * @toVw;
            span{
              font-size: 20px;
              -webkit-animation: load 1s ease infinite;
              &:nth-child(1){
                -webkit-animation-delay:1.2s;
              }
              &:nth-child(2){
                -webkit-animation-delay:1.4s;
              }
              &:nth-child(3){
                -webkit-animation-delay:1.6s;
              }
            }
          }
        }
        .r3{
          position: absolute;
          left: 15 * @toVw;
          bottom: 10 * @toVw;
          width: 73 * @toVw;
        }
        .rs{
          position: absolute;
          right: 190 * @toVw;
          bottom: 15 * @toVw;
          width: 22 * @toVw;
        }
        .rp{
          position: absolute;
          right: 190 * @toVw;
          bottom: 15 * @toVw;
          width: 22 * @toVw;
        }
      }
      .today-block{
        position: relative;
        img{
          width: 100%;
        }
        .today-text{
          position: absolute;
          top: 35* @toVw;
          left: 0;
          bottom: 0;
          right: 0;
          font-size: 14* @toVw;
          line-height: 35* @toVw;
          text-align: left;
          padding-left: 20* @toVw;
          padding-right: 15* @toVw;
          z-index: 3;
          overflow: hidden;
          .zhanwei1{
            float: left;
            clear: left;
            width: 15* @toVw;
            height: 35* @toVw;
          }
          .zhanwei2{
            float: left;
            clear: left;
            width: 60* @toVw;
            height: 35* @toVw;
          }
          .zhanwei3{
            float: left;
            clear: left;
            width: 70* @toVw;
            height: 35* @toVw;
          }
        }
      }
      .title2-block{
        background: #FFFFFF;
        border: 1px solid #2E2E2E;
        border-radius: 4px;
        position: relative;
        margin-top: 10 * @toVw;
        min-height: 183 * @toVw;
        .directory-text{
          margin-top: 20 * @toVw;
          font-size: 28/ 2 * @toVw;
          line-height: 50/ 2 * @toVw;
          text-align: left;
          padding-left: 40/ 2 * @toVw;
          padding-right: 30/ 2 * @toVw;
        }
        .title2{
          position: absolute;
          width: 192 * @toVw;
          top: -20 * @toVw;
          left: 10 * @toVw;
        }
        .redM{
          position: absolute;
          width: 96 * @toVw;
          top: -2 * @toVw;
          right: -2 * @toVw;
        }
        .flour{
          position: absolute;
          bottom: 0;
          width: 169 * @toVw;
          right: 0;
        }
      }
    }
  }
  @-webkit-keyframes load{
    0%{
      opacity: 1;
    }
    100%{
      opacity: 0;
    }
  }

</style>