jp-floorlock-phone/pages/index/center.vue

<template>
	<view class="jpmain  ">
		<componentLogin ref="refLogin"  :check="0" @findByOpenId="findByOpenId"></componentLogin>
		<view class="gradient-header">
			<view class="jpback">

			</view>
		</view>

		<view class="body">

			<view class="page-top" @click="gotoInformation" >

				<view class="name">
					<view class="photo">
						<img class="img" :src="userInfo.headImg" v-if="userInfo.headImg" alt="">
					</view>
					<view class="text">
						<view class="text1">{{userInfo.id?userInfo.nickName:'未登录'}}</view>
						<view class="text2">{{userInfo.id?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-content">
					<view class="item" @click="gotoUrl('pages/mylock/myLock',1)" >
						<view class="title">
							<img class="img" src="@/assets/img/center/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/information/parkingRecord',1)" >
						<view class="title">
							<img class="img" src="@/assets/img/center/icon2.svg" alt="">
							停车记录
						</view>
						<view class="goto">
							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>
					</view>
					<view class="item" v-if="0">
						<view class="title">
							<img class="img" src="@/assets/img/center/icon1.svg" alt="">
							我的地锁
						</view>
						<view class="goto">
							<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	
	import componentLogin from '@/components/componentLogin.vue';
	export default {
		components: {
			componentLogin,
		},
		data() {
			return {
				isReady:false,
				userInfo:{},
				userInfoPlus:{
					whiteList:[],
					myAllList:[]
				},
				whiteNum:0,
			}
		},
		onLoad() {
			this.userInfo = this.jphelp.getPersonInfo()	
			this.userInfoPlus=this.jphelp.getPersonInfoPlus()
		},
		onReady() {
			this.$refs.refLogin.findByOpenId()
		},
		onShow() {
			if(this.$refs.refLogin){
				this.$refs.refLogin.findByOpenId()
			}
			
			this.userInfo = this.jphelp.getPersonInfo()
			this.userInfoPlus=this.jphelp.getPersonInfoPlus()
			if(this.isReady){
					this.getWhiteFloorlockList()
			}
		
		},
		methods: {
			gotoInformation(){
				if(this.jphelp.getPersonInfo().id){
					this.gotoUrl('pages/information/information',1)
				}else{
					this.$refs.refLogin.ashow()
				}
			},
			getWhiteFloorlockList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var obj={
					
				}
				
				API.whiteFloorlockList().then((res) => {
					this.whiteNum=res.data.recordsTotal
					uni.hideLoading();
					
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})		
				})
			},
			findByOpenId(res){
				this.userInfo = this.jphelp.getPersonInfo()	
				this.userInfoPlus=this.jphelp.getPersonInfoPlus()
				this.isReady=true;
				this.getWhiteFloorlockList()
			}
		}
	}
</script>
<style>
	page {
		background-color: rgba(242, 244, 246, 1);
	}
</style>
<style scoped lang="scss">
	/* styles.css */
	

	.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>