duhongyu
/
AnYang_UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<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">
		<link href="./css/mui.min.css" rel="stylesheet" />
		<title>登陆</title>
		<style>
			.mui-input-row {
				border-bottom: 1px solid #c9c9c9;
			}

			.mui-card-content {
				padding: 0 20px;
			}

			.mui-input-row {
				height: 75px;
			}

			#phone,
			#code {
				height: 50%;
			}

			label,
			input {
				float: none !important;
			}

			input {
				padding: 0 15px !important;
			}

			label {
				display: block;
				font-weight: 600;
				padding: 13px 15px 8px !important;
			}

			.line {
				display: inline-block;
				border-left: 1px solid #1ba3c9;
				padding-left: 10px;
				height: 25px;
				position: absolute;
				right: 10px;
				color: #1ba3c9;
				font-size: 16px;
				font-weight: 600;
			}

			.btn {
				width: 90%;
				margin: 50px auto 40px;
				background-color: #1ba3c9;
				outline: none;
				border: none;
				padding: 10px 12px;
				display: block;
				border-radius: 10px;
				font-size: 16px;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">手机认证</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-input-row phone">
						<label>手机号</label>
						<input type="text" placeholder="请输入手机号" id="phone">
					</div>
					<div class="mui-input-row">
						<label>验证码</label>
						<input type="text" class="mui-input-clear" placeholder="请输入验证码" id="code">
						<span class="line" onclick="getCode()">获取验证码</span>
					</div>
					<button type="button" class="btn">登陆</button>
				</div>
			</div>
		</div>
		<script src="./js/mui.min.js"></script>
	    <script src="./js/zepto.js"></script>
	    <script src="./script/config.js"></script>
	    <script src="./js/huayi.http.js"></script>
		<script>
			var workorderid = helper.request.queryString("workorderid")
			$(document).ready(function () {
				$('.btn').click(function(){
					if (!$('#phone').val()) {
						mui.alert('请输入手机号')
					}else if (!$('#code').val()){
						mui.alert('请输入验证码')
					}else{
						$.ajax({
						    type: "get",
						    url: huayi.config.callcenter_url + 'APP/Verification',
						    data: { 
								code: $('#code').val(),
								phone:$('#phone').val() ,
							},
						    dataType: 'json',
						    success: function (data) {
						        if (data.state.toLowerCase() === 'success') {
									window.location.replace("orderDetails.html?workorderid="+workorderid);
						        }
						    }
						});
					}
				})
			})
			function getCode(){
				if (!$('#phone').val()) {
					mui.alert('请输入手机号')
				}else{
					var params = {
						mobile: $('#phone').val(),
					}
					if (Number(workorderid)) {
						params.id= workorderid
					}else{
						params.workorderid= workorderid
					}
					$.ajax({
					    type: "get",
					    url: huayi.config.callcenter_url + 'APP/SendCode',
					    async: true,
					    dataType: "json",
					    data:params,
					    success: function (data) {
							if(data.state.toLowerCase() === 'success'){
								
								let num = 60;
								$(".line").attr("onclick","")
								let fq=setInterval(function(){
									num -=1
									$('.line').text(num);
									if(num == 0){
										clearInterval(fq)
										$(".line").attr("onclick","getCode()")
										$('.line').text('获取验证码')
									}
								},1000)
								
							}else{
								mui.alert(data.message)
							}
							
						}
					})
				}
			}
		</script>
	</body>
</html>