MiniPrograms/pages/tab_mine/tab_mine.vue

<template>
	<view>
		<view class="content">
			<view class="bg1"></view>
			<view class="bg2"></view>
			<view class="bg3"></view>
			<!-- 个人信息 -->
			<view class="info-box">
				<image class="avatar" :src="parentInfo.avatarUrl"></image>
				<view class="flex-column">
					<view class="YS-title" style="font-size: 55rpx;">{{parentInfo.nickName}}</view>
					<view class="YS-subtitle" style="font-size: 40rpx;">{{childInfo.name}}家长</view>
				</view>
			</view>
			<!-- 卡片列表 -->
			<view class="card-view" style="margin-top: 50rpx;">
				<view class="card-item" style="background-color: #d7e4ff;" @click="navChooseChild">
					<view class="flex-row">
						<view class="t-icon t-icon-a-boshimaojiaoyu"></view>
						<view class="flex-column">
							<view class="box-title">孩子切换</view>
							<view class="box-subtitle">查看更多信息</view>
						</view>
					</view>
				</view>
				<view class="card-item" style="background-color: #ffe1e7;" @click="navChildInfo">
					<view class="flex-row">
						<view class="t-icon t-icon-a-jiangpaijiangzhang"></view>
						<view class="flex-column">
							<view class="box-title">孩子名片</view>
							<view class="box-subtitle">晒出优秀表现</view>
						</view>
					</view>
				</view>
				<!-- 功能模块 -->
				<view class="card-item" style="width: 100%;">
					<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"></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" v-if="userData.msgList.length != 0">
								<view style="margin-right: 20rpx;">
									<u-badge type="warning" shape="horn" :value="userData.msgList.length"></u-badge>
								</view>
								<view class="t-icon t-icon-you"></view>
							</view>
						</view>
						<view class="cell" @click="navSubscribe">
							<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"></view>
						</view>
					</view>
				</view>
				<!-- 功能模块 -->
				<view class="card-item" style="width: 100%;">
					<view class="com-box">
						<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"></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"></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"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_parent', ['parentInfo', 'userData', 'childrenData']),
			...mapState('m_children', ['childInfo'])
		},
		data() {
			return {};
		},
		methods: {
			...mapMutations('m_parent', ['updateToken', 'updateParentInfo', 'updatePhoneNumber', 'updateChildrenData',
				'updateUserData'
			]),
			...mapMutations('m_children', ['updateChildInfo']),
			//退出登录事件
			async logOut() {
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗?'
				}).catch(err => err)
				if (succ && succ.confirm) {
					this.$logOut()
				}
			},
			//切换孩子
			navChooseChild() {
				uni.navigateTo({
					url: '/subpkg/startup/options'
				})
			},
			//孩子名片
			navChildInfo() {
				let tmdidArr = this.childrenData.map(x => {
					return x.tmdid
				})
				let index = tmdidArr.indexOf(this.childInfo.tmdid)
				uni.navigateTo({
					url: `/subpkg/mine/childInfo?index=${index}`
				})
			},
			//家长信息
			navInfo() {
				uni.navigateTo({
					url: '/subpkg/mine/parentInfo'
				})
			},
			//我的消息
			navMsg() {
				uni.navigateTo({
					url: '/subpkg/mine/msgList'
				})
			},
			//订阅信息
			navSubscribe() {
				uni.navigateTo({
					url: '/subpkg/mine/subInfo'
				})
			}


		}
	}
</script>

<style lang="scss">
	//登录页面
	.content {
		height: 100%;
		width: 100%;
		overflow-x: hidden;

		.bg1 {
			position: fixed;
			top: -250rpx;
			right: -250rpx;
			width: 680rpx;
			height: 680rpx;
			border-radius: 100%;
			background-color: $color-blue;
			z-index: 5;
		}

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

		.bg3 {
			position: fixed;
			top: 500rpx;
			right: 450rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: $color-yellow;
			z-index: 4;
		}

		.info-box {
			width: 100%;
			margin-top: 200rpx;
			margin-left: 40rpx;
			display: flex;
			align-items: center;
			z-index: 10;

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

			.flex-column {
				margin-left: 40rpx;
				width: 200rpx;
				height: 120rpx;
				justify-content: space-around;
			}
		}

		// 功能按钮模块
		.com-box {
			overflow: hidden;
			border-radius: $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: 30rpx;
						line-height: 40rpx;
						margin-left: 20rpx;
						font-family: YSfont;
						font-weight: 300;
					}
				}

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

					.u-badge {
						margin-right: 10rpx;
					}
				}
			}
		}
	}

	.flex-row {
		.flex-column {
			margin: 30rpx 0 30rpx 25rpx;

			.box-title {
				font-size: 40rpx;
				line-height: 80rpx;
				color: $title;
				font-family: YSfont;
			}

			.box-subtitle {
				font-size: 30rpx;
				line-height: 50rpx;
				color: $subtitle;
				font-family: YSfont;
			}
		}

		.t-icon {
			width: 60rpx;
			height: 60rpx;
			margin-left: 25rpx;
		}
	}
</style>