wx-qhb/pages/mine/mine.vue

<template>
	<!-- 我的 -->
	<view class="mine">
		<!-- 头部个人信息 -->
		<view class="mine-top">
			<image class="header-img"
				src="https://c-ssl.dtstatic.com/uploads/blog/202201/23/20220123222213_2899a.thumb.1000_0.jpeg" alt="" />
			<view class="user-info">
				<view class="name">姓名：张三</view>
				<text class="user-id">ID:123455</text>
			</view>
			<view class="user-home" >主页 <text class="home-right"></text> </view>
		</view>
		<!-- 头部个人信息 -->
		
		<!-- 余额组件 -->
		<MineMoney :isTeam="isTeam" />
		<!-- 余额组件 -->
		
		<!-- 商城订单 -->
		<MallOrderForm />
		<!-- 商城订单 -->
		
		<!-- 团长功能组件 -->
		<TeamFunction v-if="isTeam" />
		<!-- 团长功能组件 -->
		
		<!-- 非团长组件 -->
		<PersonalFunction v-else />

		<!-- 底部tab栏 -->
		<kj-tabbar :value1=4></kj-tabbar>
		<!-- 底部tab栏 -->
	</view>
</template>

<script>
	import MineMoney from './component/mineMoney.vue';
	import MallOrderForm from './component/mallOrderForm.vue';
	import TeamFunction from './component/teamFunction.vue';
	import PersonalFunction from './component/personalFunction.vue';
	export default {
		components:{
			MineMoney,
			MallOrderForm,
			TeamFunction,
			PersonalFunction
		},
		data() {
			return {
				isTeam:true,//用来判断当前用户是不是团长
			};
		},
		created() {
			//设置顶部标题栏颜色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#f4f4f4'
			})
		}
	}
</script>

<style lang="scss">

	.mine {
		padding-left: 10px;
		background-color: #f4f4f4;
		padding-right: 10px;
	}

	.mine-top {
		display: flex;
		align-items: center;
		position: relative;

		.header-img {
			height: 54px;
			width: 54px;
			border-radius: 50%;
			margin-right: 10px;
		}
		.user-info{
			.name{
				margin-bottom: 4px;
				color: #222;
				font-size: 18px;
				font-weight: 600;
			}
			.user-id{
				font-size: 12px;
				color: #333;
			}
		}
		.user-home {
			position: absolute;
			right: 0;
			width: 72px;
			height: 28px;
			background-color: #eee;
			text-align: center;
			font-size: 13px;
			font-size: #333;
			line-height: 28px;
			border-radius: 14px 0 0 14px;
			.home-right{
				display: inline-block;
				width: 10px;
				height: 10px;
				background-image: url('../../static/mine/right.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-right: 4px;
			}
		}
	}
</style>