social.vue
2.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
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 phoneCode = 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.login({
provider: 'weixin',
success: res => {
this.$store.dispatch('Login', { type: 2, data: { phoneCode: phoneCode, loginCode: res.code } }).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>