java/ruoyi-vue-pro
1
0
Fork 0
mirror of https://github.com/YunaiV/ruoyi-vue-pro.git synced 2025-10-31 10:37:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sfmind
2022-05-05 19:09:04 +08:00
parent c533f5e5e8
commit c8e00ad04c
10 changed files with 160 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
yudao-ui-app/api/auth.js
View File

@ -9,4 +9,5 @@ export const logout = data => http.post('/member/logout', 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)

8
yudao-ui-app/pages.json
View File

@ -25,15 +25,15 @@
}
},
{
"path": "pages/login/login",
"path": "pages/login/social",
"style": {
"navigationBarTitleText": "账号登录"
"navigationBarTitleText": "授权登录"
}
},
{
"path": "pages/register/register",
"path": "pages/login/mobile",
"style": {
"navigationBarTitleText": "注册账号"
"navigationBarTitleText": "手机登录"
}
},
{

2
yudao-ui-app/pages/address/create.vue
View File

@ -131,7 +131,7 @@ export default {
uni.$u.toast('地址已保存')
setTimeout(() => {
uni.navigateBack()
}, 1000)
}, 300)
})
})
}

2
yudao-ui-app/pages/address/update.vue
View File

@ -161,7 +161,7 @@ export default {
uni.$u.toast('地址已更新')
setTimeout(() => {
uni.navigateBack()
}, 1000)
}, 300)
})
})
}

2
yudao-ui-app/pages/cart/cart.vue
View File

@ -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>

53
yudao-ui-app/pages/login/login.vue → yudao-ui-app/pages/login/mobile.vue
View File

@ -1,15 +1,15 @@
<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>

117
yudao-ui-app/pages/login/social.vue Normal file
View File

@ -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>

117
yudao-ui-app/pages/register/register.vue
View File

@ -1,117 +0,0 @@
<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>

2
yudao-ui-app/pages/user/user.vue
View File

@ -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)
}

9
yudao-ui-app/store/index.js
View File

@ -2,7 +2,7 @@ import Vue from 'vue'
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)
})
}
},
// 退出登录