examTeamApp/components/headerIndex.vue

<template>
	<view>
		<view class="header">
			<view class="top" v-if="userList.length">
				<view class="headimg">
					<image :src="user.head_pic"></image>
				</view>
				<view class="info">
					<view class="size20 bold">{{user.nickname}}</view>
					<view class="mt-5">年龄：{{user.age}}岁</view>
					<view>{{$t("index.birthday")}}：{{user.birthday}}</view>
				</view>
				<text class="t-icon t-icon-qiehuan1" @click="$store.commit('changeDrawe', true)" v-if="isLeft"></text>
			</view>
			<view class="top" v-else @click="handleAddUser">
				<view class="info">
					暂无成员，请先添加~
				</view>
				<view class="add">
					+
				</view>
			</view>
		</view>
		<!-- 地区 -->
		<view class="area" v-if="isArea">
			<view>
				<text>当前地区标准：</text>
				<text>北京</text>
			</view>
		</view>
		<!-- 切换成员 -->
		<drawer></drawer>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import drawer from "@/components/drawer.vue"
	export default {
		name: "headerIndex",
		components: {
			drawer
		},
		props: {
			isArea: {
				type: Boolean,
				default: true
			},
			isLeft: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {};
		},
		computed: {
			...mapState({
				user: state => state.user,
				userList: state => state.familayList
			})
		},
		mounted() {},
		methods: {
			// 添加成员
			handleAddUser() {
				uni.navigateTo({
					url: "/pages/me/userInfo"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		display: flex;
		flex-wrap: wrap;
		margin-left: 15px;
		width: calc(100% - 70px);

		view {
			width: 100%;
		}

		last-child {
			margin-top: 2px !important;
		}
	}

	.area {
		margin: 15px 10px 0;
		padding: 15px 10px 10px;
		background-color: #fff;
		width: calc(100% - 40px);
		display: flex;
		border-radius: 10px;
		justify-content: space-between;
	}
</style>