使用社交账号（微信小程序）登录

sfmind
1 parent c533f5e5
Showing 10 changed files with 160 additions and 163 deletions
yudao-ui-app/api/auth.js
yudao-ui-app/pages.json
yudao-ui-app/pages/address/create.vue
yudao-ui-app/pages/address/update.vue
yudao-ui-app/pages/cart/cart.vue
yudao-ui-app/pages/login/login.vue → yudao-ui-app/pages/login/mobile.vue
yudao-ui-app/pages/login/social.vue
yudao-ui-app/pages/register/register.vue
yudao-ui-app/pages/user/user.vue
yudao-ui-app/store/index.js
@@ -9,4 +9,5 @@ export const logout = data =&gt; http.post(&#39;/member/logout&#39;, data)
 export const sendSmsCode = data => http.post('/member/send-sms-code', data)
 //使用手机 + 验证码登录
 export const smsLogin = data => http.post('/member/sms-login', data)
-
+//社交登录，使用 (手机号授权)code + 用户信息
+export const socialLogin = data => http.post('/member/social-login', data)
@@ -25,17 +25,17 @@
 			}
 		},
 		{
-			"path": "pages/login/login",
+			"path": "pages/login/social",
 			"style": {
-				"navigationBarTitleText": "账号登录"
-			}
-		},
-		{
-			"path": "pages/register/register",
-			"style": {
-				"navigationBarTitleText": "注册账号"
+				"navigationBarTitleText": "授权登录"
 			}
 		},
+    {
+      "path": "pages/login/mobile",
+      "style": {
+        "navigationBarTitleText": "手机登录"
+      }
+    },
 		{
 			"path": "pages/forgot/forgot",
 			"style": {
@@ -131,7 +131,7 @@ export default {
           uni.$u.toast('地址已保存')
           setTimeout(() => {
             uni.navigateBack()
-          }, 1000)
+          }, 300)
         })
       })
     }
@@ -161,7 +161,7 @@ export default {
           uni.$u.toast('地址已更新')
           setTimeout(() => {
             uni.navigateBack()
-          }, 1000)
+          }, 300)
         })
       })
     }
@@ -6,7 +6,7 @@
  
     <view v-if="!hasLogin" class="login-tips-box">
       <view class="login-tips">
-        <navigator url="/pages/login/login" open-type="navigate" hover-class="none">
+        <navigator url="/pages/login/social" open-type="navigate" hover-class="none">
           <text class="login-link">登录</text>
         </navigator>
         <text>查看购物车</text>
 <template>
   <view class="container">
-    <view class="unp-header">
-      <view class="unp-logo">
-        <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
+    <view class="auth-header">
+      <view class="auth-logo">
+        <u-avatar size="100" icon="github-circle-fill" fontSize="100"></u-avatar>
       </view>
     </view>
  
-    <view class="unp-box">
+    <view class="auth-box">
       <!-- 登录方式选择 -->
       <view class="mode-section">
-        <u-subsection mode="subsection" fontSize="15" :list="loginModeList" :current="currentModeIndex" @change="handleModeChange"></u-subsection>
+        <u-subsection class="subsection" mode="subsection" fontSize="15" :list="loginModeList" :current="currentModeIndex" @change="handleModeChange"></u-subsection>
       </view>
       <u-gap height="40"></u-gap>
  
@@ -37,10 +37,7 @@
         </u-form-item>
  
         <view class="btn-group">
-          <u-button type="primary" text="登录" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
-
-          <u-gap height="20"></u-gap>
-          <u-button type="info" text="返回" @click="navigateBack()"></u-button>
+          <u-button class="auth-btn" type="primary" customStyle="margin-top: 50px" @click="handleSubmit">登录/注册</u-button>
         </view>
       </u--form>
     </view>
@@ -48,7 +45,7 @@
 </template>
  
 <script>
-import { passwordLogin, sendSmsCode, smsLogin } from '../../api/auth'
+import { sendSmsCode } from '../../api/auth'
  
 export default {
   data() {
@@ -145,45 +142,41 @@ export default {
         this.$store.dispatch('Login', { type: this.currentModeIndex, data: this.formData }).then(res => {
           uni.$u.toast('登录成功')
           setTimeout(() => {
-            this.navigateBack()
-          }, 1000)
+            uni.switchTab({
+              url: '/pages/user/user'
+            })
+          }, 300)
         })
       })
