换了种vue写法做的小活动

//html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李宁抽奖活动-中国东方航空</title>
    <meta name="keywords" content="李宁抽奖活动-中国东方航空">
    <meta name="description" content="李宁抽奖活动-中国东方航空">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />
    <script src="dest/js/lib/flexible.min.js?_=1526889405610"></script>
</head>
<body>
    <div id="content"></div>
    <script type="text/javascript" src="dest/js/lib/vue.js?_=1526563504633"></script>
    <script type="text/javascript" src="dest/js/lib/axios.min.js?_=1526563504633"></script>
    <script src="dest/js/index.min.js?_=1526889405610"></script>
</body>

</html>
//js:
import { ga } from 'ga';
import {
    message,
    isInApp,
    parse_url,
    APPLogin
} from './lib/utils-fn.js';
import {
    api
} from "./lib/utils-config.js"
import {
    wechatShare
} from 'wechatShare';
import 'layerApp';
ga();
import baseApp from 'baseApp';
import App from './vue/App'
var app = new baseApp();
render()
function render() {
    Vue.prototype.app = app
    Vue.prototype.wechatShare = wechatShare
    let vueApp = new Vue({
        ...App,
    });
    vueApp.$mount('#content');
}
//vue文件
<template>
  <div>
        <!-- 主页 -->
        <div class="home" v-show="homeShow">  
            <div class="goBtn"></div>    
            <div class="ruleTip" @click="ifshowRule">活动规则</div>     
        </div>
        <!-- 规则 -->
        <div class="ruleBox" v-show="ruleShow">
            <div class="box">
                <div class="shutDown" @click="shutDown"></div>
                <div class="ruleTitle">活动规则</div>
                <div class="contentBox"> 
                    <p>1. 本活动仅限“东方万里行”会员（以下简称“会员”）参加。</p>
                    <p>2. 活动时间为：即日起至2019年2月4日。</p>
                    <p>3. 请务必填写正确的身份信息以及手机号，并保证手机号码畅通，以便工作人员联系发奖。因中奖用户个人原因导致无法联系到获奖人，将视为自动放弃，取消发奖。抽中免单奖品的会员请耐心等待，工作人员将在活动结束后的14个工作日以021-2237****的固定电话致电。</p>
                    <p>4. 若您的“东方万里行”会员账号中未维护手机号或者手机号已变更无法接受短信请前往东航直属营业部修改账号信息。</p>
                    <p>5. 本活动包含机票免单10份、旅游度假免单10份、机票20元券抵用券1万张、酒店50元抵用券6万张</p>
                    <p>6. 抽取到机票20元抵用券、酒店50元抵用券会员，请下载东方航空APP，使用抽奖时填写的会员账号，登录后在“我的-我的卡券-现金券/其他优惠券”中查看红包信息。红包领取后30-90天失效。</p>
                    <p>7. 抽取到机票免单、旅游度假免单的会员，保持手机号畅通，工作人员将在活动结束后的14个工作日内以021-2237****开头的电话致电。机票免单金额最高不超过5000元，机票金额超过5000元的部分需由会员自理。旅游度假免单金额最高不超过5000元，超过5000元的部分需由会员自理。免单需在客服人员致电后确认后进行下单并报销，不可擅自先行购买。免单下单以及出行有效期至2019年12月31日。</p>
                    <p>8. 如中奖奖品涉及税费的缴纳，则需要会员自理。</p>
                </div>
            </div> 
        </div> 
        <!--结果展示 -->  
        <div class="resBox" v-show="resBox">
            <div class="wBox">
                <img src=""/>
                <div class="lookBtn" v-show="ifHongbao"></div>
            </div>
        </div> 
        <!-- loding   -->
        <div class="loding" v-show="ifLoading">
            <div class="cover"></div>
            <aside class="loading-wrapper">
                <div>
                <div class="loading-img"></div>
                </div>
            </aside>
        </div>  
        <!-- share -->
        <!-- <a class="pendant" id="pendant" href="" style="z-index: 40;" v-show="shareIcon">
            <div class="fenxiang" @click="appShare">
                <span class="imgIcoFx"></span>
            </div>
        </a>  -->
    </div>
