xuan-pay-cweb/components/downloadUp.vue

<template>
	<view class="content" v-if="bannerShow">
		<!-- 弹出层 -->
		<view class="uni-banner">
			<!-- <image src="../static/logo.png" class="startUpHeaderLogo" /> -->
			<view class="banner_box">
				<view class="startUpHeaderBox h6">发现新版本</view>
				<view class="conter">{{ msg }}</view>
				<view class="banner_foot"><button @click="goUpdate()" class="banner_foot_button">前往升级</button></view>
			</view>
		</view>
		<view class="uni-mask"></view>
	</view>
</template>
<script>
	// import {
	// 	getUpgrade
	// } from '@/common/js/apis';
	import {
		queryVersion
	} from '../Utils/Api.js'
	export default {
		data() {
			return {
				bannerShow: false, // 是否需要強制更新app
				msg: '', // 更新描述
				type: '', // 设备类型  android:2, ios:1
				updateApkObj: null // 后台数据
			};
		},
		created() {
			const appUpdate = uni.getStorageSync('platform');
			// #ifdef APP-PLUS
			this.checkUpdate();
			// #endif

		},
		methods: {
			checkUpdate() {
				let that = this;
				let localAppVersonName = uni.getStorageSync('version');
				// #ifdef APP-PLUS
				let datas = {
					termType: "APP"
				}
				queryVersion(datas).then(res => {
					if (res.return_code == '000000') {
						that.msg  = res.return_data.content;
						if (res.return_data.versionType == 1 && that.comparisonVersionHandler(localAppVersonName,
								res.return_data.version)) {
							that.downloadWgt(res.return_data.fileUrl);
							return;
						}
						if (res.return_data.versionType == 2 && that.comparisonVersionHandler(localAppVersonName,
								res.return_data.version)) {
							that.updateApkObj = res.return_data;
							that.bannerShow = true; // 显示弹窗
							return;
						}
					}
				})
				// #endif
			},

			downloadWgt(updateWgtUrl) {
				// 热更新
				// 下载wgt方法
				const that = this;
				// 更新文件 wgt 文件地址
				plus.nativeUI.showWaiting('正在更新...');
				plus.downloader.createDownload(
					updateWgtUrl, {
						filename: '_doc/update/'
					},
					function(d, status) {
						if (status == 200) {
							that.installWgt(d.filename); // 安装wgt方法
						}
						plus.nativeUI.closeWaiting();
					}
				).start();
			},
			installWgt(path) {
				// 安装wgt方法
				plus.nativeUI.showWaiting('安装文件...');
				plus.runtime.install(
					path, {
						force: true
					},
					function() {
						plus.nativeUI.closeWaiting();
						plus.nativeUI.alert('应用资源更新完成！', function() {
							plus.runtime.restart();
						});
					},
					function(e) {
						plus.nativeUI.closeWaiting();
					}
				);
			},
			goUpdate() {
				// if (this.type == 2) {
					// 弹出系统等待对话框
					var dtask = plus.downloader.createDownload(
						this.updateApkObj.fileUrl, {},
						function(d, status) {
							this.bannerShow = false;
							// 下载完成
							if (status == 200) {
								plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {}, function(
									error) {
									uni.showToast({
										title: '安装失败',
										mask: false,
										duration: 1500
									});
								});
							} else {
								uni.showToast({
									title: '更新失败',
									mask: false,
									duration: 1500
								});
							}
						});
					try {
						dtask.start(); // 开启下载的任务
						let prg = 0;
						const showLoading = plus.nativeUI.showWaiting('正在下载'); //创建一个showWaiting对象
						dtask.addEventListener('statechanged', function(task, status) {
							// 给下载任务设置一个监听 并根据状态  做操作
							switch (task.state) {
								case 1:
									showLoading.setTitle('正在下载');
									break;
								case 2:
									showLoading.setTitle('已连接到服务器');
									break;
								case 3:
									prg = parseInt((parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) *
										100);
									showLoading.setTitle('  正在下载' + prg + '%  ');
									break;
								case 4:
									plus.nativeUI.closeWaiting();
									//下载完成
									break;
							}
						});
					} catch (err) {
						plus.nativeUI.closeWaiting();
						uni.showToast({
							title: '更新失败-03',
							mask: false,
							duration: 1500
						});
					}
				// } else if (this.type == 1) { // ios跳转到app store
				// 	plus.runtime.openURL(updateApkObj.downloadUrl);
				// }
			},
			//判断是否升级
			comparisonVersionHandler(reqV, curV) {
				/* 版本号名比较是否需要升级
				curV string :当前最新
				reqV string :之前
				
				返回 true 表示需要升级
				*/
				if (curV && reqV) {
					curV = String(curV);
					reqV = String(reqV);
					//将两个版本号拆成数字
					let arr1 = curV.split('.'), //當前
						arr2 = reqV.split('.');
					let minLength = Math.min(arr1.length, arr2.length),
						position = 0,
						diff = 0;
					//依次比较版本号每一位大小，当对比得出结果后跳出循环
					while (position < minLength && ((diff = parseInt(arr1[position]) - parseInt(arr2[position])) == 0)) {
						position++;
					}
					diff = (diff != 0) ? diff : (arr1.length - arr2.length);
					//若curV大于reqV，则返回true
					return diff > 0;
				} else {
					//输入为空
					return false;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content,
	#img {
		width: 100%;
		height: 100%;
	}

	.content .con {
		font-size: 0;
		display: flex;
		align-items: center;
	}


	#info {
		position: absolute;
		top: 0;
		left: 0;
		width: 72rpx;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.3);
		text-align: center;
		color: #fff;
		font-size: 24rpx;
	}


	.wrapper {
		width: 36rpx;
		height: 72rpx;
		position: absolute;
		top: 0;
		overflow: hidden;
	}

	.right {
		right: 0;
	}

	.left {
		left: 0;
	}







	/* 弹出层形式的广告 */
	.uni-banner {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 1000;
		transform: translate(-50%, -50%);
		width: 80%;

		.startUpHeaderLogo {
			width: 200rpx;
			height: 200rpx;
		}

		.banner_box {
			width: 100%;
			background: #fff;
			border-radius: 20rpx;
		}

		.startUpHeaderBox {
			width: 100%;
			height: 96rpx;
			background-image: url('/static/logo.png');
			background-position: left top;
			background-repeat: no-repeat;
			background-size: cover;
		}
	}

	.banner_box .h6 {
		text-align: center;
		line-height: 96rpx;
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
	}

	.banner_box .conter {
		font-size: 28rpx;
		color: #333;
		margin: 48rpx;
	}

	.banner_foot {
		width: 238rpx;
		margin: 48rpx auto;
	}

	.banner_foot_button {
		background-image: linear-gradient(to right, #3aaf7a, #41bf7f);
		line-height: 72rpx;
		height: 72rpx;
		font-size: 30rpx;
		color: #fff;
		font-weight: bold;
		border-radius: 40rpx;
		border: none;
		box-shadow: 0 8rpx 20rpx 0 rgba(46, 189, 88, 0.36);
	}

	.banner_foot_button:active {
		background-image: linear-gradient(to right, #41bf7f, #3aaf7a);
	}

	.uni-mask {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 2;
	}
</style>