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_cloumn">
					<view class="YS-title" style="font-size: 55rpx;">{{parentInfo.nickName}}</view>
					<view class="YS-title" style="font-size: 40rpx;color: #909399;">{{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"
							style="width: 60rpx;height: 60rpx;margin-left: 25rpx;"></view>
						<view class="flex_cloumn" style="margin: 30rpx 0 30rpx 25rpx;">
							<view class="YS-title" style="margin: 20rpx 0;font-size: 40rpx;font-size: 300">孩子切换</view>
							<view class="YS-title" style="font-size:30rpx;margin: 10rpx 0;color: #909399;">查看更多信息</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"
							style="width: 60rpx;height: 60rpx;margin-left: 25rpx;"></view>
						<view class="flex_cloumn" style="margin: 30rpx 0 30rpx 25rpx;">
							<view class="YS-title" style="margin: 20rpx 0;font-size: 40rpx;font-size: 300;">孩子名片</view>
							<view class="YS-title" style="font-size:30rpx;margin: 10rpx 0;color: #909399;">晒出优秀表现</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" 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" 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" style="width: 45rpx;height: 45rpx;"></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" style="width: 45rpx;height: 45rpx;"></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" 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>
	</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.updateToken()
					this.updateParentInfo()
					this.updatePhoneNumber()
					this.updateChildrenData()
					this.updateUserData()
					this.updateChildInfo()
					uni.reLaunch({
						url: '/subpkg/startup/login'
					})
				}
			},
			//切换孩子
			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/messagelist'
				})
			},
			//订阅信息
			navSubscribe(){
				uni.navigateTo({
					url: '/subpkg/mine/subscribeinfo'
				})
			}
			
			
		}
	}
</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_cloumn {
				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: 28rpx;
						margin-left: 20rpx;
					}
				}

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

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