使用社交账号（微信小程序）登录
sfmind
4 years ago
parent
c533f5e5e8
commit
c8e00ad04c
@ -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>
|
|
||||||
Loading…
Reference in New Issue