hbj_app/components/update/update.vue

<template>
	<view class="divBG" v-if="show">
		<view class="upgrade-popup">
			<image class="header-bg" src="./upgrade_bg.png" mode="widthFix"></image>
			<view class="main">
				<view class="version">发现新版本{{ versionNum }}</view>
				<view class="content">
					<text class="title">更新内容</text>
					<view class="desc" v-html="versionContent"></view>
				</view>
				<!--下载状态-进度条显示 -->
				<!-- 进度条 -->
				<!--下载状态-进度条显示 -->
				<view class="footer" v-if="isProgress">
					<view class="progress-view" :class="{ active: !isProgress }">
						<!-- 进度条 -->
						<view style="height: 100%;">
							<view class="txt">{{ percentText }}</view>
							<view class="progress" :style="setProStyle"></view>
						</view>
					</view>
				</view>

				<!-- 可选择更新 -->
				<view class="footer" v-if="!isProgress">
					<view class="btn close" @click="downBtn()" v-if="!isProgress">以后再说</view>
					<view class="btn upgrade" @click="downloadBtn()" v-if="!isProgress">立即更新</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['show', 'versionNum', 'versionContent', 'downloadUrl'],
	data() {
		return {
			progress: 0,
			isProgress: false
		};
	},
	computed: {
		//设置进度条样式，实时更新进度位置
		setProStyle() {
			return {
				width: (510 * this.progress) / 100 + 'rpx' //510：按钮进度条宽度
			};
		},
		//百分比文字
		percentText() {
			let percent = this.progress;
			if (typeof percent !== 'number' || isNaN(percent)) return '下载中...';
			return `${percent}%`;
		}
	},
	methods: {
		downBtn() {
			// this.show = false;
			this.$emit('showF', false);
			uni.$u.toast('我的-应用更新模块也可更新');
		},
		downloadBtn() {
			this.isProgress = true;

			const downloadTask = uni.downloadFile({
				url: this.downloadUrl,
				success: res => {
					//安装
					plus.runtime.install(
						res.tempFilePath,
						{
							force: true
						},
						function(_res) {
							plus.runtime.restart();
						}
					);
				},
				fail: err => {
					uni.$u.toast('下载失败');
				}
			});
			// 查看下载进度
			downloadTask.onProgressUpdate(res => {
				this.progress = res.progress;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.divBG {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.upgrade-popup {
	width: 580rpx;
	height: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	z-index: 10;
	border-radius: 20rpx;
	box-sizing: border-box;
	border: 1px solid #eee;
}

.header-bg {
	width: 100%;
	margin-top: -112rpx;
}

.main {
	padding: 10rpx 30rpx 30rpx;
	box-sizing: border-box;
	.version {
		font-size: 36rpx;
		color: #026df7;
		font-weight: 700;
		width: 100%;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		letter-spacing: 1px;
	}

	.content {
		margin-top: 60rpx;

		.title {
			font-size: 28rpx;
			font-weight: 700;
			color: #000000;
		}

		.desc {
			box-sizing: border-box;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #6a6a6a;
			max-height: 40vh;
			overflow-y: auto;
		}
	}

	.footer {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		flex-shrink: 0;
		margin-top: 100rpx;

		.btn {
			width: 246rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			z-index: 999;
			height: 96rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			border-radius: 10rpx;
			letter-spacing: 2rpx;

			&.force {
				width: 500rpx;
			}

			&.close {
				border: 1px solid #e0e0e0;
				margin-right: 25rpx;
				color: #000;
			}

			&.upgrade {
				background-color: #026df7;
				color: white;
			}
		}

		.progress-view {
			width: 510rpx;
			height: 90rpx;
			display: flex;
			position: relative;
			align-items: center;
			border-radius: 6rpx;
			background-color: #dcdcdc;
			display: flex;
			justify-content: flex-start;
			padding: 0px;
			box-sizing: border-box;
			border: none;
			overflow: hidden;

			&.active {
				background-color: #026df7;
			}

			.progress {
				height: 100%;
				background-color: #026df7;
				padding: 0px;
				box-sizing: border-box;
				border: none;
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
			}

			.txt {
				font-size: 28rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #fff;
			}
		}
	}
}
</style>