MiniPrograms/subpkg/startup/login.vue

<!-- 登录页面 -->
<template>
	<view>
		<!-- 登录 -->
		<view class="content">
			<view class="bg1"></view>
			<view class="bg2"></view>
			<view class="bg3"></view>
			<view class="top">
				<text class="YS-title">请登录</text>
				<text class="YS-subtitle">醍摩豆家长端</text>
			</view>

			<button @click="$noMultipleClicks(getUserInfo)" class="btn" plain="true">微信一键登录</button>
		</view>
		<!-- 动画 -->
		<view class="ocean"></view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				//没有点击
				noClick: true
			}
		},
		methods: {
			...mapMutations('m_parent', ['updateParentInfo', 'updateToken']),
			//获取用户信息事件
			async getUserInfo() {
				await uni.getUserProfile({
					desc: '获取您的基本信息',
					success: infoRes => {
						uni.login({
							success: loginRes => {
								this.$api.getUserToken({
									js_code: loginRes.code
								}).then(res => {
									this.updateToken(res.data)
									// uni.setStorageSync('tokenKey',res.data.token)
								}).catch(err => {
									uni.showToast({
										title: '加载数据失败~',
										icon: 'none',
									})
								})
							}
						})
						this.updateParentInfo(infoRes.userInfo)
						uni.redirectTo({
							url: '/subpkg/startup/guide'
						})
					},
					fail: err => {
						uni.showToast({
							title: '您已拒绝授权',
							icon: 'error'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	@import 'startup_pages.scss';

	//登录页面
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;

		.bg1 {
			position: fixed;
			top: -250rpx;
			right: -250rpx;
			width: 680rpx;
			height: 680rpx;
			border-radius: 100%;
			background-color: $color-blue;
			z-index: 5;
		}

		.bg2 {
			position: fixed;
			right: -300rpx;
			top: 200rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: $color-red;
			z-index: 4;
		}

		.bg3 {
			position: fixed;
			top: 500rpx;
			right: 450rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: $color-yellow;
			z-index: 4;
		}
	}
</style>