xytSk-App/pages/mypage/mypage.vue

<template>
	<view class="container">
		<view class="userInfo">
			<div class="icon">
				<image class="image-left" style="width: 100%; height: 100%" :src="default_src" mode="aspectFill">
				</image>
			</div>
			<div class="user">
				<div class="username">{{this.userList.nickName}}</div>
				<div class="userresponse">{{this.userList.dept.deptName}}</div>
			</div>
		</view>
		<view class="funcBar">
			<div class="funcList" v-for="(item, index) in func" :key="index">
				<div @click="navigateToSubPage(index)">
					<div class="funcIcon">
						<image class="icon-left" style="width: 100%; height: 100%" :src="item.img" mode="aspectFit">
						</image>
					</div>
					<div class="funcTxt">{{ item.name }}</div>
				</div>
			</div>
		</view>
		<view class="funcBar xjxList">
			<view class="" style="padding: 5px 0 0 5px;">
				历史记录
			</view>
			<view class="" style="display: flex;">
			
			<div class="funcList" v-for="(item, index) in xjxList" :key="index" >
				<div @click="navigateToSubPage(index)">
					<div class="funcIcon" style="width:30px:;height:30px">
						<image
							class="icon-left"
							style="width: 100%; height: 100%"
							:src="item.img"
							mode="aspectFit"
						></image>
					</div>
					<div class="funcTxt">{{ item.name }}</div>
				</div>
			</div>
			</view>
		</view>
		<view class="version">
			<div class="content">
				<div class="left" style="display:flex">
					<uni-icons type="info" size="25" class="icon-left"></uni-icons>
					版本号
				</div>
				<div class="mid"></div>
				<div class="right">{{version}}</div>
			</div>
		</view>
		<view class="null"></view>
		<button type="primary" class="button" @click="logout">退出账号</button>
	</view>
</template>

<script>
	const func = [{
			img: '../../static/images/info.png',
			name: '个人信息',
			url: '/pages/personInfo/personInfo'
		},
		{
			img: '../../static/images/password.png',
			name: '修改密码',
			url: '/pages/modifyPassword/modifyPassword'
		},
	]
	const xjxList = [
		{img: '../../static/images/xcrw1.png', name: '巡查任务', url:'/pages/mypage/compents/xcrw/index'},
		{img: '../../static/images/wxyh1.png', name: '维修养护', url:'/pages/mypage/compents/wxyh/index'},
		{img: '../../static/images/wtcl1.png', name: '问题处理', url:'/pages/mypage/compents/wtcl/index'},
	]
	export default {
		data() {
			return {
				userList: uni.getStorageSync('value'),
				username: '',
				userresponse: '防汛办',
				version: '011.14.23',
				func: func,
				xjxList:xjxList,
				default_src: uni.getStorageSync('avatar'),
			}
		},
		methods: {
			navigateToSubPage(index) {
				uni.navigateTo({
					url: xjxList[index].url,
					animationType:'pop-in',
				})
			},
			logout() {
				if (uni.getStorageSync('loginChecked') === true) {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				} else {
					uni.removeStorageSync('loginName')
					uni.removeStorageSync('secretKey')
					uni.removeStorageSync('Gs-Token')
					uni.removeStorageSync('value')
					uni.removeStorageSync('password')
					uni.removeStorageSync('avatar')
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}


			},
		},
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		background-color: #f3f5f8;
	}

	.userInfo {
		border-radius: 5px;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 5vh;
		margin-left: 2vw;
		margin-bottom: 2vh;
		width: 95%;
		height: 15vh;
		background-color: #fff;

	}

	.icon {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-left: 2vw;
		background-color: #fff;
		text-align: center;
		color: #007afd;
		line-height: 50px;
	}

	.image-left {
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.user {
		display: flex;
		flex-direction: column;
		margin-left: 6vw;
	}

	.username {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 1vh;
	}

	.funcIcon {
		width: 50px;
		height: 50px;
		margin-left: 4px;
		margin-bottom: 1vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.funcBar {
		border-radius: 5px;
		margin-bottom: 2vh;
		margin-left: 2vw;
		display: flex;
		justify-content: row;
		align-items: center;
		width: 95%;
		height: 15vh;
		background-color: #fff;
	}

	.funcList {
		text-align: center;
		font-size: 14px;
		margin: 2vw;
	}

	.version {
		margin-left: 2vw;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		width: 95%;
		height: 8vh;
		background-color: #fff;

	}

	.content {
		display: flex;
		flex-direction: row;
	}

	.left {
		width: 100px;
		text-align: start;
		margin-left: 1vw;
		line-height: 8vh;
	}

	.icon-left {
		align-items: center;
		width: 30px;
		/* background-color: red; */
	}

	.mid {
		flex: 1;
		line-height: 8vh;
	}

	.right {
		width: 100px;
		text-align: end;
		line-height: 8vh;
		margin-right: 10px;
	}

	.null {
		height: 45vh;
	}

	.button {
		border-radius: 10px;
		display: flex;
		justify-content: center;
		flex-direction: column-reverse;
		width: 92%;
		height: 6vh;
		font-size: 20px;
		color: white;
		background-color: #007afd;
	}
	.xjxList{
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: start;
		height: 20vh;
	}
</style>