uni-app中使用第三方快捷登录方式

最新推荐文章于 2024-07-29 11:07:21 发布

青田。

最新推荐文章于 2024-07-29 11:07:21 发布

阅读量272

点赞数

分类专栏： uniapp 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/tianxiaoxixi/article/details/128660197

版权

uniapp 专栏收录该内容

26 篇文章 4 订阅

订阅专栏

<template>
	<view class='login-other'>
		<view class='other-text'>
			<view>或者用以下方式登录</view>
		</view>
		<view class='other'>
			<view class='other-item' @tap='loginOther("weixin")'>
				<image src="../../static/img/wx.png" mode=""></image>
				<view class="item-tit">微信登录</view>
			</view>
			<view class='other-item' @tap='loginOther("sinaweibo")'>
				<image src="../../static/img/wb.png" mode=""></image>
				<view  class="item-tit">微博登录</view>
			</view>
			<view class='other-item' @tap='loginOther("qq")'>
				<image src="../../static/img/qq.png" mode=""></image>
				<view  class="item-tit">QQ登录</view>
			</view>
		</view>
	</view>
</template>

<script>
import $http from '@/common/api/request.js'
import {mapMutations} from 'vuex';
export default{
	methods:{
		...mapMutations(['login']),
		loginOther(mode){
			uni.login({
				provider:mode,
				success:(res)=>{
					uni.getUserInfo({
						provider:mode,
						success:(res)=>{
							let provider = mode;
							//openid ==> 用户身份
							let openid = res.userInfo.openId ||  res.userInfo.openid;
							let nickName = res.userInfo.nickName;
							let avatarUrl = res.userInfo.avatarUrl;
							$http.request({
								url:"/loginother",
								method:"POST",
								data:{
									provider,
									openid,
									nickName,
									avatarUrl
								}
							}).then((res)=>{
								//保存用户信息
								this.login(res);
								uni.navigateBack({
									delta:1
								})
							}).catch(()=>{
								uni.showToast({
									title:'请求失败',
									icon:'none'
								})
							})
						}
					})
				}
			})
		}
	}
}
</script>

<style scoped>
.login-other{
	padding: 100rpx 0;
}
.other-text{
	display: flex;
	padding:50rpx 0;
}
.other-text view{
	line-height: 0rpx;
	padding:0 10rpx;
}
.other-text:after{
	flex:1;
	content: '';
	height: 2rpx;
	background-color: #CCCCCC;
}
.other-text::before{
	flex:1;
	content: '';
	height: 2rpx;
	background-color: #CCCCCC;
}
.other{
	display: flex;
	justify-content: space-around;
}
.other-item{
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
}
.other-item image{
	width:40rpx;
	height: 40rpx;
}
.item-tit{
	margin-top: 10rpx;
	font-size: 24rpx;
}
</style>