ezhizao_dms_app/pages/index/index.vue

<template>
	<view class="page-container uni-column">
		<view class="title uni-row" v-if="loggedUsers.length > 0">
			<text>点击头像切换用户</text>
			<uni-icons class="icon-gear" type="gear-filled" size="60" color="#1684fc" @click="handleGear"></uni-icons>
		</view>
		<view class="baseUrl uni-row" v-if="showInput">
			<input v-model="baseUrl" placeholder="服务器地址" />
			<button @click="handleSetting">设置</button>
		</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.charAt(0) }}</text></view>
			<view class="user-info">
				<view class="nickname">
					<text class="label">{{item.nickName}}</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'
	import {
		getUserInfo,
		getNickNameByUserName
	} from '@/api/login/index.js'
	// 登录过的用户
	const loggedUsers = ref([])
	const loginDialog = ref(null)
	const userInfo = ref({})
	const users = ref([])
	const nickName = ref('')
	const baseUrl = ref(null)
	const showInput = ref(false)

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

	function init() {
		uni.getStorageInfo({
			success: function(res) {
				for (let i = 0; i < res.keys.length; i++) {
					let storagekey = res.keys[i];
					uni.getStorage({
						key: storagekey,
						success: function(res) {
							if (storagekey !== 'token' && storagekey !== '__DC_STAT_UUID' &&
								storagekey !== 'baseUrl') {
								getNickNameByUserName(storagekey).then((response) => {
									if (response.code == 200) {
										loggedUsers.value.push({
											userName: storagekey,
											password: res.data,
											nickName: response.msg
										})
									}
								})
							}
							if(storagekey === 'baseUrl'){
								baseUrl.value = res.data;
							}
						}
					});
				}
			}
		});
	}


	function handleGear() {
		showInput.value = !showInput.value
	}

	function handleSetting() {
		// let reg = /^(?:(http|https|ftp):\/\/)?((?:[\w-]+\.)+[a-z0-9]+)((?:\/[^/?#]*)+)?(\?[^#]+)?(#.+)?$/i;
		// if (baseUrl.value !== null && baseUrl.value.trim() && reg.test(baseUrl.value)) {
		if (baseUrl.value) {
			uni.setStorage({
				key: 'baseUrl',
				data: baseUrl.value,
				success: function() {
					uni.showToast({
						icon: "success",
						title: "设置成功"
					})
				}
			});
			showInput.value = !showInput.value;
		} else {
			uni.showToast({
				icon: "error",
				title: "输入错误"
			})
		}
	}

	const handleShowLoginDialog = (user) => {
		let _user = user ?? {}
		// 调用子组件中的方法
		loginDialog.value.open(_user)
	}
	const handleSelectUser = (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: () => {}
		})
	}
</script>

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

	.icon-gear {
		position: fixed;
		right: 40rpx;
		font-size: 60rpx;
	}

	.baseUrl {
		border: 2rpx solid gray;
		width: 90%;
		margin: 0 auto;
		border-radius: 12rpx;

		input {
			width: 80%;
			padding: 16rpx 24rpx;
		}

		button {
			width: 20%;
		}
	}

	.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>