QCN_rider/.svn/pristine/1c/1c7b87b064d97bab2cc2c4331d4624361cc002a5.svn-base

<template>
	<!-- <UpApp :show="upShow" :url="url" /> -->
	<view class="borybac" v-if="upShow">
		<view class="up_box">

			<view class="mt50">
				<view class="" style="margin: 0 60rpx;" >
					1.优化布局细节，优化购物体验，优化产品体验
				</view>
				<view class="" style="margin: 0 60rpx;" >
					2.修复已知问题，修复一些BUG
				</view>
				
			</view>

			<view class="jdBox">
				<view class="jd">
					<view class="jdbfb">
						{{sum}}%
					</view>
					<view class="jdt">
						<view class="jdn" :style="'width:'+sum+'%'">

						</view>
					</view>
					<view v-if="buttonContro" class="jddx">
						{{datacl(beg)}}/{{datacl(downlog)}}
					</view>
				</view>
			</view>

			<view class="" v-if="force==0"
				style="width: 100%; padding: 0 20rpx; height: 60rpx; margin: 40rpx auto; display: flex; justify-content: space-between;">
				<view class="" style="width: 70rpx;">

				</view>
				<view class=""
					style="width: 240rpx; height: 60rpx; line-height: 60rpx; border-radius: 30rpx; text-align: center; color: #fff; font-size: 24rpx; background-color: #FFD700;"
					@click="delUpApp">
					开始更新
				</view>
				<view class="" style="font-size: 22rpx; line-height: 80rpx; color: #999;" @click="goindex">
					暂不更新
				</view>
			</view>

		</view>
	</view>

</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';

	let buttonContro = ref(false)

	let url = ref('')
	let force = ref('0')

	// 控制热更新
	let upShow = ref(true)
	let sum = ref(0)
	let downlog = ref(0)
	let beg = ref(0)
	let remark = ref('')
	let type = ref('')

	//模拟请求
	onLoad((data : any) => {
		// getdata()
		url.value = data.url
	});

	const goindex = function () {
		uni.navigateBack({
			delta: 1
		});
	}

	const getdata = function () {
		// RegisterService.GetNewVersion().then((res:any)=>{
		// 	url.value = res.data.path
		// 	downlog.value = res.data.size
		// 	force.value = res.data.force
		// 	remark.value = res.data.remark
		// 	type.value = res.data.type
		// 	if(res.data.force=='1'){
		// 		delUpApp()
		// 	}
		// })
	}



	const datacl = function (e : any) {
		if (e > 1024) {
			let sl = ((e / 1024) / 1024).toFixed(1)
			return sl + 'MB'
		} else {
			return (e / 1024).toFixed(1) + 'KB'
		}


	}

	const delUpApp = function () {

		if (buttonContro.value) {
			return
		}
		buttonContro.value = true
		// 1.开始请求下载
		const downloadTask = uni.downloadFile({
			url: url.value,
			success: (downloadResult) => {
				if (downloadResult.statusCode === 200) {
					plus.runtime.install(downloadResult.tempFilePath, {
						force: false
					}, function () {
						uni.hideLoading()
						uni.showToast({
							title: "下载成功",
							complete() {
								if (type.value == 'Bulking') {
									setTimeout(function () {
										plus.runtime.restart();
									}, 2000)
								}


							}
						})
						console.log('install success...');
					}, function (e) {
						uni.hideLoading()
						console.log(e, '失败')
						// uni.$u.toast('下载失败！')
						// console.error('install fail...');
					});
				}
			},
			fail(downloadResult) {
				console.log(downloadResult, '失败')
				// console.log('下载失败');
				// uni.$u.toast('下载失败')
			}
		});
		downloadTask.onProgressUpdate((res) => {
			downlog.value = res.totalBytesExpectedToWrite
			beg.value = res.totalBytesWritten
			sum.value = res.progress
		});
	}
</script>

<style lang="scss" setup>
	.borybac {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #f6f6f6;
		display: flex;
		overflow: hidden;

		.up_box {
			width: 650rpx;
			height: 1000rpx;
			margin: 200rpx auto;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			background-image: url(@/static/index/system/updata.png);
			background-repeat: no-repeat;
			background-size: cover;

			.mt50 {
				display: block;
				margin-top: 570rpx;
			}

			.jdBox {
				overflow: hidden;
				margin-top: 70rpx;
				display: block;
				width: 100%;
				padding: 0 20rpx;

				.jd {
					display: block;
					width: 90%;
					height: 100%;
					margin: 0 auto;

					.jdbfb {
						display: block;
						width: 100%;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 30rpx;
						color: #FFD700;
						font-weight: 600;
					}

					.jdt {
						margin-top: 10rpx;
						display: block;
						width: 100%;
						height: 23rpx;
						border-radius: 15rpx;
						background-color: #E5E5E5;

						.jdn {
							display: block;
							height: 23rpx;
							border-radius: 15rpx;
							background: radial-gradient(#8370F8 0%, #455FF8 100%);
						}
					}

					.jddx {
						width: 100%;
						font-size: 24rpx;
						margin-top: 20rpx;
						font-weight: 600;
					}
				}
			}
		}
	}

	.text {
		display: block;
		text-align: center;
		margin-top: 30rpx;
		width: 100%;
		height: 40rpx;
		font-size: 32rpx;
	}
</style>