XEH-miniProgram/pages/self/info.vue

<template>
	<view class="page-wrap">
		<view class="row">
			<view class="label">头像</view>
			<image class="avatar" src="../../static/auth-icon.png" mode="aspectFill"></image>
		</view>
		<view class="row">
			<view class="label">姓名</view>
			<view class="text">--</view>
		</view>
		<view class="row">
			<view class="label">绑定手机</view>
			<view class="text">{{ userInfo.phone }}</view>
		</view>
		<view class="space"></view>
		<view class="row">
			<view class="label">所属单位</view>
			<view class="text">--</view>
		</view>
		<view class="row">
			<view class="label">所属部门</view>
			<view class="text">--</view>
		</view>
		<view class="row">
			<view class="label">职务</view>
			<view class="text">--</view>
		</view>
		<view class="space" style="height: 27.47rpx"></view>
		<view class="row" @click="handleLogout">
			<view class="label">退出登录</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog
				type="info"
				cancelText="取消"
				confirmText="确认"
				title="系统提示"
				content="确认退出当前登录账号？"
				@confirm="dialogConfirm"
				@close="dialogClose"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import userService from '@/api/user.js';
export default {
	components: {},
	data() {
		return {
			userInfo: ''
		};
	},
	onLoad() {
		this.getUserInfo();
	},
	methods: {
		handleLogout() {
			this.$refs.alertDialog.open();
		},
		async getUserInfo() {
			const { data } = await userService.getUserInfo();
			this.userInfo = data;
		},
		async dialogConfirm() {
			await userService.logout();
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	.row {
		min-height: 96.15rpx;
		font-size: 27.47rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20.6rpx 41.21rpx;
		box-sizing: border-box;
		background: #fff;
		position: relative;
		&:first-child::before,
		& + .row::before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			height: 1px;
			background: #e0e0e0;
			transform: scaleY(0.5);
		}
		.avatar {
			width: 82.42rpx;
			height: 82.42rpx;
			border-radius: 50%;
		}
	}
	.space {
		background: #f3f3f3;
		height: 13.74rpx;
	}
}
</style>