Browse Source

新版本修改

qihanjiao 7 years ago
parent
commit
180f3339ce
1 changed files with 135 additions and 13 deletions
  1. 135 13
      tooth/register-vip.html

+ 135 - 13
tooth/register-vip.html

@@ -39,9 +39,21 @@
 			<form class="mui-input-group">
 				<div class="mui-input-row line-bottom">
 					<label>您的姓名</label>
-					<input type="text" class="mui-input-clear" id="ipt-name" placeholder="填写您的姓名">
+					<input type="text" id="ipt-name" placeholder="填写您的姓名">
 				</div>
-				<div class="mui-table my-table" style="padding:15px 10px;">
+				<div class="mui-input-row line-bottom">
+					<label>出生日期</label>
+					<input type="text" id="newDate" readonly="readonly" placeholder="选择您的出生日期">
+				</div>
+				<div class="mui-input-row line-bottom">
+					<label>手机号码</label>
+					<input type="text" id="ipt-phone" placeholder="填写您的手机号码">
+				</div>
+				<div class="mui-input-row line-bottom">
+						<label>验&nbsp;&nbsp;证&nbsp;&nbsp;码</label>
+						<input style="width: 50% !important;float: left;" type="tel" placeholder="请输入验证码" maxlength="4" id="code"><button type="button" class="pull-code" disabled="disabled">获取验证码</button>
+				</div>
+				<div class="mui-table my-table" style="padding:15px 10px 0px 10px;">
 					<div class="mui-table-cell mui-col-xs-2">
 						<label>您的性别</label>
 					</div>
@@ -58,7 +70,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="mui-table my-table">
+				<!--<div class="mui-table my-table">
 					<div class="mui-table-cell mui-col-xs-2">
 						<label style="display: block;width: 60px;">您的年龄</label>
 					</div>
@@ -103,21 +115,44 @@
 							<input name="radio1" class="radio1" type="radio" value="6">
 						</div>
 					</div>
-				</div>
-				<div class="mui-table my-table" style="padding-bottom: 15px;">
+				</div>-->
+				<div class="mui-table my-table">
 					<div class="mui-table-cell mui-col-xs-2">
 						<label style="display: block;width: 60px;">购买渠道</label>
 					</div>
 					<div class="mui-table-cell mui-col-xs-3">
 						<div class="mui-input-row mui-radio mui-left">
+							<label class="my-label">天猫</label>
+							<input name="radio2" class="radio2" type="radio" checked="" value="2">
+						</div>
+					</div>
+					<div class="mui-table-cell mui-col-xs-3">
+						<div class="mui-input-row mui-radio mui-left">
+							<label class="my-label">微信</label>
+							<input name="radio2" class="radio2" type="radio" value="4">
+						</div>
+					</div>
+					<div class="mui-table-cell mui-col-xs-3">
+						<div class="mui-input-row mui-radio mui-left">
 							<label class="my-label">JD</label>
-							<input name="radio2" class="radio2" type="radio" checked="" value="1">
+							<input name="radio2" class="radio2" type="radio" value="1">
 						</div>
 					</div>
+				</div>
+				<div class="mui-table my-table">
+					<div class="mui-table-cell mui-col-xs-2">
+						<label style="display: block;width: 60px;">&nbsp;</label>
+					</div>
 					<div class="mui-table-cell mui-col-xs-3">
 						<div class="mui-input-row mui-radio mui-left">
-							<label class="my-label">天猫</label>
-							<input name="radio2" class="radio2" type="radio" value="2">
+							<label class="my-label">一条</label>
+							<input name="radio2" class="radio2" type="radio" value="5">
+						</div>
+					</div>
+					<div class="mui-table-cell mui-col-xs-3">
+						<div class="mui-input-row mui-radio mui-left">
+							<label class="my-label">小红书</label>
+							<input name="radio2" class="radio2" type="radio" value="6">
 						</div>
 					</div>
 					<div class="mui-table-cell mui-col-xs-3">
@@ -129,7 +164,7 @@
 				</div>
 				<div class="mui-input-row line-top">
 					<label>购买日期</label>
