read_opc/reado-app/pages/user/index.vue

<template>
	<view class="container">
		<view class="user">
			<u-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="100rpx" style="margin-right:20rpx" />
			<view class="user-name">
				<view class="userName">
					{{userName}}
				</view>
				<view class="">
					登录时间：{{lastLoginTime}}
				</view>
			</view>
		</view>
		<view class="list">
			<uni-list>
				<uni-list-item title="权限等级" thumb="../../static/image/qxgl.png" thumb-size="medium" link
					to="/pages/user/auth-level/index">
				</uni-list-item>
				<uni-list-item title="口令设置" thumb="../../static/image/klsz.png" thumb-size="medium" link
					to="/pages/user/edit-password/index">
				</uni-list-item>
				<uni-list-item title="系统信息" to="/pages/user/system-info/index" thumb="../../static/image/xtgl.png"
					thumb-size="medium" link>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="btn">
			<u-button type="primary" text="退出登录" @click="show=true" size="large"></u-button>
		</view>
		<view>
			<u-modal :show="show" content='确定退出登录吗？' showCancelButton @confirm="loginOut" @cancel="show=false"
				width="270">
			</u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//模态框
				show: false,
			};
		},
		computed: {
			userName() {
				return this.$store.getters.userName
			},
			lastLoginTime() {
				return this.$store.getters.lastLoginTime
			}
		},
		methods: {
			//退出登录
			loginOut() {
				this.$store.dispatch('user/logout').then(res => {
					if (res.data.code === 200) {
						uni.redirectTo({
							url: "/pages/login/index"
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #EEEDF2;
	}

	.user {
		display: flex;
		align-items: center;
		padding: 60rpx 40rpx;
		margin-bottom: 20rpx;
		background: #ffffff;
	}

	.user-name {
		font-weight: bold;

		.userName {
			font-size: 44rpx
		}
	}

	.list {}

	.btn {
		position: absolute;
		bottom: 100rpx;
		left: 0;
		right: 0;
		padding: 0 80rpx;
	}

	::v-deep .uni-list-item__container {
		padding: 40rpx 60rpx;
	}

	::v-deep .uni-list-item__content-title {
		font-size: 44rpx;
	}

	::v-deep .uniui-arrowright {
		color: #000000 !important;
		font-size: 52rpx !important;
	}

	::v-deep .u-modal__content__text {
		text-align: center;
	}
</style>