ezhizao_dms_app/pages/index/index.vue

<template>
	<view class="page-container uni-column">
		<view class="title uni-column" v-if="loggedUsers.length > 0">
			<text>点击头像切换用户</text>
		</view>

		<view v-for="(item, index) in loggedUsers" class="item-user uni-row" @click="handleSelectUser(item)"
			@longpress="handleLongPressUser(item)">
			<view class="user-avatar uni-row"><text class="label">{{item['nickname']}}</text></view>
			<view class="user-info">
				<view class="nickname">
					<text class="label">{{item['nickname']}}-{{index}}</text>
				</view>
				<view class="username">
					<text class="label">{{item['userName']}}</text>
				</view>
			</view>
		</view>
		<view class="add-user-btn uni-row" @click="handleShowLoginDialog(null)">
			<view class="icon uni-row">
				<text class="label">+</text>
			</view>
			<view class="btn-label">
				<text class="label">添加新账号</text>
			</view>
		</view>

		<dialog-login ref="loginDialog" />
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'

	// 登录过的用户
	const loggedUsers = ref([])
	const loginDialog = ref(null)

	onLoad(() => {
		init();
	})

	function init() {
		uni.getStorageInfo({
			success: function(res) {
				console.log(res.keys)
				for (let i = 0; i < res.keys.length; i++) {
					let storagekey = res.keys[i];
					console.log(storagekey)
					uni.getStorage({
						key: storagekey,
						success: function(res) {
							if (storagekey !== 'token' && storagekey !== '__DC_STAT_UUID') {
								loggedUsers.value.push({
									userName: storagekey,
									password: res.data
								})
							}
						}
					});
				}
			}
		});
		console.log(loggedUsers)
	}
	const handleShowLoginDialog = (user) => {
		let _user = user ?? {}
		// 调用子组件中的方法
		loginDialog.value.open(_user)
	}
	const handleSelectUser = (user) => {
		console.log(user)
		handleShowLoginDialog(user)
	}
	const handleLongPressUser = (user) => {
		console.log(user)
		uni.showModal({
			title: '提示', // 标题
			content: '是否删除此账号', // 提示内容
			cancelText: "取消", // 取消按钮的文字
			confirmText: "确认", // 确认按钮的文字
			//点击确定之后执行的代码
			success(res) {
				if (res.confirm) {
					uni.removeStorage({
						key: user.userName, // 键名		
						success: () => {
							uni.showToast({
								title: '删除成功',
								icon: 'success',
								duration: 3000,
							});
							loggedUsers.value = [];
							init();
							
							
						}, // 成功回调函数

						fail: () => {

						}, // 失败回调函数

					})
				}
			}
		});

	}
	const handleAddUser = () => {
		uni.setStorage({
			key: 'logged-users',
			data: {
				users: ''
			},
			success: () => {
				console.log('success');
			}
		})
	}
</script>

<style lang="scss">
	.title {
		height: 128rpx;
		justify-content: center;
		align-items: center;
	}

	.item-user {
		margin: 32rpx;
		margin-top: 0;
		padding: 32rpx;
		background-color: #FFFFFF;
		align-items: center;

		.user-avatar {
			width: 128rpx;
			height: 128rpx;
			border-radius: 64rpx;
			background-color: #F1F2F3;
			justify-content: center;
			align-items: center;

			.label {
				font-size: 64rpx;
			}
		}

		.user-info {
			flex: 1;
			height: 96rpx;
			padding-left: 32rpx;

			.nickname {
				.label {
					font-weight: bold;
					font-size: 40rpx;
				}
			}

			.username {
				margin-top: 8rpx;

				.label {
					font-size: 32rpx;
				}
			}
		}
	}

	.add-user-btn {
		margin: 32rpx;
		padding: 32rpx;
		background-color: #FFFFFF;
		align-items: center;

		.icon {
			width: 128rpx;
			height: 128rpx;
			align-items: center;
			justify-content: center;
			background-color: #F1F2F3;
			border-radius: 64rpx;

			.label {
				color: #FFFFFF;
				font-size: 128rpx;
			}
		}

		.btn-label {
			flex: 1;
			padding-left: 32rpx;

			.label {
				font-size: 40rpx;
			}
		}
	}
</style>