Browse Source

feat(login): 替换系统loading为自定义下载进度弹窗

将App.vue中的版本更新检测逻辑迁移至登录页,使用自定义UI弹窗替代原生loading组件显示下载进度,优化用户交互体验。
yusheng 3 days ago
parent
commit
5a312f12be
2 changed files with 110 additions and 179 deletions
  1. 0 125
      App.vue
  2. 110 54
      pages/login/login.vue

+ 0 - 125
App.vue

@@ -3,9 +3,6 @@
 		isMemo
 	} from '@/utils/passwordMemo.js'
 	import ScanCode from '@/mixins/ScanCode.js'
-	import {
-		getLatestVersion
-	} from '@/api/common.js'
 
 	import Vue from 'vue'
 
@@ -34,130 +31,8 @@
 					url: '/pages/home/home'
 				})
 			}
-
-			getLatestVersion().then(res => {
-				// console.log('res:', res)
-				const {
-					appVersion
-				} = uni.getAppBaseInfo()
-				if (appVersion != res.versionCode) {
-					uni.showModal({
-						title: `发现新版本(${res.versionCode})`,
-						content: '更新说明:' + res.releaseNotes,
-						confirmText: '立即更新',
-						showCancel: false,
-						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 > lastProgress ? ress.progress : lastProgress) + "%",
-												mask: true,
-											});
-											loadingVisible = true;
-										} else {
-											loadingVisible = false;
-										}
-										lastProgress = ress.progress > lastProgress ? ress.progress : lastProgress;
-									}
-								})
-
-								// 确保任务完成时隐藏loading
-								if (downloadTask && typeof downloadTask.onStop === 'function') {
-									downloadTask.onStop(() => {
-										if (loadingVisible) {
-											uni.hideLoading();
-											loadingVisible = false;
-										}
-									})
-								}
-								if (downloadTask && typeof downloadTask.onError === 'function') {
-									downloadTask.onError(() => {
-										if (loadingVisible) {
-											uni.hideLoading();
-											loadingVisible = false;
-										}
-									})
-								}
-							}
-						}
-					});
-				}
-
-			}).catch(err => {
-				console.log('err:', err)
-			})
-
-
 			// #endif
 
-
-			// getLatestVersion
-
 		},
 		onShow: function() {
 

+ 110 - 54
pages/login/login.vue

@@ -40,6 +40,19 @@
 			<text>当前版本:{{ currentVersion }}</text>
 		</view>
 		<ServerSetting ref="serverSettingRef" @setServerStatus="setServerStatus" />
+		<!-- 下载进度弹窗 -->
+		<view class="download-modal" v-if="downloadVisible" @touchmove.stop.prevent>
+			<view class="download-mask"></view>
+			<view class="download-dialog">
+				<view class="download-title">正在下载安装包</view>
+				<view class="progress-bar-wrapper">
+					<view class="progress-bar-bg">
+						<view class="progress-bar-fill" :style="{ width: downloadProgress + '%' }"></view>
+					</view>
+					<text class="progress-text">{{ downloadProgress }}%</text>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -81,7 +94,9 @@
 
 				companyName: null,
 				logo: null,
-				logoName: ''
+				logoName: '',
+				downloadVisible: false,
+				downloadProgress: 0
 			}
 		},
 		onLoad() {
@@ -95,6 +110,8 @@
 			}
 
 			this.getUsName()
+			// 进入登录页自动检测版本更新
+			this.checkVersionForLogin()
 		},
 		mounted() {
 			// #ifdef APP-PLUS
@@ -269,63 +286,36 @@
 				)
 			},
 
