syApp/pages/aboutUs/aboutUs.vue

<template>
	<view>
		<view class="userDetalis_ul">
			<view class="userDetalis_list" @click="examineUpdate()">
				<view class="userDetalis_listTxt">版本更新</view>
				<u-icon name="arrow-right" color="#666" size="28"></u-icon>
			</view>
			<view class="userDetalis_line"></view>
			<view class="userDetalis_list" @click="defailList()">
				<view class="userDetalis_listTxt">历史版本更新列表</view>
				<u-icon name="arrow-right" color="#666" size="28"></u-icon>
			</view>
		</view>

		<view class="introduceBox_brand">© 河南云飞科技发展有限公司</view>

		<!-- 升级提示框 -->
		<u-modal v-model="show" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel"
			@confirm="confirm">
			<view class="u-update-content">
				<rich-text :nodes="newVersionInfo.app_desc"></rich-text>
			</view>
		</u-modal>

		<u-modal title="升级中请勿随意操作" :show-confirm-button="false" v-model="showA">
			<view class="upgradeBox">
				<u-line-progress v-show="isShow" active-color="#19be6b" :striped="true" :percent="percentNum"
					:striped-active="true"></u-line-progress>
			</view>
		</u-modal>
		<u-toast ref="uToast" />

	</view>
</template>

<script>
	export default {
		data() {
			return {
				edition: '', //版本号
				percentNum: 0, //在线下载进度
				isShow: false, //进度条
				show: false,
				showA: false, //
				newVersionInfo: {
					app_name: '',
					app_version: "",
					app_desc: '',
					create_time: '',
					down_path: ''
				}
			}
		},
		methods: {
			// 版本更新-监测
			async examineUpdate() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=back_source.appupdate.check_update',
					data: {
						old_version: this.edition
					}
				})
				console.log(res)
				if (Object.keys(res).length) {
					console.log(22)
					this.newVersionInfo = res
					this.show = true
				} else {
					console.log(11)
					this.$refs.uToast.show({
						title: '已经是最新版本啦',
						type: 'success',
					})
				}
			},
			// 在线升级
			confirm() {
				const downloadTask = uni.downloadFile({
					url: this.newVersionInfo.down_path,
					// url:'/app_file/suyuan/'+this.newVersionInfo.app_name,
					success: (downloadResult) => {
						if (downloadResult.statusCode === 200) {
							console.log('安装包下载成功，即将安装：' + JSON.stringify(downloadResult, null, 4));
							plus.runtime.openFile(downloadResult.tempFilePath);
						}
					}
				})
				downloadTask.onProgressUpdate((res) => {
					this.percentNum = res.progress
					if (res.progress == 100) {
						console.log('下载完成了')
					}
				});
				this.showA = true
				this.isShow = true
			},
			// 在线升级取消
			cancel() {
				this.show = false;
			},

			// 历史版本更新列表
			defailList() {
				uni.navigateTo({
					url: '../updateList/updateList'
				})
			},
		},
		onLoad() {
			this.edition = this.$store.state.versionNumber;
			console.log(this.edition)
		},
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.introduceBox {
		background: #fff;
		padding: 55rpx 45rpx 65rpx 45rpx;

		.introduceBox_img {
			width: 160rpx;
			height: 160rpx;
			display: block;
			margin: 0 auto;
		}

		.introduceBox_num {
			text-align: center;
			color: #777777;
			line-height: 85rpx;
		}

		.introduceBox_txt {
			text-indent: 2em;
			letter-spacing: 2px;
			font-size: 13px;
			font-weight: 550;
		}
	}

	.userDetalis_ul {
		background: #fff;
		margin: 15rpx 0 0 0;

		.userDetalis_line {
			border-bottom: 1px solid #cfcfcf;
			width: 690rpx;
			margin: 0 0 0 20rpx;
		}

		.userDetalis_list {
			height: 90rpx;
			display: flex;
			width: 700rpx;
			margin: 0 auto;
			justify-content: space-between;

			.userDetalis_listTxt {
				color: #5d5d5d;
				padding: 25rpx 0 25rpx 0;
			}

			.userDetalis_listName {
				color: #5d5d5d;
			}

			.userDetalis_listRight {
				width: 50rpx;
				height: 50rpx;
				margin: 20rpx 0 0 0;
			}
		}
	}

	.introduceBox_brand {
		text-align: center;
		line-height: 105rpx;
		color: #777777;
		font-size: 13px;
	}


	.u-full-content {
		background-color: #00C777;
	}

	.u-update-content {
		font-size: 26rpx;
		color: $u-content-color;
		line-height: 1.7;
		padding: 30rpx;
		text-align: center;
		padding: 15rpx 0 15rpx 0;
	}

	.upgradeBox {
		padding: 15rpx;
	}
</style>