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"></image>
			<view class="parent-name">
				<text class="name">{{parentinfo.nickName}}</text>
				<u-tag :text="childreninfo.name + '家长'" shape="circle" plain plainFill></u-tag>
			</view>
		</view>

		<!-- 功能组件 -->
		<view class="userinfo-container">
			<!-- 面板区域 -->
			<view class="box-cart">
				<view class="box-cart-item left-box" @click="chooseChildren">
					<view class="t-icon t-icon-a-boshimaojiaoyu"></view>
					<view class="card-text">
						孩子管理
						<view class="card-des">
							查看您的孩子
						</view>
					</view>
				</view>
				<view class="box-cart-item right-box" @click="childrenInfo">
					<view class="t-icon t-icon-a-jiangpaijiangzhang"></view>
					<view class="card-text">
						孩子名片
						<view class="card-des">
							晒出TA的优秀表现
						</view>
					</view>
				</view>
			</view>

			<!-- 用户功能 -->
			<view class="com-item">
				<view class="com-box">
					<view class="cell" @click="navInfo">
						<view class="cell-left">
							<view class="t-icon t-icon-zhanghu"></view>
							<view class="cell-text">个人信息</view>
						</view>
						<view class="t-icon t-icon-you" style="width: 45rpx;height: 45rpx;"></view>
					</view>
					<view class="cell" @click="navMsg">
						<view class="cell-left">
							<view class="t-icon t-icon-a-liaotianpingluntaolunduihua"></view>
							<view class="cell-text">我的消息</view>
						</view>
						<view class="cell-right">
							<view style="margin-right: 20rpx;">
								<u-badge type="warning" shape="horn" :value="myData.msgList.length"></u-badge>
							</view>
							<view class="t-icon t-icon-you" style="width: 45rpx;height: 45rpx;"></view>
						</view>
					</view>
					<view class="cell" @click="logout">
						<view class="cell-left">
							<view class="t-icon t-icon-a-tuichulikai"></view>
							<view class="cell-text">退出登录</view>
						</view>
						<view class="t-icon t-icon-you" style="width: 45rpx;height: 45rpx;"></view>
					</view>
				</view>
			</view>
			<!-- 用户服务 -->
			<view class="com-item">
				<view class="com-box">
					<view class="cell" @click="mySubscribe">
						<view class="cell-left">
							<view class="t-icon t-icon-shoucang"></view>
							<view class="cell-text">订阅中心</view>
						</view>
						<view class="t-icon t-icon-you" style="width: 45rpx;height: 45rpx;"></view>
					</view>
					<view class="cell">
						<view class="cell-left">
							<view class="t-icon t-icon-a-appyingyongchengxukaifa"></view>
							<view class="cell-text">帮助中心</view>
						</view>
						<view class="t-icon t-icon-you" style="width: 45rpx;height: 45rpx;"></view>
					</view>
					<view class="cell">
						<view class="cell-left">
							<view class="t-icon t-icon-shuji"></view>
							<view class="cell-text">用户协议</view>
						</view>
						<view class="t-icon t-icon-you" style="width: 45rpx;height: 45rpx;"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

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

		data() {
			return {
				show: false,
			};
		},
		onLoad() {},
		methods: {
			...mapMutations('m_parent', ['updateParentDetail', 'updateParentInfo', 'updateToken','updateMyData']),
			...mapMutations('m_children', ['updateChildrenInfo', 'updateChildrenSemester','updateChildrenSemesterList']),
			//退出登录事件
			async logout() {
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗?'
				}).catch(err => err)
				if (succ && succ.confirm) {
					this.updateChildrenInfo()
					this.updateChildrenSemester()
					this.updateParentDetail()
					this.updateParentInfo()
					this.updateToken()
					this.updateMyData()
					this.updateChildrenSemesterList()

					uni.reLaunch({
						url: '/subpkg/login/login'
					})
				}
			},
			//切换孩子
			chooseChildren() {
				// if(parentdetail.childrenList.length == 1)
				// return uni.showMsg('您只有一个孩子，不能切换')
				// if(uni.getStorageSync('parentdetail')){
				// 	uni.setStorageSync('parentdetail',)
				// }
				uni.navigateTo({
					url: '/subpkg/guide/childrenlist'
				})
			},
			//孩子名片
			childrenInfo() {
				uni.navigateTo({
					url: '/subpkg/info/childrenpage'
				})
			},
			//我的消息
			navMsg() {
				uni.navigateTo({
					url: '/subpkg/mydata/notificationpage'
				})
			},
			//我的信息
			navInfo() {
				uni.navigateTo({
					url: '/subpkg/info/parentpage'
				})
			},
			mySubscribe(){
				uni.navigateTo({
					url: '/subpkg/mydata/subscribepage'
				})
			}

		}
	}
</script>

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

		.bg1 {
			position: fixed;
			top: -320rpx;
			right: -300rpx;
			width: 800rpx;
			height: 800rpx;
			margin-right: 500rpx;
			border-radius: 50%;
			background-color: #6495ed;
			z-index: -1;
		}

		.bg2 {
			position: fixed;
			top: -200rpx;
			right: -300rpx;
			width: 800rpx;
			height: 800rpx;
			border-radius: 100%;
			background-color: $color-mixblue;
			z-index: -2;
		}

		.userinfo-topinfo {
			height: 350rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.parent-avatar {
				margin-top: 40rpx;
				margin-left: 40rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 100%;
				border: 6rpx solid #FFFFFF;
				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
			}

			.parent-name {
				margin-top: 40rpx;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				font-weight: bold;

				.name {
					color: $color-title;
					font-size: 36rpx;
					font-weight: bold;
					margin-left: 10rpx;
				}

				.u-tag {
					margin-top: 10rpx !important;
					height: 40rpx;
					line-height: 36rpx;

					.u-tag__text {
						font-size: 24rpx !important;
					}
				}

				.detail {
					height: 20rpx;
					font-size: 24rpx;
					margin: 10rpx 0 0 10rpx;
				}
			}
		}

		.userinfo-container {
			height: 100%;

			.box-cart {
				height: 180rpx;
				padding: 0 4%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.box-cart-item {
					width: 48%;
					height: 100%;
					padding-left: 20rpx;
					border-radius: $card-border-radius;
					background-color: #fff;
					display: flex;
					align-items: center;
					box-sizing: border-box;

					.t-icon {
						width: 60rpx !important;
						height: 60rpx !important;
						margin-right: 20rpx;
					}

					.card-text {
						font-size: 32rpx;
						font-weight: bolder;
						margin: 20rpx 0;
						color: #576064;

						.card-des {
							margin-top: 10rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: $color-subtitle;
						}
					}
				}

				.left-box {
					background-image: linear-gradient(to top, #d7e4ff 0%, #d7e4ff 100%);
				}

				.right-box {
					background-image: linear-gradient(to top, #ffe1e7 0%, #ffe1e7 100%);
				}
			}

			// 功能列表
			.com-item {
				width: 92%;
				margin: 20rpx 4% 0 4%;

				.com-box {
					overflow: hidden;
					border-radius: $card-border-radius;
				}
			}

			.cell {
				height: 100rpx;
				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;

					.t-icon {
						width: 40rpx;
						height: 40rpx;
					}

					.cell-text {
						color: #666;
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}

				.cell-right {
					display: flex;
					align-items: center;

					.u-badge {
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>