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() {
			this.getUserInfo();
		},
		methods: {
		   getUserInfo() {
			   let _this = this;
		       uni.login({
		         success (res) {
		           if (res.code) {
		             //发起网络请求
					 _this.$store.dispatch('Login', res.code).then(() => {
					 	_this.$modal.closeLoading()
					 	uni.switchTab({
					 		url:'/pages/demo/index'
					 	})
					 })
		           } else {
		             console.log('登录失败！' + res.errMsg)
		           }
		         }
		       })
			}
		},
	}
</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>