zhmm-login.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  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. .n-list-info{position: relative;}
  17. .searchbar-clear{position: absolute;width: 28px;height: 28px;right: 0;top:8px;opacity:0;pointer-events:none;background-position:center;background-repeat:no-repeat;background-image:url(../../../images/delete01_pre.png);-webkit-background-size:20px 20px;background-size:20px 20px;-webkit-transition-duration:300ms;transition-duration:300ms;cursor:pointer;}
  18. .view-icon{background: url(../images/view_icon.png) no-repeat;width: 24px;height: 24px;background-size: 24px;margin-top: 10px;}
  19. .view-icon.active{background: url(../images/view_off_icon.png) no-repeat;width: 24px;height: 24px;background-size: 24px;margin-top: 10px;}
  20. .div-btn-group{width:33%;height:29px;border:0;font-size:14px;line-height:29px;text-align:center;border-radius:10px;color:#17b3ec;float: left;}
  21. .div-zczh{z-index: 2; position: relative; 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;}
  22. .div-zhmmdl{z-index: 2; position: relative; 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;}
  23. .edit-info.registered>li .n-list-key:first-child{width: 3em;}
  24. .bgc-fa8888{background-color: #FA8888;}
  25. </style>
  26. </head>
  27. <body>
  28. <!--<div class="h45">
  29. <div class="demo-comtop">
  30. <a class="mui-action-back"></a>
  31. <h1>登录</h1>
  32. </div>
  33. </div>-->
  34. <div class="main">
  35. <div class="bgc-fa8888 ptb10 plr10">
  36. <span class="c-f14 c-fff">已签约居民可直接使用身份证号及默认密码登录</span>
  37. </div>
  38. <ul class="n-list edit-info registered c-border-tb mt15 c-f15 form-register">
  39. <li>
  40. <div class="n-list-key" style="width: 2.3em;">
  41. <img src="../images/zhanghao_icon.png" style="width: 20px; height: 26px;padding-left: 3px;padding-top: 10px;" />
  42. <!--<i class="iconfont icon-shouji1"></i>-->
  43. </div>
  44. <div class="n-list-info">
  45. <input id="txtMobile" maxlength="18" minlength="11" type="text" class="width-100 c-f16 c-5b5b5b" placeholder="身份证号/手机号"/>
  46. <a href="#" class="searchbar-clear"></a>
  47. </div>
  48. </li>
  49. <li>
  50. <div class="n-list-key" style="width: 2.3em;">
  51. <i class="iconfont icon-yanzhengma01"></i>
  52. </div>
  53. <div class="n-list-info">
  54. <input id="txtCode" type="password" class="width-100 c-f16 c-5b5b5b" placeholder="初始密码为身份证后6位"/>
  55. <a href="#" class="searchbar-clear"></a>
  56. </div>
  57. <div class="n-list-key view-icon">
  58. </div>
  59. </li>
  60. </ul>
  61. <div class="mb15 mlr15 mt20">
  62. <a href="javascript:;" style="font-size: 18px;" class="c-btn c-btn-4dcd70 c-btn-full c-btn-radius c-f16" onclick="commit()">登录</a>
  63. </div>
  64. <div class="div-zczh" onclick="regist()">注册账号</div>
  65. <div style="width: 100%; position: absolute; z-index: 1;" class="div-zhmmdl" onclick="fastLogin()">验证码快速登录</div>
  66. <div class="div-zhmmdl" onclick="forgetPwd()">忘记密码</div>
  67. </div>
  68. </body>
  69. <script type="text/javascript" src="../../../js/jquery/2.1.3/jquery.js" ></script>
  70. <script type="text/javascript" src="../../../js/common_http.js" ></script>
  71. <script type="text/javascript" src="../../../js/weixin_common.js?11=11" ></script>
  72. <link rel="stylesheet" type="text/css" href="../../../widget/artDialog/6.0.5/css/ui-dialog.min.css">
  73. <script src="../../../widget/artDialog/6.0.5/js/dialog-plus.js"></script>
  74. <script type="text/javascript" src="../../../js/commit_validate.js" ></script>
  75. <script src="../../../js/security.js" type="text/javascript" charset="utf-8"></script>
  76. <script type="text/javascript" src="../../../js/mui.min.js" ></script>
  77. <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  78. <script type="text/javascript">
  79. var dd = dialog({contentType:'load', skin:'bk-popup', content:'登录中...'});
  80. var Request = new Object();
  81. Request = GetRequest();
  82. var openid = Request["openid"];
  83. var type = Number(Request["type"]);
  84. var mobile1 = Request["mobile"];
  85. var idcard = Request["idcard"];
  86. var clock = "";
  87. var nums = 120;
  88. var loginParams = Request["loginParams"];
  89. bindEvents();
  90. if(loginParams) {
  91. loginParams = JSON.parse(decodeURIComponent( Request["loginParams"]));
  92. }
  93. $(function (){
  94. var userAgent = window.localStorage.getItem(agentName);
  95. if(userAgent){
  96. var paurl = "";
  97. if(type == 0){
  98. paurl = "wx/html/home/html/login.html?type=0&openid=" + openid;
  99. }
  100. else{
  101. if(mobile1){
  102. paurl = "wx/html/home/html/login.html?type=" + type + "&openid=" + openid + "&mobile=" + mobile1;
  103. }
  104. else{
  105. paurl = "wx/html/home/html/login.html?type=" + type + "&openid=" + openid;
  106. }
  107. }
  108. //从后台那边获取签名等信息
  109. var params = {};
  110. params.pageUrl = window.location.href;
  111. $.ajax(server + "weixin/getSign", {
  112. data: params,
  113. dataType: "json",
  114. type: "post",
  115. success: function(res){
  116. if (res.status == 200) {
  117. var t = res.data.timestamp;
  118. var noncestr = res.data.noncestr;
  119. var signature = res.data.signature;
  120. wx.config({
  121. //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  122. appId: appId, // 必填,公众号的唯一标识
  123. timestamp: t, // 必填,生成签名的时间戳
  124. nonceStr: noncestr, // 必填,生成签名的随机串
  125. signature: signature,// 必填,签名,见附录1
  126. jsApiList: [
  127. 'closeWindow'
  128. ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
  129. });
  130. }
  131. }
  132. });
  133. /*wx.ready(function(){
  134. wx.closeWindow();
  135. }); */
  136. }
  137. else{
  138. if(!openid){
  139. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'openid获取失败'}).show();
  140. }
  141. if(mobile1){
  142. $("#txtMobile").val(mobile1);
  143. }
  144. if(idcard) {
  145. $("#txtMobile").val(idcard);
  146. }
  147. }
  148. })
  149. function bindEvents(){
  150. $(".view-icon").on("click",function(){
  151. $(this).toggleClass("active");
  152. if($(this).hasClass("active")){
  153. $("#txtCode").attr("type","text");
  154. }else{
  155. $("#txtCode").attr("type","password");
  156. }
  157. $(this).closest("li").find("#txtCode").focus();
  158. })
  159. $("input").on("focus",function(){
  160. $(".searchbar-clear").css("pointer-events","none").css("opacity",0);
  161. if($(this).val()){
  162. $(this).next().css("pointer-events","auto").css("opacity",1);
  163. }
  164. }).on("input",function(){
  165. $(this).next().css("pointer-events","auto").css("opacity",1);
  166. });
  167. $(".n-list-info").on("click",".searchbar-clear",function(){
  168. $(this).prev().val("");
  169. $(this).css("pointer-events","none").css("opacity",0);
  170. $(this).prev().focus();
  171. return false;
  172. });
  173. }
  174. function commit(){
  175. var mobile = $.trim(document.getElementById("txtMobile").value);
  176. if(mobile.length!=15&&mobile.length!=18&&mobile.length!=11){
  177. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请输入正确的手机号/身份证号'}).show();
  178. return;
  179. }
  180. if(mobile.length==11&&!isphone(mobile)){
  181. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请输入正确的手机号'}).show();
  182. return;
  183. }
  184. if((mobile.length==18||mobile.length==15)&&!isIdcard(mobile)){
  185. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请输入正确的身份证号'}).show();
  186. return;
  187. }
  188. var captcha = document.getElementById("txtCode").value;
  189. if (!mobile || !captcha) {
  190. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'账号和密码不能为空'}).show();
  191. return;
  192. }
  193. dd.showModal();
  194. //加密设置:获取公钥
  195. var encryURL = server + "login/public_key";
  196. var key = RSAUtils.getKeyFromServer(encryURL);
  197. //拼请求内容
  198. var data = {};
  199. data.mobile = mobile;
  200. data.password = RSAUtils.encryStr(key, captcha);
  201. if(openid == "undefined"){
  202. var openidObj = window.localStorage.getItem(OpenidAgent);
  203. if(openidObj){
  204. openidObj = JSON.parse(openidObj);
  205. openid = openidObj.openid
  206. }else{
  207. openid = "undefined";
  208. }
  209. }
  210. data.openid = openid;
  211. sendPost("weixin/login", data, "json", "post", operateFailed, operateSuccesss);
  212. }
  213. //失败
  214. function operateFailed(res) {
  215. dd.close();
  216. if (res && res.msg) {
  217. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
  218. } else {
  219. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'登录失败'}).show();
  220. }
  221. }
  222. //成功调用登录接口
  223. function operateSuccesss(res) {
  224. if (res.status == 200) {
  225. var id = res.data.id;
  226. var uid = res.data.uid;
  227. var name = res.data.name;
  228. var photo = res.data.photo;
  229. var token = res.data.token;
  230. //保存用户信息
  231. wxSaveUserAgent(id, uid, openid, token);
  232. wxSaveUserAgent1(uid, name, photo);
  233. saveAgentOpenid(openid);
  234. window.location.href = pageUrl[type];
  235. dd.close();
  236. // 缓存第一个人的uid和名字,后面账号切换需要用
  237. window.localStorage.removeItem("firstUid");
  238. window.localStorage.setItem("firstUid", uid);
  239. window.localStorage.removeItem("firstName");
  240. window.localStorage.setItem("firstName", name);
  241. //hard code缓存微信code。
  242. var agentCode = localStorage.getItem("weixinCode");
  243. if(!agentCode){
  244. window.localStorage.setItem("weixinCode", "123456");
  245. }
  246. } else {
  247. if(res.status == -2){
  248. dd.close();
  249. dialog({
  250. content: res.msg,
  251. okValue: "我知道了",
  252. ok: function(){
  253. }
  254. }).showModal()
  255. }else{
  256. //非200则为失败
  257. operateFailed(res);
  258. }
  259. }
  260. }
  261. //注册
  262. function regist(){
  263. window.location.href = "regist-info.html?type=" + type + "&openid=" + openid;
  264. }
  265. //验证码快速登录
  266. function fastLogin(){
  267. window.location.href = "login.html?type=" + type + "&openid=" + openid;
  268. }
  269. //忘记密码
  270. function forgetPwd(){
  271. window.location.href = "shenfenyz.html?type=" + type + "&openid=" + openid;
  272. }
  273. </script>
  274. </html>