TaicangPopulationApp2/uview-ui/components/u-full-screen/u-full-screen.vue

<template>
	<u-modal v-model="show" :show-cancel-button="true" confirm-text="升级" title="发现新版本" @cancel="cancel"
		@confirm="confirm">
		<view class="u-update-content">
			<view class="row-item">
				<text>版本号:</text>
				<text class="iten-value">{{info.buildVersion}}</text>
			</view>
			<view class="row-item">
				<text>软件体积:</text>
				<text class="iten-value">{{info.buildFileSize}}MB</text>
			</view>
			<view class="row-item">
				<text class="iten-value">{{info.buildUpdateDescription}}</text>
			</view>
			<view class="progress" v-show="show2">
				<text class="progress-num">{{progressWidth}}</text>
				<view :style="{width:progressWidth}"></view>
			</view>
		</view>
	</u-modal>
</template>

<script>
	import {
		getAppInfo
	} from '@/api/pgy.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				content: `
				`,
				progressWidth: '0%',
				show2: false,
				info: {},
			}
		},

		onReady() {
			//获取版本信息
			this.appInfo()

		},
		computed: {
			...mapGetters([
				'appCheck',

			])
		},
		methods: {
			async appInfo() {
				const appKey = 'e4c51352c1a5a46cb49b44ae24edea32'
				const res = await getAppInfo({
					appKey: appKey,
					buildKey: this.appCheck.buildKey
				})

				const buildFileSize = res.data.buildFileSize / (1024 * 1024);
				res.data.buildFileSize = buildFileSize.toFixed(1)
				this.info = res.data

				this.show = true;
			},
			cancel() {
				this.closeModal();
			},
			confirm() {
				// this.closeModal();
				this.show = true
				this.downloadAPK()
			},
			closeModal() {
				uni.navigateBack();
			},
			downloadAPK() {
				this.show2 = true
				let _this = this
				var apkUrl = this.appCheck.downloadURL // 替换为你的APK文件URL
				var apkFileName = '_downloads/taicang-population.apk' // 目标文件路径，_downloads为H5+预定义目录
				// 创建下载任务
				var dtask = plus.downloader.createDownload(
					apkUrl, {
						filename: apkFileName,
					},
					function(d, status) {
						if (status === 200) {
							// 下载成功+ d.filename
							_this.installAPK(d.filename)
							uni.showToast({
								icon: 'success',
								title: '下载成功'
							})

						} else {
							// 下载失败 + status
							uni.showToast({
								icon: 'error',
								title: '下载失败'
							})

						}
					}
				)

				// 监听下载任务的状态变化和进度
				dtask.addEventListener('statechanged', function(download, status) {
					// 下载状态变化时的处理
					switch (download.state) {
						case 3: // 下载中
							// console.log('已下载大小：' + download.downloadedSize + ' bytes')
							// console.log('总大小：' + download.totalSize + ' bytes')

							_this.progressWidth = Math.round((download.downloadedSize / download.totalSize) *
								100) + '%'

							break
					}
				})

				// 启动下载任务
				dtask.start()
			},

			installAPK(filePath) {
				plus.runtime.install(
					filePath, {},
					function() {
						console.log('Install success')
					},
					function(e) {
						console.log('Install failed: ' + e.message)
					}
				)
			}

		}
	}
</script>


<style scoped lang="scss">
	@import "../../libs/css/style.components.scss";

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

	}

	.u-update-content {
		font-size: 26rpx;
		color: $u-content-color;
		line-height: 1.8;
		padding: 30rpx;
	}

	.row-item {
		font-size: 29rpx;
		font-weight: 500;
	}

	.progress {
		position: relative;
		background-color: #e6effb;
		height: 40rpx;

		.progress-num {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			text-align: center;
			line-height: 40rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #fff;
		}

		&>view {
			width: 0;
			height: 100%;
			background-color: #2d8cf0;
		}
	}
</style>