xwc/pages/index/downLoad.vue

<template>
	<view class="content">
		<view class="main">
			<view class="main-bg"><image src="../../static/images/download.png" mode=""></image></view>
			<view class="title">软件更新</view>
			<view class="jdt">
				<u-line-progress :show-percent="false" :percent="percent" :striped-active="true" :striped="true" inactive-color="#f5957d" active-color="#fd6f3f"></u-line-progress>
			</view>
			<view class="num">{{ percent }}%</view>
			<view class="tipSpan">软件更新中，请勿断开相框电源</view>
			<!-- <view class="btn" @click="cancelDown()">取消更新</view> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dtask: '',
			percent: 0
		};
	},
	onLoad(opt) {
		this.downApp(opt.apk);
	},
	onShow() {},
	onReachBottom() {},
	onReady() {},
	methods: {
		downApp(version) {
			this.dtask = plus.downloader.createDownload(version);
			this.dtask.addEventListener('statechanged', this.onStateChanged, false);
			this.dtask.start();
		},
		cancelDown() {
			this.dtask.abort();
			uni.navigateTo({
				url: '/pages/index/index'
			});
		},
		onStateChanged(download, status) {
			let prg = 0;
			console.log(this.percent);
			switch (download.state) {
				case 1:
					// showLoading.setTitle("正在下载");
					break;
				case 2:
					// showLoading.setTitle("已连接到服务器");
					break;
				case 3:
					prg = parseInt(
						//下载的进度
						(parseFloat(download.downloadedSize) / parseFloat(download.totalSize)) * 100
					);
					// showLoading.setTitle("版本更新,正在下载" + prg + "% ");
					this.percent = prg;
					break;
				case 4:
					this.installApp(download.filename);
					// plus.nativeUI.closeWaiting(); //关闭系统提示框
					this.showProcess = false;
					//下载完成
					break;
			}
		},
		installApp(path) {
			plus.nativeUI.showWaiting('安装升级包...');
			plus.runtime.install(
				path,
				{},
				function() {
					plus.nativeUI.closeWaiting();
					uni.showToast({
						icon: 'none',
						title: '升级完成，准备重新载入'
					});
					setTimeout(_ => {
						uni.hideToast();
						plus.runtime.restart();
					}, 1000);
				},
				function(e) {
					plus.nativeUI.closeWaiting();
					plus.nativeUI.alert('安装升级包失败[' + e.code + ']：' + e.message);
				}
			);
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	min-height: 100%;
	height: auto;
}

.main {
	margin-top: 100rpx;
	.main-bg {
		margin: 0 auto;
		width: 550rpx;
		height: 340rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.title {
		text-align: center;
		color: #000000;
		font-size: 40rpx;
		margin-top: 20rpx;
		font-family: PingFang SC;
		font-weight: bolder;
	}
	.jdt {
		width: 550rpx;
		margin: 20rpx auto;
	}
	.num {
		text-align: center;
		color: #ff7575;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
	.tipSpan {
		margin-top: 20rpx;
		text-align: center;
		color: #ababab;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		width: 400rpx;
		height: 80rpx;
		background: #ff4c4c;
		margin: 20rpx auto;
		border-radius: 20rpx;
	}
}
</style>