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="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'},
	]
	export default {
		data() {
			return {
				userList: uni.getStorageSync('value'),
				username:'',
				userresponse:'防汛办',
				version:'011.14.23',
				func: func,
				default_src: uni.getStorageSync('avatar'),
			}
		},
		methods: {
			navigateToSubPage(index){
				uni.navigateTo({
					url: func[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.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;
	}
</style>