MiniPrograms/subpkg/info/parentpage.vue

<template>
	<view class="container">
		<!-- 返回按钮 -->
		<back @click="returnMy"></back>
		<!-- 头部信息 -->
		<view class="top-info">
			<image class="top-avatar" :src="parentinfo.avatarUrl" size="100"></image>
			<view class="top-name">
				<text class="name">{{parentinfo.nickName}}</text>
				<text class="detail">账号: {{parentdetail.phoneNumber}}</text>
			</view>
		</view>

		<!-- 内容列表 -->
		<view class="card-box">
			<u-cell-group :border="false">
				<view class="i-item">
					<view class="t-icon t-icon-huiyuan"></view>
					<u-cell class="cell-box" size="large" title="我的订阅" :label="myData.subscribeLevel"
						:border="false"></u-cell>
				</view>
				<view class="i-item">
					<view class="t-icon t-icon-keji"></view>
					<u-cell class="cell-box" size="large" title="订阅权益" :label="myData.subscribePrivilege" :border="false"></u-cell>
				</view>
				<view class="i-item">
					<view class="t-icon t-icon-qingjiashenqing"></view>
					<u-cell class="cell-box" size="large" title="订阅时间" :label="myData.subscribeTime" :border="false">
					</u-cell>
				</view>
			</u-cell-group>
			<!-- 横向内容列表 -->
			<view class="title-box-name">我的孩子</view>
			<view style="display: flex; flex-wrap: wrap; align-items: center;margin: 0 40rpx 0 40rpx;">
				<view class="data-box-item" v-for="(item,index) in parentdetail.childrenList" :key="index">
					<view class="flex">
						<view class="start-tag-boy" v-show="item.gender == '男'"></view>
						<view class="start-tag-girl" v-show="item.gender == '女'"></view>
						<view class="item-text">{{item.name}}</view>
					</view>
					<view class="avatar-box">
						<u-avatar size="100" class="item-avatar" :src="item.avatar" mode="aspectFill"></u-avatar>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_parent', ['parentinfo', 'parentdetail','myData'])
		},
		data() {
			return {

			};
		},
		methods: {
			//返回成绩页面
			returnMy() {
				uni.switchTab({
					url: '/pages/my/my'
				})
			},
		},
	}
</script>

<style lang="scss">
	@import '@/subpkg/common/infopage.scss';

	.container {
		background: linear-gradient($color-blue, $page-background-color);
	}

	.avatar-box {
		margin-top: -10rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.item-avatar {
			width: 220rpx;
			height: 220rpx;
		}
	}
	.start-tag-boy{
		height: 30rpx;
		width: 10rpx;
		border-radius: 100rpx;
		background-image: linear-gradient($color-mixblue 60%, #FFF);
	}
	.start-tag-girl{
		height: 30rpx;
		width: 10rpx;
		border-radius: 100rpx;
		background-image: linear-gradient($color-pink 60%, #FFF);
	}
</style>