浏览代码

微信登录优化2

chao 4 年之前
父节点
当前提交
40b000d3f0

+ 9 - 1
src/main/resources/static/css/account/login.css

@@ -54,9 +54,17 @@ footer{display:none}
 .loginForm input{height:11.2vw;line-height:6vw;padding: 2.6vw 0;box-sizing: border-box;}
 .loginForm .checked{top:3.6vw;right:3.6vw;}
 .loginForm .forget{text-align:right;color:#4a4f58;font-size:3.4vw;line-height:3.4vw;margin-bottom:4.8vw}
-.loginForm .submit .btn{display:inline-block;box-sizing:border-box;width:100%;height:11.2vw;line-height:11.2vw;background-color:#ffe6dc;border-radius:2px;border:solid 1px #e15616;text-align:center;color:#e15616;font-size:3.4vw;margin-bottom:4.8vw}
+.loginForm .submit .btn,.loginForm .submit .weChat{display:inline-block;box-sizing:border-box;width:100%;height:11.2vw;line-height:11.2vw;background-color:#ffe6dc;border-radius:2px;border:solid 1px #e15616;text-align:center;color:#e15616;font-size:3.4vw;margin-bottom:4.8vw}
 .loginForm .submit button.btn{background-color:#e15616;color:#FFF;margin-bottom:4.8vw}
 .loginForm .showPwd{display:none;}
 
+.loginForm .submit .weChat{
+    background: #00bc0c;
+    border-color: #00bc0c;
+    text-align:center;
+    overflow: hidden;
+}
+.loginForm .submit .weChat img{height:100%}
+
 
 }

二进制
src/main/resources/static/img/base/wechat_login.png


+ 29 - 2
src/main/resources/static/js/account/login.js

@@ -23,7 +23,8 @@ var loginPage = new Vue({
             identity: '',
             permission: '',
             token: ''
-        }
+        },
+        isWeChat: false
     },
     computed: {
 
@@ -107,6 +108,30 @@ var loginPage = new Vue({
                 }
             });
         },
+        // 微信公众号授权登录
+        weChatLogin: function(){
+            if (this.isWeChat) {
+                // 微信浏览器自动授权登录
+                var urlForWeChat = 'https://www.caimei365.com/we_chat/redirect_uri.html';
+                $.get(spiServer+'/user/authorizationLink?redirectUri='+urlForWeChat, function(r){
+                    if(r.code===0 && r.data){
+                        window.location.href = r.data;
+                    }
+                });
+            }
+        },
+        weChatAutoLogin: function(){
+            if (this.isWeChat && Number(getBaseCookie("weChatAutoLogin"))!==1) {
+                // 微信浏览器自动授权登录
+                var urlForWeChat = 'https://www.caimei365.com/we_chat/redirect_uri.html';
+                $.get(spiServer+'/user/authorizationLink?redirectUri='+urlForWeChat, function(r){
+                    if(r.code===0 && r.data){
+                        setBaseCookie("weChatAutoLogin", 1);
+                        window.location.href = r.data;
+                    }
+                });
+            }
+        },
         toNormalLogin: function(){
             this.qrCodeLogin = false;
         },
@@ -174,7 +199,9 @@ var loginPage = new Vue({
         }
     },
     created: function () {
-
+        var userAgent = navigator.userAgent.toLowerCase();
+        this.isWeChat = userAgent.match(/MicroMessenger/i);
+        this.weChatAutoLogin();
     },
     mounted: function () {
         var _self = this;

+ 1 - 1
src/main/resources/static/js/base.js

@@ -12,7 +12,7 @@ if(localStorage.getItem('userInfo')){
     GLOBAL_USER_IDENTITY = globalUserData.userIdentity*1;
     GLOBAL_SHOP_ID = globalUserData.shopId*1;
 } else {
-    if(!getBaseCookie("weChatAutoLogin")){
+    if(Number(getBaseCookie("weChatAutoLogin"))!==1){
         var userAgent = navigator.userAgent.toLowerCase();
         if (userAgent.match(/MicroMessenger/i)) {
             // 微信浏览器自动授权登录

+ 1 - 0
src/main/resources/templates/account/login.html

@@ -38,6 +38,7 @@
                     <a v-if="isPC" class="btn" href="/register.html">免费注册</a>
                     <button class="btn" type="button" @click="loginSubmit()">登录</button>
                     <a v-if="!isPC" class="btn" href="/register.html">免费注册</a>
+                    <a v-if="!isPC" class="weChat" @click="weChatLogin()" href="javascript:void(0);"><img src="/img/base/wechat_login.png" alt="微信公众号授权登录"></a>
                 </div>
                 <a v-if="isPC" href="javascript:void(0);" class="codeBtn icon" @click="toQrCodeLogin()"></a>
             </form>