yogaApp/pages/components/openlogin.vue

<template>
	<view>
		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<view class="tcon">
				<view class="tip">您还未登录</view>
				<view class="tipcon">请先登录之后再进行操作</view>
				<view class="btn">
					<button class="btn1" type="default" @click="close">暂不登录</button>
					<button class="btn2" type="default" @click="gotoLogin">立即登录</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { myCache } from '../../utils/utils.js';
export default {
	data() {
		return {
		};
	},
	created() {},
	methods: {
		open(){
			this.$refs.alertDialog.open();
		},
		close(){
			this.$refs.alertDialog.close();
		},
		gotoLogin(){
			this.$refs.alertDialog.close();
			uni.navigateTo({
				url: `/pages/login/login`
			});
		},
		onGetAuthorize(){
			var that = this;
			my.getAuthCode({
				scopes: 'auth_user',//'auth_base',//
				success: res => {
					
					my.getAuthUserInfo({
						success: (userInfo) => {
							console.log(userInfo);
							myCache('alipayuserInfo',userInfo);
						},
					});
					
				    const authCode = res.authCode;
					if(authCode){
						that.getPhoneNumberDo(authCode);
					}
					else{
						uni.showToast({
							title: "用户授权登录失败.."
						});
					}
				},
				fail: err => {
				  console.log('my.getAuthCode 调用失败', err)
				}
			});
			
		},
		async getPhoneNumberDo(authCode){
			uni.showLoading({
				title: '登录中...'
			});
			var that = this;
			let rt = {};
			var params = {
				authCode:authCode
			}
			// 调获取手机号码接口
			const {data: pres} = await uni.$http.post('/alipay/login',params);
			if(pres.success){
				if(pres.userInfo){
					myCache('userInfo',pres.userInfo);
					myCache('phone',pres.userInfo.phone);
					myCache('openId',pres.userInfo.alipay_open_id);
					myCache('userid',pres.userInfo.id);
					rt={
						phone:pres.userInfo,
						userid:pres.userInfo.id
					}
				}
			}
			else{
				console.log("支付宝登录失败");
				uni.showToast({
					title: '登录失败！请重试！',
					icon: 'error',
					duration: 2000
				});
			}
			that.$refs.alertDialog.close();
			that.$emit("getPhoneNumber", rt);
		},
	}
}
</script>

<style lang="scss" scoped>
	.tcon{
		width: 560rpx;
		padding: 20rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		z-index: 9999;
		.tip{
			font-size: 28rpx;
			letter-spacing: 2rpx;
			margin-top: 20rpx;
		}
		.tipcon{
			font-size: 26rpx;
			letter-spacing: 2rpx;
			color:#949494;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
		.img{
			width: 80rpx;
			height: 80rpx;
			margin-top: 16rpx;
		}
		.btn{
			width: 80%;
			height: 80rpx;
			margin: 20rpx 10%;
			display: flex;
			flex-direction: row;
			justify-content:space-between;
			.btn1{
				width: 180rpx;
				background-color: #FFFFFF;
				border:1rpx solid #F0F0F0;
				font-size: 28rpx;
				height: 60rpx;
				line-height: 60rpx;
				color:#939393;
				border-radius: 30rpx 30rpx;
				display: flex;
				justify-content: center;
			}
			.btn1::after{
				border:0 !important;
			}
			.btn2{
				width: 180rpx;
				background-color: #89965f;
				border:1rpx solid #89965f;
				font-size: 28rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx 30rpx;
				color:#FFFFFF;
				display: flex;
				justify-content: center;
			}
			.btn2::after{
				border:0 !important;
			}
		}
	}
</style>