123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>验证码快速登录</title>
- <meta name="format-detection" content="telephone=no"/>
- <meta name="viewport"
- content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
- <meta name="apple-mobile-web-app-capable" content="yes"/>
- <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
- <link rel="stylesheet" href="../../../css/cross.css" type="text/css"/>
- <link rel="stylesheet" href="../../../css/cross.ui.css" type="text/css"/>
- <link rel="stylesheet" type="text/css" href="../../../css/ss-style.css">
- <link rel="stylesheet" type="text/css" href="../../../iconfont/iconfont.css" />
- <style>
- #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;}
- .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;}
- .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;}
- .c-btn-dcdcdc{background: #DCDCDC;}
- .c-btn.active{background: #4DCD70;}
- .bgc-fa8888{background-color: #FA8888;}
- </style>
- </head>
- <body>
- <!--<div class="h45">
- <div class="demo-comtop">
- <a class="mui-action-back"></a>
- <h1>登录</h1>
- </div>
- </div>-->
- <div class="main">
- <div class="bgc-fa8888 ptb10 plr10">
- <span class="c-f14 c-fff">已签约居民可直接使用身份证号及默认密码登录</span>
- </div>
- <ul class="n-list edit-info registered c-border-tb mt15 c-f15 form-register">
- <li>
- <div class="n-list-key">
- <span class="f-fs16 c-323232">手机号码</span>
- </div>
- <div class="n-list-info">
- <input id="txtMobile" type="tel" class="width-100 c-f16 c-5b5b5b" maxlength="11" placeholder="请输入手机号码" onkeyup="this.value=this.value.replace(/[^\d]/g,'')"/>
- </div>
- <div id="div-yzm" class="n-list-key">
- <span>获取验证码</span>
- </div>
- </li>
- <li>
- <div class="n-list-key">
- <span class="f-fs16 c-323232">验 证 码</span>
- </div>
- <div class="n-list-info">
- <input id="txtCode" type="text" class="width-100 c-f16 c-5b5b5b" placeholder="请输入验证码"/>
- </div>
- </li>
- </ul>
- <div class="mb15 mlr15 mt20">
- <a href="javascript:;" class="c-btn c-btn-dcdcdc c-btn-full c-btn-radius c-f16">登录</a>
- </div>
- <div class="div-zczh" onclick="regist()">注册账号</div>
- <div class="div-zhmmdl" onclick="zhmmLogin()">账号密码登录</div>
- </div>
- </body>
- <script type="text/javascript" src="../../../js/jquery/2.1.3/jquery.js" ></script>
- <script type="text/javascript" src="../../../js/common_http.js" ></script>
- <script type="text/javascript" src="../../../js/weixin_common.js" ></script>
- <link rel="stylesheet" type="text/css" href="../../../widget/artDialog/6.0.5/css/ui-dialog.min.css">
- <script src="../../../widget/artDialog/6.0.5/js/dialog-plus.js"></script>
- <script type="text/javascript" src="../../../js/commit_validate.js" ></script>
- <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
- <script type="text/javascript">
- var dd = dialog({contentType:'load', skin:'bk-popup', content:'登录中...'});
- var Request = new Object();
- Request = GetRequest();
- var openid = Request["openid"];
- var type = Number(Request["type"]);
- var mobile1 = Request["mobile"];
- var clock = "";
- var nums = 120;
- var loginParams = Request["loginParams"];
- isValueChange();//判断当前是否有输入值,有输入则登录按钮变亮
- bindEvents();
-
- if(loginParams) {
- loginParams = JSON.parse(decodeURIComponent( Request["loginParams"]));
- }
- $(function (){
- var userAgent = window.localStorage.getItem(agentName);
- if(userAgent){
- var paurl = "";
- if(type == 0){
- paurl = "wx/html/home/html/login.html?type=0&openid=" + openid;
- }
- else{
- if(mobile1){
- paurl = "wx/html/home/html/login.html?type=" + type + "&openid=" + openid + "&mobile=" + mobile1;
- }
- else{
- paurl = "wx/html/home/html/login.html?type=" + type + "&openid=" + openid;
- }
- }
- //从后台那边获取签名等信息
- var params = {};
- params.pageUrl = window.location.href;
- $.ajax(server + "weixin/getSign", {
- data: params,
- dataType: "json",
- type: "post",
- success: function(res){
- if (res.status == 200) {
- var t = res.data.timestamp;
- var noncestr = res.data.noncestr;
- var signature = res.data.signature;
- wx.config({
- //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
- appId: appId, // 必填,公众号的唯一标识
- timestamp: t, // 必填,生成签名的时间戳
- nonceStr: noncestr, // 必填,生成签名的随机串
- signature: signature,// 必填,签名,见附录1
- jsApiList: [
- 'closeWindow'
- ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
- });
- }
- }
- });
- wx.ready(function(){
- wx.closeWindow();
- });
- }
- else{
- if(!openid){
- dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'openid获取失败'}).show();
- }
- if(mobile1){
- $("#txtMobile").val(mobile1);
- }
- }
- })
-
- function bindEvents(){
- $(".c-btn").on("click",function(){
- if($(this).hasClass("active")){
- commit();
- }
- })
- }
- function isValueChange(){
- var self = this;
- var int= setInterval(function() {
- if($("#txtMobile").val()&&$("#txtCode").val()){
- clearInterval(int);
- int = null;
- $(".c-btn").addClass("active");
- }
-
- },300);
- }
-
- function sendCode(){
- var mobile = document.getElementById("txtMobile").value;
- if(!mobile){
- dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'请输入手机号'}).show();
- return;
- }
- if(!isphone(mobile)){
- dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'手机号格式不正确'}).show();
- return;
- }
- $("#messageCode1").hide();
- document.getElementById("message").innerHTML = nums+'秒后可重新获取';
- $("#messageCode2").show();
- clock = setInterval(doLoop, 1000); //一秒执行一次
- var data = {};
- data.mobile = mobile;
- data.type = 4;
- sendPost("common/captcha", data, "json", "post", sendFailed, sendSuccesss);
- }
- //失败
- function sendFailed(res) {
- clearInterval(clock); //清除js定时器
- $("#messageCode1").show();
- $("#messageCode2").hide();
- nums = 120; //重置时间
- if (res && res.msg) {
- dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
- } else {
- dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'获取失败'}).show();
- }
- }
-
- function sendSuccesss(res){
- if (res.status == 200) {
-
- }
- else{
- sendFailed(res);
- }
- }
-
- function doLoop(){
- nums--;
- if(nums > 0){
- document.getElementById("message").innerHTML = nums+'秒后可重新获取';
- }else{
- clearInterval(clock); //清除js定时器
- $("#messageCode1").show();
- $("#messageCode2").hide();
- nums = 120; //重置时间
- }
- }
-
- function commit(){
- var mobile = document.getElementById("txtMobile").value;
- var captcha = document.getElementById("txtCode").value;
- if (!mobile || !captcha) {
- dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'手机号和验证码不能为空'}).show();
- return;
- }
- dd.showModal();
- //拼请求内容
- var data = {};
- data.mobile = mobile;
- data.captcha = captcha;
- data.openid = openid;
- sendPost("weixin/login", data, "json", "post", operateFailed, operateSuccesss);
- }
-
- //失败
- function operateFailed(res) {
- dd.close();
- if (res && res.msg) {
- dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:res.msg}).show();
- } else {
- dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'登录失败'}).show();
- }
- }
- //成功调用登录接口
- function operateSuccesss(res) {
- if (res.status == 200) {
- var id = res.data.id;
- var uid = res.data.uid;
- var name = res.data.name;
- var photo = res.data.photo;
- var token = res.data.token;
- //保存用户信息
- wxSaveUserAgent(id, uid, openid, token);
- wxSaveUserAgent1(uid, name, photo);
-
- //hard code缓存微信code。
- var agentCode = localStorage.getItem("weixinCode");
- if(!agentCode){
- window.localStorage.setItem("weixinCode", "123456");
- }
-
- window.location.href = pageUrl[type];
- dd.close();
- } else {
- //非200则为失败
- operateFailed(res);
- }
- }
- //注册
- function regist(){
- window.location.href = "regist-info.html?type=" + type + "&openid=" + openid;
- }
- //帐号密码登录
- function zhmmLogin(){
- window.location.href = "zhmm-login.html?type=" + type + "&openid=" + openid;
- }
- </script>
- </html>
|