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

<template>
	<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">
							<image class="cell-icon" src="/static/my-icons/details.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/dailyclock.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>
			<!-- 日历组件 -->
			<u-calendar :show="show" mode="single" @confirm="confirm"></u-calendar>
			
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	
	export default {
		computed:{
			...mapState('m_parent',['parentinfo','parentdetail']),
			...mapState('m_children',['childreninfo'])
		},
		name: 'mini-userinfo',
		
		data() {
			return {
				
				show: false,
				
				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']),
			//日历事件
			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.updateToken('')
					uni.navigateTo({
						url:'/subpkg/login/login'
					})
				}
			},
			//切换孩子
			chooseChildren(){
				// if(parentdetail.childrenList.length == 1)
				// return uni.showMsg('您只有一个孩子，不能切换')
				uni.navigateTo({
					url: '/subpkg/guide/guide'
				})
			},
			//修改孩子信息
			updateChildrenInfo(e){
				console.log(e);
			}
			
		}
	}
</script>

<style lang="scss">
.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: 90px;
				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: 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;
					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;
		
					.cell-icon {
						width: 50rpx;
						height: 50rpx;
					}
		
					.cell-text {
						color: #666;
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}
			}
	}
</style>