QCN_rider/.svn/pristine/06/06f82fe98529cd0a1b4156ca35576943d8790874.svn-base

<template>
		<!-- <UpApp :show="upShow" :url="url" /> -->
		<view class="borybac" v-if="upShow">
			<view class="up_box">
		
				<view class="mt50">
					<view class="text">
						版本更新
					</view>
					<view class="text">
					{{remark}}
					</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 class="jddx">
							{{datacl(beg)}}/{{datacl(downlog)}} 
						</view>
					</view>
				</view>
				
				<view class="" v-if="force==0" style="width: 95%; 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: var(--nav-mian);" @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 url = ref('')
	let force = ref('0')

	// 控制热更新
	let upShow = ref(true)
	let sum = ref(0)
	let downlog = ref(0)
	let beg = ref(15642544)
	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 () {
		// 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: rgba(0, 0, 0, 0.3);
		display: flex;
		overflow: hidden;
	
		.up_box {
			width: 513rpx;
			height: 680rpx;
			margin: 300rpx auto;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;
			background-image: url(@/static/index/system/upapphed.png);
			background-repeat: no-repeat;
			background-size: cover;
	
			.mt50 {
				display: block;
				margin-top: 200rpx;
			}
	
			.jdBox {
				overflow: hidden;
				margin-top: 120rpx;
				display: block;
				width: 100%;
	
				.jd {
					display: block;
					width: 90%;
					height: 100%;
					margin: 0 auto;
	
					.jdbfb {
						display: block;
						width: 100%;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 30rpx;
						color: var(--nav-mian);
						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>