muck_truck_app/components/updata/updata.vue

<template>
	<!-- 版本更新弹出框 -->
	<u-popup :show="isUpdateShow" mode="center">
		<view class="update-box" :class="bnList.url?'':'updateOverHeight'">
			<view class="update-text" v-if="bnList.url">
				<view class="title-text">
					发现新版本
				</view>
				<view class="middle-text">
					新版本V{{bnList.version}}
				</view>
			</view>
			<view class="update-text" v-else>
				<view class="title-text">
					当前已是最新版本
				</view>

				<view class="middle-text">
					当前V{{bnList.version}}
				</view>
			</view>
			<view class="percentStyle" v-if="progress">
				{{percent}}%
			</view>
			<view class="progress" v-if="progress">
				<u-line-progress height="22rpx" :showText="false" :percentage="percent" activeColor="#2675CE">
				</u-line-progress>
			</view>
			<view class="update-button" v-if="bnList.url">

				<u-button shape="circle" color="linear-gradient(to top, #F59A02, #FFD334 )" @tap="getKpi(bnList.url)"
					class="add-button width220 boderRadius buttonLang width220">
					{{progress?'停止更新':'马上更新'}}
				</u-button>
				<!-- <u-button @tap="isUpdateShow = false"
					class=" add-button boderRadius backWhtie colorYellow width220">暂不更新</u-button> -->
			</view>
			<view class="update-close" @tap="close">
				<u-icon size="66" color="#ffffff" name="close-circle"></u-icon>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		versionList
	} from "@/api/company/my.js"
	export default {
		name: "updata",
		props: {
			// 升级框的开关
			isUpdateShow: {
				type: Boolean,
				default: false
			},
			isLogin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				oldVersion: null,
				downloadTask: null,
				progress: false,
				percent: 0,
				bnList: {
					version: "",
					oldVersion: "",
					url: ','
				},
				userId: null,
				versionCode: null
			};
		},
		watch: {
			isUpdateShow(newVal) {
				if (newVal) {
					this.getVersion()
				}
			},
			oldVersion(newVal) {
				if (newVal) {
					this.getVersionList()
				}
			}
		},
		methods: {
			// 按钮事件
			getKpi(url) {
				this.percent = 0
				this.progress = !this.progress
				// #ifdef APP-PLUS
				if (this.progress) {
					// 开始下载任务
					this.downloadTask = uni.downloadFile({
						url,
						// 接口调用成功
						success: (downloadResult) => {
							uni.hideLoading();
							if (downloadResult.statusCode === 200) {
								plus.runtime.install(downloadResult.tempFilePath, {
									force: false
								}, function() {
									plus.runtime.restart();
								}, function(e) {
									console.error('install fail...');
								});
							}
						},
						// 接口调用失败
						fail: (err) => {
							// uni.showToast({
							// 	icon: 'none',
							// 	mask: true,
							// 	title: '安装失败，请重新下载',
							// });
						},
						// 接口调用结束
						complete: () => {
							this.downloadTask.offProgressUpdate(); //取消监听加载进度
						}
					});
					//监听下载进度
					this.downloadTask.onProgressUpdate(res => {
						// state.percent = res.progress;
						this.percent = res.progress
						// console.log('下载进度百分比:' + res.progress); // 下载进度百分比
						// console.log('已经下载的数据长度:' + res.totalBytesWritten); // 已经下载的数据长度，单位 Bytes
						// console.log('预期需要下载的数据总长度:' + res.totalBytesExpectedToWrite); // 预期需要下载的数据总长度，单位 Bytes
					})
				} else {
					// 中断下载
					this.downloadTask.abort()
				}
				// #endif
			},
			getVersion() {
				//#ifdef APP-PLUS
				// 获取本地应用资源版本号
				plus.runtime.getProperty(plus.runtime.appid, (info) => {
					console.log(JSON.stringify(info));
					this.oldVersion = info.version
					let versionCode = this.oldVersion
					let arr = versionCode.split('.')
					this.versionCode = arr.join('')
					console.log(this.oldVersion);
					console.log(this.versionCode);
				})
				//#endif
			},
			// 关闭事件
			close() {
				this.$emit('close', false)
			},
			getVersionList() {
				if (this.isLogin) {
					let obj = {}
					obj.versionNo = 'admin'
					obj.userId = ''
					console.log(obj);
					versionList(obj).then(res => {
						console.log('登录页更新', res);
						let versionCode = res.data.versionNo
						let arr = versionCode.split('.')
						let versionNum = arr.join('')
						// versionCode.replace(/./g, '')
						console.log('版本数字', versionNum);
						if (+versionNum <= +this.versionCode) {
							this.bnList.url = ''
							this.bnList.version = this.oldVersion
							this.$emit('loginShow', false)
						} else {
							this.bnList.url = res.data.url;
							this.bnList.version = res.data.versionNo
							console.log(this.bnList);
							this.$emit('loginShow', true)
						}
					})
				} else {
					let obj = {}
					obj.versionNo = this.oldVersion
					obj.userId = this.userId
					console.log(obj);
					versionList(obj).then(res => {
						console.log('版本', res);
						let versionCode = res.data.versionNo
						let arr = versionCode.split('.')
						let versionNum = arr.join('')
						this.bnList.oldVersion = this.oldVersion;
						this.bnList.version = res.data.versionNo
						if (+versionNum <= +this.versionCode) {
							this.bnList.url = ''
							this.bnList.version = this.oldVersion
							console.log(this.bnList);
						} else {
							this.bnList.url = res.data.url;
							console.log(this.bnList);
						}
						console.log(this.bnList);
						// this.versionCode = info.versionCode ;
					})
				}

			}
		},
		mounted() {
			this.userId = this.$store.state.user.userId
			if (this.isLogin) {
				this.getVersion()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-popup__content {
		border-radius: 18rpx;
	}

	// 进度条样式
	.progress {
		margin: 18rpx auto 0;
		width: 388rpx;
	}

	.percentStyle {
		width: 100%;
		text-align: center;
		font-size: 26rpx;
		color: #2675CE;
	}

	.updateOverHeight {
		height: 480rpx !important;
	}

	.update-box {
		width: 543rpx;
		height: 630rpx;
		background: url(../../static/images/home/update.png);
		background-size: 100%;
		position: relative;
		border-radius: 16rpx;

		.update-text {
			text-align: center;
			margin-top: 330rpx;

			.title-text {
				font-size: 36rpx;
				color: #333333;
				font-weight: bold;
			}

			.middle-text {
				font-size: 26rpx;
				color: rgba(153, 153, 153, 1);
				font-weight: 400;
				margin-top: 16rpx;
			}


		}

		.update-button {
			display: flex;
			justify-content: center;

			/deep/ uni-button {
				margin-top: 47rpx;

				// &:nth-child(1) {
				// 	margin-right: 13rpx;
				// }

				// &:nth-child(2) {
				// 	margin-left: 13rpx;
				// }
			}

		}

		.update-close {
			position: absolute;
			text-align: center;
			left: 50%;
			transform: translate(-50%);
			bottom: -80rpx;
		}
	}

	.width220 {
		width: 220rpx;
		height: 68rpx !important;
	}

	.boderRadius {
		border-radius: 68rpx !important;
	}
</style>