index.vue

<template>
  <div class="ybIndex">
    <div class='imgBox'>
      <img v-lazy="imgUrl.bg1" alt="">
      <img v-lazy="imgUrl.bg2" alt="">
      <img v-lazy="imgUrl.bg3" alt="">
      <img v-lazy="imgUrl.bg4" alt="">
      <img v-lazy="imgUrl.bg5" alt="">
      <img v-lazy="imgUrl.bg6" alt="">
      <img v-lazy="imgUrl.bg7" alt="">
      <img v-lazy="imgUrl.bg8" alt="">
      <img @click='showVideo' v-lazy="imgUrl.bg9" alt="">
      <img v-lazy="imgUrl.bg10" alt="">
      <img v-lazy="imgUrl.bg11" alt="">
      <img v-lazy="imgUrl.bg12" alt="">
    </div>
    <video v-show='videoDis' ref="video" src="https://cdn.singsingenglish.com/new-sing/10dfb6be9f9fbea634750a9787b3e49878f46acc.mp4" id="video" poster="https://cdn.singsingenglish.com/new-sing/10dfb6be9f9fbea634750a9787b3e49878f46acc.mp4?vframe/jpg/offset/3" width="800" height="450px" controls controlslist="nodownload"
				   preload="auto" class="video">
					<source src="https://cdn.singsingenglish.com/new-sing/10dfb6be9f9fbea634750a9787b3e49878f46acc.mp4">
		</video>
    <div class="news" v-if="username">
      <div class="shadow"></div>
      <div class="text">
        <span class="name">{{username}}</span><span>{{minute}}分钟前领取了课程</span>
      </div>
    </div>
    <div class="navbtn" >
      <div class="btn" @click="nav();buttonClick('按钮点击','友邦免费领取')" >免费领取</div>
    </div>
  </div>
</template>

