sooka_consult_uniapp/pages/login.vue

<template>
	<view class="normal-login-container">
		<view class="login-form-content">
			<view class="flex">
				<view class="login-title flex">
					吉农宝
				</view>
				<button @click="getUserInfo"> 获取头像昵称 </button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		created() {
		},
		methods: {
		   getUserInfo() {
		       var _this = this
		       uni.showModal({
		         title: '温馨提示',
		         content: '亲，授权微信登录后才能正常使用小程序功能',
		         success(res) {
		           //如果用户点击了确定按钮
		           if (res.confirm) {
		             uni.getUserProfile({
		               desc: '获取你的昵称、头像、地区及性别',
		               success: res => {
						   getApp().globalData.userInfo = res.userInfo,  //登录用户信息
						   uni.switchTab({
								url: '/pages/index'
							})
		               },
		               fail: res => {
		                 //拒绝授权
		                 uni.showToast({
		                   title: '您拒绝了请求,不能正常使用小程序',
		                   icon: 'error',
		                   duration: 2000
		                 });
		                 return;
		               }
		             });
			 
		           } else if (res.cancel) {
		             //如果用户点击了取消按钮
		             uni.showToast({
		               title: '您拒绝了请求,不能正常使用小程序',
		               icon: 'error',
		               duration: 2000
		             });
		             return;
		           }
		         }
		       });
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.normal-login-container {
		width: 100%;

		.login-bg-img {
			width: 100%;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			width: 90%;
			min-height: 45vh;
			background-color: #ffffff;
			border-radius: 40rpx;
			padding: 5%;
			box-shadow: 0 0 10px #a7a7a7;
			position: absolute;
			bottom: 10vh;
			left: 50%;
			transform: translateX(-50%);


			.login-title {
				margin-top: 20px;
				font-size: 40rpx;
				color: #898989;

				image {
					width: 70rpx;
					height: 53rpx;
					margin-right: 20rpx;
				}
			}

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 96rpx;
				border-radius: 50px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 96rpx;
				background: linear-gradient(105deg, #72C6FF, #79A4F0);
				box-shadow: 0rpx 18rpx 24rpx 0rpx rgba(63, 143, 255, 0.23);
				border-radius: 48rpx;
				color: #f5f6f7;
			}

			.reg {
				margin-top: 15px;
			}

			.xieyi {
				color: #333;
				margin-top: 20px;
			}

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200rpx;
				}
			}
		}
	}
</style>