aiot-app/pages/login/login.vue

<template>
	<view class="content">
		<uni-icons class="setting" type="gear" @click="handleServerSettings" size="50" color="#fff"></uni-icons>
		<view class="login_logo">
			<!-- <image :src="logo || 'https://img.picgo.net/2024/04/18/login_logo45cb6a5eb95c8c1c.png'"></image> -->
			<view class="logo_bj">{{ logoName || '中赢' }}</view>
		</view>
		<view class="login-title">
			<label>工业互联网平台</label>

			<text>{{ companyName }}</text>
		</view>
		<view>
			<view class="login-content">
				<view>
					<view class="form">
						<view class="login-input">
							<label class="icon-lable"></label>
							<input name="input" v-model="userInfo.username" placeholder="请输入账号" />
						</view>
						<view class="login-input">
							<label class="icon-lable2"></label>
							<input class="" name="input" password v-model="userInfo.passwd" placeholder="请输入密码" />
						</view>
						<button @click="submit">登录</button>
						<view class="password-memo">
							<checkbox-group @change="checkboxChange">
								<label>
									<checkbox value="1" :checked="isMemo" />
									记住密码
								</label>
							</checkbox-group>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="version">
			<text>当前版本：{{ currentVersion }}</text>
		</view>
		<ServerSetting ref="serverSettingRef" @setServerStatus="setServerStatus" />
	</view>
</template>