<script>
import { shopSuccess } from "../../util/imgUrl";
import { getYoubangApi,getwechatParam } from "../../service/api";
import bg1 from '../../assets/yb/1.png'
import bg2 from '../../assets/yb/2.png'
import bg3 from '../../assets/yb/3.png'
import bg4 from '../../assets/yb/4.png'
import bg5 from '../../assets/yb/5.png'
import bg6 from '../../assets/yb/6.png'
import bg7 from '../../assets/yb/7.png'
import bg8 from '../../assets/yb/8.gif'
import bg9 from '../../assets/yb/9.png'
import bg10 from '../../assets/yb/10.png'
import bg11 from '../../assets/yb/11.png'
import bg12 from '../../assets/yb/12.png'
export default {
  name: "ybIndex",
  components: {},
  data() {
    return {
      addressInfo: {},
      userArr:[{"nickname":"可可茶"},{"nickname":"柠檬不萌！"},{"nickname":"Dream"},{"nickname":"球球"},{"nickname":"安"},{"nickname":"凌儿"},{"nickname":"Andy"},{"nickname":"田七七 ^-^"},{"nickname":"香水百合"},{"nickname":"流云、鉴心"},{"nickname":"Xx金闪闪xX"},{"nickname":"Joyce"},{"nickname":"丽园"},{"nickname":"妙音"},{"nickname":"Cynthia老师@唱唱启蒙英语"},{"nickname":"A中国人寿陈英英18501553167"},{"nickname":"海燕"},{"nickname":"a.ge"},{"nickname":"hmily"},{"nickname":"Pisces(双鱼座)"},{"nickname":"🌸Sunny"},{"nickname":"花园"},{"nickname":"MAYDAY曾爱华"},{"nickname":"燕子"},{"nickname":"烫烫"},{"nickname":"莉姐"},{"nickname":"娟"},{"nickname":"💙"},{"nickname":"乐天派"},{"nickname":"木木君"},{"nickname":"国子"},{"nickname":"贰十污"},{"nickname":"LJR"},{"nickname":"彭巧莉"},{"nickname":"唱唱英语Grace老师😊"},{"nickname":"李招"},{"nickname":"芸"},{"nickname":"🍡😘🐚"},{"nickname":"Cynthia"},{"nickname":"几何（睡觉中）"},{"nickname":"罗月红"},{"nickname":"👄甜心👄"},{"nickname":"Aanro 宋"},{"nickname":"闫"},{"nickname":"潇潇雨"},{"nickname":"瓶子"},{"nickname":"懒人发呆ing"},{"nickname":"UNA_TING¹⁵⁸⁷⁷²⁵⁹⁸⁸⁰"},{"nickname":"钟春"},{"nickname":"Vera 薇拉"},{"nickname":"CiCi"},{"nickname":"郝桂然"},{"nickname":"小麦奇"},{"nickname":"漾。"},{"nickname":"清晨的阳光"},{"nickname":"段段"},{"nickname":"iwi"},{"nickname":"Tina 肖汀"},{"nickname":"ZJY"},{"nickname":"陆茂华"},{"nickname":"宛如青空"},{"nickname":"Fiona"},{"nickname":"风往左吹"},{"nickname":"傅玉"},{"nickname":"双木成林"},{"nickname":"(*^_^*)小星*"},{"nickname":"胡亚～斐娜晨"},{"nickname":"吴晓芳"},{"nickname":"刘宁"},{"nickname":"晶晶"},{"nickname":"平安客户经理 薛梅18602410792"},{"nickname":"微笑"},{"nickname":"花"},{"nickname":"魁女子"},{"nickname":"杨艺娜℡₁₃₂₅₉₈₃₂₃₅₀"},{"nickname":"三红"},{"nickname":"感动自己"},{"nickname":"Frank老师@金牌班主任"},{"nickname":"小尛"},{"nickname":"cynthia娜"},{"nickname":"Jenny          💓"},{"nickname":"从你的全世界路过"},{"nickname":"子矜"},{"nickname":"平平👠"},{"nickname":"杨万翠"},{"nickname":"原子"},{"nickname":"❤ ❤ ❤"},{"nickname":"Raina老师@唱唱启蒙英语"},{"nickname":"王"},{"nickname":"慧"},{"nickname":"亮琴"},{"nickname":"优冉"},{"nickname":"Mark老师"},{"nickname":"White 白"},{"nickname":"华华"},{"nickname":"Sh1nNosuk3丶"},{"nickname":"郑小肥"},{"nickname":"客服"},{"nickname":"JM"},{"nickname":"小C老师@唱唱启蒙英语"}],
      minute:1,
      Interval:null,
      username:'',
      imgUrl:{
        bg1:bg1,
        bg2:bg2,
        bg3:bg3,
        bg4:bg4,
        bg5:bg5,
        bg6:bg6,
        bg7:bg7,
        bg8:bg8,
        bg9:bg9,
        bg10:bg10,
        bg11:bg11,
        bg12:bg12,
      },
      videoDis:false,
      query:{}
    };
  },
  mounted() {
    this.initPage();
  },
  beforeDestroy(){
    clearInterval(this.Interval)
  },
  methods: {
    showVideo(){
      this.$refs.video.play()
      this.videoDis=true
    },
    initPage() {
      this.username = this.userArr[Math.floor(Math.random() * this.userArr.length)].nickname
      this.minute = Math.ceil(Math.random() * 5)
      this.Interval = setInterval(()=>{
        this.minute = Math.ceil(Math.random() * 5)
        this.username = this.userArr[Math.floor(Math.random() * this.userArr.length)].nickname
      },2000)
      'channel_code'
      'redeem_code'
      // invite_code
      this.onShare()
      this.$sa.track("GetCourseAIA", {
          });
      if (window.location.href.indexOf("parentId") > -1) {
        this.query.parentId = this.$route.query.parentId;
      }
      if (window.location.href.indexOf("redeem_code") > -1) {
        this.query.redeem_code = this.$route.query.redeem_code;
      }
      if (window.location.href.indexOf("invite_code") > -1) {
        this.query.invite_code = this.$route.query.invite_code;
      }
      if (window.location.href.indexOf("agentId") > -1) {
        this.query.agentId = this.$route.query.agentId;
      }
      if(sessionStorage.getItem('clickTag')){
        console.log(JSON.parse(localStorage.getItem("userDesc")))
        getYoubangApi({'redeem_code':this.query.redeem_code}).then(res =>{
        if(res.res==1){
          this.$router.push({name:'ybOrderRender',query:this.query})
        }else if(res.res==2||res.res==4){
          this.$router.push({name:'ybPaySuccess',query:this.query})
        }else{
          window.location.href=`${process.env.YB_URL}?parentId=${this.$route.query.parentId}&agentId=${this.$route.query.agentId}`
        }
        })
        sessionStorage.setItem('clickTag','')
      }
    },
    goEdit(){
      this.$router.push({name:'addressEdit'})
    },
    nav(){
      let redeem_code = ''
      if(!localStorage.getItem("userDesc")){
        sessionStorage.setItem('clickTag',1)
      }
      getYoubangApi({'redeem_code':this.query.redeem_code}).then(res =>{
        if(res.res==1){
          this.$router.push({name:'ybOrderRender',query:this.query})
        }else if(res.res==2||res.res==4){
          this.$router.push({name:'ybPaySuccess',query:this.query})
        }else{
          window.location.href=`${process.env.YB_URL}?parentId=${this.$route.query.parentId}&agentId=${this.$route.query.agentId}`
        }
      })
    },
    buttonClick(buttonType, buttonName) {
      this.$sa.track("buttonClick", {
        tabTitle: "商品",
        moduleTitle: "详情页",
        buttonType: buttonType,
        buttonName: buttonName
      });
    },
    onShare: function(type) {
      let URL = `${process.env.API_URL}#/ybNav?parentId=${this.$route.query.parentId}&agentId=${this.$route.query.agentId}`;
      this.enableShare({
        product_title: '【免费领】价值498元亲子早教英语启蒙训练课',
        desc: '友邦助您启蒙宝贝快乐家庭',
        shareIcon: 'https://cdn.singsingenglish.com/new-sing/6c51175a99f73ee3a410ea9fbf66123f9f49f0f6.png',
        shareUrl: URL
      });
    },
    enableShare: function(option) {
      console.log(option)
      let that = this;
      getwechatParam({
        api_list: "onMenuShareAppMessage,onMenuShareTimeline",
        url: window.location.href.split("#")[0]
      }).then(wechatRes => {
        wx.config({
          debug: false,
          appId: wechatRes.appId,
          timestamp: parseInt(wechatRes.timestamp),
          nonceStr: wechatRes.nonceStr,
          signature: wechatRes.signature,
          jsApiList: wechatRes.jsApiList
        });
        wx.ready(function() {
          wx.onMenuShareTimeline({
            title: '【庆百年 友惊喜】暑期亲子礼︱价值498元唱唱启蒙英语线上课程免费领', // 分享标题
            desc: '【庆百年 友惊喜】暑期亲子礼︱价值498元唱唱启蒙英语线上课程免费领', // 分享描述
            link: option.shareUrl, // 分享链接
            imgUrl:
              option.shareIcon ||
              "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
            success: function() {
              console.log("分享成功");
            },
            cancel: function() {
              // alert("失败")
              console.log("分享失败");
            }
          });
          wx.onMenuShareAppMessage({
            title: '【庆百年 友惊喜】暑期亲子礼', // 分享标题
            desc: '价值498元唱唱启蒙英语线上课程免费领', // 分享描述
            link: option.shareUrl, // 分享链接
            imgUrl:
              option.shareIcon ||
              "https://cdn.singsingenglish.com/singsing/recommend/logo-refer.png", // 分享图标
            success: function() {},
            cancel: function() {}
          });
        });
      });
    },
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
.ybIndex {
  background: #FFD873;
  padding-bottom: 70 * @toVw;
  .video {
		width: 0;
    height: 0;
    display: none;
    // background: transparent;
	}
  .imgBox{
    img{width:100%;display: block;}
  }
  .news {
    position: fixed;
    width: 198 * @toVw;
    height: 33 * @toVw;
    top: 70 * @toVw;
    line-height: 33 * @toVw;
    border-radius: 19 * @toVw;
    overflow: hidden;
    text-align: left;
    left: -10* @toVw;
    padding-left: 20 * @toVw;
    font-size: 13 * @toVw;
    box-sizing: border-box;
    background:rgba(255,255,255,0.7);
    // opcitiy:0.7;
    .shadow {
      position: absolute;
      width: 170 * @toVw;
      height: 33 * @toVw;
      top: 0;
      left: 0;
      opacity: 0.3;
    }
    .text {
      // color: white;
      position: relative;
      z-index: 1;
      // display: flex;
      .name {
        display: inline-block;
        max-width: 50 * @toVw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span{display: inline-block;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;text-align: left;}
      // div{display: inline-block;position: relative;top: -5* @toVw;}
    }
  }
  .navbtn{
    position: fixed;
    height: 64 * @toVw;
    width: 100%;
    background: white;
    text-align: center;
    bottom: 0;
    .btn{
      background: #FF7D77;
      color:white;
      height: 50 * @toVw;
      line-height: 50 * @toVw;
      width: 325 * @toVw;
      height: 50 * @toVw;
      border-radius: 25* @toVw;
      margin-top: 7*@toVw;
      box-shadow:0px 0px 8* @toVw 0px rgba(255,125,119,0.4);
      -webkit-animation:myfirst 3s linear infinite;
      font-weight:bold;
    }
  }
}
@media screen and (orientation: landscape) {

}
</style>