Home Explore Help
Register Sign In
usoft
/
sso-ssr
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

微信内嵌扫码登录

huangb 7 years ago
parent
8d60c490a7
commit
f517aeb74c
2 changed files with 57 additions and 44 deletions
Unified View Show Diff Stats
  1. 28 13
      app.html
  2. 29 31
      components/login/Login.vue

+ 28 - 13
app.html
View File 

@@ -1,6 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html {{ HTML_ATTRS }}>
 
 <html {{ HTML_ATTRS }}>
 
 <head>
 
 <head>
 
+
 
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
 
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
 
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
 
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
 
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 
@@ -8,6 +9,7 @@
 
   <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>
 
   <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>
 
   <!--<script src="https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>-->
 
   <!--<script src="https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>-->
 
   <!--<script src="https://biheopen.bgycc.com/cordova-android.js"></script>-->
 
   <!--<script src="https://biheopen.bgycc.com/cordova-android.js"></script>-->
 
+  <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
 
   {{ HEAD }}
 
   {{ HEAD }}
 
   <script>
 
   <script>
 
     // var vConsole = new VConsole()
 
     // var vConsole = new VConsole()
 
@@ -52,19 +54,6 @@
 
       }
 
       }
 
     })(window, document)
 
     })(window, document)
 
   </script>
 
   </script>
 
-  <!--微信-->
 
-  <!--<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>-->
 
-  <script>
 
-    // var obj = new WxLogin({
 
-    //   id: 'login_container',
 
-    //   appid: this.$route.query.appId,
 
-    //   scope: 'snsapi_login',
 
-    //   redirect_uri: `www.ubtob.com?appId={this.$route.query.appId}&returnURL={this.$route.query.returnURL}`,
 
-    //   state: '',
 
-    //   style: '',
 
-    //   href: ''
 
-    // })
 
-  </script>
 
 </head>
 
 </head>
 
 <body {{ BODY_ATTRS }}>
 
 <body {{ BODY_ATTRS }}>
 
   <div id="result" class="com-result">
 
   <div id="result" class="com-result">
 
@@ -90,6 +79,32 @@
 
   //   var heads = document.getElementById("ao2");
 
   //   var heads = document.getElementById("ao2");
 
   //   heads.appendChild(script);
 
   //   heads.appendChild(script);
 
   // }
 
   // }
 
+
 
+  document.getElementById("weChatBtn").addEventListener('click', function() {
 
+    setTimeout(function() {
 
+      let url = window.location.search
 
+      let request = {}
 
+      if (url.indexOf('?' !== -1)) {
 
+        let str = url.substr(1)
 
+        let strs = str.split('&')
 
+        for (let i = 0; i < strs.length; i++) {
 
+          request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
 
+        }
 
+      }
 
+      let appId = request['appId'] || ''
 
+      let returnUrl = request['returnURL'] || ''
 
+      let baseUrl = request['baseUrl'] || ''
 
+      new WxLogin({
 
+        id: 'login_container',
 
+        appid: 'wx4511639d0a71b945',
 
+        scope: 'snsapi_login',
 
+        redirect_uri: document.location.origin + '?appId=' + appId + '&returnURL=' + returnUrl + '&baseUrl=' + baseUrl + '&type=wx',
 
+        state: '',
 
+        style: '',
 
+        href: 'https://sso.ubtob.com/wx.css'
 
+      })
 
+    }, 0)
 
+  }, false)
 
 </script>
 
 </script>
 
 </body>
 
 </body>
 
 <!--闭合-->
 
 <!--闭合-->

+ 29 - 31
components/login/Login.vue
View File 

@@ -46,10 +46,10 @@
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
       <div class="x-login-wrap">
 
       <div class="x-login-wrap">
 
-        <div class="login-tab">
 
+        <div class="login-tab" v-if="loginWay != 2">
 
           <span @click="loginWay = 0" v-bind:class="{'active': loginWay === 0 }">密码登录</span>
 
           <span @click="loginWay = 0" v-bind:class="{'active': loginWay === 0 }">密码登录</span>
 
           <span @click="loginWay = 3" v-bind:class="{'active': loginWay === 3 }">短信登录</span>
 
           <span @click="loginWay = 3" v-bind:class="{'active': loginWay === 3 }">短信登录</span>
 
-          <span @click="getScan">微信登录</span>
 
+          <span @click="ShowWechatCoe(1)" v-bind:class="{'active': loginWay === 1 }" id="weChatBtn">微信登录</span>
 
          </div>
 
          </div>
 
         <!--账号密码登录-->
 
         <!--账号密码登录-->
 
         <div class="x-login" v-if="loginWay === 0">
 
         <div class="x-login" v-if="loginWay === 0">
 
@@ -128,27 +128,21 @@
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
         <!--微信扫码登录-->
 
         <!--微信扫码登录-->
 
-        <div>
 
-        <!--<div class="x-login scan-login" v-if="loginWay === 1">-->
 
