版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_38747509/article/details/83311885
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>evelom品牌活动 - 中国东方航空</title>
<meta name="keywords" content="evelom品牌活动 - 中国东方航空">
<meta name="description" content="evelom品牌活动 - 中国东方航空">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no">
<script src="dest/js/flexible.min.js"></script>
<link href="dest/css/draw.css" rel="stylesheet">
<link rel="stylesheet" href="dest/css/sm.css">
</head>
<body>
<!-- 抽奖页面 -->
<div class="content">
<div class="drawBox" id="lottery">
<ul class="hang">
<li class="lottery-unit lottery-unit-0"><img src="images/1050tz.png"><div class="mask"></div></li>
<li class="lottery-unit lottery-unit-1"><img src="images/mb.png"><div class="mask"></div></li>
<li class="lottery-unit lottery-unit-2"><img src="images/jyr.png"><div class="mask"></div></li>
</ul>
<ul class="hang">
<li class="lottery-unit lottery-unit-7"><img src="images/gwd.png"><div class="mask"></div></li>
<li><a href="#" id="start"></a>
<li class="lottery-unit lottery-unit-3"><img src="images/mm.png"><div class="mask"></div></li>
</ul>
<ul class="hang">
<li class="lottery-unit lottery-unit-6"><img src="images/xz.png"><div class="mask"></div></li>
<li class="lottery-unit lottery-unit-5"><img src="images/xxcy.png"><div class="mask"></div></li>
<li class="lottery-unit lottery-unit-4"><img src="images/710tyz.png"><div class="mask"></div></li>
</ul>
</div>
<!-- 查看规则 -->
<div class="ruleBtn" id="ruleBtn"></div>
<!-- 规则弹窗 -->
<div class="activityRuleBox">
<p class="title">活动规则</p>
<div class="tipBox">
<p>1、自2018年10月25日至11月25日，凡注册/登录“东方万里行”账户，即可参与抽奖活动。</p>
<p>2、每个账户可抽奖一次，通过转发可多获得一次抽奖机会，最高可获得两次抽奖机会。奖品包含1050套装、710明星体验装、经典洁颜霜20ml+玛姿林棉布*1、晨间焕采洁颜乳50ml、亮采洁净面膜15ml、轻盈卸妆洁颜凝霜30ml、定制眼罩及购物袋。</p>
<p>*1050套装：套装内含 经典洁颜霜100ml*1、柔肤润泽乳霜50ml*1和玛姿林棉布*1</p>
<p>*710明星体验装：套装内含 经典洁颜霜50ml*1、玛姿林棉布*1、修护唇霜7ml*1、亮采洁净面膜15ml*1、保湿冻膜10ml*1和发光肌化妆包*1；</p>
<p> 3、中奖后我们将在活动结束后三十日内将礼品快递给会员，会员需确保登记的地址及联系方式准确，否则将影响奖品发放，由此产生的后果需由会员自行承担。</p>
<p>4、活动过程中，如果发现有用户使用不正当手段参与活动，一旦被认定为</p>
</div>
<div class="xBox" id="xBox"></div>
</div>
<!-- 未中奖 -->
<div class="noPrizeBox">
<div class="npPrizeTip">
<p>很抱歉</p>
<p>您未中奖</p>
<p>谢谢您的参与</p>
<div class="shutDownBox" id="shutDownBox"></div>
</div>
</div>
</div>
<!-- 中奖页面 -->
<div class="prizeContent">
<div class="prizeBox">
<img src="" id="prizeBg">
</div>
<div class="checkInBox">
<input type="text" placeholder="手机号" id="contactPhone">
<input type="text" placeholder="姓名（中文）" id="contacter">
<input type="text" placeholder="所在区域" id="city">
<input type="text" placeholder="详细地址" id="addrDetail">
<div class="commitBtn" id="commitBtn">点击提交</div>
</div>
</div>
<!-- 分享提示页 -->
<div class="coverBox"></div>
<!--loding-->
<div class="loding">
<div class="cover"></div>
<aside class="loading-wrapper">
<div>
<div class="loading-img"></div>
</div>
</aside>
</div>
</body>
<!-- <script src="//ceair-resource.oss-cn-shanghai.aliyuncs.com/scripts/core/jquery-1.8.3.min.js"></script> -->
<script type='text/javascript' src='dest/js/lib/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='dest/js/lib/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="dest/js/lib/sm-city-picker.min.js" charset="utf-8"></script>
<script src="dest/js/draw.min.js"></script>
</html>
import 'es5';
import {
ga
} from 'ga';
import {
isInApp,
saveP,
parse_url,
message,
APPLogin
} from './lib/utils-fn.js';
import {
wechatShare
} from 'wechatShare';
import BaseApp from 'baseApp';
var baseapp = new BaseApp();
ga();
const {
p = "",
//OrderCode=""
} = parse_url();
p && saveP(p);
//OrderCode&& saveP(OrderCode);
var click = false;
//请求用户卡类别url
var tierUrl = "";
//抽奖接口
var drawUrl = "";
//地址填写url
var addUrl = "";
//增加一次分享url
var shareAddUrl = "";
//白金卡
var bjkCode = "";
//金卡码
var jkCode = "";
//银卡码
var ykCode = "";
//普卡
var pkCode = "";
//奖品
var jiangpin = "";
if (window.location.href.indexOf("me.ceair.com") != -1) {
tierUrl = "http://10.67.200.70:9001/api/pc/portal/activity/user/tier";
drawUrl = "http://10.67.200.37:814/api/LotteryApi/Index";
addUrl = "http://10.67.200.37:814/api/ReceiveAddrApi/Add";
shareAddUrl = "http://10.67.200.37:814/api/ActivityFreeApi/ActivityLuckDrawLog";
// bjkCode = "30xLTDHrxSFGkAv4ozNsXg==";
// jkCode = "EsaK5N38zaln3Mgut5eDsQ==";
// ykCode = "P/zSxvJ0aM1wv/pM28ZAPQ==";
// pkCode = "qJ+arDjSDQJb6NwN0wafsw==";
}
else {
tierUrl = "/api/pc/portal/activity/user/tier";
drawUrl = "/api/LotteryApi/Index";
addUrl = "/api/ReceiveAddrApi/Add";
shareAddUrl = "/api/ActivityFreeApi/ActivityLuckDrawLog";
// bjkCode = "";
// jkCode = "";
// ykCode = "";
// pkCode = "";
}
if (window.location.href.indexOf("me.ceair.com") != -1 || window.location.href.indexOf("ebtest.ceair.com") != -1) {
bjkCode = "30xLTDHrxSFGkAv4ozNsXg==";
jkCode = "EsaK5N38zaln3Mgut5eDsQ==";
ykCode = "P/zSxvJ0aM1wv/pM28ZAPQ==";
pkCode = "fDIqOqeKkpQN6zTY++RaBg==";
}
else {
bjkCode = "";
jkCode = "";
ykCode = "";
pkCode = "";
}
const prizeNum = {
"2018evelom-1050tz": "0",
"2018evelom-jys": "1",
"2018evelom-cjjyr": "2",
"2018evelom-lcjjmm": "3",
"2018evelom-710tytz": "4",
"Thanks": "5",
"2018evelom-xzjyns": "6",
"2018evelom-dzyz": "7",
};
window.onload = function () {
area();
lottery.init("lottery");
$("#start").click(function () {
if (click) {//click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
return false;
} else {
clearCookie("allCode");
$.ajax({
url: tierUrl,
type: "GET",
dataType: "json",
data: { p: p },
async: false,
beforeSend: function () {
$(".loding").show();
},
success: function (res) {
$(".loding").hide();
if (res.httpcode == 200) {
if (res.data == "PLT") {
draw(bjkCode);
setCookie("allCode", bjkCode)
}
else if (res.data == "GOL") {
draw(jkCode);
setCookie("allCode", bjkCode)
}
else if (res.data == "SIL") {
draw(ykCode);
setCookie("allCode", bjkCode)
}
else if (res.data == "STD") {
draw(pkCode);
setCookie("allCode", bjkCode)
}
}
// if (res.HttpCode == 500) {
// //未登录
// APPLogin(location.href, 'evelom抽奖', ActivityCode);
// }
}
});
}
});
$("#commitBtn").click(function () {
addBtn();
});
//活动规则点击
$("#ruleBtn").click(function () {
$(".ruleBtn").show();
});
$("#xBox").click(function () {
$(".ruleBtn").hide();
});
//未中奖关闭
$("#shutDownBox").click(function () {
$("#noPrizeBox").hide();
});
};
var lottery = {
index: -1, //当前转动到哪个位置，起点位置
count: 0, //总共有多少个位置
timer: 0, //setTimeout的ID，用clearTimeout清除
speed: 20, //初始转动速度
times: 0, //转动次数
cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
prize: -1, //中奖位置
init: function (id) {
var $lottery,
$units;
if ($("#" + id).find(".lottery-unit").length > 0) {
$lottery = $("#" + id);
$units = $lottery.find(".lottery-unit");
this.obj = $lottery;
this.count = $units.length;
$lottery.find(".lottery-unit-" + this.index).addClass("active");
$lottery.find(".lottery-unit-" + this.index + " .mask").show();
};
},
roll: function () {
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find(".lottery-unit-" + index).removeClass("active");
$(lottery).find(".lottery-unit-" + index + " .mask").hide();
index += 1;
if (index > count - 1) {
index = 0;
};
$(lottery).find(".lottery-unit-" + index).addClass("active");
$(lottery).find(".lottery-unit-" + index + " .mask").show();
this.index = index;
return false;
},
stop: function (index) {
this.prize = index;
return false;
}
};
function roll(a) {
lottery.times += 1;
lottery.roll();//转动过程调用的是lottery的roll方法，这里是第一次调用初始化
if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
clearTimeout(lottery.timer);
lottery.prize = -1;
lottery.times = 0;
click = false;
} else {
if (lottery.times < lottery.cycle) {
lottery.speed -= 10;
} else if (lottery.times == lottery.cycle) {
//lottery.stop(a);
lottery.prize = a;
} else {
if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
lottery.speed += 110;
} else {
lottery.speed += 20;
}
}
if (lottery.speed < 40) {
lottery.speed = 40;
};
lottery.timer = setTimeout(() => { roll(a) }, lottery.speed);//循环调用
}
return false;
}
//选择省市区
function area() {
$("#city").cityPicker({
toolbarTemplate: '<header class="bar bar-nav">\
<button class="button button-l' +
'ink pull-right close-picker">确定</button>\
<h1 class="title">' +
'选择收货地址</h1>\
</header>',
onClose: function (data) { }
});
}
//抽奖
function draw(code) {
$.ajax({
url: drawUrl,
type: "POST",
dataType: "json",
data: {
PValue: p,
ActivityCode: code
},
async: false,
beforeSend: function () {
$(".loding").show();
},
success: function (data) {
$(".loding").hide();
if (data) {
if (data && data.Code == "200") {
var prize = -1;
jiangpin = data.Data.LotteryList[0].prizeCode;
lottery.speed = 100;
roll(prizeNum[data.Data.LotteryList[0].prizeCode]);
click = true;
window.setTimeout(() => { show(data.Data.LotteryList[0].prizeCode) }, 6000);
}
else if (data.BCode == 0) {
message(data.Msg);
}
else if (data.BCode == -1) {
message("未登录");
APPLogin(data.Data.LoginRedirectUrl, 'evelom抽奖礼包', code);
}
}
}
});
}
//显示中奖页面或者未中奖
function show(a) {
if (a == "Thanks") {
$(".noPrizeBox").show();
} else {
$("#prizeBg").prop("src", `images/${a}.png`);
$(".content").hide();
$(".prizeContent").show();
}
}
//分享
function shareTip() {
if (baseapp.isInApp()) {
baseapp.share({
shareTitle: 'evelom-东方航空',
imgUrl: 'https://ceair-resource.oss-cn-shanghai.aliyuncs.com/activity/21437/app/images/share.jpg',
// shareContent: tabCon && tabCon.MarketProducts &&tabCon.MarketProducts[0] && tabCon.MarketProducts[0].Name ||'旅游度假-东方航空',
shareContent: 'evelom',
shareUrl: window.location.href
})
} else {
weixinShare.init({
title: 'evelom',
desc: 'evelom-东方航空',
link: location.href, // 分享的链接不能与当前页面域名不同
imgUrl: 'https://ceair-resource.oss-cn-shanghai.aliyuncs.com/activity/21437/app/images/share.jpg', // 必须有协议头 http or https
type: "link"
});
}
}
//增加分享记录
function addShareItem() {
$.ajax({
url: shareAddUrl,
type: "POST",
dataType: "json",
data: {
OrderCode: "OrderCode",
PValue: p
},
async: false,
beforeSend: function () {
$(".loding").show();
},
success: function (data) {
$(".loding").hide();
if (data) {
if (data && (data.Code == "201")) {
message(data.Data.Message);
}
if (data && (data.Code == "200")) {
message("分享成功可以再抽一次啦！");
}
if (data.BCode == -1) {
layerApp.open({
content: '登陆后分享，才可增加一次机会哦',
skin: 'msg',
time: 3000
});
}
}
}
});
}
//地址填写
function addBtn() {
let disVal = document.getElementById('city').value;
let city = disVal.split(" ")[1];
let province = disVal.split(" ")[0];
let district = disVal.split(" ")[2];
if (district == '') {
city = disVal.split(" ")[0];
province = disVal.split(" ")[0];
district = disVal.split(" ")[1];
}
if ($("#contactPhone").val().length == 0) {
message("手机号不能为空！");
return false;
}
if ($("#contacter").val().length == 0) {
message("联系人不能为空！");
return false;
}
if (disVal.length == 0) {
message("所在区域不能为空！");
return false;
}
if ($("#addrDetail").val().length == 0) {
message("详细地址不能为空！");
return false;
}
let allCode = getCookie("allCode");
let data = {
prizeCode: jiangpin,
province: province, //省
city: city, //市
district: district, //区
addrDetail: $("#addrDetail").val(), //地址详情
contacter: $("#contacter").val(), //收货人
contactPhone: $("#contactPhone").val(), //手机号
bAdd: true,
PValue: p,
ActivityCode: allCode
}
$.ajax({
url: addUrl,
type: "POST",
dataType: "json",
data: data,
async: false,
beforeSend: function () {
$(".loding").show();
},
success: function (data) {
$(".loding").hide();
if (data) {
switch (data.BCode) {
case 0:
message("保存成功");
break;
case -1:
APPLogin(data.Data.LoginRedirectUrl, 'evelom抽奖礼包', allCode);
break;
case -6:
message("您似乎填错了什么");
break;
case -10:
message("服务排队中，请稍后再试");
setTimeout(() => {
location.href = location.href + "&ranNum=" + 10000 * Math.random();
}, 2000);
break;
}
}
}
});
}
//验证手机号码
function checkMobile(str) {
if ((/^1\d{10}$/).test(str)) {
return true;
} else {
return false;
}
}
//得到cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';'); //把cookie分割成组
for (var i = 0; i < ca.length; i++) {
var c = ca[i]; //取得字符串
while (c.charAt(0) == ' ') { //判断一下字符串有没有前导空格
c = c.substring(1, c.length); //有的话，从第二位开始取
}
if (c.indexOf(nameEQ) == 0) { //如果含有我们要的name
return unescape(c.substring(nameEQ.length, c.length)); //解码并截取我们要值
}
}
return false;
}
//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}
//设置cookie
function setCookie(name, textue, seconds) {
seconds = seconds || 0; //seconds有值就直接赋值，没有为0
var expires = "";
if (seconds != 0) { //设置cookie生存时间
var date = new Date();
date.setTime(date.getTime() + (seconds * 1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + escape(textue) + expires + ";path=/"; //转码并赋值
}
*{
margin:0;
padding:0;
font-family: "Microsoft YaHei";
border: none;
}
html,body{
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
body{
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
overflow-y: scroll;
}
img{
width: 100%;
max-width: 100%;
}
//抽奖页面
.content{
width: 750px;
//height: 1334px;
background: url("../images/bg.jpg") center no-repeat;
background-size: 100% 100%;
padding-top:257px;
padding-bottom: 492px;
position: relative;
.drawBox{
width: 585px;
height: 585px;
margin: 0 auto;
.hang{
width:585px;
height: 192px;
overflow: hidden;
margin-bottom: 4px;
li{
display: block;
width: 192px;
height: 192px;
float: left;
margin-right: 3px;
position: relative;
a{
position: absolute;
top:6px;
left:6px;
width: 180px;
height: 180px;
background: url("../images/start.png") center no-repeat;
background-size:100% 100%;
}
a:hover{
background: url("../images/start_02.png") center no-repeat;
background-size:100% 100%;
}
img{
position: absolute;
top:6px;
left:6px;
width: 180px;
height: 180px;
}
.active{
.mask{
display: block!important;
}
}
.mask{
width:100%;
height:100%;
position:absolute;
left:0px;
top:0px;
background:url(../images/mask.png) no-repeat;
background-size: 100% 100%;
display:none;
z-index: 10;
}
}
li:nth-child(2){
margin-right: 2px;
}
li:nth-child(3){
float: right;
}
}
.row:nth-child(3){
width: 585px;
height: 192px;
overflow: hidden;
margin-bottom: 0;
}
}
.ruleBtn{
position: absolute;
bottom:427px;
right: 113px;
width: 103px;
height: 38px;
}
//规则弹窗
.activityRuleBox{
display: none;
position: absolute;
bottom: 52px;
right: 21px;
width: 708px;
height: 605px;
z-index: 20;
background: rgba(255, 255, 255, 0.8);
border: 1px solid #e1e1e1;
border-radius: 10px;
text-align: justify;
position: absolute;
.title{
height: 35px;
margin-top:33px;
margin-left: 40px;
margin-bottom: 35px;
font-size: 26px;
color: #b77f35;
}
.tipBox{
width: 630px;
height: 405px;
margin: 0 auto;
overflow-y: scroll;
color:#727171;
font-size: 18px;
}
.xBox{
position: absolute;
right: 51px;
bottom: 32px;
width: 58px;
height: 58px;
background: url("../images/x.png") center no-repeat;
background-size: 100% 100%;
z-index: 30;
}
}
//未中奖
.noPrizeBox{
position: absolute;
top:378px;
left:20px;
z-index: 30;
width: 708px;
height: 330px;
z-index: 40;
background: rgba(255, 255, 255, 0.8);
border: 1px solid #e1e1e1;
border-radius: 10px;
display: none;
.npPrizeTip{
width: 100%;
margin-top:51px;
text-align: center;
font-size: 56px;
position: relative;
color: #b77f35;
.shutDownBox{
position: absolute;
right: 80px;
bottom: -33px;
width: 59px;
height: 59px;
background: url("../images/x.png") center no-repeat;
background-size: 100% 100%;
z-index: 30;
}
}
}
}
//中奖页面
.prizeContent{
display: none;
width: 750px;
//height: 1334px;
background: url("../images/zjBG.jpg") center no-repeat;
background-size: 100% 100%;
padding-top:239px;
padding-bottom: 94px;
.prizeBox{
width: 100%;
height: 488px;
}
.checkInBox{
width: 654px;
height: 513px;
margin: 0 auto;
z-index: 20;
input{
display: block;
border: none;
width: 603px;
height: 72px;
line-height: 72px;
margin-left: 21px;
padding-left:30px;
margin-bottom: 20px;
background: none;
}
input:nth-child(2){
margin-bottom: 30px;
}
input:nth-child(3){
margin-bottom: 25px;
}
.commitBtn{
width: 280px;
height: 59px;
line-height: 59px;
margin:0 auto;
margin-top:69px;
text-align: center;
background: #b77f35;
color: #ffffff;
border-radius: 10px;
font-size: 30px;
}
}
}
//分享再抽一次提示蒙层
.coverBox{
display: none;
position: fixed;
top:0;
left: 0;
width: 750px;
height: 1334px;
background: url("../images/share.png") center no-repeat;
background-size: 100% 100%;
}
//loding
.loding{
display: none;
.cover{
position:fixed;
z-index:99;
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('https://ceair-resource.oss-cn-shanghai.aliyuncs.com/common/pc/loading2.gif') no-repeat;
background-size: 100% auto;
}
}