MiniPrograms/pages/my/my.vue

<template>
	<view class="my-container">
		<!-- 家长信息头部 -->
		<view class="userinfo-topinfo">
			<image class="parent-avatar" :src="parentinfo.avatarUrl" @click="getUserInfo"></image>
			<view class="parent-name" @click="getUserInfo">
				<text class="name">{{parentinfo.nickName}}</text>
				<text class="detail">{{childreninfo.name + '家长'}}</text>
			</view>
		</view>
		<!-- 功能组件 -->
		<mini-userinfo v-if="parentdetail"></mini-userinfo>
	</view>
</template>

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

	export default {
		computed: {
			...mapState('m_parent', ['token', 'parentdetail', 'parentinfo']),
			...mapState('m_children', ['childreninfo'])
		},

		data() {
			return {

			};
		},
		onLoad() {},
		methods: {
			...mapMutations('m_parent', ['updateParentInfo']),

			getUserInfo(e) {
				if (!uni.getStorageSync('parentinfo')) {
					uni.getUserProfile({
						desc: '获取您的昵称，头像，地区信息',
						success: infoRes => {
							if (infoRes.errMsg === 'getUserProfile:ok') {
								this.updateParentInfo(infoRes.userInfo)
							} else {
								uni.$showMsg('获取不到您的基本信息!')
							}
						},
						fail: err => {
							console.log('getUserInfo-error', JSON.stringify(err))
						}
					});
				}
			},


		}
	}
</script>

<style lang="scss">
	page,
	.my-container {
		height: 100%;

		.userinfo-topinfo {
			height: 400rpx;
			background: linear-gradient(#ff5959, #f1f3f5);
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.parent-avatar {
				margin-top: 11px;
				margin-left: 20px;
				width: 60px;
				height: 60px;
				border-radius: 35px;
				border: 3px solid #FFFFFF;
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
			}

			.parent-name {
				margin-top: 10px;
				margin-left: 10px;
				display: flex;
				flex-direction: column;
				font-weight: bold;

				.name {
					color: #6b778d;
					font-size: 14px;
					margin: 2px 0px 0px 5px;
				}

				.detail {
					color: #3B4144;
					font-weight: bold;
					margin: 5px 0px 0px 5px;
				}
			}

			.parent-avatar {
				margin-top: 11px;
				margin-left: 20px;
				width: 60px;
				height: 60px;
				border-radius: 35px;
				border: 3px solid #FFFFFF;
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
			}

			.parent-name {
				margin-top: 10px;
				margin-left: 10px;
				display: flex;
				flex-direction: column;
				font-weight: bold;

				.name {
					color: #6b778d;
					font-size: 14px;
					margin: 2px 0px 0px 5px;
				}

				.detail {
					color: #3B4144;
					font-weight: bold;
					margin: 5px 0px 0px 5px;
				}
			}
		}

	}
</style>