Skip to content

Commit bedc314

Browse files
WangyaqiWangyaqi
committed
update login.vue
1 parent 14b7c8c commit bedc314

2 files changed

Lines changed: 135 additions & 108 deletions

File tree

‎common/uni.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
font-family: uniicons;
33
font-weight: normal;
44
font-style: normal;
5-
src: url('./static/uni.ttf') format('truetype');
5+
src: url('~@/static/uni.ttf') format('truetype');
66
}
77

88
/*通用 */

‎pages/API/login/login.vue‎

Lines changed: 134 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,146 @@
11
<template>
2-
<view>
3-
<page-head :title="title"></page-head>
4-
<view class="uni-padding-wrap">
5-
<view style="background:#FFF; padding:40upx;">
6-
<block v-if="hasLogin === true">
7-
<view class="uni-h3 uni-center uni-common-mt">已登录</view>
8-
<view class="uni-hello-text uni-center">
9-
<text>每个账号仅需登录 1 次，\n后续每次进入页面即可自动拉取用户信息。</text>
10-
</view>
11-
</block>
12-
<block v-if="hasLogin === false">
13-
<view class="uni-h3 uni-center uni-common-mt">未登录</view>
14-
<view class="uni-hello-text uni-center">
15-
请点击按钮登录
16-
</view>
17-
</block>
18-
</view>
19-
<view class="uni-btn-v uni- uni-common-mt">
2+
<view>
3+
<page-head :title="title"></page-head>
4+
<view class="uni-padding-wrap">
5+
<view style="background:#FFF; padding:40upx;">
6+
<block v-if="hasLogin === true">
7+
<view class="uni-h3 uni-center uni-common-mt">已登录</view>
8+
<view class="uni-hello-text uni-center">
9+
<text>每个账号仅需登录 1 次，\n后续每次进入页面即可自动拉取用户信息。</text>
10+
</view>
11+
</block>
12+
<block v-if="hasLogin === false">
13+
<view class="uni-h3 uni-center uni-common-mt">未登录</view>
14+
<view class="uni-hello-text uni-center">
15+
请点击按钮登录
16+
</view>
17+
</block>
18+
</view>
19+
<view class="uni-btn-v uni- uni-common-mt">
2020
<!-- #ifdef MP-TOUTIAO -->
21-
<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @click="tologin(value)" :key="key">
22-
登录
23-
</button>
24-
<!-- #endif -->
25-
<!-- #ifndef MP-TOUTIAO -->
26-
<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @click="tologin(value)" :key="key">{{value.name}}</button>
21+
<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @click="tologin(value)"
22+
:key="key">
23+
登录
24+
</button>
2725
<!-- #endif -->
28-
</view>
29-
</view>
30-
</view>
26+
<!-- #ifndef MP-TOUTIAO -->
27+
<button type="primary" class="page-body-button" v-for="(value,key) in providerList" @click="tologin(value)"
28+
:key="key">{{value.name}}</button>
29+
<!-- #endif -->
30+
</view>
31+
</view>
32+
</view>
3133
</template>
3234
<script>
33-
import {
34-
mapState,
35-
mapMutations
36-
} from 'vuex'
35+
import {
36+
mapState,
37+
mapMutations
38+
} from 'vuex'
3739
38-
export default {
39-
data() {
40-
return {
41-
title: 'login',
42-
providerList: []
43-
}
44-
},
45-
computed: {
46-
...mapState(['hasLogin'])
47-
},
48-
onLoad() {
49-
uni.getProvider({
50-
service: 'oauth',
51-
success: (result) => {
52-
this.providerList = result.provider.map((value) => {
53-
let providerName = '';
54-
switch (value) {
55-
case 'weixin':
56-
providerName = '微信登录'
57-
break;
58-
case 'qq':
59-
providerName = 'QQ登录'
60-
break;
61-
case 'sinaweibo':
62-
providerName = '新浪微博登录'
63-
break;
64-
case 'xiaomi':
65-
providerName = '小米登录'
66-
break;
67-
case 'alipay':
68-
providerName = '支付宝登录'
69-
break;
70-
case 'baidu':
71-
providerName = '百度登录'
72-
break;
73-
case 'toutiao':
74-
providerName = '头条登录'
75-
break;
76-
case 'apple':
77-
providerName = '苹果登录'
78-
break;
79-
}
80-
return {
81-
name: providerName,
82-
id: value
83-
}
84-
});
40+
export default {
41+
data() {
42+
return {
43+
title: 'login',
44+
providerList: []
45+
}
46+
},
47+
computed: {
48+
...mapState(['hasLogin'])
49+
},
50+
onLoad() {
51+
uni.getProvider({
52+
service: 'oauth',
53+
success: (result) => {
54+
this.providerList = result.provider.map((value) => {
55+
let providerName = '';
56+
switch (value) {
57+
case 'weixin':
58+
providerName = '微信登录'
59+
break;
60+
case 'qq':
61+
providerName = 'QQ登录'
62+
break;
63+
case 'sinaweibo':
64+
providerName = '新浪微博登录'
65+
break;
66+
case 'xiaomi':
67+
providerName = '小米登录'
68+
break;
69+
case 'alipay':
70+
providerName = '支付宝登录'
71+
break;
72+
case 'baidu':
73+
providerName = '百度登录'
74+
break;
75+
case 'toutiao':
76+
providerName = '头条登录'
77+
break;
78+
case 'apple':
79+
providerName = '苹果登录'
80+
break;
81+
}
82+
return {
83+
name: providerName,
84+
id: value
85+
}
86+
});
8587
86-
},
87-
fail: (error) => {
88-
console.log('获取登录通道失败', error);
89-
}
90-
});
91-
},
92-
methods: {
93-
...mapMutations(['login']),
94-
tologin(provider) {
95-
uni.login({
96-
provider: provider.id,
97-
// #ifdef MP-ALIPAY
98-
scopes: 'auth_user', //支付宝小程序需设置授权类型
88+
},
89+
fail: (error) => {
90+
console.log('获取登录通道失败', error);
91+
}
92+
});
93+
},
94+
methods: {
95+
...mapMutations(['login']),
96+
tologin(provider) {
97+
// #ifdef APP-PLUS
98+
if (provider.id === 'weixin') {
99+
let weixinOauth = null;
100+
plus.oauth.getServices((services)=> {
101+
console.log("services: " + JSON.stringify(services));
102+
for (let i in services) {
103+
let service = services[i];
104+
if (service.id == 'weixin') {
105+
weixinOauth = service;
106+
break;
107+
}
108+
}
109+
weixinOauth.login((res) => {
110+
console.log('login success:', res);
111+
// 更新保存在 store 中的登录状态
112+
this.login(provider.id);
113+
}, function(err) {
114+
console.log('login fail:', err);
115+
})
116+
}, function(err) {
117+
console.log('login fail:', err);
118+
})
119+
return
120+
}
121+
// #endif
122+
uni.login({
123+
provider: provider.id,
124+
// #ifdef MP-ALIPAY
125+
scopes: 'auth_user', //支付宝小程序需设置授权类型
99126
// #endif
100-
success: (res) => {
101-
console.log('login success:', res);
102-
// 更新保存在 store 中的登录状态
103-
this.login(provider.id);
104-
},
105-
fail: (err) => {
106-
console.log('login fail:', err);
107-
}
108-
});
109-
}
110-
}
111-
}
127+
success: (res) => {
128+
console.log('login success:', res);
129+
// 更新保存在 store 中的登录状态
130+
this.login(provider.id);
131+
},
132+
fail: (err) => {
133+
console.log('login fail:', err);
134+
}
135+
});
136+
}
137+
}
138+
}
112139
</script>
113140

114141
<style>
115-
button {
116-
background-color: #007aff;
117-
color: #ffffff;
118-
}
142+
button {
143+
background-color: #007aff;
144+
color: #ffffff;
145+
}
119146
</style>

0 commit comments

Comments
 (0)