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

2025-07-19 05:25:07 +08:00 · 2022-05-05 19:09:04 +08:00
parent c533f5e5e8
commit c8e00ad04c
10 changed files with 160 additions and 163 deletions
--- a/yudao-ui-app/pages/login/social.vue
+++ b/yudao-ui-app/pages/login/social.vue
@ -0,0 +1,117 @@
+<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>