im/pages/common/upgrade.vue

<template>
	<view class="upgrade_page">
		<uni-nav-bar left-icon="back" 
			@clickLeft="back" 
			title="系统更新"
			backgroundColor="#FFF" 
			fixed 
			statusBar>
		</uni-nav-bar>
		
		<view style="flex:1;display: flex;align-items: center;justify-content: center;">
			<view :style="{width:'580rpx',position:'relative'}">
				<image src="/static/images/upgrade.png" :style="{width:'580rpx'}" mode="widthFix"></image>
				<view class="version_info">
					<text class="title">发现新版本</text>
					<text class="code">V{{model.version}}</text>
				</view>
				<view class="detail">
					<scroll-view :show-scrollbar="false" scroll-y>
						 <rich-text :nodes="model.content"></rich-text>
					</scroll-view>
					<view class="footer">
						<view v-if="progress">
							<u-line-progress :percentage="value" activeColor="#fc3463"></u-line-progress>
						</view>
						<view class="buttons" v-else>
							<u-button v-if="model.force==0" @click="cancel" :customStyle="{backgroundColor:'#f3f3f3'}" text="暂不更新" color="#fc3463" shape="circle" throttleTime="1000" plain></u-button>
							<u-button @click="upgrade" text="立即更新" color="#fc3463" shape="circle" throttleTime="1000"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "@/util/index.js"
	export default {
		data() {
			return {
				value: 0,
				model: {
					force: 1,
					version: '1.0.0',
					content: ''
				},
				progress: false,
				download: false
			}
		},
		onLoad(evt) {
			// if(evt.model){
			// 	this.model = {...this.model, ...JSON.parse(evt.model)}
			// }
			var model = uni.getStorageSync('upgrade_model');
			console.log(model);
			if(model){
				this.model = {...this.model, ...model};
			}
			// this.model = {
			// 	"id": 1,
			// 	"type": 1,
			// 	"force": 1,
			// 	"source": "https://shunliao.oss-accelerate.aliyuncs.com/files/150016c51d8672fde3d1cc6945a95089_695d97b6c0162.wgt",
			// 	"version": "3.3.6",
			// 	"content": "修复了一些bug",
			// 	"source_text": null
			// };
		},
		onBackPress() {
			if(this.model.force==1){
				return true
			}
		},
		methods: {
			back(){
				if(this.model.force!=1){
					uni.navigateBack()
				}
			},
			// 取消更新
			cancel() {
				uni.navigateBack()
				uni.setStorageSync('skip_version', this.model.version)
			},
			// 立即更新
			upgrade(){
				// 检测更新方式
				if(this.model.type==0 || this.model.type==1){
					this.downloadUpdate()
				}else{
					plus.runtime.openURL(this.model.source_text)
				}
			},
			// 下载更新
			downloadUpdate() {
				if(!this.download){
					this.progress = true
					this.download = true
					// 下载安装包
					const download = uni.downloadFile({
						url: this.model.source_text,
						success: result=>{
							// 自动安装软件
							plus.runtime.install(result.tempFilePath, {force:true}, ()=>{
								// 防止强制更新无法关闭界面
								this.model.force = 0
								if(this.model.type==1){
									util.showToast('更新成功，软件重启')
									setTimeout(()=>{ plus.runtime.restart() }, 1500)
								}
							})
						},
						fail: error=>{
							util.showToast('下载失败，请检查您的网络情况')
							this.model.force = 0;
						}
					})
					// 监听下载进度
					download.onProgressUpdate(result=>{
						this.value = result.progress
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upgrade_page{
		display: flex;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.1);
		height: 100vh;
		width: 100vw;
		.version_info{
			position: absolute;
			top:120rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-left: 20rpx;
			width: 100%;
			.title{
				color: #fff;
			}
			.code{
				color: #fff;
			}
		}
		.detail{
			margin-top: -10rpx;
			background-color:#f3f3f3;
			border-radius:0 0 16rpx 16rpx;
			padding: 10rpx 20rpx 30rpx;
			display: flex;
			flex-direction: column;
			scroll-view{
				flex: 1;
				min-height: 300rpx;
				rich-text{
					font-size:32rpx;
					line-height: 1.5;
				}
			}
			.footer{
				display: flex;
				flex-direction: column;
				justify-content: center;
				gap: 20rpx;
				.buttons{
					width: 100%;
					display: flex;
					justify-content: space-around;
				}
			}
		}
	}
</style>