parking-manage-mobile/pages/me/me.vue

<template>
	<view class="container">
		<image src="../../static/img/header_bg.png"  style="width:100%;height:300rpx;position: absolute;z-index: -1;"></image>
	    <view class="page-top">
			<u-image width="100rpx" height="100rpx" shape="circle"  :src="myInfo.head_photo" border-radius="5rpx"></u-image>
			<view style="margin-left:20rpx;color:#ffffff;">
				<view style="font-size:38rpx;margin-bottom: 15rpx;font-family: '黑体';">{{myInfo.real_name}}</view>
				<view style="font-size:26rpx;">
					{{myInfo.phone_num}}
				</view>
			</view>
		</view>
		<view class="page-body">
			<view class="body-block">
				<view style="display: flex; justify-content: space-between;align-items:center;width:100%;" @tap="openPage" data-url="../parking/myparkings">
					<view class="block-item">
						<view>{{myParkSites.length}}<text style="font-size:28rpx;color:#999999;margin-left:10rpx;">个</text></view>
						<text>我的停车场</text>
					</view>
					<view class="block-item">
						<u-icon  size="32" name="arrow-right" color="#a8a8a8"></u-icon>
					</view>
				</view>
				
			</view>
			
			<u-cell-group>
				 <u-cell-item v-for="(item, index) in menus" :key="item.value" :index="index" @tap="clickMenu">
					 <u-icon slot="icon" :size="item.size" :name="item.icon" color="#a8a8a8"></u-icon>
					 <text slot="title" class="menuName">{{item.name}}</text>
				</u-cell-item>
			</u-cell-group>
			
		</view>
		
		<u-modal v-model="confirmwin.show" :content="confirmwin.content" :show-cancel-button="true" @confirm="confirmHandle"></u-modal>
	</view>
</template>

<script>
	import * as api from '@/apis/me.js'
	import app from '@/utils/app.js'
	
	export default {
		data() {
			return {
				myInfo:{},
				myParkSites:[],
				confirmwin:{
					show:false,
					content:'',
					code:''
				},
				menus:[
					{
					    value: 'whiteBill',
					    name: '会员管理',
					    icon: 'order',
						size:36,
						url:'../whiteList/whiteList'
					},
					/* {
					    value: 'alarmSet',
					    name: '警报通知设置',
					    icon: 'setting-fill',
						size:36
					},
					{
					    value: 'sysMsg',
					    name: '系统消息',
					    icon: 'email-fill',
						size:36
					}, */
					{
					    value: 'contact',
					    name: '联系客服',
					    icon: 'server-fill',
						size:36
					},
					{
					    value: 'aboutUs',
					    name: '关于我们',
					    icon: 'server-man',
						size:36
					},
					{
					    value: 'quit',
					    name: '退出账号',
					    icon: 'zhuanfa',
						size:36
					}
				]
			}
		},
		onLoad(){
			this.myInfo=api.getMyInfo();
			if(!this.myInfo.head_photo){
				this.myInfo.head_photo="../../static/img/headphoto.png";
			}
			this.myParkSites=api.getMyParkSites();
		},
		methods: {
			openPage(evn){
				 uni.navigateTo({
					url:'../parking/myparkings'
				}) 
			},
			clickMenu(index){
				
				if(this.menus[index].value=="quit"){
					this.confirmwin={show:true,content:'确定要退出吗？',code:'quit'};
				}
				else if(this.menus[index].url){
					uni.navigateTo({
						url:this.menus[index].url
					})
				}
			},
			confirmHandle(){
				if(this.confirmwin.code=='quit'){
					app.setSetting();
					uni.redirectTo({
						url:'../login/login2'
					});
				}
			}
			
		}
	}
</script>

<style>
   page{
		
		background-color: #f4f4f4;
	
	}
	.page-top{
		box-sizing: border-box;
		width:100vw;
		padding:80rpx 60rpx;
		position: absolute;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}
	
	.page-body{
		position: absolute;
		z-index: 10;
		top:200rpx;
		box-sizing: border-box;
		width:100vw;
		padding:30rpx;
	}
	
	.body-block{
		padding:30rpx;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		background-color: #ffffff;
	}
	
	.body-block .block-item{
		text-align: center;
	}
	
	.body-block .block-item>view{
	
		font-size: 36rpx;
		color:#007AFF;
	}
	
	.body-block .block-item>text{
		font-size: 24rpx;
		color:#6f867d;
		margin-bottom:10rpx;
	}
	
	.menuName{
		font-size:26rpx;
		margin-left: 15rpx;
	}
</style>