zhapp/components/yzhua006-update/app-update.vue

<template>
	<view class="wrap">
		<!-- <view class="popup-bg" :style="getHeight">
			<view class="popup-content" :class="{'popup-content-show' : popup_show}">
				<view class="update-wrap">
					<image src="./images/img.png" class="top-img"></image>
					<view class="content">
						<text class="title">发现新版本V{{update_info.versionno}}</text>
						<view class="title-sub" v-html="update_info.title|| '版本更新'" style="font-weight: bold;"></view>
						<view class="title-sub" v-html="update_info.content || '版本更新'" style="padding-top: 8rpx;">
						</view>
						<button class="btn" v-if="downstatus < 1" @click="nowUpdate()">立即升级</button>
						<view class="sche-wrap" v-else>
							<view class="dis a-c j-s">
								<text style="color: #666;margin-right: 10rpx;font-size: 30rpx;">正在下载</text>
								<view class="sche-bg">
									<view class="sche-bg-jindu" :style="lengthWidth"></view>
								</view>
								<text style="color: #666;margin-left: 10rpx;font-size: 30rpx;">{{width}}%</text>
							</view>
							<text
								class="down-text">下载进度:{{(downSize/1024/1024 ).toFixed(2)}}M/{{(fileSize/1024/1024).toFixed(2)}}M</text>
						</view>
					</view>
				</view>
				<image src="./images/close.png" class="close-ioc" @click="closeUpdate()"></image>
			</view>
		</view> -->
		<uni-Popup :show="popup_show" @close='popup_show=false' :headerTitle="`晋掌柜 V${update_info.version}版本已准备好`"
			:closeable="false" :closeOnClickOverlay="false">
			<template #content>
				<view class="updateVersion">
					<text class="content" v-if="downstatus < 1">
						{{update_info.content || '版本更新'}}
					</text>
					<view class="sche-wrap" v-else>
						<view class="dis a-c j-s">
							<text style="color: #666;margin-right: 10rpx;font-size: 30rpx;">正在下载</text>
							<view class="sche-bg">
								<view class="sche-bg-jindu" :style="lengthWidth"></view>
							</view>
							<text style="color: #666;margin-left: 10rpx;font-size: 30rpx;">{{width}}%</text>
						</view>
					</view>
					<view class="footer dis a-c j-s ">
						<template v-if="downstatus < 1">
							<view class="dis a-c j-c" v-if="update_info.appType!=1" @tap="closeUpdate()">稍后再说</view>
							<view class="dis a-c j-c" style="margin-left: 28rpx;" @click="nowUpdate()">立即升级</view>
						</template>
						<view v-else class="dis a-c j-c">下载中</view>
					</view>
				</view>
			</template>
		</uni-Popup>

	</view>

