MiniPrograms/pages/my/my.vue

<template>
	<view class="my-container">
		<view class="bg1"></view>
		<view class="bg2"></view>
		<!-- 家长信息头部 -->
		<view class="userinfo-topinfo">
			<image class="parent-avatar" :src="parentinfo.avatarUrl" @click="getUserInfo"></image>
			<view class="parent-name">
				<text class="name" @click="getUserInfo">{{parentinfo.nickName}}</text>
				<text class="detail" @click="getUserInfo">{{childreninfo.name + '家长'}}</text>
			</view>
		</view>
		
		
		<!-- 功能组件 -->
		<view class="userinfo-container">
				
				<!-- 面板区域 -->
				<view class="box-cart" >
					<view class="cart-big" @click="updateChildrenInfo">
						<image class="cart-icon" src="/static/my-icons/boy-my.png" mode="aspectFill"></image>
						<text class="cart-text">孩子信息</text>
					</view>
					
					<view class="cart-small">
						<view class="cart-item" @click="show = true">
							<image class="cart-icon-sim" src="/static/my-icons/childrenmessage.png"></image>
							<text class="cart-text-sim">学习打卡</text>
						</view>
						
						<view class="cart-item" @click="chooseChildren">
							<image class="cart-icon-sim" src="/static/my-icons/mychildren.png" mode="aspectFill"></image>
							<text class="cart-text-sim">孩子管理</text>
						</view>
						
					</view>
				</view>
				
				<!-- 用户功能 -->
				<view class="com-item">
					<view class="com-box">
						<view class="cell">
							<view class="cell-left">
								<view class="t-icon t-icon-order_dingdan" ></view>
								<view class="cell-text">个人信息</view>
							</view>
						</view>
						<view class="cell">
							<view class="cell-left">
								<view class="t-icon t-icon-comment_wodepinglun" ></view>
								<view class="cell-text">我的消息</view>
							</view>
						</view>
						<view class="cell" @click="logout">
							<view class="cell-left">
								<view class="t-icon t-icon-Setting_shezhi"></view>
								<view class="cell-text">退出登录</view>
							</view>
						</view>
					</view>
				</view>
		
				<!-- 用户服务 -->
				<view class="com-item">
					<view class="com-box">
						<view class="cell">
							<view class="cell-left">
								<view class="t-icon t-icon-integration_jifen"></view>
								<view class="cell-text">客服中心</view>
							</view>
						</view>
						<view class="cell">
							<view class="cell-left">
								<view class="t-icon t-icon-question_wodewenda"></view>
								<view class="cell-text">帮助中心</view>
							</view>
						</view>
						<view class="cell">
							<view class="cell-left">
								<view class="t-icon t-icon-contract_hetong"></view>
								<view class="cell-text">用户协议</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 日历组件 -->
				<u-calendar class="calendar" :show="show" mode="single" @confirm="confirm"></u-calendar>
				
		</view>
	</view>
</template>

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

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

		data() {
			return {
				show: false,
			};
		},
		onLoad() {},
		methods: {
			...mapMutations('m_parent',['updateParentDetail','updateParentInfo','updateToken']),
			...mapMutations('m_children',['updateChildrenInfo']),
			//日历事件
			confirm(e){
				console.log('confirm',e)
				uni.$showMsg('打卡成功!')
				this.show = false
			},
			//退出登录事件
			async logout(){
				const [err,succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗?'
				}).catch(err => err)
				if(succ && succ.confirm)
				{
					this.updateChildrenInfo()
					// this.updateParentDetail()
					this.updateParentInfo()
					this.updateToken()
					
					uni.reLaunch({
						url:'/subpkg/login/login'
					})
				}
			},
			//切换孩子
			chooseChildren(){
				// if(parentdetail.childrenList.length == 1)
				// return uni.showMsg('您只有一个孩子，不能切换')
				uni.navigateTo({
					url: '/subpkg/guide/guide'
				})
			},
			//修改孩子信息
			updateChildrenInfo(e){
				console.log(e);
			},
			//获取用户信息事件
			async getUserInfo(e) {
				console.log(e);
				console.log(uni.getStorageSync('parentinfo'));
				  if (!uni.getStorageSync('parentinfo')) {
					await 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%;
		.bg1{
			position: fixed;
			top: -250rpx;
			right: -280rpx;
			width: 700rpx;
			height: 700rpx;
			margin-right: 250px;
			border-radius: 100%;
			background-color: #6495ed;
			z-index: -1;
		}
		.bg2{
			position: fixed;
			top: -170rpx;
			right: -250rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #4169E1;
			z-index: -2;
		}

		.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: #303133;
					font-size: 14px;
					margin: 2px 0px 0px 5px;
				}

				.detail {
					color: #000000;
					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;
				}
			}
		}
		.userinfo-container{
				height: 100%;
				
				// 面板区域
				.box-cart{
					margin: -100rpx 20rpx 20rpx 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					justify-content: space-around;
					
					.cart-big{
						border-radius: 15rpx;
						width: 80px;
						height: 120px;
						overflow: hidden;
						margin: 10px 0 10px 0;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						background-color: #FFFFFF;
						box-shadow: 0 2px 4px rgba(0,0,0,0.05);
						
						.cart-icon{
							width: 55px;
							height: 80px;
							margin: 10px 10px 0px 10px;
						}
						.cart-text{
							margin: 10px;
							font-size: 15px;
						}
					}
					
					.cart-small{
						width: 65%;
						height: 130px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						
						.cart-item{
							height: 35px;
							background-color: #FFFFFF;
							display: flex;
							flex-direction: row;
							align-items: center;
							padding: 10px;
							border-radius: 15rpx;
							overflow: hidden;
							box-shadow: 0 2px 4px rgba(0,0,0,0.05);
							
							.cart-icon-sim{
								width: 50rpx;
								height: 50rpx;
								margin: 10px;
							}
							.cart-text-sim{
								margin: 10px;
								font-size: 15px;
								color: #3B4144;
							}
						}
					}
				}
				// 功能列表
				.com-item {
						margin-top: 20rpx;
				
						.com-box {
							overflow: hidden;
						}
					}
				
					.cell {
						height: 80rpx;
						padding-left: 20rpx;
						padding-right: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background: #fff;
						border-bottom: 1px solid #f8f8f8;
				
						&:active {
							background: #f2f2f2;
						}
				
						&:last-child {
							border-bottom: none !important;
						}
				
						.cell-left {
							display: flex;
							align-items: center;
							padding-left: 20rpx;
				
							.cell-icon {
								width: 50rpx;
								height: 50rpx;
							}
				
							.cell-text {
								color: #666;
								font-size: 28rpx;
								margin-left: 20rpx;
							}
						}
					}
					.calendar{
						z-index: 999;
					}
			}

	}
</style>