exam/exam-06173-uni/pages/user/index.vue

<template>
	<view>
		
	
		<view class="user-banner" v-if="isLogin">
			
			<div>
				<image v-if="user.avatar!=null && user.avatar!=''" class="avatar" :src="user.avatar"></image>
				<image v-else class="avatar" src="../../static/avatar.png"></image>
			</div>
			
			<view class="name">
				{{user.realName}}
			</view>
			
			<view class="dept">{{user.departId_dictText}}</view>
			
			<view class="points">
				{{user.points}}积分
			</view>
			
			



		</view>
		
		
		
	
			<!-- 左侧显示略缩图、图标 -->
			<uni-list>
				
				<uni-list-item
				thumb-size="sm"
				 title="修改资料" 
				 link="navigateTo"
				 to="/pages/user/info/info">
				 </uni-list-item>
				
				<uni-list-item
				thumb-size="sm"
				 title="学习记录" 
				 link="navigateTo"
				 to="/pages/course/my">
				 </uni-list-item>
				
				<uni-list-item
				thumb-size="sm"
				 title="我的成绩" 
				 link="navigateTo"
				 to="/pages/paper/index">
				 </uni-list-item>
				 
				 <uni-list-item
				 thumb-size="sm"
				  title="训练记录" 
				  link="navigateTo"
				  to="/pages/repo/history">
				  </uni-list-item>
				  
				   
				   <uni-list-item
				   thumb-size="sm"
				    title="积分日志" 
				    link="navigateTo"
				    to="/pages/user/points/points">
				    </uni-list-item>
		
				<uni-list-item
				thumb-size="sm"
				 title="密码安全" 
				 link="navigateTo"
				 to="/pages/login/passwd">
				 </uni-list-item>
			
				<!-- <uni-list-item
				thumb-size="sm"
				 title="关于我们" 
				 link="navigateTo"
				 to="/pages/sys/about">
				 </uni-list-item> -->
		
				<uni-list-item
				thumb-size="sm"
				 title="退出登录" 
				 link="navigateTo"
				 @click="handleLogout()">
				 </uni-list-item>
				 
			</uni-list>
	</view>
</template>

<script>
	import {
		logout, info
	} from '@/api/user'
	
	export default {
		components: { },
		data() {
			return {
				isLogin: false,
				user: {},
			}
		},
		onShow(){
			this.handleInfo()
		},
		methods: {
			
			handleInfo(){
				
				let token = uni.getStorageSync('token');
				
				info(token).then(res=>{
					this.isLogin = true
					this.user = res
				})
			},
			
			handleLogout(){
				
				logout().then(res=>{
					// 移除会话
					uni.removeStorageSync('token');
					
					// 到登录页面
					this.$navs.toLogin()
				})
			}
			
		}
	}
</script>

<style>


	.user-banner {
		height: 160px;
		display: flex;
		background: url('https://cdn.yfhl.net/static/user-bg.jpg') no-repeat;
		align-items: center;
		background-position: center;
		background-size: 100% 100%;
		justify-content: center;
		width: 100%;
		flex-direction: column;
	}
	
	.user-banner .avatar{
		width: 80px; 
		height: 80px; 
		border: #efefef 2px solid;
		border-radius: 50%;
	}
	
	.user-banner .points{
		position: absolute; 
		top: 15px; 
		right: 15px; 
		color: #FDBF40; 
		font-weight: bold; 
		font-weight: 700; 
		font-size: 16px;
	}
	.user-banner .name{
		color: #fff; 
		font-weight: 700; 
		font-size: 18px;
	}
	
	.user-banner .dept{
		color: #eee;
		font-weight: 700;
		font-size: 14px;
	}
	
</style>