-    },
-    navigateBack() {
-      uni.navigateBack()
     }
   }
 }
 </script>
  
 <style lang="scss" scoped>
-.unp-header {
+.auth-header {
   height: 400rpx;
   @include flex-center;
-  .unp-logo {
+  .auth-logo {
     @include flex-center(column);
   }
 }
  
-.unp-box {
+.auth-box {
   @include flex-center(column);
  
   .mode-section {
-    width: 560rpx;
+    width: 600rpx;
+    .subsection {
+      height: 60rpx;
+    }
   }
   .btn-group {
-    width: 560rpx;
+    width: 600rpx;
+    .auth-btn {
+      height: 90rpx;
+      font-size: 32rpx;
+    }
   }
 }
-
-.lk-group {
-  height: 40rpx;
-  margin-top: 40rpx;
-  @include flex-space-between;
-  font-size: 12rpx;
-
-  color: $u-primary;
-  text-decoration: $u-primary;
-}
 </style>
+<template>
+  <view class="container">
+    <view class="auth-header">
+      <view class="auth-logo">
+        <u-avatar size="100" icon="github-circle-fill" fontSize="100"></u-avatar>
+      </view>
+    </view>
+
+    <view class="auth-box">
+      <view class="btn-group">
+        <!-- #ifdef MP-WEIXIN -->
+        <u-button class="auth-btn" open-type="getPhoneNumber" type="primary" @getphonenumber="getPhoneNumber">一键登录</u-button>
+        <navigator class="reg-login-link" url="/pages/login/mobile" open-type="navigate" hover-class="none">手机号登录/注册 &gt;</navigator>
+        <!-- #endif -->
+
+        <!-- #ifndef MP-WEIXIN -->
+        <u-button type="primary" text="手机号登录/注册" @click="handleJump"></u-button>
+        <!-- #endif -->
+      </view>
+      <view class="auth-footer">
+        <view>登录即表示同意<text class="lk-text">《用户协议》</text> 和 <text class="lk-text">《隐私政策》</text></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  onLoad() {},
+  onReady() {},
+  methods: {
+    getPhoneNumber(e) {
+      let code = e.detail.code
+      if (!e.detail.code) {
+        uni.showModal({
+          title: '授权失败',
+          content: '您已拒绝获取绑定手机号登录授权，可以使用其他手机号验证登录',
+          cancelText: '知道了',
+          confirmText: '验证登录',
+          confirmColor: '#3C9CFFFF',
+          success: res => {
+            if (res.confirm) {
+              uni.$u.route('/pages/login/mobile')
+            } else if (res.cancel) {
+              //console.log('用户点击取消')
+            }
+          }
+        })
+      } else {
+        uni.getUserInfo({
+          provider: 'weixin',
+          success: res => {
+            this.$store.dispatch('Login', { type: 2, data: { code: code, userData: res } }).then(res => {
+              uni.$u.toast('登录成功')
+              setTimeout(() => {
+                uni.switchTab({
+                  url: '/pages/user/user'
+                })
+              }, 300)
+            })
+          }
+        })
+      }
+    },
+    handleJump() {
+      uni.$u.route('/pages/login/mobile')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  height: calc(100vh - 70px);
+  @include flex-space-between(column);
+}
+
+.auth-header {
+  flex: 2;
+  @include flex-center;
+  .auth-logo {
+    @include flex-center(column);
+  }
+}
+
+.auth-box {
+  @include flex-center(column);
+
+  .btn-group {
+    width: 600rpx;
+    margin-bottom: 200rpx;
+    .auth-btn {
+      height: 90rpx;
+      font-size: 32rpx;
+    }
+  }
+
+  .reg-login-link {
+    margin-top: 32rpx;
+    text-align: center;
+    color: #636363;
+    font-size: 30rpx;
+  }
+
+  .auth-footer {
+    font-size: 26rpx;
+    color: #939393;
+    .lk-text {
+      color: $u-primary;
+      text-decoration: $u-primary;
+    }
+  }
+}
+</style>
-<template>
-  <view class="container">
-    <view class="unp-header">
-      <view class="unp-logo">
-        <u-avatar size="80" icon="github-circle-fill" fontSize="80"></u-avatar>
-      </view>
-    </view>
-
-    <view class="unp-box">
-      <u--form class="unp-form" labelPosition="left" :model="formData" :rules="rules" ref="form">
-        <u-form-item label="账号" prop="username" borderBottom ref="item-username">
-          <u-input type="text" maxlength="20" v-model="formData.username" clearable placeholder="账号由数字和字母组成" border="none" @change="handleUsernameChange"></u-input>
-        </u-form-item>
-
-        <u-gap height="20"></u-gap>
-
-        <u-form-item label="密码" prop="password" borderBottom ref="item-password">
-          <u-input :type="inputType" maxlength="20" v-model="formData.password" placeholder="密码由数字、字母和符号组成" border="none" @change="handlePasswordChange">
-            <template slot="suffix">
-              <u-icon v-if="inputType === 'password'" size="20" color="#666666" name="eye-fill" @click="inputType = 'text'"></u-icon>
-              <u-icon v-if="inputType === 'text'" size="20" color="#666666" name="eye-off" @click="inputType = 'password'"></u-icon>
-            </template>
-          </u-input>
-        </u-form-item>
-
-        <view class="lk-group">
-          <!-- 占位 -->
-        </view>
-
-        <u-button type="success" text="注册账号" customStyle="margin-top: 50px" @click="handleSubmit"></u-button>
-
-        <u-gap height="20"></u-gap>
-        <u-button type="info" text="返回" @click="navigateBack()"></u-button>
-      </u--form>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      inputType: 'password',
-      formData: {
-        username: '',
-        password: ''
-      },
-      rules: {
-        username: {
-          type: 'string',
-          max: 20,
-          required: true,
-          message: '请输入您的账号',
-          trigger: ['blur', 'change']
-        },
-        password: {
-          type: 'string',
-          max: 20,
-          required: true,
-          message: '请输入您的密码',
-          trigger: ['blur', 'change']
-        }
-      }
-    }
-  },
-  onLoad() {},
-  methods: {
-    handleUsernameChange(e) {
-      let str = uni.$u.trim(e, 'all')
-      this.$nextTick(() => {
-        this.formData.username = str
-      })
-    },
-    handlePasswordChange(e) {
-      let str = uni.$u.trim(e, 'all')
-      this.$nextTick(() => {
-        this.formData.password = str
-      })
-    },
-    handleSubmit() {
-      this.$refs.form.validate().then(res => {
-        uni.$u.toast('点击了注册账号')
-      })
-    },
-    navigateBack() {
-      uni.navigateBack()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.unp-header {
-  height: 400rpx;
-  @include flex-center;
-  .unp-logo {
-    @include flex-center;
-  }
-}
-
-.unp-box {
-  @include flex-center;
-  .unp-form {
-    width: 560rpx;
-  }
-}
-
-.lk-group {
-  @include flex-space-between;
-  height: 40rpx;
-  margin-top: 40rpx;
-  font-size: 12rpx;
-
-  color: $u-primary;
-  text-decoration: $u-primary;
-}
-</style>
@@ -79,7 +79,7 @@ export default {
   methods: {
     loginOrJump(pageUrl) {
       if (!this.hasLogin) {
-        uni.$u.route('/pages/login/login')
+        uni.$u.route('/pages/login/social')
       } else {
         uni.$u.route(pageUrl)
       }
@@ -2,7 +2,7 @@ import Vue from &#39;vue&#39;
 import Vuex from 'vuex'
 import { logout } from '@/api/auth'
 import { getUserInfo } from '@/api/user'
-import { passwordLogin, smsLogin } from '@/api/auth'
+import { passwordLogin, smsLogin, socialLogin } from '@/api/auth'
  
 const TokenKey = 'App-Token'
  
@@ -56,15 +56,18 @@ const store = new Vuex.Store({
   actions: {
     //账号登录
     Login({ state, commit }, { type, data }) {
-      console.log(type, data)
       if (type === 0) {
         return passwordLogin(data).then(res => {
           commit('SET_TOKEN', res.data)
         })
-      } else {
+      } else if (type === 1) {
         return smsLogin(data).then(res => {
           commit('SET_TOKEN', res.data)
         })
+      } else {
+        return socialLogin(data).then(res => {
+          commit('SET_TOKEN', res.data)
+        })
       }
     },
     // 退出登录