核心提示：html：!DOCTYPE htmlhtmlheadmeta charset=UTF-8title择天记活动/titlemeta name=keywords content=择天记活动 - 中国东方航...
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>
<p class="content hide" id="contain">
<!-- 填写个人信息 -->
<p class="information" v-show="resSuccess">
<p class="infoBox">
<p>恭喜您获得</p>
<p :style="prizeBg"></p>
<p>请输入您的地址及联系方式</p>
<p>我们将在30个工作日内将礼包快递给您</p>
</p>
<p slot="checkBox" id="checkBox">
<form class="infoSubBox">
<p class="formBox">
<span>*</span>
<input type="number" placeholder="手机号" id="contactPhone" v-model="formData.contactPhone" />
</p>
<p class="formBox">
<span>*</span>
<input type="text" placeholder="姓名（中文）" id="contacter" v-model="formData.contacter" />
</p>
<p class="formBox">
<span>*</span>
<input type="text" readonly placeholder="所在区域" id="district" />
</p>
<p class="formBox">
<span>*</span>
<input type="text" placeholder="详细地址" id="addrDetail" v-model="formData.addrDetail" />
</p>
</form>
<p class="insubBtn" @click="saveAddr"></p>
</p>
<p class="cover" v-show="ifLoading">
<p class="loading" v-show="ifLoading"></p>
</p>
</p>
<!-- 个人信息保存成功 -->
<p class="personlSucc" v-show="saveSucc">
<p class="shutDown" @click="shutdown"></p>
<p class="perCenter"></p>
<p class="perTip">
您的个人信息
<br/> 保存成功
</p>
</p>
<!-- 领取失败 -->
<p class="fail" v-show="resfail"></p>
</p>
<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;
}
}
}
})