</template>
<script>
import { message, isInApp, parse_url, APPLogin } from "./lib/utils-fn.js";
var p = parse_url().p || "";
export default {
  data() {
    return {
      //抽奖draw是否显示
      homeShow: true,
      //规则是否显示
      ruleShow: false,
      //load
      ifLoading: false,
      //结果页
      resBox: false,
      //是否是红包
      ifHongbao: false,
      //奖品背景图20机票
      prizeBg20jp: require("../assets/picture/20jp.png"),
      //奖品背景图50红包
      prizeBg50hb: require("../assets/picture/50hb.png"),
      //奖品背景图机票免单
      prizeBgjpmd: require("../assets/picture/jpmd.png"),
      //奖品背景图旅游免单
      prizeBglymd: require("../assets/picture/lymd.png")
    };
  },
  mounted() {
    //初始化微信分享
    this.weishare();
  },
  methods: {
    //点击领奖
    start() {
      let _this = this;
      _this.ifLoading = true;
      axios
        .post(api.lucky, {
          PValue: p,
          ActivityCode: api.ActivityCode
        })
        .then(response => {
          const { data } = response;

          _this.ifLoading = false;
          if (data && data.Code != "200") {
            switch (data.BCode) {
              case 0:
                if (data.Msg === "您已参与过本活动，敬请期待下次活动吧") {
                  message("您的抽奖次数已用完，谢谢参与！");
                } else {
                  message(data.Msg);
                }
                break;
              case -1:
                message("未登录");
                APPLogin(
                  data.Data.LoginRedirectUrl,
                  "幸运大转盘",
                  api.ActivityCode
                );
                break;
              case -2:
                APPLogin(
                  data.Data.LoginRedirectUrl,
                  "幸运大转盘",
                  api.ActivityCode
                );
                break;
              case -3:
                message("活动尚未开始");
                break;
              case -4:
                message("活动已结束");
                break;
              // case -5:
              //     message("每人限抽奖一次，谢谢您的参与！");
              //     break;
              case -10:
                message("服务排队中，请稍后再试");
            }
          } else if (data && data.Code == "200") {
            let proCode = data.Data.LotteryList[0].prizeCode;
            _this.showRes(proCode);
          }
        });
    },
    //替换奖品背景图
    showRes(RuleCode) {
      this.homeShow = false;
      this.resNow = true;
      //this.prizeBg = `${api.road}images/${RuleCode}.png`;
      if (RuleCode == "HB") {
        this.ifHongbao = true;
      } else {
        this.ifHongbao = false;
      }
    },
    //查看规则
    ifshowRule() {
      this.ruleShow = true;
    },
    //关闭规则
    shutDown() {
      this.ruleShow = false;
    },
    //微信分享
    weishare() {
      this.wechatShare.init({
        title: "",
        desc: "",
        link: location.href, // 分享的链接不能与当前页面域名不同
        imgUrl:
          "https://ceair-resource.oss-cn-shanghai.aliyuncs.com/activity/21962lottery/app/images/mulogo.png", // 必须有协议头 http or https
        type: "link"
      });
    },
    //app分享
    appShareFun() {
      if (isInApp()) {
        this.app.share({
          shareTitle: "", // 主标题
          imgUrl:
            "https://ceair-resource.oss-cn-shanghai.aliyuncs.com/activity/21962lottery/app/images/mulogo.png",
          shareContent: "", // 副标题
          shareUrl: window.location.href
        });
      }
    },
    //app下载
    toDownload() {
      if (isInApp()) {
        // window.location.href = "mceair://perfect.ceair/deeplink?typeKey=mainview";
      } else {
        //h5
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
          window.location =
            "https://itunes.apple.com/cn/app/dong-fang-hang-kong-dong-hang/id419275564?mt=8";
        } else if (navigator.userAgent.match(/android/i)) {
          //在iframe 中打开APP
          var ifr = document.createElement("iframe");
          ifr.src = "mceair://perfect.ceair/deeplink?typeKey=mainview";
          ifr.style.display = "none";
          //客户端检测微信直接跳应用宝链接
          if (Boolean(navigator.userAgent.match(/MicroMessenger/gi))) {
            window.location.href =
              "https://sj.qq.com/myapp/detail.htm?apkName=com.rytong.ceair&android_schema=com.rytong.ceair";
          } else {
            this.checkOpen(opened => {
              // console.log(opened)
              if (opened == 1) {
                window.location = "http://mobile.ceair.com/dl.html";
              }
            });
          }
          document.body.appendChild(ifr);
          setTimeout(function() {
            document.body.removeChild(ifr);
          }, 3000);
          // window.location = "https://mobile.ceair.com/";
        }
      }
    },
    checkOpen(cb) {
      var _clickTime = +new Date();
      function check(elsTime) {
        if (elsTime > 3000 || document.hidden || document.webkitHidden) {
          cb(1);
        } else {
          cb(0);
        }
      }
      //启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束
      var _count = 0,
        intHandle;
      intHandle = setInterval(function() {
        _count++;
        var elsTime = +new Date() - _clickTime;
        if (_count >= 100 || elsTime > 3000) {
          clearInterval(intHandle);
          check(elsTime);
        }
      }, 100);
    }
  }
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
img {
  display: block;
  width: 100%;
  max-width: 100%;
}
//首页
.home {
  width: 100%;
  height: 1334px;
  background: url("../assets/picture/bg.jpg") center top no-repeat; //require("../assets/20jp.png"),
  background-size: 100% 100%;
  position: relative;
  .goBtn {
    width: 750px;
    height: 147px;
    position: absolute;
    left: 0;
    bottom: 110px;
    background: url("../assets/picture/go.png") center no-repeat;
    background-size: 100% auto;
  }
  .ruleTip {
    width: 120px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #2193df;
    position: absolute;
    left: 319px;
    bottom: 55px;
    color: #2193df;
    font-size: 28px;
  }
}
//规则
.ruleBox {
  width: 706px;
  height: 626px;
  position: fixed;
  bottom: 118px;
  left: 22px;
  background-color: #ffffff;
  border: 1px solid #c7c7c7;
  border-radius: 25px;
  color: #717171;
  .box {
    position: relative;
    .ruleTitle {
      height: 76px;
      line-height: 76px;
      font-size: 36px;
      font-weight: lighter;
      text-align: center;
    }
    .contentBox {
      margin: 0 auto;
      width: 650px;
      height: 530px;
      overflow-y: auto;
      font-size: 22px;
      text-align: justify;
      line-height: 1.7;
    }
    .shutDown {
      position: absolute;
      right: 25px;
      top: 10px;
      width: 71px;
      height: 71px;
      background: url("../assets/picture/shutdown.png") center no-repeat;
      background-size: 100% auto;
      z-index: 10;
    }
  }
}
//结果展示页免单
.resBox {
  width: 100%;
  height: 1334px;
  background: url("../assets/picture/zjBG.jpg") center top no-repeat;
  background-size: 100% 100%;
  position: relative;
  .wBox {
    position: absolute;
    left: 0;
    top: 566px;
    width: 750px;
    height: 642px;
    img {
      width: 750px;
      height: auto;
      position: relative;
    }
    .lookBtn {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 750px;
      height: 115px;
    }
  }
}
//loading
.loding {
  .cover {
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    background-color: #ccc;
    opacity: 0.5;
  }
  .loading-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-duration: 1s;
    animation-fill-mode: both;
    z-index: 120;
  }
  .loading-img {
    margin: 0 auto;
    width: 200px; /*no*/
    height: 130px; /*no*/
    background: url("//ceair-resource.oss-cn-shanghai.aliyuncs.com/common/pc/loading2.gif")
      no-repeat;
    background-size: 100% auto;
  }
}
.flexBox {
  display: flex;
}

// shareIcon
// .pendant {
//   position: fixed;
//   bottom: 200px;
//   right: 30px;
//   width: 45px;
//   height: 51px;
//   .fenxiang {
//     span {
//       display: block;
//       width: 45px;
//       height: 51px;
//       background:  url('../images/fxIco.png') center center no-repeat;
//       background-size: 100% 100%;
//     }
//   }
// }
</style>
换了种vue写法做的小活动

猜你喜欢
