yicangzongtai_app_240321/components/appUpdatePop.vue

<template>
	<view>
		<u-popup v-model="show" mode="center" :closeable="!appInfo.status" border-radius="20"
			:mask-close-able="!appInfo.status" @close="close">
			<view class="popBox">
				<view class="imgBox">
					<!-- <image src="/static/logo-icon.png" mode="widthFix"></image> -->
					<!-- <image src="../logo.png" mode=""></image> -->
					<view class="imgBox_name">宜格服务</view>
					<text class="imgBox_ver">{{appInfo.version}}</text>
				</view>
				<view class="title">更新描述：</view>
				<view class="txt">{{appInfo.description||'无'}}</view>
				<view class="btnBox">
					<view v-if="startProgress" class="smallTitle">
						<view>下载进度:{{ downloadProgress }}%</view>
						<u-line-progress active-color="#3EBCD0" :show-percent="false" :percent="downloadProgress">
						</u-line-progress>
					</view>
					<view class="btn" v-else @click="handleUpdate()">立即更新</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		versionNewest
	} from "@/api/government.js"
	export default {
		data() {
			return {
				show: false,
				appInfo: {},
				startProgress: false, // 下载进行 - 标记
				downloadProgress: 0,
				type: null
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
			this.getAppInfo()
		},
		methods: {
			// // 获取更新信息
			getAppInfo() {
				// let type=1
				// let platform=uni.getSystemInfoSync().platform;
				// if(platform=='ios'){
				// 	type=0
				// }else if(platform=='android'){
				// 	type=1
				// }
				// this.$http.get('/app/version/newest',{type:type}).then(res => {
				// 	if (res && res.code == 200) {
				// 		this.appInfo = res.data || {};
				// 		// #ifdef APP-PLUS
				// 		plus.runtime.getProperty(plus.runtime.appid, (info) => {
				// 			this.versionCode = info.versionCode;
				// 			if (this.appInfo.version*1 > info.versionCode) {
				// 				this.show = true
				// 			}
				// 		})
				// 		// #endif
				// 	}
				// })
				const systemInfo = uni.getSystemInfoSync();
				let version_number = systemInfo.appVersion;
				let platform = uni.getSystemInfoSync().platform;
				let type = 0
				if (platform == 'ios') {
					type = 1
				} else if (platform == 'android') {
					type = 0
				}
				versionNewest({
					type: type
				}).then(res => {
					this.appInfo = res.data;
					if (version_number < this.appInfo.version) {
						this.show = true
					}
				})
			},
			close() {
				if (this.type == 1) {
					uni.navigateBack()
				}
				this.show = false;
				// this.$emit("closeAppUpdate")
			},
			// 开始下载任务
			createTask(downloadLink) {
				console.log("下载链接" + downloadLink)
				this.downloadProgress = 0;
				this.startProgress = true;
				// 创建下载任务对象
				this.downloadTask = uni.downloadFile({
					url: downloadLink,
					success: res => {

						if (res.statusCode === 200) {
							// 保存下载的安装包
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: res => {
									this.packgePath = res.savedFilePath;
									// 进行安装
									this.installPackge();
									// 任务完成，关闭下载任务
									this.closeTask();
								}
							});
						}
					}
				});

				this.downloadTask.onProgressUpdate(res => {
					this.downloadProgress = res.progress;
					this.$forceUpdate()
					console.log(res.progress)
				});
			},
			// 关闭下载任务
			closeTask() {
				this.downloadTask.abort();
				this.downloadTask = null;
				this.startProgress = false;
			},
			installPackge() {
				// 安装更新
				plus.runtime.install(this.packgePath, {
					force: true
				});
				this.installed = true;
				// 保存更新记录到stroage，方便下次启动app时删除安装包
				uni.setStorage({
					key: 'updated',
					data: {
						completed: true,
						packgePath: this.packgePath
					},
					success: res => {

						console.log('成功保存更新记录');
						// console.log(res.data)
					}
				});
				// 判断是否为热更新（判断文件名中是否含有.wgt）
				if (this.packgePath.match(RegExp(/.wgt/))) {
					console.log("9999999999999")
					this.installed = false;
					uni.showModal({
						title: '提示',
						content: '应用将重启以完成更新',
						showCancel: false,
						complete: () => {
							plus.runtime.restart();
						}
					});
				}
			},
			// 取得最新版本及其所有信息
			// async getLatest() {
			// 	console.log("gengxinyemian")
			// 	this.info = '正在加载'; // 主标题显示版本号
			// 	this.Minfo = '未知'; // 副标题显示版本类型
			// 	this.updateInfo = '无'; // 更新摘要
			// 	this.buttonLoading = true;
			// 	this.verInfo = null;
			// 	let res = await this.$http.get('/app/config/info');

			// 	if (res.code == 200) {
			// 		this.buttonLoading = false;
			// 		console.log("gengxinxixi"+JSON.stringify(res.data))
			// 		this.info = res.data.name;
			// 		this.Minfo = res.data.ver;

			// 		this.updateInfo = res.data.info;
			// 		this.packgeSize = res.data.packge_size + 'MB';
			// 		this.verInfo = res.data;

			// 		if (this.verInfo) {
			// 			this.checkLatest(this.verInfo);
			// 		}
			// 	}
			// },
			handleUpdate() {
				// 判断系统类型
				if (plus.os.name.toLowerCase() === 'android') {
					if (this.appInfo.downloadLink && this.appInfo.downloadLink !== '#') {

						this.createTask(this.appInfo.downloadLink);
					} else {
						this.showToast('未找到下载地址');
					}
				} else {
					if (this.appInfo.downloadLink && this.appInfo.downloadLink !== '#') {
						// 我这里默认#也是没有地址，请根据业务自行修改
						// 苹果(A)：进行热更新（如果iosUrl是wgt更新包的下载地址）判断文件名中是否含有.wgt
						if (this.appInfo.downloadLink.match(RegExp(/.wgt/))) {
							this.createTask(this.appInfo.downloadLink);
						} else {
							// 苹果(B)：打开商店链接（如果iosUrl是苹果商店的地址）
							plus.runtime.openURL(this.appInfo.downloadLink);
						}
					} else {
						this.showToast('未找到ios商店地址');
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.popBox {
		width: 590rpx;
		height: 773rpx;
		padding: 50rpx 30rpx 80rpx;
		position: relative;
		background: url("../static/czd/updateBg.png");
		background-size: 590rpx 773rpx;

		.imgBox {
			font-size: 28rpx;
			color: #666666;
			margin-left: 40rpx;

			.imgBox_name {
				font-size: 60rpx;
				font-weight: 700;
				color: #fff;
			}

			.imgBox_ver {
				font-size: 44rpx;
				color: #fff;
				font-weight: 700;
				min-height: 58rpx;
				display: inline-block;
			}

			// image {
			// 	display: block;
			// 	width: 100rpx;
			// 	height: 100rpx;
			// 	margin: 10rpx auto;
			// }
		}

		.title {
			margin-bottom: 10rpx;
			margin: 180rpx 40rpx 10rpx;
			font-size: 36rpx;
			color: #333333;
			font-weight: 700;
		}

		.txt {
			color: #808080;
			font-size: 26rpx;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// display: -webkit-box;
			// -webkit-line-clamp: 3;
			// -webkit-box-orient: vertical;
			max-height: 160rpx;
			overflow-y: auto;
			padding: 0 40rpx;
		}

		.btnBox {
			width: 100%;
			position: absolute;
			bottom: 70rpx;
			left: 0;

			.smallTitle {
				padding: 0 50rpx;
				text-align: center;
			}

			.btn {
				width: 428rpx;
				height: 80rpx;
				font-size: 30rpx;
				color: #FFFFFF;
				background: linear-gradient(6deg, #56d9ee 0%, #3ebcd0 100%) #3c66d9;
				border-radius: 10rpx;
				text-align: center;
				line-height: 80rpx;
				font-weight: 700;
				margin: auto;
			}
		}
	}
</style>