新增：微信小程序快捷登录

api/login/index.js

@@ -3,20 +3,26 @@ import request from '@/utils/request'
 // api地址
 const api = {
   login: 'passport/login',
+  mpWxLogin: 'passport/mpWxLogin',
   captcha: 'passport/captcha',
   sendSmsCaptcha: 'passport/sendSmsCaptcha'
 }
 
-// 图形验证码
-export function captcha() {
-  return request.get(api.captcha, {}, { load: false })
-}
-
 // 用户登录
 export function login(data) {
   return request.post(api.login, data)
 }
 
+// 微信小程序快捷登录
+export function mpWxLogin(data, option) {
+  return request.post(api.mpWxLogin, data, option)
+}
+
+// 图形验证码
+export function captcha() {
+  return request.get(api.captcha, {}, { load: false })
+}
+
 // 发送短信验证码
 export function sendSmsCaptcha(data) {
   return request.post(api.sendSmsCaptcha, data, { load: false })

pages/login/components/mp-weixin.vue

@@ -1,5 +1,5 @@
 <template>
-  <view v-show="code" class="container">
+  <view class="container">
     <view class="wechatapp">
       <view class="header">
         <open-data class="avatar" type="userAvatarUrl"></open-data>
@@ -20,6 +20,8 @@
 </template>
 
 <script>
+  import store from '@/store'
+
   export default {
 
     data() {
@@ -32,7 +34,7 @@
 
     created() {
       // 获取code
-      this.getCode()
+      // this.getCode()
     },
 
     methods: {
@@ -40,27 +42,16 @@
       // 获取code
       // https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
       getCode() {
-        uni.login({
-          provider: 'weixin',
-          success: res => {
-            this.code = res.code
-            console.log(res)
-          }
-        })
-      },
-
-      /**
-       * 授权登录（旧版弃用）
-       */
-      getUserInfo(e) {
-        const app = this
-        if (e.detail.errMsg === 'getUserInfo:ok') {
-          app.$emit('success', {
-            oauth: 'MP-WEIXIN', // 第三方登录类型: MP-WEIXIN
-            code: app.code, // 微信登录的code, 用于换取openid
-            userInfo: JSON.parse(e.detail.rawData) // 微信用户信息
+        return new Promise((resolve, reject) => {
+          uni.login({
+            provider: 'weixin',
+            success: res => {
+              console.log('code', res.code)
+              resolve(res.code)
+            },
+            fail: reject
           })
-        }
+        })
       },
 
       // 获取微信用户信息(新版)
@@ -72,11 +63,8 @@
           success({ userInfo }) {
             console.log('用户同意了授权')
             console.log('userInfo：', userInfo)
-            app.$emit('success', {
-              oauth: 'MP-WEIXIN', // 第三方登录类型: MP-WEIXIN
-              code: app.code, // 微信登录的code, 用于换取openid
-              userInfo // 微信用户信息
-            })
+            // 授权成功事件
+            app.onAuthSuccess(userInfo)
           },
           fail() {
             console.log('用户拒绝了授权')
@@ -84,6 +72,53 @@
         })
       },
 
+      // 授权成功事件
+      // 这里分为两个逻辑:
+      // 1.将code和userInfo提交到后端，如果存在该用户 则实现自动登录，无需再填写手机号
+      // 2.如果不存在该用户, 则显示注册页面, 需填写手机号
+      async onAuthSuccess(userInfo) {
+        const app = this
+        // 提交到后端
+        store.dispatch('MpWxLogin', { code: await app.getCode(), userInfo })
+          .then(result => {
+            // 显示登录成功
+            app.$toast(result.message)
+            // 跳转回原页面
+            setTimeout(() => {
+              app.onNavigateBack()
+            }, 2000)
+          })
+          .catch(() => {
+            // 将oauth提交给父级
+            app.onEmitSuccess(userInfo)
+          })
+      },
+
+      // 将oauth提交给父级
+      // 这里要重新获取code, 因为上一次获取的code不能复用(会报错)
+      async onEmitSuccess(userInfo) {
+        const app = this
+        app.$emit('success', {
+          oauth: 'MP-WEIXIN', // 第三方登录类型: MP-WEIXIN
+          code: await app.getCode(), // 微信登录的code, 用于换取openid
+          userInfo // 微信用户信息
+        })
+      },
+
+      // /**
+      //  * 授权登录（旧版弃用）
+      //  */
+      // getUserInfo(e) {
+      //   const app = this
+      //   if (e.detail.errMsg === 'getUserInfo:ok') {
+      //     app.$emit('success', {
+      //       oauth: 'MP-WEIXIN', // 第三方登录类型: MP-WEIXIN
+      //       code: app.code, // 微信登录的code, 用于换取openid
+      //       userInfo: JSON.parse(e.detail.rawData) // 微信用户信息
+      //     })
+      //   }
+      // },
+
       /**
        * 暂不登录
        */

pages/login/index.vue

@@ -40,10 +40,19 @@
     methods: {
 
       // 获取到用户信息的回调函数
-      onGetUserInfoSuccess(partyData) {
+      onGetUserInfoSuccess({ oauth, code, userInfo }) {
+        // 记录第三方用户信息数据
+        this.partyData = { oauth, code, userInfo }
+        // 显示注册页面
+        this.onShowRegister()
+      },
+
+      // 显示注册页面
+      onShowRegister() {
+        // 是否显示获取用户信息组件
         this.isShowUserInfo = false
+        // 是否已获取到了用户信息
         this.isExistUserInfo = true
-        this.partyData = partyData
       }
     }
   }

store/modules/user.js

@@ -38,11 +38,24 @@ const user = {
       return new Promise((resolve, reject) => {
         LoginApi.login({ form: data })
           .then(response => {
-            const data = response.data
-            loginSuccess(commit, data)
+            const result = response.data
+            loginSuccess(commit, result)
             resolve(response)
           })
-          .catch(error => reject(error))
+          .catch(reject)
+      })
+    },
+
+    // 微信小程序快捷登录
+    MpWxLogin({ commit }, data) {
+      return new Promise((resolve, reject) => {
+        LoginApi.mpWxLogin({ form: data }, { isPrompt: false })
+          .then(response => {
+            const result = response.data
+            loginSuccess(commit, result)
+            resolve(response)
+          })
+          .catch(reject)
       })
     },