-          <!--<div class="x-login-form">-->
 
-            <!--<div class="scan-header">-->
 
-              <!--<span>微信登录</span>-->
 
-              <!--<img src="images/logo/saoma.png" alt="" @click="loginWay = 0"/>-->
 
-            <!--</div>-->
 
-            <!--<div class="scan-body">-->
 
-              <!--<div class="img">-->
 
-                <!--<img src="/images/logo/sao.png" alt=""/>-->
 
-              <!--</div>-->
 
-              <!--<div class="content">-->
 
-                <!--<img src="/images/logo/saosao.png" alt="">-->
 
-                <!--<div>-->
 
-                  <!--<span>打开 <b>微信</b></span>-->
 
-                  <!--<div>扫一扫登录</div>-->
 
-                <!--</div>-->
 
-              <!--</div>-->
 
-            <!--</div>-->
 
-          <!--</div>-->
 
-        <!--</div>-->
 
+        <div class="x-login scan-login" v-if="loginWay === 1">
 
+          <div class="x-login-form">
 
+            <div class="scan-body">
 
+              <div class="img">
 
+                <div id="login_container"></div>
 
+              </div>
 
+              <div class="content">
 
+                <img src="/images/logo/saosao.png" alt="">
 
+                <div>
 
+                  <span>打开 <b>微信</b></span>
 
+                  <div>扫一扫登录</div>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
         </div>
 
         </div>
 
         <!--绑定账号-->
 
         <!--绑定账号-->
 
         <div class="x-login bind-login" v-if="loginWay === 2">
 
         <div class="x-login bind-login" v-if="loginWay === 2">
 
@@ -208,9 +202,9 @@
 
     <div v-html="loginStyle.footUrl || ''" class="footer"></div>
 
     <div v-html="loginStyle.footUrl || ''" class="footer"></div>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
-
 
 <script>
 
 <script>
 
   import Loading from '~components/common/loading/Loading.vue'
 
   import Loading from '~components/common/loading/Loading.vue'
 
+  var wxLogin = function () {}
 
   export default {
 
   export default {
 
     name: 'login',
 
     name: 'login',
 
     components: {
 
     components: {
 
@@ -400,6 +394,10 @@
 
       }
 
       }
 
     },
 
     },
 
     methods: {
 
     methods: {
 
+      ShowWechatCoe () {
 
+        wxLogin()
 
+        this.loginWay = 1
 
+      },
 
       // 获取用户错误次数
 
       // 获取用户错误次数
 
       validUserName () {
 
       validUserName () {
 
         if (this.login.username) {
 
         if (this.login.username) {
 
@@ -895,7 +893,7 @@
 
     }
 
     }
 
   }
 
   }
 
 </script>
 
 </script>
 
-<style lang="scss" type="text/scss" scoped>
 
+<style lang="scss" type="text/scss">
 
   @import '~assets/scss/mixins';
 
   @import '~assets/scss/mixins';
 
   @import '~assets/scss/variables';
 
   @import '~assets/scss/variables';
 
   .x-navbar{
 
   .x-navbar{
 
@@ -1197,8 +1195,6 @@
 
         }
 
         }
 
       }
 
       }
 
       .scan-login {
 
       .scan-login {
 
-        box-shadow: -2px 1px 6px 0px rgba(0, 0, 0, 0.06);
 
-        border-radius: 6px;
 
         .x-login-form{
 
         .x-login-form{
 
           padding: 0;
 
           padding: 0;
 
           .scan-header {
 
           .scan-header {
 
@@ -1226,24 +1222,26 @@
 
             }
 
             }
 
           }
 
           }
 
           .scan-body {
 
           .scan-body {
 
-            margin: 22px auto 0;
 
-            padding-bottom: 38px;
 
+            margin: 0 auto;
 
+            padding: 22px 0 38px;
 
             text-align: center ;
 
             text-align: center ;
 
             div.img{
 
             div.img{
 
+              position: relative;
 
               margin: 0 auto;
 
               margin: 0 auto;
 
               width: 180px;
 
               width: 180px;
 
               height: 182px;
 
               height: 182px;
 
               line-height: 182px;
 
               line-height: 182px;
 
               text-align: center;
 
               text-align: center;
 
-              border: 1px solid #dcdcdc;
 
+              /*border: 1px solid #dcdcdc;*/
 
               img{
 
               img{
 
                 width: 162px;
 
                 width: 162px;
 
                 height: 165px;
 
                 height: 165px;
 
               }
 
               }
 
             }
 
             }
 
+            #login_container{    position: absolute;left: -60px;top: -12px; z-index: 10;}
 
             div.content {
 
             div.content {
 
               width: 138px;
 
               width: 138px;
 
-              margin: 58px auto 0;
 
+              margin: 38px auto 0;
 
               text-align: center;
 
               text-align: center;
 
               overflow: hidden;
 
               overflow: hidden;
 
               img{
 
               img{