mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-22 23:31:52 +08:00
使用社交账号（微信小程序）登录
This commit is contained in:
sfmind
parent
c533f5e5e8
commit
c8e00ad04c
@ -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)
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
117
yudao-ui-app/pages/login/social.vue
Normal 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">手机号登录/注册 ></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>
|
||||
@ -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>
|
||||
@ -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 '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)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 退出登录
|
||||
|
||||
Loading…
Reference in New Issue
Block a user