居家小二拉新活动H5页面
说明： 该页面是 后端数据注入 + 前端模板技术（前端先写好的h5页面，给到后端，后端注入用户信息等动态数据后，再返回给前端） 浏览器显示：
所使用到的技术：bootstrap、jquery、javascript、html、css
<!DOCTYPE html>
<html style="font-size:12px;">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<#--<meta name="viewport" content="width=divice-width, initial-scal=1">-->
<#--给移动端专用的按等比 pc端缩小到移动端 （内容宽=设备宽 保证网页在移动设备上正常显示-->
<link rel="stylesheet" href="/static/global/plugins/bootstrap/css/bootstrap.min.css">
<style>
body {
background-image: url(/static/images/welcome/bar1.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="row">
<div style="position: absolute;left: 8%; top:3%;">
<div style="width:40px;height: 40px;border-radius:50%;background:url('/static/images/welcome/tou.png') no-repeat 0 0 ;background-size: cover;position: relative;">
</div>
<div style="width:3.8rem;height:1.8rem;position: absolute;left: 0%;bottom: -53%;color:white;"><span>张伟荣</span></div>
</div>
</div>
<div class="row" style="width:79%;height:21%;margin:auto;position: absolute;left: 0; right: 0;top:52%;bottom:0;">
<form>
<div class="col-xs-12">
<div class="form-group">
<input type="text" class="form-control" id="telPhone" placeholder="请输入您的手机号码" style="position:relative">
<span id="err_PhoneMsg" style="color:#edb73f;position:absolute;left:6%;top:66%;"> </span>
<span id="delPhone" style="color:#dea319;position:absolute;right:8%;top:19%;font-size:0.8rem;">X</span>
</div>
</div>
<div class="col-xs-7">
<div class="form-group">
<input type="text" class="form-control validateCode" id="validateCode" placeholder="验证码"
style="position:relative">
<span id="err_codeMsg" style="color:#edb73f;position:absolute;left:9%;top:66%;"> </span>
<span id="delCode" style="color:#dea319;position:absolute;right:13%;top:20%;font-size:0.8rem;">X</span>
</div>
</div>
<div class="col-xs-5">
<div class="form-group" style="font-size:1rem">
<input type="button" id="sendYzm" value="获取验证码" onclick="getCodeAndTime(this)" class="btn btn-default"
style="width:100%;background-color:#FFA200;color:white;border:none">
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<button type="button" class="btn btn-default btn-lg btn-block"
style="background-color: #FCF536;color:#B50F15;font-size:1.2rem;position:relative"
id="btnSubmit">立即领取
</button>
</div>
</div>
</form>
</div>
<div class="grayBg" style="display:none;width:100%;height:100vh;background-color: #5e5e5e;opacity:0.7;">
</div>
<div id="mod"
style="display:none;width:322px;height: 357px;background:url('/static/images/welcome/bg21.png') no-repeat 0 0 ;background-size: cover;margin:45% auto;position:fixed;top:0;right:0;bottom:0;left:0; ">
<div class="row" style="color:#FADA43">
<div class="col-xs-12" style="text-align: center;margin-top: 42%"><p>手机号：<span id="overPhone"></span>注册居家小二领取
</p></div>
<div class="col-xs-12" style="text-align: center"><span>领取成功！</span></div>
<div class="col-xs-8 col-xs-offset-2" style="margin-top: 27%">
<button type="button" class="btn btn-default btn-block btnCreate"
style="background-color: #FCF536;color:#B50F15;font-size:1.2rem;font-weight:700">立即注册
</button>
</div>
</div>
</div>
<div class="zheZao" style="display:none;width:100%;height:100vh;background-color: #5e5e5e;opacity:0.7;">
</div>
<div id="modal"
style="display:none;width:280px;height: 315px;background-color:white;border-radius:30px;margin:45% auto;position:fixed;top:0;right:0;bottom:0;left:0; ">
<div class="row" style="color:#b5b6bc">
<div class="col-xs-12" style="text-align: center;margin-top: 24%;margin-bottom:16%">
<span style="font-weight:800;font-size:18px;">您已经是居家小二用户</span>
</div>
<div class="col-xs-12" style="text-align: center"><span style="font-size:16px">可发起邀请其他用户获得最高168元</span></div>
<div class="col-xs-4 col-xs-offset-2" style="margin-top: 27%">
<button type="button" id="btnClose" class="btn btn-default btn-block"
style="background-color: #eee;color:#333;font-size:1.2rem;">取消
</button>
</div>
<div class="col-xs-4" style="margin-top: 27%">
<button type="button" class="btn btn-warning btnCreate" style="background-color: #dab10d"
style="background-color: #eee;color:#333;font-size:1.2rem;">立即参与
</button>
</div>
</div>
</div>
</body>
<#--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<script src="/static/global/plugins/jquery.min.js"></script>
<script src="/static/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<#--<script src="/static/js/bootstrap.min.js"></script>-->
<script type="text/javascript">
var id = "${userId}"
// var id = "1474d9aa-c17a-4bd2-b1de-6823e873d4a5"
var rule = /^1[3|4|5|7|8][0-9]\d{8}$/;
var delPhone = $("#delPhone")
var delCode = $("#delCode")
// 验证手机号格式
function validatePhone(phone) {
return /^1[3|4|5|7|8][0-9]\d{8}$/.test(phone)
}
function isPhoneValidate() {
var phone = $("#telPhone").val();
return validatePhone(phone)
}
$("#telPhone").focus(function () {
$("#err_PhoneMsg").text("")
});
$("#telPhone").blur(function () {
if (isPhoneValidate()) {
$("#err_PhoneMsg").text("")
} else {
$("#err_PhoneMsg").text("请输入正确的手机号")
}
})
$("#delPhone").click(function () {
$("#telPhone").val("")
$("#err_PhoneMsg").text("")
})
// 空 验证码
function isEmptyCode() {
return !$("#validateCode").val()
}
$("#validateCode").focus(function () {
$("#err_codeMsg").text("")
});
$("#validateCode").blur(function () {
if (isEmptyCode()) {
$("#err_codeMsg").text("验证码不能为空")
} else {
$("#err_codeMsg").text("")
}
})
// 点击取消 模态框
$("#delCode").click(function () {
$("#validateCode").val("")
$("#err_codeMsg").text("")
})
// 封装倒计时功能
function timeGo(id) {
return (function (id) {
var time = 60
var ele = $(id)
var timeInterval;
var inner = {
start: function () {
ele.attr('disabled', true)
timeInterval = setInterval(function () {
ele.val(time + 's')
time--
if (time <= 0) {
inner.stop()
}
}, 1000)
},
stop: function () {
time = 60
if (timeInterval) {
clearInterval(timeInterval)
timeInterval = ''
ele.val('获取验证码')
ele.removeAttr('disabled')
}
}
}
return inner
})(id)
}
var timeInterval = timeGo('#sendYzm')
// timeInterval.start()
// setTimeout(function () {
// timeInterval.stop()
// }, 5000)
// 获取验证码且倒计时
function getCodeAndTime(e) {
if (isPhoneValidate()) {// 若手机号格式正确，则先请求发送验证码接口（判断是否已经是居家小二用户）
getCode() // 发送验证码接口里面包含：1、先验证该号领取过没有 2、没有领取过 才会开始发送（若领取过了，则弹框提示:已领取）
} else {
$("#err_PhoneMsg").text("*请输入正确手机号")
return
}
}
// 点击取消，隐藏遮罩层和modal
$('#btnClose').click(function () {
$(".zheZao").css("display", "none");
$("#modal").css("display", "none");
})
// 点击获取验证码：发送验证码接口里面包含：1、先验证该号领取过没有--> 2、没有领取过 才会给该手机发送短信（若领取过了，则不会发短信，且弹框提示:已领取）
function getCode() {
$.ajax({
type: "get",
url: "/api/ms-user-info/activity/activitiSendSms",
data: {
phone: $("#telPhone").val(),
actionId: "register",
invistorId: id
},
success: function (data) {
if (!data) {
return
}
if (!data.data) {
$("#err_PhoneMsg").text("该号码已领取过了")
// ，若（请求接口返回 success）已经是居家小二，则弹出弹框
$(".zheZao").css("display", "block");
$("#modal").css("display", "block");
timeInterval.stop()
return
} else { // 若不是，则开始倒计时,发送验证码
timeInterval.start()
console.log("该号码从未领取过，可以领，----发验证码 倒计时 不弹提示")
}
}
})
}
// 1. checkCode检查验证码正确否：2 正确才能继续请求第二个post接口
// ====> 正确再弹modal
$("#btnSubmit").click(function (e) {
var yanZM = $("#validateCode").val();
if (!isPhoneValidate()) {
$("#err_PhoneMsg").text("*请输入正确的手机号")
return
} else if (isEmptyCode()) {
$("#err_codeMsg").text("*验证码不能为空!");
} else { // 调用 检查验证码：
$(this).attr("disabled", "true")// 设置为灰
$.ajax({
type: "get",
url: "/api/ms-user-info/activity/verifiyActivitiSmsCode",
data: {
phone: $("#telPhone").val(),
code: yanZM,
actionId: "register"
},
success: function (data) {
console.log("请求检验验证码 返回的data: " + data)
if (data.success) {
// 验证码成功之后 弹modal(不需取出data.data.message二次验证码来调“注册”)接口?
console.log("code正确")
// e.preventDefault();阻止表单提交
console.log("12222", $("#mod"))
$.ajax({
type: "POST",
contentType: "application/json",
url: "/api/ms-user-info/activity/submitRegister",
data: JSON.stringify({
registerPhone: $("#telPhone").val(),
invistorId: id
}),
success: function(data) {
console.log("注册提交成功后的data："+data)
if (data.success) {
var oldPhone = $('#telPhone').val()
var newPhone = oldPhone.replace(oldPhone.substr(3, 4), "****")
console.log("3333----" + newPhone)
$("#overPhone").text(newPhone)
$(".grayBg").css("display", "block");
$("#mod").css("display", "block");
}
},
error: function (err) {
console.log(err)
}
})
} else {// 提示code错误，请重新输入
console.log("code错的：")
$("#err_codeMsg").text("验证码错误!");
}
},
error: function (data) {
console.log("check code失败后返回data：" + data)
}
})
setTimeout("$('#btnSubmit').removeAttr('disabled')", 3000)//解除置灰
}
})
$(document).ready(function () {
var ua = navigator.userAgent;
var config = {
/*scheme:必须*/
scheme_IOS: 'jujiaxiaoer://v1-beta.api.jjtvip.com/HomeViewController?id=1124266252',
scheme_Android: 'jjtvip://jujiaxiaoer.app/open',
download_IOS_url: 'https://itunes.apple.com/cn/app/id1124266252?mt=8',
download_Android_url: 'http://sj.qq.com/myapp/detail.htm?apkName=com.jjtvip.jujiaxiaoer',
timeout: 1000
};
function isIOS() {
return !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
}
function isAndroid() {
return ua.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
}
function isSafari() {
return ua.indexOf("Safari") > -1 && ua.indexOf("Version") > -1
}
function openClient() {
var startTime = Date.now();
var ifr = document.createElement('iframe');
ifr.src = isIOS() ? config.scheme_IOS : config.scheme_Android;
ifr.style.display = 'none';
document.body.appendChild(ifr);
var t = setTimeout(function () {
var endTime = Date.now();
if (!startTime || endTime - startTime < config.timeout + 200) {
window.location.href = isIOS() ? config.download_IOS_url : config.download_Android_url;
}
}, config.timeout);
window.onblur = function () {
clearTimeout(t);
}
}
(function IOSFooter() {
if (isIOS() && isSafari()) {
var str = '<div class="btn-group btn-group-justified" role="group">\n' +
' <div class="btn-group" role="group">\n' +
' <a href="' + config.scheme_IOS + '">\n' +
' <button type="button" class="btn btn-default">打开</button>\n' +
' </a>\n' +
' </div>\n' +
' <div class="btn-group" role="group">\n' +
' <a href="' + config.download_IOS_url + '">\n' +
' <button type="button" class="btn btn-primary">下载</button>\n' +
' </a>\n' +
' </div>\n' +
' </div>';
$("footer").html(str)
}
})()
$(".btnCreate").click(function () {
openClient();
})
})
</script>
</html>