-					<input type="text" id="buyDate" class="mui-input-clear" readonly="readonly" placeholder="填写您的购买日期">
+					<input type="text" id="buyDate" readonly="readonly" placeholder="选择您的购买日期">
 				</div>
 			</form>
 			<br />
@@ -154,7 +189,68 @@
 					location.reload();
 				}
 			});
+			//实时监听文本框字数
+			document.getElementById("ipt-phone").addEventListener("input", function() {
+				var phone = this.value;
+				var mobile = /^(13|14|15|17|18)[0-9]{9}$/; //手机号码
+				if(phone.length == 11) {
+					if(mobile.test(phone) && countdown==60) {
+						$(".pull-code").removeAttr("disabled").addClass("active");
+					} else {
+						$(".pull-code").attr("disabled", "disabled").removeClass("active");
+					}
+				} else {
+					$(".pull-code").attr("disabled", "disabled").removeClass("active");
+				}
+			});
+			//发送验证码
+			var validate_flag = false,show_msg = '';
+			$(document).on('tap', '.pull-code', function() {
+				var th=$(this);
+				var mobile = /^(13|14|15|17|18)[0-9]{9}$/; //手机号码
+				var phone = $("#ipt-phone").val();
+				if(mobile.test(phone)) {
+					settime(th);
+					if(!window.sessionStorage) {
+						mui.alert("您的浏览器不支持sessionStorage");
+				} else {
+					//自定义json数据
+					var obj = {};
+					obj["phone"] = phone;
+					obj["codetime"] = new Date().getTime();
+					//json格式化插入    
+					sessionStorage.setItem('code_data', JSON.stringify(obj));
+				}
+					//ajax
+					//$("#btn-submit").removeAttr("disabled").addClass("active");
+				} else {
+					if(phone != '') {
+						show_msg = '手机号码格式不正确';
+					} else {
+						show_msg = '请填写手机号码';
+					}
+					mui.alert(show_msg);
+				}
+				
+			});
 			
+			var countdown = 60;
+			function settime(obj) {
+				if(countdown <= 0) {
+					obj.addClass("active").removeAttr("disabled");
+					obj.text("获取验证码");
+					countdown = 60;
+					return;
+				} else {
+					obj.attr("disabled", true).removeClass("active");
+					obj.text("重新发送" + countdown + "");
+					countdown--;
+				}
+				setTimeout(function() {
+					settime(obj)
+				}, 1000)
+			}
+			//选择购买日期
 			mui('body').on('tap', '#buyDate', function(event) {
 				var date = new Date();
 				var y = date.getFullYear();
@@ -173,20 +269,46 @@
 					
 				});
 			});
+			//选择出生日期
+			mui('body').on('tap', '#newDate', function(event) {
+				var date = new Date();
+				var y = date.getFullYear();
+				var m = date.getMonth();//获取当前月份的日期
+				var d = date.getDate();
+				var picker = new mui.DtPicker({
+					type: "date", //设置日历初始视图模式 
+					beginDate: new Date(1930, 00, 01), //设置开始日期 
+					endDate: new Date(2010,00, 01) //设置结束日期 
+				});
+				picker.show(function(rs) {	
+					$("#newDate").val(rs.text);
+					picker.dispose();
+					picker = null;	
+				});
+			});
 
-			
-			
 			var qrCode = null;
 			var isFocusOn = null;
 			var userIdentity = null;
 			
 			mui.ready(function() {
 				console.log("页面加载完毕");
+				$(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
 				//获取机器条码 barcode
 				qrCode = getParam("qrCode");
-				
+				var code_data = JSON.parse(sessionStorage.getItem('code_data'));
+				if(code_data != null) {
+					$("#ipt-phone").val(code_data.phone);
+					if((new Date().getTime()-code_data.codetime)>59000){
+						$(".pull-code").addClass("active").removeAttr("disabled");
+					}else{
+						countdown=parseInt(60-((new Date().getTime()-code_data.codetime)/1000));
+						console.log(countdown)
+						settime($(".pull-code"));
+					}
+				}
 				if(qrCode != null){
-					$(".loading").hide().css("opacity", "0"); //隐藏(正在加载...)
+					
 					$("#barCodeId").html("("+qrCode+")");
 					$.ajax(base_path + '/wechat/getActivationAndMember?dates=' + new Date().getTime(), {
 							data: {