shanxian-work-app/pages/mine/mine.vue

<template>
	<view class="box">
		<view class="top">
			<image src="../../static/img/logo.png" mode=""></image>
			<view class="top-middle">
				<view class="name">
					{{name}}
				</view>
				<view class="id">
					<text>你是</text><text style="color: #000000;">{{role}}</text>
				</view>
			</view>
			<view class="top-button" @click="skipNext(id=1)">
				修改密码
			</view>
		</view>
		<view class="title">
			数据服务
		</view>
		<view class="list">
			<view class="list-child" @click="skipNext(id=2)">
				<image src="../../static/img/mine1.png" mode=""></image>
				<view class="">
					地勤人员
				</view>
			</view>
			<view class="list-child" @click="skipNext(id=7)">
				<image src="../../static/img/mine2.png" mode=""></image>
				<view class="">
					用户反馈
				</view>
			</view>
			<view class="list-child" @click="skipNext(id=8)">
				<image src="../../static/img/mine3.png" mode=""></image>
				<view class="">
					用户报修
				</view>
			</view>
			<view class="list-child" @click="skipNext(id=3)">
				<image src="../../static/img/mine4.png" mode=""></image>
				<view class="">
					中控管理
				</view>
			</view>
			<view class="list-child" @click="skipNext(id=4)">
				<image src="../../static/img/mine5.png" mode=""></image>
				<view class="">
					数据分析
				</view>
			</view>
		<!-- 	<view class="list-child" @click="skipNext(id=5)">
				<image src="../../static/img/mine6.png" mode=""></image>
				<view class="">
					热力地图
				</view>
			</view> -->
			<view class="list-child" @click="skipNext(id=6)">
				<image src="../../static/img/mine7.png" mode=""></image>
				<view class="">
					停车区域管理
				</view>
			</view>
		</view>
		<view @click="quit" class="quitBtn">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: uni.getStorageSync('token').username,
				avatar: uni.getStorageSync('token').avatar,
				role: uni.getStorageSync('token').role,
				list: [{
						id: 1,
						text: '修改密码',
						imgUrl: 'http://resource.weilaibike.com/bike_yunwei/pwd.png'
					},
					{
						id: 2,
						text: '地勤人员',
						imgUrl: 'http://resource.weilaibike.com/bike_yunwei/worker.png'
					},
					{
						id: 7,
						text: '用户反馈',
						imgUrl: 'http://resource.weilaibike.com/yunwei/feedBack.png'
					},
					{
						id: 8,
						text: '用户报修',
						imgUrl: 'http://resource.weilaibike.com/yunwei/repair.png'
					},
					{
						id: 3,
						text: '中控管理',
						imgUrl: 'http://resource.weilaibike.com/yunwei/control.png'
					},
					{
						id: 4,
						text: '数据统计',
						imgUrl: 'http://resource.weilaibike.com/yunwei/statistics.png'
					},
					// {
					// 	id: 5,
					// 	text: '热力地图',
					// 	imgUrl: 'http://resource.weilaibike.com/yunwei/hot.png'
					// },
					{
						id: 6,
						text: '停车区管理',
						imgUrl: 'http://resource.weilaibike.com/bike_yunwei/parkMange.png'
					},

				]
			}
		},

		onReachBottom() {
			console.log('这是触底时间')
			// this.loadmore()
		},
		methods: {
			skipNext: function(e) {
				console.log(e, "这是点击列表之后")
				let idx = e;
				let url = '';
				switch (idx) {
					case 1:
						url = "/pages/mine/password";
						break;
					case 2:
						url = "/pages/mine/personnel";
						break;
					case 3:
						url = "/pages/mine/control";
						break;
					case 4:
						url = "/pages/mine/lineChart";
						break;
					case 5:
						url = "/pages/mine/chart";
						break;
					case 6:
						url = "/pages/mine/park";
						break;
					case 7:
						url = "/pages/mine/feedback";
						break;
					case 8:
						url = "/pages/mine/repairs";
						break;
					default:
						break;
				}
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			//退出登录
			quit: function() {
				uni.removeStorageSync('token');
				uni.removeStorageSync('curVal');
				uni.removeStorageSync('curId');
				uni.removeStorageSync('allArea');
				uni.removeStorageSync('allState');
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		/* background: #f4f4f4; */

	}

	.top {
		padding: 16upx 0 78upx 35upx;
		border-bottom: solid 1upx #EEEEEE;
		color: #000000;
		display: flex;
	}

	.top image {
		flex: 0 0 104upx;
		height: 104upx;
		width: 104upx;
		border-radius: 50%;
		margin-right: 21upx;
		border: solid 2upx #FFDADC;
	}

	.top-middle {
		flex: 1;
		display: inline-block;
	}

	.name {
		color: #000000 !important;
		font-size: 38upx;
		font-weight: bold;
	}

	.id {
		margin-top: 8upx;
		color: #9A9A9A;
		font-size: 24upx;
	}

	.top-button {
		flex: 0 0 156upx;


		width: 156upx;
		height: 46upx;
		background: #FFD9DC;
		border-radius: 23upx;
		font-size: 24upx;
		line-height: 46upx;
		text-align: center;
		color: #FF0000;
	}

	.title {

		font-size: 38upx;
		margin-top: 86upx;
		font-weight: bold;
		color: #2E2E2E;
	}

	.list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: 114upx;
	}

	.list-child {
		flex: 0 0 25%;
		margin-top: 67upx;
		text-align: center;
	}

	.list-child image {
		height: 98upx;
		width: 98upx;
		/* 	background-color: #007AFF; */

	}

	.list-child view {

		font-size: 26upx;
		font-weight: 400;
		color: #2E2E2E;
	}

	.quitBtn {
		width: 92%;
		padding: 25rpx 0;
		margin: 0 auto;
		background-color:#EB5E28!important;
		border-radius: 20upx;
		background: #fff;
		margin-top: 20upx;
		text-align: center;
		font-size: 34upx;
		color: #FFFFFF;
	}








	.box {
		padding: 30upx;
	}

	/* 	.userPhoto{
		height: 168rpx;
		width: 168rpx;
		background-color: #0EE7FE;
		
	} */
	/* 	.top {
		background-image: url('http://resource.weilaibike.com/xiaobanma/mineBg.png');
		background-size: 100% 100%;
		width: 100%;
		height: 408rpx;
	} */

	.flexCC {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		height: 128rpx;
		width: 128rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar image {
		height: 128rpx;
		width: 128rpx;
	}

	.state {
		background: rgba(255, 81, 81, 1);
		border-radius: 21px;
		font-size: 24rpx;
		margin-left: 25rpx;
		padding: 10rpx 20rpx;
		color: #fff;
		display: inline-block;
	}

	.name {
		font-size: 32rpx;
		color: #fff;
		display: inline-block;
	}

	.content {
		width: 92%;
		margin: 40rpx auto 0;
		background: white;
		box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(224, 224, 224, 0.68);
		border-radius: 10rpx;
	}

	.content .skip {
		width: 90%;
		margin: 0 auto;
		padding: 24rpx 0;
		border-bottom: 1px solid #f4f4f4;
	}

	.content image {
		display: inline-block;
		vertical-align: middle;
		height: 36rpx;
		width: 36rpx;
		margin-right: 15rpx;

	}

	.content .iconfont {
		color: #8a8a8a;
		font-size: 26rpx;
	}
</style>