fast-login.html 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>验证码快速登录</title>
  6. <meta name="format-detection" content="telephone=no"/>
  7. <meta name="viewport"
  8. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  9. <meta name="apple-mobile-web-app-capable" content="yes"/>
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  11. <link rel="stylesheet" href="../../../css/cross.css" type="text/css"/>
  12. <link rel="stylesheet" href="../../../css/cross.ui.css" type="text/css"/>
  13. <link rel="stylesheet" type="text/css" href="../../../css/ss-style.css">
  14. <link rel="stylesheet" type="text/css" href="../../../iconfont/iconfont.css" />
  15. <style>
  16. #div-yzm{width:80px;height:29px;border:1px solid #4DCD70;color:#4DCD70;font-size:14px;line-height:29px;text-align:center;border-radius:10px;margin-top:7px;}
  17. .div-zczh{width:auto;height:29px;border:0;color:#4DCD70;font-size:14px;line-height:29px;text-align:center;border-radius:10px;color:#17b3ec;float: left;margin-left: 20px;}
  18. .div-zhmmdl{width:auto;height:29px;border:0;color:#4DCD70;font-size:14px;line-height:29px;text-align:center;border-radius:10px;color:#17b3ec;float: right; margin-right: 20px;}
  19. .c-btn-dcdcdc{background: #DCDCDC;}
  20. .c-btn.active{background: #4DCD70;}
  21. .bgc-fa8888{background-color: #FA8888;}
  22. </style>
  23. </head>
  24. <body>
  25. <!--<div class="h45">
  26. <div class="demo-comtop">
  27. <a class="mui-action-back"></a>
  28. <h1>登录</h1>
  29. </div>
  30. </div>-->
  31. <div class="main">
  32. <div class="bgc-fa8888 ptb10 plr10">
  33. <span class="c-f14 c-fff">已签约居民可直接使用身份证号及默认密码登录</span>
  34. </div>
  35. <ul class="n-list edit-info registered c-border-tb mt15 c-f15 form-register">
  36. <li>
  37. <div class="n-list-key">
  38. <span class="f-fs16 c-323232">手机号码</span>
  39. </div>
  40. <div class="n-list-info">
  41. <input id="txtMobile" type="tel" class="width-100 c-f16 c-5b5b5b" maxlength="11" placeholder="请输入手机号码" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"/>
  42. </div>
  43. <div id="div-yzm" class="n-list-key">
  44. <span>获取验证码</span>
  45. </div>
  46. </li>
  47. <li>
  48. <div class="n-list-key">
  49. <span class="f-fs16 c-323232">验&ensp;证&ensp;码</span>
  50. </div>
  51. <div class="n-list-info">
  52. <input id="txtCode" type="text" class="width-100 c-f16 c-5b5b5b" placeholder="请输入验证码"/>
  53. </div>
  54. </li>
  55. </ul>
  56. <div class="mb15 mlr15 mt20">
  57. <a href="javascript:;" class="c-btn c-btn-dcdcdc c-btn-full c-btn-radius c-f16">登录</a>
  58. </div>
  59. <div class="div-zczh" onclick="regist()">注册账号</div>
  60. <div class="div-zhmmdl" onclick="zhmmLogin()">账号密码登录</div>
  61. </div>
  62. </body>
  63. <script type="text/javascript" src="../../../js/jquery/2.1.3/jquery.js" ></script>
  64. <script type="text/javascript" src="../../../js/common_http.js" ></script>
  65. <script type="text/javascript" src="../../../js/weixin_common.js" ></script>
  66. <link rel="stylesheet" type="text/css" href="../../../widget/artDialog/6.0.5/css/ui-dialog.min.css">
  67. <script src="../../../widget/artDialog/6.0.5/js/dialog-plus.js"></script>
  68. <script type="text/javascript" src="../../../js/commit_validate.js" ></script>
  69. <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  70. <script type="text/javascript">
  71. var dd = dialog({contentType:'load', skin:'bk-popup', content:'登录中...'});
  72. var Request = new Object();
  73. Request = GetRequest();
  74. var openid = Request["openid"];
  75. var type = Number(Request["type"]);
  76. var mobile1 = Request["mobile"];
  77. var clock = "";
  78. var nums = 120;
  79. var loginParams = Request["loginParams"];
  80. isValueChange();//判断当前是否有输入值,有输入则登录按钮变亮
  81. bindEvents();
  82. if(loginParams) {
  83. loginParams = JSON.parse(decodeURIComponent( Request["loginParams"]));
  84. }
  85. $(function (){
  86. var userAgent = window.localStorage.getItem(agentName);
  87. if(userAgent){
  88. var paurl = "";
  89. if(type == 0){
  90. paurl = "wx/html/home/html/login.html?type=0&openid=" + openid;
  91. }
  92. else{
  93. if(mobile1){
  94. paurl = "wx/html/home/html/login.html?type=" + type + "&openid=" + openid + "&mobile=" + mobile1;
  95. }
  96. else{
  97. paurl = "wx/html/home/html/login.html?type=" + type + "&openid=" + openid;
  98. }
  99. }
  100. //从后台那边获取签名等信息
  101. var params = {};
  102. params.pageUrl = window.location.href;
  103. $.ajax(server + "weixin/getSign", {
  104. data: params,
  105. dataType: "json",
  106. type: "post",
  107. success: function(res){
  108. if (res.status == 200) {
  109. var t = res.data.timestamp;
  110. var noncestr = res.data.noncestr;
  111. var signature = res.data.signature;
  112. wx.config({
  113. //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  114. appId: appId, // 必填,公众号的唯一标识
  115. timestamp: t, // 必填,生成签名的时间戳
  116. nonceStr: noncestr, // 必填,生成签名的随机串
  117. signature: signature,// 必填,签名,见附录1
  118. jsApiList: [
  119. 'closeWindow'
  120. ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  121. });
  122. }
  123. }
  124. });
  125. wx.ready(function(){
  126. wx.closeWindow();
  127. });
  128. }
  129. else{
  130. if(!openid){
  131. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'openid获取失败'}).show();
  132. }
  133. if(mobile1){
  134. $("#txtMobile").val(mobile1);
  135. }
  136. }
  137. })
  138. function bindEvents(){
  139. $(".c-btn").on("click",function(){
  140. if($(this).hasClass("active")){
  141. commit();
  142. }
  143. })
  144. }
  145. function isValueChange(){
  146. var self = this;
  147. var int= setInterval(function() {
  148. if($("#txtMobile").val()&&$("#txtCode").val()){
  149. clearInterval(int);
  150. int = null;
  151. $(".c-btn").addClass("active");
  152. }
  153. },300);
  154. }
  155. function sendCode(){
  156. var mobile = document.getElementById("txtMobile").value;
  157. if(!mobile){
  158. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请输入手机号'}).show();
  159. return;
  160. }
  161. if(!isphone(mobile)){
  162. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'手机号格式不正确'}).show();
  163. return;
  164. }
  165. $("#messageCode1").hide();
  166. document.getElementById("message").innerHTML = nums+'秒后可重新获取';
  167. $("#messageCode2").show();
  168. clock = setInterval(doLoop, 1000); //一秒执行一次
  169. var data = {};
  170. data.mobile = mobile;
  171. data.type = 4;
  172. sendPost("common/captcha", data, "json", "post", sendFailed, sendSuccesss);
  173. }
  174. //失败
  175. function sendFailed(res) {
  176. clearInterval(clock); //清除js定时器
  177. $("#messageCode1").show();
  178. $("#messageCode2").hide();
  179.    nums = 120; //重置时间
  180. if (res && res.msg) {
  181. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
  182. } else {
  183. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'获取失败'}).show();
  184. }
  185. }
  186. function sendSuccesss(res){
  187. if (res.status == 200) {
  188. }
  189. else{
  190. sendFailed(res);
  191. }
  192. }
  193. function doLoop(){
  194. nums--;
  195. if(nums > 0){
  196. document.getElementById("message").innerHTML = nums+'秒后可重新获取';
  197. }else{
  198.    clearInterval(clock); //清除js定时器
  199. $("#messageCode1").show();
  200. $("#messageCode2").hide();
  201.    nums = 120; //重置时间
  202. }
  203. }
  204. function commit(){
  205. var mobile = document.getElementById("txtMobile").value;
  206. var captcha = document.getElementById("txtCode").value;
  207. if (!mobile || !captcha) {
  208. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'手机号和验证码不能为空'}).show();
  209. return;
  210. }
  211. dd.showModal();
  212. //拼请求内容
  213. var data = {};
  214. data.mobile = mobile;
  215. data.captcha = captcha;
  216. data.openid = openid;
  217. sendPost("weixin/login", data, "json", "post", operateFailed, operateSuccesss);
  218. }
  219. //失败
  220. function operateFailed(res) {
  221. dd.close();
  222. if (res && res.msg) {
  223. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
  224. } else {
  225. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'登录失败'}).show();
  226. }
  227. }
  228. //成功调用登录接口
  229. function operateSuccesss(res) {
  230. if (res.status == 200) {
  231. var id = res.data.id;
  232. var uid = res.data.uid;
  233. var name = res.data.name;
  234. var photo = res.data.photo;
  235. var token = res.data.token;
  236. //保存用户信息
  237. wxSaveUserAgent(id, uid, openid, token);
  238. wxSaveUserAgent1(uid, name, photo);
  239. //hard code缓存微信code。
  240. var agentCode = localStorage.getItem("weixinCode");
  241. if(!agentCode){
  242. window.localStorage.setItem("weixinCode", "123456");
  243. }
  244. window.location.href = pageUrl[type];
  245. dd.close();
  246. } else {
  247. //非200则为失败
  248. operateFailed(res);
  249. }
  250. }
  251. //注册
  252. function regist(){
  253. window.location.href = "regist-info.html?type=" + type + "&openid=" + openid;
  254. }
  255. //帐号密码登录
  256. function zhmmLogin(){
  257. window.location.href = "zhmm-login.html?type=" + type + "&openid=" + openid;
  258. }
  259. </script>
  260. </html>