ezhizao_dms_app/pages/index/index.vue

<template>
	<view class="page-container uni-column">
		<view class="uni-row" style="align-items: center;margin:8rpx 0 16rpx 0">
			<image class="logo" src="../../static/images/logo.png" @click="handleShowGear" />
			<uni-icons v-if="showGear > 4" class="icon-gear" type="gear-filled" size="60"
				@click="handleGear"></uni-icons>
		</view>
		<view class="title uni-row" v-if="loggedUsers.length > 0">
			<text>点击头像切换用户</text>
		</view>
		<view class="baseUrl uni-row" v-if="showInput">
			<input v-model="baseUrl" placeholder="服务器地址" />
			<button @click="handleSetting">设置</button>
		</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>
		<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>
		<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'
	import baseURL from '@/api/base/path.js'
	import {
		getAppInfoListByType
	} from '@/api/business/app.js'
	import appURL from '@/api/base/appPath.js'
	import upgrade from '@/uni_modules/lgen-upgrade/js_sdk/upgrade.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)
	const showGear = ref(0)
	const appInfo = ref({})
	const newAppInfo = ref({})
	const updateFlag = ref(true) // 是否更新标志,如果为false,不能登录

	onLoad(() => {})

	onReady(() => {
		initBaseUrl();
		// getUser();
		setTimeout(function() {
			checkUpdate().then(res => {
				if (!res) {
					updateFlag.value = res;
					uni.showModal({
						title: '更新',
						content: '发现新版本',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								update();
							}
						}
					})
				}
			})
		},500)
	})

	function checkUpdate() {
		uni.getSystemInfo({
			success: function(res) {
				appInfo.value = res;
			}
		});
		console.log(appInfo.value);
		// false 版本号不一致,更新,true不需要更新
		let flag = getAppInfoListByType({
			type: appInfo.value.osName
		}).then(res => {
			console.log(res.rows[0]);
			newAppInfo.value = res.rows[0];
			if (res.rows[0]) {
				return appInfo.value.appWgtVersion === newAppInfo.value.versionName;
			} else {
				return true;
			}
		})
		return flag;
	}

	function update() {
		upgrade.downloadInstallApp(appURL + newAppInfo.value.url);
	}

	function init() {
		uni.getStorageInfo({
			success: function(res) {
				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' &&
								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 initBaseUrl() {
		uni.getStorage({
			key: 'baseUrl',
			fail: function() {
				uni.setStorageSync('baseUrl', baseURL);
			},
			complete: function() {
				init();
			}
		});
	}

	function handleShowGear() {
		showGear.value += 1;
	}

	function handleGear() {
		showGear.value += 1;
		if (showGear.value >= 7) {
			showGear.value = 0;
		}
		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) => {
		// 判断更新否,没更新不能登录
		if(!updateFlag.value){
			uni.showToast({
				icon: 'none',
				title: '请更新后再登录'
			})
			setTimeout(function(){
				checkUpdate().then(res => {
					if (!res) {
						updateFlag.value = res;
						uni.showModal({
							title: '更新',
							content: '发现新版本',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									update();
								}
							}
						})
					}
				})
			},1500)
		}else{
			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">
	.page-container {
		overflow: auto;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto;
	}

	.title {
		height: 80rpx;
		justify-content: center;
		align-items: center;
		color: #999999;
	}

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

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

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

		button {
			width: 30%;
		}
	}

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