aiot-app/pages/systemSettings/components/updatePop.vue

<template>
	<view>
		<u-popup :show="show" @close="close"  mode="center">
		    <view class="updatetips-whole">
		    	<view class="updatetips">
		    		<view>
		    			<view class="updatetips-head">
		    				<!-- <image src="../static/images/updatetips.png"></image> -->
		    				<view class="updatetips-version" style="text-align: center;">
		    					更新提示
		    				</view>
		    			</view>
		    			<view class="updatetips-content">
							应用现在有新的版本可供更新</br>
							（文件大小{{changeByte(sizes)}} )
						</view>
		    			<!-- 进度条 -->
		    			<u-line-progress
		    				v-if="isProgress"
		    				:percentage="progress"
		    				activeColor="#55D88A"
		    				:showText="false"
		    				height="4"
		    			></u-line-progress>
		    		</view>
		    		<view class="updatetips-btn-disable" v-if="isProgress">升级</view>
		    		<view class="updatetips-btn" v-else @click="downloadBtn()">升级</view>
		    	</view>
		    </view>        
		</u-popup>
	</view>
</template>
 
<script>
export default {
	props:['versionNum','versionContent','downloadUrl','sizes'],
	data() {
		return {
			show:false,
			progress:0,
			isProgress:false,
			progress:''
		};
	},
	methods: {
		open() {
			this.show = true
		},
		close(){
			this.show = false
		},
		downloadBtn(){
			this.isProgress=true
			const downloadTask = uni.downloadFile({
				url:this.downloadUrl,
				success: (res) => {
					//安装
					plus.runtime.install(
						res.tempFilePath, {
							force: true
						},
						function(_res) {
							plus.runtime.restart();
						}
					)
				},
				fail: (err)=> {
					uni.$u.toast('下载失败')
				}
			})
			// 查看下载进度
			downloadTask.onProgressUpdate((res) => {
				this.progress=res.progress
			})
		},
		// 单位转换
		changeByte (byte) {
		  let size = "";
		  if (byte < 0.1 * 1024) {
		    // 小于0.1KB，则转化成B
		    size = `${byte.toFixed(2)}B`;
		  } else if (byte < 0.1 * 1024 * 1024) {
		    // 小于0.1MB，则转化成KB
		    size = `${(byte / 1024).toFixed(2)}KB`;
		  } else if (byte < 0.1 * 1024 * 1024 * 1024) {
		    // 小于0.1GB，则转化成MB
		    size = `${(byte / (1024 * 1024)).toFixed(2)}MB`;
		  } else {
		    // 其他转化成GB
		    size = `${(byte / (1024 * 1024 * 1024)).toFixed(2)}GB`;
		  }
		
		  const sizeStr = `${size}`; // 转成字符串
		  const index = sizeStr.indexOf("."); // 获取小数点处的索引
		  const dou = sizeStr.substr(index + 1, 2); // 获取小数点后两位的值
		  // eslint-disable-next-line eqeqeq
		  if (dou == "00") {
		    // 判断后两位是否为00，如果是则删除00
		    return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2);
		  }
		  return size;
		}
	}
};
</script>
<style scoped>
	.updatetips-whole{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 650rpx;
		height: 100%;
	}
	.updatetips{
		position: relative;
		width: 80%;
		min-height: 100rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.updatetips-head{
		position: relative;
		width: 100%;
		padding: 20rpx 0;
	}
	.updatetips-head>image{
		position: absolute;
		top: -72rpx;
		width: 100%;
		height: 280rpx;
	}
	.updatetips-version{
		
		color: #555;
		font-size: 40rpx;
	}
	.updatetips-content{
		width: 80%;
		min-height: 100rpx;
		margin: 40rpx auto;
		text-align: center;
	}
	.updatetips-btn-disable{
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #02A7F0;
	}
	.updatetips-btn{
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #02A7F0;
	}
	.updatetips-btn::before{
		content: "";
		width: 85%;
		height: 1px;
		background-color: #E6E6E6;
		position: absolute;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>