jinyu
/
jinyu-mobile-md-master


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" href="../../css/common.css"/>
		<link rel="stylesheet" href="../../css/login.css"/>
		<link rel="stylesheet" href="../../css/html.css"/>
		<style>
			body,html {
			   background-color: transparent;
			   overflow: hidden;
			}
			.zc_btn {
				text-align: center;
				margin-top: 10px;
				color: #374782;
			}
			.zmq-form {
				top: 42%;
				position: absolute;
				box-sizing: border-box;
				width : 90%;
				left: 5%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--<div id="login"></div>-->
			<img src="../../image/drawable-xhdpi/bg03.png" v-bind:style="{ height: bodyH + 'px' }" class="loginImg" />
			<div >
				<form class="zmq-form" action="">
					<div class="userName zmq-input-parent">
						<img src="../../image/drawable-xhdpi/11.png" class="zmq-input-img"/>
						<input class="zmq-input" type="text" name="name" placeholder="请输入用户名" required v-model = "userCode"/>
					</div>
					<div class="passWord zmq-input-parent-margin zmq-flex zmq-flex-between">
						<img src="../../image/drawable-xhdpi/pass2.png" class="zmq-input-img zmq-input-ru" style="margin-top: 3%"/>
						<input class="zmq-input zmq-margin-auto" type="number" name="phoneCode" placeholder="请输入验证码" required v-model="userPassword" style="width: 45%"/>
						<div class="zmq-text-font-07 zmq-btn-getCode" v-on:click="getCode">获取验证码</div>
					</div>
					<!--<div class="passWord zmq-input-parent">
						<img src="../../image/drawable-xhdpi/pass.png" class="zmq-input-img"/>
						<input class="zmq-input" type="password" name="password" placeholder="请输入密码" required v-model="userPassword" />
					</div>-->
					<div class="choose_box">
						<!--<a href="javascript:void(0)" class="zmq-text-msg zmq-text-font-09">忘记密码?</a>-->
					</div>
					<div class="zmq-btn zmq-btn-img" v-on:click="login">
						登&nbsp;&nbsp;录
					</div>
					<div class="zmq-text-font-09 zmq-text-right">
						还没有账号？<em class="zmq-text-msg" v-on:click="goRegize">我要注册</em>
					</div>
				</form>
				<!--<div class="other_login">
				<div class="other"></div>
				<span>其他方式登录</span>
				<div class="other"></div>
				</div>
				<div class="other_choose">
				<a href=""> <img src="../../image/qq.png" alt=""/> </a>
				<a href=""> <img src="../../image/wx.png" alt=""/> </a>
				<a href=""> <img src="../../image/wb.png" alt=""/> </a>
				</div>-->
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/httpRequest.js"></script>
	<script type="text/javascript" src="../../script/vue_plugins.js"></script>
	<script type="text/javascript">
		apiready = function() {
			new Vue({
				el : '#app',
				data : {
					// 输入的用户名和密码
					userCode : '', // 用户名
					userPassword : '', // 用户密码
					loginUrl : 'loginUrl',
					bodyH : '', // 设置背景图高度
					mobile : '',
					getPhoneCodeUrl : 'getPhoneCode',
				},
				methods : {
					// 注册成功，跳转登录
					login : function() {
						var _this = this;
						//						setTimeout(function() {
						//							_this.sendEvent("openFrameGroup", "");
						//						}, 500);
						if (this.userCode == "") {
							this.showToast("请输入用户手机号");
							return;
						}
						if (this.userPassword == "") {
							this.showToast("用户密码不能为空");
							return;
						}
						var data = {
							mobile : this.userCode,
//							password : this.userPassword,
                            mobileCode : this.userPassword,
						}
						this.$post(this.loginUrl, data, function(ret) {
							if (ret.code == 0 || ret.code == '0') {
								_this.showToast("登录成功");
								//  将loginid 保存到本地
								$api.setStorage("loginid", ret.data.loginId);
								setTimeout(function() {
									_this.sendEvent("openFrameGroup", "");
								}, 500);
							}
						})
					},
					// 获取短信验证码
					getCode : function(){
					    if (this.userCode == "") {
							this.showToast("请输入用户手机号");
							return;
						}
						var data = {
						    mobile : this.userCode
						}
						this.$post(this.getPhoneCodeUrl, data, function(ret) {
							if(ret.code == 0 || ret.code == '0'){
							   api.toast({
	                               msg:'验证码发送成功'
                               });
							}
						})
					},
					// 跳转注册页面
					goRegize : function() {
						this.goWin("regize_win", "regize_win.html", "");
					}
				},
				mounted : function() {
					var index = 0, _this = this;
					this.bodyH = document.documentElement.clientHeight;
					api.addEventListener({
						name : 'keyback'
					}, function(ret, err) {
						api.closeWidget({
							id : 'A6016891253637', //这里是应用id
							retData : {
								name : 'closeWidget'
							},
							animation : {
								type : 'flip',
								subType : 'from_bottom',
								duration : 500
							}
						});
					});
				}
			})
		};
	</script>
</html>