html:
<!DOCTYPE html
>
<
html
>
<
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"
>
<
/
script
>
<
link
href=
"dest/css/index.css"
rel=
"stylesheet"
>
<
link
rel=
"stylesheet"
href=
"dest/css/sm.css"
>
<
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=
"//res.wx.qq.com/open/js/jweixin-1.2.0.js"
>
<
/
script
>
</
head
>
<
body
>
<
div
class=
"content hide"
id=
"contain"
>
<!-- 填写个人信息 -->
<
div
class=
"information"
v-show=
"resSuccess"
>
<
div
class=
"infoBox"
>
<
p
>恭喜您获得
</
p
>
<
p :
style=
"prizeBg"
></
p
>
<
p
>请输入您的地址及联系方式
</
p
>
<
p
>我们将在30个工作日内将礼包快递给您
</
p
>
</
div
>
<
div
slot=
"checkBox"
id=
"checkBox"
>
<
form
class=
"infoSubBox"
>
<
div
class=
"formBox"
>
<
span
>*
</
span
>
<
input
type=
"number"
placeholder=
"手机号"
id=
"contactPhone"
v-model=
"formData.contactPhone"
/>
</
div
>
<
div
class=
"formBox"
>
<
span
>*
</
span
>
<
input
type=
"text"
placeholder=
"姓名(中文)"
id=
"contacter"
v-model=
"formData.contacter"
/>
</
div
>
<
div
class=
"formBox"
>
<
span
>*
</
span
>
<
input
type=
"text"
readonly
placeholder=
"所在区域"
id=
"district"
/>
</
div
>
<
div
class=
"formBox"
>
<
span
>*
</
span
>
<
input
type=
"text"
placeholder=
"详细地址"
id=
"addrDetail"
v-model=
"formData.addrDetail"
/>
</
div
>
</
form
>
<
div
class=
"insubBtn" @
click=
"saveAddr"
></
div
>
</
div
>
<
div
class=
"cover"
v-show=
"ifLoading"
>
<
div
class=
"loading"
v-show=
"ifLoading"
></
div
>
</
div
>
</
div
>
<!-- 个人信息保存成功 -->
<
div
class=
"personlSucc"
v-show=
"saveSucc"
>
<
div
class=
"shutDown" @
click=
"shutdown"
></
div
>
<
div
class=
"perCenter"
></
div
>
<
div
class=
"perTip"
>
您的个人信息
<
br
/> 保存成功
</
div
>
</
div
>
<!-- 领取失败 -->
<
div
class=
"fail"
v-show=
"resfail"
></
div
>
</
div
>
<
script
src=
"dest/js/lib/vue.js"
>
<
/
script
>
<
script
type=
"text/javascript"
src=
"./js/lib/axios.min.js?_=1526563504633"
>
<
/
script
>
<
script
src=
"dest/js/prize.min.js"
>
<
/
script
>
</
body
>
</
html
>
js:
import
'es5';
import {
ga
}
from
'ga';
import
"./component/background"
import {
isInApp,
saveP,
parse_url,
message,
APPLogin
}
from
'./lib/utils-fn.js';
import {
api
}
from
'./lib/utils-config';
import {
wechatShare
}
from
'./lib/wechat'
ga();
const {
prizeCode,
p =
"",
hasPrize,
addr
} =
parse_url();
p &&
saveP(
p);
const
prize = {
"zetianji2-xiaofeiji"
:
"东航毛绒小飞机",
"zetianji2-danji"
:
"东航蛋机",
"zetianji2-bijiben"
:
"择天记纪念笔记本",
"zetianji2-chongdianxian"
:
"择天记充电线",
"Thanks"
:
"谢谢参与"
};
var
prizePage =
new
Vue({
el:
"#contain",
data: {
//收货人
contacter:
"",
//手机号
contactPhone:
"",
district:
"",
addrDetail:
"",
province:
"",
city:
"",
//loading
ifLoading:
false,
//奖品名字背景图
prizeBg:
"",
//presizecode无奖品
resfail:
false,
//presizecode有奖品
resSuccess:
false,
//地址保存成功
saveSucc:
false,
formData: {
contactPhone:
'',
addrDetail:
'',
contacter:
'',
addr:
''
}
},
mounted() {
//替换奖品名字
this.
choose(
prizeCode);
// 增加地区选择弹窗
this.
cityPopBox();
},
computed: {
},
methods: {
// 增加地区选择弹窗
cityPopBox() {
$(
"#district").
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) {}
});
},
//替换奖品名字
choose(
prizeCode) {
if (
prizeCode ==
"Thanks") {
this.
resfail =
true;
this.
saveSucc =
false;
this.
resSuccess =
false;
}
else {
this.
resSuccess =
true;
this.
saveSucc =
false;
this.
resfail =
false;
this.
prizeBg = {
background:
`url(./images/
${
prizeCode
}
.png) center center no-repeat`,
backgroundSize:
"auto 100%"
};
}
},
saveAddr
:
function () {
var
city =
document.
getElementById(
'district').
value.
split(
" ")[
1];
var
province =
document.
getElementById(
'district').
value.
split(
" ")[
0];
var
district =
document.
getElementById(
'district').
value.
split(
" ")[
2];
if (
district ==
'') {
city =
document.
getElementById(
'district').
value.
split(
" ")[
0];
province =
document.
getElementById(
'district').
value.
split(
" ")[
0];
district =
document.
getElementById(
'district').
value.
split(
" ")[
1];
}
this.
ifLoading =
true;
axios.
post(
api.
baseUrl +
api.
addAddr, {
prizeCode:
prizeCode,
province:
province,
//省
city:
city,
//市
district:
district,
//区
addrDetail:
this.
formData.
addrDetail,
//地址详情
contacter:
this.
formData.
contacter,
//收货人
contactPhone:
this.
formData.
contactPhone,
//手机号
bAdd:
true,
PValue:
p,
ActivityCode:
"HThNyydb/x1HEfo/Z71KIw=="
})
.
then(
response
=> {
this.
ifLoading =
false;
const {
data
} =
response;
switch (
data.
BCode) {
case
0:
//message("保存成功");
this.
saveSucc =
true;
break;
case -
1:
APPLogin(
data.
Data.
LoginRedirectUrl,
'择天记2活动',
'HThNyydb/x1HEfo/Z71KIw==');
break;
case -
6:
message(
"您似乎填错了什么");
break;
case -
10:
message(
"服务排队中,请稍后再试");
setTimeout(()
=> {
location.
href =
location.
href +
"&ranNum=" +
10000 *
Math.
random();
},
2000);
break;
}
})
},
//关闭
shutdown() {
this.
saveSucc =
false;
},
//验证手机号码
isPoneAvailable(
e) {
var
myreg =
/
^
[
1
][
3,4,5,7,8
][
0-9
]
{9}
$
/;
if (!
myreg.
test(
e.
val())) {
return
false;
}
else {
return
true;
}
}
}
})