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

<template>
	<view>
		<view class="user">
			<u-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="100rpx" style="margin-bottom: 40rpx;" />
			<view class="user-name">
				{{userName}}
			</view>
		</view>
		<view class="btn">
			<u-button type="warning" text="退出登录" @click="show=true"  size="large"></u-button>
		</view>
		<view>
			<u-modal :show="show" title="提示" content='是否退出登录？' showCancelButton @confirm="loginOut"
				@cancel="show=false"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//模态框
				show: false,
			};
		},
		computed: {
			userName() {
				return this.$store.getters.userName
			}
		},
		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>
	.user {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 300rpx;
	}

	.user-name {
		font-weight: bold;
	}

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