jp-floorlock-manage/pages/myTab/index.vue

<template>
	<view>
		<view class="gradient-header">
			<view class="jpback">
		
			</view>
		</view>
		
		<view class="body">
		
			<view class="page-top" @click="gotoUrl('pages/information/information')" >
		
				<view class="name">
					<view class="photo">
						<img class="img" :src="userInfo.headImg" v-if="userInfo.headImg" alt="">
						<img class="img" src="@/assets/img/默认头像.png" v-else alt="">
						
						
					</view>
					<view class="text">
						<view class="text1">{{userInfo.nickName}}</view>
						<view class="text2">{{userInfo.phone}}</view>
					</view>
				</view>
				<view class="value">
					<u-icon name="arrow-right" size="24" color="#fff"></u-icon>
				</view>
			</view>
			<view class="page">
				<view class="page-main">
		
					<view class="item"   @click="gotoUrl('pages/mylock/myLock')" 
					v-if="userInfoPlus&&userInfoPlus.myAllList" >
						<view class="name">{{userInfoPlus.myAllList.length}}</view>
						<view class="value">车位</view>
					</view>
					<view class="item2">
		
					</view>
					<view class="item"  @click="gotoUrl('pages/mylock/myWhite')"  >
						<view class="name">{{whiteNum}}</view>
						<view class="value">白名单</view>
					</view>
		
				</view>
			</view>
			<view class="page">
		
				<view class="page-content">
					<view class="item" @click="gotoUrl('pages/mylock/myLock')" >
						<view class="title">
							<img class="img" src="@/assets/img/myTab/icon1.svg" alt="">
							我的消息
						</view>
						<view class="goto">
							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>
					</view>
					<view class="item" @click="gotoUrl('pages/mylock/myLock')" >
						<view class="title">
							<img class="img" src="@/assets/img/myTab/icon1.svg" alt="">
							意见反馈
						</view>
						<view class="goto">
							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>
					</view>
					<view class="item" @click="gotoUrl('pages/mylock/myLock')" >
						<view class="title">
							<img class="img" src="@/assets/img/myTab/icon1.svg" alt="">
							客服热线
						</view>
						<view class="goto">
							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>
					</view>
					
				</view>
				</view>
				<view class="page">
				<view class="page-content">
					<view class="item" @click="gotoUrl('pages/mylock/myLock')" >
						<view class="title">
							<img class="img" src="@/assets/img/myTab/icon1.svg" alt="">
							设置
						</view>
						<view class="goto">
							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>
					</view>
					
					
				</view>
			</view>
		
		</view>
		<tabbar :current="3"></tabbar>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	
	import Tabbar from '@/components/Tabbar.vue'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				isReady:false,
				userInfo:{},
				userInfoPlus:{
					whiteList:[],
					myAllList:[]
				},
				whiteNum:0,
			};
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgba(242, 244, 246, 1);
	}
	.body {
		padding: 32rpx;
	}
	
	.gradient-header {
		height: 0px;
	}
	
	.jpback {
		height: 268rpx;
		background: linear-gradient(180deg, rgba(22, 119, 255, 1) 20%, rgba(121, 177, 255, 1) 100%);
	}
	
	.page-top {
	
		color: #fff;
		display: flex;
		justify-content: space-between;
		margin: 48rpx 0;
	
		.name {
	
			display: flex;
			align-items: flex-end;
	
			.photo {
				border-radius: 50px;
				background-color: rgba(229, 229, 229, 1);
				height: 100rpx;
				width: 100rpx;
				overflow: hidden;
	
				.img {
					width: 100%;
					height: 100%;
				}
			}
	
			.text {
				margin-left: 24rpx;
	
				.text1 {
					font-weight: bold;
					font-size: 40rpx;
				}
	
				.text2 {
	
					font-size: 32rpx;
	
				}
			}
	
		}
	
		.value {
			margin-top: 24rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
		}
	}
	
	.page {
	
		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
	
		padding:0 32rpx;
		margin-bottom: 32rpx;
		font-size: 32rpx;
		color: rgb(16, 16, 16);
	
		.page-main {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding:24rpx;
			.item {
				.name {
					font-size: 56rpx;
					color: #333333;
					font-weight: bold;
				}
	
				.value {
					color: rgba(146, 146, 176, 1);
					font-size: 32rpx;
				}
	
				display: flex;
				flex-direction: column;
				align-items: center;
	
	
			}
	
			.item2 {
				border-right: 1px solid rgba(187, 187, 187, 0.43);
				height: 70rpx;
			}
	
		}
	
		.page-content {
			.item:not(:last-child) {
			  border-bottom:1px solid rgba(232,232,232,1);
			}
			.item {
				padding: 32rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
	
				.title {
					display: flex;
					justify-content: space-between;
					display: flex;
					align-items: center;
					color: rgba(51,51,51,1);
					.img {
						width: 32rpx;
						height: 32rpx;
						
						margin-right: 16rpx;
					}
				}
			}
		}
	
	
	
	}
</style>