liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>免费送滤芯</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telphone=no, email=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style>
			.register-group{margin: 0 auto;width: 300px;}
			.register-group:before,.register-group:after,.register-group .mui-input-row:before,.register-group .mui-input-row:after{display: none}
			.register-group .mui-input-row label{padding: 11px 5px;width: 20%;}
			.register-group .mui-input-row label~input{width: 80%;border-bottom:1px solid #ccc;font-size: 16px;}
			.register-group .mui-input-row label~input::-webkit-input-placeholder{font-size: 15px;color: #ccc;}
			.pull-code {border: 0;color: #666;padding:8px 0;position: absolute;right:0;}
			.pull-code.active{color: #6dd4e5;}
			.pull-code:active{background-color: #fff !important;color: #666 !important;}
			.my-btn-confirm{background-color: #fff;border:1px solid #59c0d9;border-radius: 0;width: 200px;margin: 0 auto;color: #666;padding: 7px 0;color: #59c0d9;}
			.my-btn-confirm:active{background-color: #59c0d9 !important;border:1px solid #59c0d9;color: #fff;}
			.my-btn-confirm.active{background-color: #59c0d9 !important;border:1px solid #59c0d9;color: #fff;}
		</style>
	</head>

	<body style="background: #fff;">
		<!--内容开始-->
		<div class="mui-content" style="background: #fff;">
			<div>
				<img width="100%" src="images/banner-11.jpg" />
			</div>
			<div class="mui-text-center" style="color:#59c0d9;font-size: 16px;padding: 15px 0;">
				验证手机信息
			</div>
			<form class="mui-input-group register-group">
				<div class="mui-input-row">
					<label>手机号</label>
					<input type="tel" placeholder="输入您购买时的手机号(11位)" id="ipt-phone" maxlength="11">
				</div>
				<div class="mui-input-row">
					<label>验证码</label>
					<input type="tel" placeholder="输入验证码" maxlength="4" id="code"><button type="button" class="pull-code" id="pull-code">获取验证码</button>
				</div>
			</form>
			<br />
			<div class="mui-content-padded">
				<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="提交中" class="mui-btn mui-btn-block my-btn-confirm" id="btn-confirm" disabled="disabled">领取滤芯</button>
			</div>
			<div class="mui-content-padded">
				<div style="border-top: 1px solid rgba(0,0,0,.1);margin: 20px 0;"></div>
				<ul>
					<li style="color:#59c0d9;padding-bottom: 10px;">活动说明：</li>
					<li class="mui-h6">1,此福利仅针对购买过WaterO产品的老顾客</li>
					<li class="mui-h6">2,如您现在使用的手机号码与购买下单的手机号码不同，请联系官方客服</li>
					<li class="mui-h6">3,每个手机号码仅限领取一次</li>
					<li class="mui-h6">4,领取成功之后，即可在会员中心查看您的兑换券及优惠权益。</li>

					<li style="color:#59c0d9;padding:10px 0;">尊享福利：</li>
					<li class="mui-h6">1.免费赠送WaterO T1/T2滤芯</li>
					<li class="mui-h6">2.尊享滤芯套装立减100元/套优惠</li>
					<li class="mui-h6">3.尊享WaterO品牌一对一售后服务</li>
				</ul>
			</div>
		</div>
		<!--内容结束-->

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.1.min.js"></script>
		<script src="js/main.js"></script>
		<script src="js/page/wechat-utils-1.0.js"></script>
		<script>
			var countdown = 60;
			var check = false,
				alert_msg = '';
			var reg_Ch_En_Num = /^[A-Za-z0-9_ \-\u4e00-\u9fa5]{1,15}$/; //简体中文英文数字，横线下划线空格(1-15位)
			var mobile = /^(13|14|15|16|17|18|19)[0-9]{9}$/; //手机号码
			var code = /^[0-9]{4}$/; //数字
			var validate_flag = false,
				show_msg = '',phone='';
			//ready事件
			mui.ready(function() {
				if(!window.localStorage) {
					mui.alert("浏览器不支持localStorage");
				} else {
					var codedata = JSON.parse(localStorage.getItem('pull-code-data'));
					if(codedata != null) {
						var dates = new Date();
						$("#ipt-phone").val(codedata.phone);
						if(codedata.codeTime > 0) {
							if(((dates.getTime() / 1000) - codedata.updateTime) < codedata.codeTime) {
								countdown = (codedata.codeTime - (parseInt(dates.getTime() / 1000) - codedata.updateTime)) + 1;
								settime("pull-code");
							} else {
								$(".pull-code").removeAttr("disabled");
							}
							$('#btn-confirm').removeAttr("disabled").addClass("active");
						} else {
							$(".pull-code").removeAttr("disabled").addClass("active");
						}
					}
				}
			});

			//实时监听文本框字数
			document.getElementById("ipt-phone").addEventListener("input", function() {
				var phone = this.value;
				if(phone.length == 11) {
					if(mobile.test(phone) && countdown == 60) {
						$(".pull-code").removeAttr("disabled").addClass("active");
					} else {
						$(".pull-code,#btn-confirm").attr("disabled", "disabled").removeClass("active");
					}
				} else {
					$(".pull-code,#btn-confirm").attr("disabled", "disabled").removeClass("active");
				}
			});
			//发送验证码
			$(document).on('tap', '.pull-code', function() {
						if($("#ipt-phone").val().trim() == "" && (!$(".pull-code").hasClass("active"))) {
							mui.alert("请填写手机号码", function() {
								$("#ipt-phone").select();
							});
							return;
						} else {
							if(!mobile.test($("#ipt-phone").val().trim())) {
								mui.alert("手机号码不正确，请重新填写", function() {
									$("#ipt-phone").select();
								});
								return;
							} else {
								if($(this).hasClass("active")) {
                                    phone=$("#ipt-phone").val().trim();
									$.ajax(base_path + '/tanksgiv/send_veri?dates=' + new Date().getTime(), {
										data: {
											"phone": $("#ipt-phone").val().trim()
										},
										dataType: 'json',
										xhrFields: {
											withCredentials: true
										},
										crossDomain: true,
										type: 'get',
										timeout: 15000,
										success: function(dt) {
											if(dt.isRedirect) {
												location.href = dt.redirectURL;
											} else {
												if(dt.status) {
													settime("pull-code");
													$("#code").select();
													if(!window.localStorage) {
														alert("浏览器不支持localStorage");
													} else {
														var dates = new Date();
														//自定义json数据
														var obj = {
															"phone": $("#ipt-phone").val().trim(),
															"codeTime": countdown,
															"updateTime": parseInt(dates.getTime() / 1000)
														};
														//json格式化插入    
														localStorage.setItem('pull-code-data', JSON.stringify(obj));
													}
													$('#btn-confirm').removeAttr("disabled").addClass("active");
												} else {
													mui.alert(dt.message);
												}
											}
										},
										error: function(xhr, type, errorThrown) {
											console.log(xhr);
											mui.alert("发送短信失败！网络错误");
										}
									});

								}
							}
						}
			});

			function settime(val) {
				pullid = dc(val);
				if(countdown == 0) {
					pullid.removeAttribute("disabled");
					pullid.className = 'pull-code active';
					pullid.innerText = "获取验证码";
					countdown = 60;
					return false;
				} else {
					countdown--;
					pullid.setAttribute("disabled", "disabled");
					pullid.className = 'pull-code';
					pullid.innerText = "重新发送(" + countdown + ")";
				}
				setTimeout(function() {
					settime(val)
				}, 1000);

				if(!window.localStorage) {
					alert("浏览器不支持localStorage");
				} else {
					//检查值是否存在
					if(localStorage.getItem("pull-code-data") != null) {
						var dates = new Date();
						var codedata = JSON.parse(localStorage.getItem('pull-code-data'));
						var edit = JSON.stringify({
							"phone": codedata.phone,
							"codeTime": countdown,
							"updateTime": parseInt(dates.getTime() / 1000)
						});
						//改，即重新给变量赋值
						localStorage.setItem("pull-code-data", edit);
					}
				}
			}
			//提交
			mui('body').on('tap', '#btn-confirm', function() {
				var val = $("#code").val().trim(),
					th = this;
				if(code.test(val)) {
					mui(th).button('loading');
					$.ajax(base_path + '/tanksgiv/receive_coupon?dates=' + new Date().getTime(), {
						data: {
							"phone": phone,
							"code": val
						},
						dataType: 'json',
						xhrFields: {
							withCredentials: true
						},
						crossDomain: true,
						type: 'post',
						timeout: 15000,
						success: function(dt) {
							if(dt.isRedirect) {
								location.href = dt.redirectURL;
							} else {
								if(dt.status) {
									mui.alert(dt.message,function(){
									    location.href = "/watero/view/coupon_.html";
									});
								} else {
									mui.alert(dt.message, function() {
										mui(th).button('reset');
									});
								}
							}
						},
						error: function(xhr, type, errorThrown) {
							console.log(xhr);
							mui.alert("领取失败！网络出小差了", function() {
								mui(th).button('reset');
							});
						}
					});
				} else {
					if(val != "") {
						mui.alert("验证码错误！", function() {
							$("#code").select();
						});
					} else {
						mui.alert("请填写验证码！", function() {
							$("#code").select();
						});
					}
				}
			});
		</script>
	</body>

</html>