workApp/pages/my/index.vue

<template>
	<view class="page_my">
		<image class="my_bg" src="@/static/image/bg/my_bg.png"></image>
		<view class="page_my_content">
			<view class="user_info">
				<view class="user_image">
					<image class="default_user" src="@/static/image/bg/default_user.png"></image>
				</view>
				<view class="user_info_content">
					<uni-tooltip :content="userName" placement="top">
					  <view class="user_name">{{userName}}</view>
					</uni-tooltip>
					<view class="user_account">账号：{{userAccount}}</view>
				</view>
			</view>
			<view class="user_menu" @click="GoToHelp">
				<view class="menu_left">
					<i class="iconfont icon_help"></i>
					<text class="menu_text">帮助中心</text>
				</view>
				<uni-icons class="menu_right" type="right"></uni-icons>
			</view>
			<view class="user_menu" @click="UpdatePassword">
				<view class="menu_left">
					<image class="menu_icon" src="@/static/image/icon/update_pass.png"></image>
					<text class="menu_text">修改密码</text>
				</view>
				<uni-icons class="menu_right" type="right"></uni-icons>
			</view>
			<view class="user_menu" @click="Exit()">
				<view class="menu_left">
					<image class="menu_icon" src="@/static/image/icon/exit_icon.png"></image>
					<text class="menu_text">退出登录</text>
				</view>
			</view>
		</view>
	</view>
	<common-tabbar></common-tabbar>
	<popupDialog ref="popupDialogRef" :showTitle="false" content="确定退出当前账号？" @DialogConfirm="DialogConfirm" />
</template>

<script setup>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import uniTooltip from '@/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue';
	import popupDialog from '@/components/popupDialog.vue';
	import { ref, onMounted } from 'vue';
	import { useStore } from 'vuex';

	const store = useStore();

	const userName = ref('');
	const userAccount = ref('');
	const popupDialogRef = ref(null);

	onMounted(() => {
		GetUserInfo();
	});
	
	const Exit=()=>{
		if(popupDialogRef){
			popupDialogRef.value.OpenDialog();
		}
	};

	const DialogConfirm = () => {
		store.dispatch('logout', true);
		uni.reLaunch({
		  url: '/pages/login/index'
		});
	}

	const GoToHelp=()=>{
		uni.navigateTo({
			url: '/pages/my/help'
		});
	};
	
	const GetUserInfo = () => {
		userName.value = store.state.userStore.userInfo.userName;
		userAccount.value = store.state.userStore.userInfo.accountId;
	};

	const UpdatePassword = () => {
		uni.navigateTo({
			url: '/pages/my/updatePassword'
		});
	}
</script>
  
<style scoped lang="scss">
	.user_info_content{
		display: flex;
		flex-direction: column;
		:deep(.uni-tooltip-popup){
			max-width: 500rpx;
			min-width: 100rpx;
		}
	}
</style>