jpcj-xcx/pages/index/components/login.vue

<template>
	<view class="login">
		<loadSke :loading='getUserInfo'>
			<view class="user-info">
				<view class="avatar">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				<view class="nickname">
					<open-data type="userNickName"></open-data>
				</view>
				<button open-type="getUserProfile" @tap="getUserProfile">授权用户头像信息</button>
			</view>
		</loadSke>
	</view>
</template>

<script>
	import loadSke from '@/components/skeleton/login.vue'
	export default {
		components: {
			loadSke
		},
		props: ['login'],
		data: () => ({
			getUserInfo: true
		}),
		async created() {
			this.init()
		},
		methods: {
			async init() {
				if (true) {
					let loginRes = await this.$store.dispatch('Login')
					if (loginRes.code == 200) {
						this.$emit('update:login', true)
					}else{
						this.Toast('登录失败');
						this.$emit('update:login', true)
					}
				} else {
					this.getUserInfo = false
				}
			},
			getUserProfile: function(e) {
				wx.getUserProfile({
					desc: '业务需要',
					success: res => {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100vw;
		height: 80vh;
		display: flex;
		justify-content: center;
		align-items: center;

		.user-info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.avatar {
				border-radius: 50%;
				width: 100px;
				height: 100px;
				overflow: hidden;
			}

			.nickname {
				text-align: center;
			}
		}
	}
</style>