-			// 显示下载进度(封装方法)
-			showDownloadProgress(downloadTask) {
-				let lastProgress = 0
-				let loadingVisible = true
-
-				uni.showLoading({
-					title: '正在下载安装包: 0%',
-					mask: true
-				})
-
-				downloadTask.onProgressUpdate((res) => {
-					// 只在进度有明显变化(每10%)或达到100%时更新提示
-					if ((res.progress > lastProgress && res.progress % 10 === 0) || res.progress === 100) {
-						if (loadingVisible) {
-							uni.hideLoading()
-						}
-
-						if (res.progress < 100) {
-							uni.showLoading({
-								title: `正在下载安装包: ${(res.progress > lastProgress ? res.progress : lastProgress)}%`,
-								mask: true
-							})
-							loadingVisible = true
-						} else {
-							loadingVisible = false
-						}
-						lastProgress = res.progress > lastProgress ? res.progress : lastProgress
-					}
-				})
+		// 显示下载进度(封装方法)
+		showDownloadProgress(downloadTask) {
+			this.downloadVisible = true
+			this.downloadProgress = 0
 
-				// 确保任务完成时隐藏loading
-				if (downloadTask && typeof downloadTask.onStop === 'function') {
-					downloadTask.onStop(() => this.hideLoadingIfNeeded(loadingVisible))
-				}
-				if (downloadTask && typeof downloadTask.onError === 'function') {
-					downloadTask.onError(() => {
-						this.hideLoadingIfNeeded(loadingVisible)
-					})
+			downloadTask.onProgressUpdate((res) => {
+				this.downloadProgress = res.progress
+				if (res.progress >= 100) {
+					this.downloadVisible = false
 				}
-			},
+			})
 
-			// 隐藏loading(封装方法)
-			hideLoadingIfNeeded(loadingVisible) {
-				if (loadingVisible) {
-					uni.hideLoading()
-				}
-			},
+			// 确保任务异常时关闭弹窗
+			if (downloadTask && typeof downloadTask.onStop === 'function') {
+				downloadTask.onStop(() => { this.downloadVisible = false })
+			}
+			if (downloadTask && typeof downloadTask.onError === 'function') {
+				downloadTask.onError(() => { this.downloadVisible = false })
+			}
+		},
 
-			// 处理下载错误(封装方法)
-			handleDownloadError(errorType, reject) {
-				this.hideLoadingIfNeeded(true)
-				uni.showToast({
-					title: '更新失败',
-					icon: 'none'
-				})
-				if (reject) reject(errorType)
-			},
+		// 处理下载错误(封装方法)
+		handleDownloadError(errorType, reject) {
+			this.downloadVisible = false
+			uni.showToast({
+				title: '更新失败',
+				icon: 'none'
+			})
+			if (reject) reject(errorType)
+		},
 			// 登录方法
 			async submit() {
 				// #ifdef APP-PLUS
@@ -457,4 +447,70 @@
 		text-align: center;
 		width: 100%;
 	}
+
+	.download-modal {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 9999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.download-mask {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: rgba(0, 0, 0, 0.5);
+		}
+
+		.download-dialog {
+			position: relative;
+			width: 560rpx;
+			background: #fff;
+			border-radius: 20rpx;
+			padding: 50rpx 40rpx 40rpx;
+			box-sizing: border-box;
+
+			.download-title {
+				font-size: 32rpx;
+				font-weight: bold;
+				color: #333;
+				text-align: center;
+				margin-bottom: 40rpx;
+			}
+
+			.progress-bar-wrapper {
+				display: flex;
+				align-items: center;
+				gap: 20rpx;
+
+				.progress-bar-bg {
+					flex: 1;
+					height: 20rpx;
+					background: #e8e8e8;
+					border-radius: 10rpx;
+					overflow: hidden;
+
+					.progress-bar-fill {
+						height: 100%;
+						background: linear-gradient(90deg, #4a90e2, #357abd);
+						border-radius: 10rpx;
+						transition: width 0.3s ease;
+					}
+				}
+
+				.progress-text {
+					font-size: 28rpx;
+					color: #666;
+					min-width: 80rpx;
+					text-align: right;
+				}
+			}
+		}
+	}
 </style>