client_LemonBeans/pages/mine/index.vue

<template>
	<view class="mine-page">
		<view class="topContent"></view>
		<view class="avatar-box">
			<u-avatar :src="userInfo.avatar?httpsImg + userInfo.avatar:require('@/static/head.png')" size="80"></u-avatar>
		</view>
		<view class="info-box">
			<view class="info-item">姓名：<view class="text">{{userInfo.userName}}</view>
			</view>
			<view class="info-item">手机号：<view class="text">{{userInfo.phonenumber}}</view>
			</view>
			<view class="info-item">邮箱：<view class="text">{{userInfo.email}}</view>
			</view>
		</view>
		<view class="btn-box">
			<u-button type="primary" text="退出登录" @click="logout"></u-button>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提示" content="确认退出吗？"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import https from '@/https/index.js'
	export default {
		data() {
			return {
				msgType: 'warn',
				userInfo: {},
				httpsImg:'',
			}
		},
		onLoad() {
			this.httpsImg = https.url
		},
		onShow() {
			this.userProfilefun()
		},
		methods: {
			// 获取个人信息
			userProfilefun(){
				this.$api.userProfile().then(res=>{
					this.userInfo = res.data
				})
			},
			logout() {
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				this.$api.logout().then(res => {
					uni.removeStorageSync('token');
					uni.showLoading({
						title: '正在退出...'
					});
					setTimeout(function() {
						uni.hideLoading();
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}, 2000);
				}).catch(err => {})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		.topContent {
			height: 340rpx;
			background: url("@/static/mine.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.avatar-box {
			display: flex;
			justify-content: center;
			margin-top: -100rpx;
		}

		.info-box {
			background-color: $uni-bg-color;
			border-radius: 24rpx;
			margin: 24rpx;
			padding: 12rpx 25rpx;
			color: #333;

			.info-item {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				padding: 20rpx 0;
			}

			.info-item:last-child {
				border-bottom: none;
			}

			.text {
				font-size: 26rpx;
				color: #000;
			}
		}

		.btn-box {
			margin: 24rpx;
		}
	}
</style>