<script>
	import {
		postJ
	} from '@/utils/api.js'
	import {
		login,
		usName,
		getLatestVersion
	} from '@/api/common.js'
	import {
		getResourcesTree
	} from '@/api/pda/common.js'

	import {
		setMemo,
		isMemo,
		removeMemo,
		setPassword,
		getPassword
	} from '@/utils/passwordMemo.js'
	import ServerSetting from '@/components/ServerSetting/index'

	export default {
		components: {
			ServerSetting
		},
		data() {
			return {
				currentVersion: '',
				userInfo: {
					username: '',
					passwd: ''
				},
				isMemo: isMemo(),
				loginDisabled: false,

				companyName: null,
				logo: null,
				logoName: ''
			}
		},
		onLoad() {
			const {
				appVersion
			} = uni.getAppBaseInfo()
			this.currentVersion = appVersion
			if (this.isMemo) {
				const userInfo = getPassword()
				if (userInfo?.username) this.userInfo = userInfo
			}

			this.getUsName()
		},
		mounted() {
			// #ifdef APP-PLUS
			this.$nextTick(() => {
				this.$refs.serverSettingRef && this.$refs.serverSettingRef.serverCheck()
			})
			// #endif
			// uni.reLaunch({
			//           url: "/pages/home/home",
			//         });
		},
		methods: {
			getUsName() {
				usName().then(res => {
					this.companyName = res.companyName
					this.logo = res.logo
					this.logoName = res.logoName
				})
			},
			setServerStatus(val) {
				this.loginDisabled = !val
			},
			//登录
			// submit() {
			//   // #ifdef APP-PLUS
			//   if (!this.apiUrl) {
			//     this.$refs.serverSettingRef.open();
			//     return;
			//   }
			//   // #endif

			//   const params = {
			//     loginName: this.userInfo.username,
			//     loginPwd: this.userInfo.passwd,
			//   };

			//   login(params)
			//     .then((res) => {
			//       if (this.isMemo) {
			//         setPassword(this.userInfo);
			//       }
			//       let data = res.data;
			//       uni.setStorageSync("token", data.token);
			//       uni.setStorageSync("userInfo", data);
			//       uni.showToast({
			//         title: "登录成功",
			//         icon: "success",
			//         duration: 2000,
			//       });
			//       setTimeout(() => {
			//         uni.reLaunch({
			//           url: "/pages/home/home",
			//         });
			//       }, 2000);
			//     })
			//     .catch((err) => {
			//       console.log(err, 222);
			//       uni.showToast({
			//         title: err.message || err,
			//         icon: "none",
			//         duration: 2000,
			//       });
			//     });
			// },
			handlUpdate() {
				// #ifdef APP-PLUS
				getLatestVersion().then(res => {
					console.log('res:', res)
					const {
						appVersion
					} = uni.getAppBaseInfo()
					if (appVersion != res.versionCode) {
						uni.showModal({
							title: '发现新版本',
							content: '更新说明：' + res.releaseNotes,
							confirmText: '立即更新',
							success: (val) => {
								if (val.confirm) {
									const downloadTask = uni.downloadFile({
										url: `${Vue.prototype.webviewUrl}/kd-aiot/${res.fileStorePath}`,
										success: (data) => {
											if (data.statusCode === 200) {
												uni.saveFile({
													tempFilePath: data
														.tempFilePath,
													success: (saveRes) => {
														// uni.showToast({
														// 	title: '下载成功',
														// 	icon: 'success'
														// });
														// uni.hideLoading();
														// uni.showLoading({
														// 	title: "正在更新...",
														// 	mask: true,
														// });
														// 调用安装逻辑
														plus.runtime.install(
															saveRes
															.savedFilePath, {
																force: true
															},
															function() {
																// uni
																// 	.hideLoading();
															},
															function() {
																// uni
																// 	.hideLoading();
																uni.showToast({
																	title: '更新失败',
																	icon: 'error'
																});
															});

													}
												});
											}
										}
									});

									// 先显示初始的loading提示
									uni.showLoading({
										title: "正在下载安装包: 0%",
										mask: true,
									});

									// 记录上次显示的进度，避免频繁更新
									let lastProgress = 0;
									let loadingVisible = true;

									downloadTask.onProgressUpdate((ress) => {
										console.log('下载进度:', ress)

										// 只在进度有明显变化（每10%）或者达到100%时更新提示
										if ((ress.progress > lastProgress && ress.progress %
												10 === 0) || ress.progress === 100) {
											// 先隐藏再显示以更新内容
											if (loadingVisible) {
												uni.hideLoading();
											}

											if (ress.progress < 100) {
												uni.showLoading({
													title: "正在下载安装包: " + ress
														.progress + "%",
													mask: true,
												});
												loadingVisible = true;
											} else {
												loadingVisible = false;
											}
											lastProgress = ress.progress;
										}
									})

									// 确保任务完成时隐藏loading
									downloadTask.onStop(() => {
										if (loadingVisible) {
											uni.hideLoading();
											loadingVisible = false;
										}
									})
									downloadTask.onError(() => {
										if (loadingVisible) {
											uni.hideLoading();
											loadingVisible = false;
										}
									})
								}
							}
						});
					}

				}).catch(err => {
					console.log('err:', err)
				})
				// #endif
			},
			// 登录流程中的版本检测
			checkVersionForLogin() {
				return new Promise((resolve, reject) => {
					// #ifdef APP-PLUS
					getLatestVersion().then(res => {
						console.log('res:', res)
						const {
							appVersion
						} = uni.getAppBaseInfo()
						if (appVersion != res.versionCode) {
							uni.showModal({
								title: '发现新版本',
								content: '更新说明：' + res.releaseNotes,
								confirmText: '立即更新',
								cancelText: '暂不更新',
								success: (val) => {
									if (val.confirm) {
										const downloadTask = uni.downloadFile({
											url: `${Vue.prototype.webviewUrl}/kd-aiot/${res.fileStorePath}`,
											success: (data) => {
												if (data.statusCode === 200) {
													uni.saveFile({
														tempFilePath: data
															.tempFilePath,
														success: (saveRes) => {
															// 调用安装逻辑
															plus.runtime.install(
																saveRes
																.savedFilePath, {
																	force: true
																},
																function() {
																	// 安装成功
																	uni.showToast({
																		title: '更新成功，应用即将重启',
																		icon: 'success',
																		duration: 2000
																	});
																	resolve('updated'); // 返回更新成功状态
																},
																function() {
																	uni.showToast({
																		title: '更新失败',
																		icon: 'error'
																	});
																	reject('update_failed'); // 返回更新失败状态
																});

														}
													});
												}
											}
										});

										// 先显示初始的loading提示
										uni.showLoading({
											title: "正在下载安装包: 0%",
											mask: true,
										});

										// 记录上次显示的进度，避免频繁更新
										let lastProgress = 0;
										let loadingVisible = true;

										downloadTask.onProgressUpdate((ress) => {
											console.log('下载进度:', ress)

											// 只在进度有明显变化（每10%）或者达到100%时更新提示
											if ((ress.progress > lastProgress && ress.progress %
													10 === 0) || ress.progress === 100) {
												// 先隐藏再显示以更新内容
												if (loadingVisible) {
													uni.hideLoading();
												}

												if (ress.progress < 100) {
													uni.showLoading({
														title: "正在下载安装包: " + ress
															.progress + "%",
														mask: true,
													});
													loadingVisible = true;
												} else {
													loadingVisible = false;
												}
												lastProgress = ress.progress;
											}
										})

										// 确保任务完成时隐藏loading
										downloadTask.onStop(() => {
											if (loadingVisible) {
												uni.hideLoading();
												loadingVisible = false;
											}
										})
										downloadTask.onError(() => {
											if (loadingVisible) {
												uni.hideLoading();
												loadingVisible = false;
											}
											reject('download_failed'); // 返回下载失败状态
										})
									} else {
										// 用户选择暂不更新
										resolve('skip_update'); // 返回跳过更新状态
									}
								}
							});
						} else {
							// 已是最新版本
							resolve('latest_version'); // 返回已是最新版本状态
						}

					}).catch(err => {
						console.log('err:', err)
						reject('version_check_failed'); // 返回版本检查失败状态
					})
					// #endif
					
					// #ifndef APP-PLUS
					// H5场景直接返回最新版本状态
					resolve('h5_platform');
					// #endif
				});
			},
			//登录
			async submit() {
				// #ifdef APP-PLUS
				if (!this.apiUrl) {
					this.$refs.serverSettingRef.open()
					return
				}
				// #endif
				// // APP场景：先检查版本
				// try {
				// 	const updateResult = await this.checkVersionForLogin()
				// 	console.log('版本检查结果:', updateResult)
					
				// 	// 如果是更新成功状态，停止登录流程（应用即将重启）
				// 	if (updateResult === 'updated') {
				// 		return
				// 	}
					
				// 	// 其他情况（latest_version, skip_update, h5_platform）都可以继续登录
				// } catch (error) {
				// 	console.log('版本检查失败:', error)
				// 	// 版本检查失败时，可以选择继续登录或提示用户
				// 	// 这里选择继续登录，不阻碍用户使用
				// }
				
				// // H5场景直接登录，无需版本检查

				let param = {
					loginName: this.userInfo.username,
					loginPwd: this.userInfo.passwd
				}

				postJ(this.apiUrl + '/main/user/login', param)
					.then(res => {
						if (this.isMemo) {
							setPassword(this.userInfo)
						}

						let data = res.data
						uni.setStorageSync('token', data.token)
						uni.setStorageSync("userInfo", data);
						uni.showToast({
							title: '登录成功',
							icon: 'success',
							duration: 2000
						})
						this.getTree()
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/home/home'
							})
						}, 2000)
					})
					.catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none',
							duration: 2000
						})
					})
			},
			handleServerSettings() {
				this.$refs.serverSettingRef.open()
			},
			checkboxChange(e) {
				this.isMemo = e.detail.value[0] === '1'
				if (this.isMemo) {
					setMemo()
				} else {
					removeMemo()
				}
			},
			formatRouter(list) {
				let authorities = [];

				const fn = (list) => {
					let arr = [];
					for (const p of list) {
						if (p.menuType === 2) {
							// p.children = [];
							authorities.push(p);
						}
						//  else {
						if (p.children?.length) {
							p.children = fn(p.children);
						} else {
							p.children = [];
						}
						arr.push(p);
						// }
					}

					return arr;
				};

				fn(list);

				return authorities
			},
			getTree() {
				getResourcesTree().then(res => {
					console.log(res)
					if (res.length == 0) {
						uni.showToast({
							title: '您还未配置权限',
							icon: 'none'
						})
					}
					let List = JSON.stringify(res || [])
					let authorities =this.formatRouter(res[0].children)
					uni.setStorageSync('treeList', List)
					uni.setStorageSync('authorities', JSON.stringify(authorities)) //按钮
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'login.scss';
	.version {
		font-size: 12px;
		color: #999;
		position: absolute;
		bottom: 10rpx;
		text-align: center;
		width: 100%;
	}
</style>