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="跳转App" link="navigateTo" to="/pages/jumpApp/index">
			</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>