</template>
<script>
	var vm;
	export default {
		name: "appUpdate",
		//@是否强制更新
		props: {

		},
		data() {
			return {
				popup_show: false, //弹窗是否显示
				platform: "", //ios or android
				version: null, //当前软件版本
				wgtLatestVersion: "", //最新资源
				apkLatestVersion: "", //最新整包
				need_update: false, // 是否更新
				downing: false, //是否下载中
				downstatus: 0, //0未下载  1已开始 2已连接到资源  3已接收到数据  4下载完成
				update_info: {},
				fileSize: 0, //文件大小
				downSize: 0, //已下载大小
				viewObj: null, //原生遮罩view
				force: true,
				width: "",
				wgtInfo: {}, //wgt最新安装包信息
				apkInfo: {}, //apk最新安装包更新信息
			};
		},
		created() {
			vm = this;
		},
		computed: {
			// 下载进度计算
			lengthWidth: function() {
				let w = this.downSize / this.fileSize * 100;
				let result = w;
				vm.width = Math.floor(result)
				if (!w) {
					w = 0
				} else {
					w = w.toFixed(2)
				}
				return {
					width: w + "%" //return 宽度百分比

				}
			},
			getHeight: function() {
				let bottom = 0;
				return {
					"bottom": bottom + 'px',
					"height": "auto"
				}
			}
		},
		methods: {
			// 检查更新
			update() {
				// #ifdef APP-PLUS
				// 获取手机系统信息
				uni.getSystemInfo({
					success: function(res) {
						vm.platform = res.platform //ios  or android
					}
				});
				// 获取手机应用当前版本号
				plus.runtime.getProperty(plus.runtime.appid, function(inf) {
					vm.version = inf.version
				});
				vm.getUpdateInfo(); //获取最新版本信息
				// #endif
				vm.version = '1.0.6'
				vm.getUpdateInfo(); //获取最新版本信息
			},
			// 获取线上版本信息
			async getUpdateInfo() {
				//向后台发起请求，获取最新版本号
				let apkquote = await this.$http.get('/version/getMaxVersion', {
					appid: "__UNI__05D695B",
					packageType: "apk",
				});
				if (apkquote.code == 200 && apkquote.data) {
					vm.apkInfo = apkquote.data;
					vm.apkLatestVersion = apkquote.data.version;
				}
				let wgtquote = await this.$http.get('/version/getMaxVersion', {
					packageType: "wgt",
					appid: "__UNI__05D695B",
				});
				if (wgtquote.code == 200 && wgtquote.data) {
					vm.wgtInfo = wgtquote.data;
					vm.wgtLatestVersion = wgtquote.data.version;
				}
				vm.checkUpdate(); //检查是否更新

			},
			// 检查是否更新
			checkUpdate() {
				if (vm.version) {
					let apkneed = vm.compareVersion(vm.version, vm.apkLatestVersion); // 检查包版本
					let wgtneed = vm.compareVersion(vm.version, vm.wgtLatestVersion); // 检查资源版本
					if (apkneed) {
						vm.update_info = vm.apkInfo;
						if (vm.update_info.appType != 0) {
							vm.popup_show = true; //线上版本号大于当前安装的版本号  显示升级框
							this.$emit('status', vm.popup_show)
						}
					} else {
						if (wgtneed) {
							vm.update_info = vm.wgtInfo;
							if (vm.update_info.appType != 0) {
								vm.popup_show = true; //线上版本号大于当前安装的版本号  显示升级框
								this.$emit('status', vm.popup_show)
							}
						}
					}
				}
			},

			// 取消更新
			closeUpdate() {
				vm.popup_show = false; //关闭升级弹窗
			},
			// 立即更新
			nowUpdate() {
				if (vm.downing) return false; //如果正在下载就停止操作
				vm.downing = true; //状态改变 正在下载中

				// if (/\.apk$/.test(vm.update_info.path)) {
				// 	// 如果是apk地址
				// 	vm.download_wgt() // 安装包/升级包更新
				// } else if (/\.wgt$/.test(vm.update_info.path)) {
				// 	// 如果是更新包
				// 	vm.download_wgt() // 安装包/升级包更新
				// } else {
				// 	plus.runtime.openURL(vm.update_info.path, function() { //调用外部浏览器打开更新地址
				// 		plus.nativeUI.toast("打开错误");
				// 	});
				// }
				if (vm.update_info.path) {
					vm.download_wgt()
				}
			},
			// 下载升级资源包
			download_wgt() {
				plus.nativeUI.showWaiting("下载更新文件..."); //下载更新文件...
				let options = {
					method: "get"
				};
				let dtask = plus.downloader.createDownload(vm.update_info.path, options, function(d, status) {

				});
				dtask.addEventListener("statechanged", function(task, status) {
					if (status === null) {} else if (status == 200) {
						vm.downstatus = task.state;
						switch (task.state) {
							case 3: // 已接收到数据  
								vm.downSize = task.downloadedSize;
								if (task.totalSize) {
									vm.fileSize = task.totalSize; //服务器须返回正确的content-length才会有长度
								}
								break;
							case 4:
								vm.installWgt(task.filename); // 安装wgt包  
								break;
						}
					} else {
						plus.nativeUI.closeWaiting();
						plus.nativeUI.toast("下载出错");
						vm.downing = false;
						vm.downstatus = 0;
					}
				});
				dtask.start();
			},

			// 安装文件
			installWgt(path) {
				plus.nativeUI.showWaiting("安装更新文件..."); //安装更新文件...
				plus.runtime.install(path, {}, function() {
					plus.nativeUI.closeWaiting();
					// 应用资源下载完成！
					plus.nativeUI.alert("应用资源下载完成！", function() {
						plus.runtime.restart();
					});
				}, function(e) {
					plus.nativeUI.closeWaiting();
					// 安装更新文件失败
					plus.nativeUI.alert("安装更新文件失败[" + e.code + "]：" + e.message);
				});
			},
			// 对比版本号
			compareVersion(ov, nv) {
				if (!ov || !nv || ov == "" || nv == "") {
					return false;
				}
				let b = false,
					ova = ov.split(".", 4),
					nva = nv.split(".", 4);
				for (let i = 0; i < ova.length && i < nva.length; i++) {
					let so = ova[i],
						no = parseInt(so),
						sn = nva[i],
						nn = parseInt(sn);
					if (nn > no || sn.length > so.length) {
						return true;
					} else if (nn < no) {
						return false;
					}
				}
				if (nva.length > ova.length && 0 == nv.indexOf(ov)) {
					return true;
				} else {
					return false;
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.popup-bg {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: var(--window-bottom);
		width: 750rpx;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 99999999;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.popup-content-show {
		animation: mymove 500ms;
		transform: scale(1);
	}

	@keyframes mymove {
		0% {
			transform: scale(0);
			/*开始为原始大小*/
		}

		100% {
			transform: scale(1);
		}
	}

	.update-wrap {
		width: 580rpx;
		border-radius: 18rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 170rpx 30rpx 0;

		.top-img {
			position: absolute;
			left: 0;
			width: 100%;
			height: 256rpx;
			top: -128rpx;
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 40rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #3a63f6;
			}

			.title-sub {
				text-align: center;
				font-size: 24rpx;
				color: #666666;
				padding-top: 20rpx;
			}

			.btn {
				width: 460rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #ffffff;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 100px;
				background-color: #3a63f6;
				margin-top: 20rpx;
			}
		}
	}

	.close-ioc {
		width: 70rpx;
		height: 70rpx;
		margin-top: 30rpx;
	}

	.sche-wrap {
		width: 100%;
		padding: 10rpx 0 0;
		box-sizing: border-box;

		.sche-wrap-text {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.sche-bg {
			position: relative;
			background-color: #F8F8F8;
			height: 13rpx;
			border-radius: 100px;
			flex: 1;
			display: flex;
			align-items: center;

			.sche-bg-jindu {
				position: absolute;
				left: 0;
				top: 0;
				height: 13rpx;
				min-width: 40rpx;
				border-radius: 100px;
				// background: url(images/round.png) #5775e7 center right 4rpx no-repeat;
				background: #FDE935;
				// background-size: 26rpx 26rpx;
			}
		}

		.down-text {
			font-size: 24rpx;
			color: #5674e5;
			margin-top: 16rpx;
		}
	}


	.updateVersion {
		padding: 40rpx 40rpx 20rpx;

		//内容区
		.content {
			font-size: 30rpx;
			color: #666;
		}

		//底部
		.footer {
			margin-top: 58rpx;

			view {
				font-size: 30rpx;
				padding: 20rpx;
				flex: 1;
			}

			view:first-child {
				color: #333;
				background: transparent;
				border-radius: 50rpx;
				border: 1rpx solid #FDE935;
			}

			view:last-child {
				background: #FDE935;
				border-radius: 50rpx;
				color: #1F1F1F;
			}
		}
	}
</style>