MiniPrograms/subpkg/login/login.vue

<template>
	<view>
		<!-- 登录 -->
		<view class="content">
			<view class="bg1"></view>
			<view class="bg2"></view>
			<view class="bg3"></view>
			<view class="tips">
				<text class="title">登录</text>
				<text class="subtitle">欢迎来到醍摩豆家长</text>
			</view>

			<view class="form-box">
				<button @click="$noMultipleClicks(getUserInfo)" class="btn" plain="true">微信一键登录</button>
				<view class="other">
					<text class="other-text-left">账号密码登录</text>
					<text class="other-text-right" style="color:#4169E1;">
						忘记密码
					</text>
				</view>
			</view>
		</view>
		<!-- 动画 -->
		<view class="ocean"></view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				query: {},
				//是否正在点击
				noClick: true
			};
		},
		computed: {
			...mapState('m_parent', ['token'])
		},
		onLoad() {

		},
		onShow() {
			this.getCode()
		},
		methods: {
			...mapMutations('m_parent', ['updateParentInfo', 'updateToken']),

			//换取code方法
			async getCode() {
				//调用login()拿到code用于换取token
				let [err, res] = await uni.login().catch(err => err)
				//判断调用是否成功
				if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败!')
				//准备换取token参数
				this.query = {
					js_code: res.code
				}
			},

			//调用登录接口换取token
			async getToken() {
				//传入后台换取token
				const loginResult = await uni.$http.post('https://test.teammodel.cn/aclassone/get-miniapp-userinfo',
					this.query)
				if (loginResult.statusCode !== 200) return uni.$showMsg('登录失败!')
				uni.$showMsg('登录成功')
				//更新vuex中token
				console.log(loginResult.data.miniappData);
				this.updateToken(loginResult.data.miniappData)
			},

			//获取用户信息事件
			async getUserInfo() {
				await uni.getUserProfile({
					desc: '获取您的基本信息',
					success: infoRes => {
						if (infoRes.errMsg === 'getUserProfile:ok') {
							this.getToken()
							this.updateParentInfo(infoRes.userInfo)
							uni.redirectTo({
								url: '/subpkg/guide/guide'
							})
						} else {
							uni.$showMsg('获取不到您的信息!')
						}
					},
					fail: err => {
						uni.$showMsg('拒绝授权获取不到您的基本信息!')
					}
				});
			},

		},
	}
</script>

<style lang="scss">
	//登录页面
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #fafafa;

		.tips {
			padding-top: 200rpx;
			padding-left: 80rpx;
			display: flex;
			flex-direction: column;
			z-index: 99;

			.title {
				line-height: 70rpx;
				font-weight: bold;
				font-size: 50rpx;
				z-index: 99;
			}

			.subtitle {
				line-height: 70rpx;
				font-size: 35rpx;
				font-weight: bold;
				color: #b0b0b1;
				z-index: 99;
			}

		}

		.bg1 {
			position: fixed;
			top: -250rpx;
			right: -280rpx;
			width: 650rpx;
			height: 650rpx;
			border-radius: 100%;
			background-color: #4169E1;
			margin-right: 20rpx;
			z-index: 5;
		}

		.bg2 {
			position: fixed;
			top: -100rpx;
			right: -320rpx;
			width: 630rpx;
			height: 630rpx;
			border-radius: 100%;
			margin-top: 40rpx;
			background-color: #ff5959;
			z-index: 4;
		}

		.bg3 {
			position: fixed;
			top: 500rpx;
			right: 480rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #FFC600;
			z-index: 4;
		}



		.form-box {
			padding-top: 250rpx;
			padding-left: 70rpx;
			width: 610rpx;


			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100rpx;
				border-radius: 100rpx;
				border: none;
				color: #FFFFFF;
				font-weight: bold;
				background: linear-gradient(to right, #506AE7, #87CEFA);
				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
				margin-top: 60rpx;
				z-index: 99;
			}

			.other {
				display: flex;
				justify-content: space-between;
				z-index: 99;

				text {
					line-height: 80rpx;
					font-size: 28rpx;
					z-index: 99;
				}

				.other-text-left {
					margin-left: 4rpx;
					margin-top: 20rpx;
					color: #FFFFFF;
					font-weight: bold;
				}

				.other-text-right {
					margin-right: 4rpx;
					margin-top: 20rpx;
					font-weight: bold;
				}
			}
		}
	}



	.ocean {
		display: flex;
		margin-top: -600rpx;
		margin-left: -520rpx;
		width: 1800rpx;
		height: 1800rpx;
		background-color: #4169E1;
		border-radius: 50%;

		&::before,
		&::after {
			content: "";
			position: absolute;
			margin-top: 870rpx;
			width: 1600rpx;
			height: 1600rpx;
			top: 0;
			left: 50%;
			border-radius: 43%;
			background-color: #FFFFFF;
			transform: translate(-50%, -70%) rotate(0);
			animation: rotate 6s linear infinite;
			z-index: 2;
		}

		&::after {
			border-radius: 46%;
			background-color: #FFFFFF;
			opacity: 0.7;
			transform: translate(-50%, -70%) rotate(0);
			animation: rotate 10s linear -5s infinite;
			z-index: 3;
		}

		&::after {
			border-radius: 40%;
			background-color: #FFFFFF;
			opacity: 0.5;
			transform: translate(-50%, -70%) rotate(0);
			animation: rotate 10s linear -5s infinite;
			z-index: 3;
		}

	}

	@keyframes rotate {
		50% {
			transform: translate(-50%, -73%) rotate(180deg);
		}

		100% {
			transform: translate(-50%, -70%) rotate(360deg);
		}
	}
</style>