hazardousWaste_app/pages/my/index.vue

<!-- 底部导航栏：我的 --> 
<template>
	<view class="content">

		<view class="userInfo">
			<uv-image src="../../static/avatar.png" width="120rpx" height="120rpx" shape="circle" />
			<view class="right">
				<h3 class="nickName">{{ userInfo?.nickName }}</h3>
				<p class="tag">{{ userInfo?.dept.deptName }}</p>
			</view>

		</view>

		<view style="margin-top: 24rpx;">
			<uni-list>
				<uni-list-item v-for="(item, index) in menuList" :key="item.id" :title="item.title" :thumb="item.thumb"
					thumb-size="sm" link @click="item.click" clickable />
			</uni-list>
		</view>
		<uni-popup ref="popupRef" type="center" background-color="#fff"  borderRadius="8px">
			<view class="popup-wrap" style="width: 200rpx; ">
				<view class="popup-body">
					<p>确定退出登录吗？</p>
					<view class="popup-btn">
						<uv-button type="primary" @click="toLogout" text="确定"></uv-button>
						<uv-button  @click="close" type="info " text="取消"></uv-button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { logout } from "@/api/login"

const userInfo = ref(null)
const popupRef = ref()
const menuList = [
	{
		id: 1,
		title: '用户协议',
		thumb: '../../static/userAgreement.svg',
		click: () => {
			console.log('用户协议')
		}
	},
	{
		id: 2,
		title: '发布交易信息',
		thumb: '../../static/postTradeInfo.svg',
		click: () => {
			console.log('发布交易信息')
		}
	},
	{
		id: 3,
		title: '退出登录',
		thumb: '../../static/exit.svg',
		click: () => {
			console.log('退出登录')
			popupRef.value.open()
		}
	}
]
// 退出登录
const toLogout = () => {
	logout().then((res) => {
		uni.removeStorage('app_user')
		uni.removeStorage('app_roles')
		uni.removeStorage('app_permissions')
		uni.navigateTo({
			url: '/pages/login/login'
		});
	})
}
// 弹窗：关闭登录二次确认弹窗
const close = () => {
	popupRef.value.close()
}
// 获取缓存内的用户信息
const getUserInfo = () => {
	uni.getStorage({
		key: 'app_user',
		success: ({ data }) => {
			userInfo.value = data
		},
		fail: (error) => { }
	})
}
getUserInfo();

</script>

<style lang="scss" scoped>
.userInfo {
	background-color: #fff;
	padding: 36rpx;
	display: flex;
	align-items: center;

	.right {
		margin-left: 48rpx;
	}

	.tag {
		margin-top: 36rpx;
		padding: 6rpx 16rpx;
		font-size: 12px;
		color: #fff;
		border-radius: 8px;
		background-color: #4682B4;
	}
}

.popup-wrap {
	padding: 24rpx;
	border-radius: 8px;
}
.popup-body{
	p{
		font-size: 14px;
		font-weight: 500;
	}
}
.popup-btn {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	.uv-button-wrapper{
		width: 40%;
		margin-left: 8rpx;
		
	}
}
</style>