MiniPrograms/components/mini-userinfo/mini-userinfo.vue

<template>
	<view class="userinfo-container">
			<!-- 家长信息头部 -->
			<view class="userinfo-topinfo">
				<image class="parent-avatar" :src="parentinfo.avatarUrl"></image>
				<view class="parent-name">
					<text class="name">{{parentinfo.nickName}}</text>
					<text class="detail">{{childreninfo.nickName + '家长'}}</text>
				</view>
			</view>
			<!-- 面板区域 -->
			<view class="box-cart">
				<view class="cart-big">
					<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">
						<image class="cart-icon-sim" src="/static/my-icons/childrenmessage.png"></image>
						<text class="cart-text-sim">信息管理</text>
					</view>
					<view class="cart-item">
						<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-wrap">
					<view class="cell">
						<view class="cell-left">
							<image class="cell-icon" src="/static/my-icons/dailyclock.png" mode="aspectFill"></image>
							<view class="cell-text">学习打卡</view>
						</view>
					</view>
					<view class="cell">
						<view class="cell-left">
							<image class="cell-icon" src="/static/my-icons/details.png" mode="aspectFill"></image>
							<view class="cell-text">个人信息</view>
						</view>
					</view>
					<view class="cell" @click="logout()">
						<view class="cell-left">
							<image class="cell-icon" src="/static/my-icons/setting.png" mode="aspectFill"></image>
							<view class="cell-text">退出登录</view>
						</view>
					</view>
				</view>
			</view>
	
			<!-- 用户服务 -->
			<view class="com-item">
				<view class="com-box">
					<view class="cell" v-for="(item, index) in serverList" :key="index" @click="nav(item.path)">
						<view class="cell-left">
							<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
							<view class="cell-text">{{ item.title }}</view>
						</view>
					</view>
				</view>
			</view>
			
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	
	export default {
		computed:{
			...mapState('m_parent',['parentinfo']),
			...mapState('m_children',['childreninfo'])
		},
		name: 'mini-userinfo',
		
		data() {
			return {
				
				serverList: [{
						title: '客服中心',
						icon: '/static/my-icons/service.png',
						path: '../xq/index?id=3'
					},
					{
						title: '帮助中心',
						icon: '/static/my-icons/help.png',
						path: '../xq/index?id=2'
					},
					{
						title: '用户协议',
						icon: '/static/my-icons/agreement.png',
						path: '../xq/index?id=4'
					}
				]
			};
		},
		methods:{
			...mapMutations('m_parent',['updateParentDetail','updateToken']),
			...mapMutations('m_children',['updateChildrenInfo']),
			
			async logout(){
				const [err,succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗?'
				}).catch(err => err)
				if(succ && succ.confirm)
				{
					this.updateChildrenInfo({})
					this.updateParentDetail({})
					this.updateToken('')
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.userinfo-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: 10px;
			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: 13px;
				margin: 2px 0px 0px 5px;
			}
			.detail{
				color: #3B4144;
				font-weight: bold;
				margin: 5px 0px 0px 5px;
			}
		}
		// 面板区域
		.box-cart{
			margin: -100rpx 20rpx 20rpx 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			justify-content: space-around;
			
			.cart-big{
				border-radius: 15rpx;
				overflow: hidden;
				margin: 10px 0 10px 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #FFFFFF;
				box-shadow: 0 5px 5px rgba(0,0,0,0.1);
				
				.cart-icon{
					width: 60px;
					height: 90px;
					margin: 10px 10px 0px 10px;
				}
				.cart-text{
					margin: 10px;
					font-size: 15px;
				}
			}
			
			.cart-small{
				width: 65%;
				height: 150px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
				.cart-item{
					background-color: #FFFFFF;
					box-shadow: 0 5px 5px rgba(0,0,0,0.1);
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 10px;
					border-radius: 15rpx;
					overflow: hidden;
					
					.cart-icon-sim{
						width: 50rpx;
						height: 50rpx;
						margin: 10px;
					}
					.cart-text-sim{
						margin: 10px;
						font-size: 15px;
						color: #3B4144;
					}
				}
			}
		}
		// 功能列表
		.com-item {
				margin-left: 20rpx;
				margin-right: 20rpx;
				margin-top: 20rpx;
				box-shadow: 0 5px 5px rgba(0,0,0,0.1);
				border-radius: 25rpx;
		
				.com-box {
					border-radius: 25rpx;
					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;
		
					.cell-icon {
						width: 50rpx;
						height: 50rpx;
					}
		
					.cell-text {
						color: #666;
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}
			}
	}
</style>