276 lines
8.4 KiB
Vue
276 lines
8.4 KiB
Vue
|
<template>
|
|||
|
|
<view class="upgrade-popup">
|
|||
|
|
<image class="header-bg" src="../../static/images/upgrade.png" mode="widthFix"></image>
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="version">发现新版本{{"v" + info.version}}</view>
|
|||
|
|
<view class="content">
|
|||
|
|
<text class="title">更新内容</text>
|
|||
|
|
<view class="desc" v-html="info.versionDesc"></view>
|
|||
|
|
</view>
|
|||
|
|
<!--下载状态-进度条显示 -->
|
|||
|
|
<view class="footer" v-if="isStartDownload">
|
|||
|
|
<view class="progress-view" :class="{'active':!hasProgress}" @click="handleInstallApp">
|
|||
|
|
<!-- 进度条 -->
|
|||
|
|
<view v-if="hasProgress" style="height: 100%;">
|
|||
|
|
<view class="txt">{{percentText}}</view>
|
|||
|
|
<view class="progress" :style="setProStyle"></view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else>
|
|||
|
|
<view class="btn upgrade force">{{ isDownloadFinish ? '立即安装' :'下载中...'}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 强制更新 -->
|
|||
|
|
<view class="footer" v-else-if="isForceUpdate">
|
|||
|
|
<view class="btn upgrade force" @click="handleUpgrade">立即更新</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 可选择更新 -->
|
|||
|
|
<view class="footer" v-else>
|
|||
|
|
<view class="btn close" @click="handleClose">以后再说</view>
|
|||
|
|
<view class="btn upgrade" @click="handleUpgrade">立即更新</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
downloadApp,
|
|||
|
|
installApp
|
|||
|
|
} from '../utils/upgrade.js'
|
|||
|
|
import {
|
|||
|
|
fileChange
|
|||
|
|
} from '../utils/tool.js'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isForceUpdate: false, //是否强制更新
|
|||
|
|
isDownloadFinish: false, //是否下载完成
|
|||
|
|
hasProgress: false, //是否能显示进度条
|
|||
|
|
currentPercent: 0, //当前下载百分比
|
|||
|
|
isStartDownload: false, //是否开始下载
|
|||
|
|
fileName: '', //下载后app本地路径名称
|
|||
|
|
info: {},
|
|||
|
|
downloadUrl:''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
//设置进度条样式，实时更新进度位置
|
|||
|
|
setProStyle() {
|
|||
|
|
return {
|
|||
|
|
width: (510 * this.currentPercent / 100) + 'rpx' //510：按钮进度条宽度
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//百分比文字
|
|||
|
|
percentText() {
|
|||
|
|
let percent = this.currentPercent;
|
|||
|
|
if (typeof percent !== 'number' || isNaN(percent)) return '下载中...'
|
|||
|
|
if (percent < 100) return `下载中${percent}%`
|
|||
|
|
return '立即安装'
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.info = JSON.parse(decodeURIComponent(options.info));
|
|||
|
|
},
|
|||
|
|
onBackPress(options) {
|
|||
|
|
// 禁用返回
|
|||
|
|
if (options.from == 'backbutton') {
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//更新
|
|||
|
|
handleUpgrade() {
|
|||
|
|
if (this.info.url) {
|
|||
|
|
this.isStartDownload = true
|
|||
|
|
//开始下载App
|
|||
|
|
const baseUrl = `http://local.gunshiiot.com:18083/gunshiApp/xyt/common/download/resource?resource=${this.info.url}`
|
|||
|
|
downloadApp(baseUrl, current => {
|
|||
|
|
//下载进度监听
|
|||
|
|
this.hasProgress = true
|
|||
|
|
this.currentPercent = current
|
|||
|
|
|
|||
|
|
}).then(fileName => {
|
|||
|
|
//下载完成
|
|||
|
|
this.isDownloadFinish = true
|
|||
|
|
this.fileName = fileName
|
|||
|
|
if (fileName) {
|
|||
|
|
//自动安装App
|
|||
|
|
this.handleInstallApp()
|
|||
|
|
}
|
|||
|
|
}).catch(e => {
|
|||
|
|
console.log(e, 'e')
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '下载链接不存在',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
//安装app
|
|||
|
|
handleInstallApp() {
|
|||
|
|
//下载完成才能安装，防止下载过程中点击
|
|||
|
|
if (this.isDownloadFinish && this.fileName) {
|
|||
|
|
installApp(this.fileName, () => {
|
|||
|
|
//安装成功,关闭升级弹窗
|
|||
|
|
uni.navigateBack()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//关闭返回
|
|||
|
|
handleClose() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
page {
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
/**设置窗口背景半透明*/
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.upgrade-popup {
|
|||
|
|
width: 580rpx;
|
|||
|
|
height: auto;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 1px solid #eee;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-bg {
|
|||
|
|
width: 70%;
|
|||
|
|
margin-top: -112rpx;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main {
|
|||
|
|
padding: 10rpx 30rpx 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.version {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #026DF7;
|
|||
|
|
font-weight: 700;
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: center;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
margin-top: 60rpx;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #000000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.desc {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #6A6A6A;
|
|||
|
|
max-height: 80vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-top: 100rpx;
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
width: 246rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 999;
|
|||
|
|
height: 96rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
letter-spacing: 2rpx;
|
|||
|
|
|
|||
|
|
&.force {
|
|||
|
|
width: 500rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.close {
|
|||
|
|
border: 1px solid #E0E0E0;
|
|||
|
|
margin-right: 25rpx;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.upgrade {
|
|||
|
|
background-color: #026DF7;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-view {
|
|||
|
|
width: 510rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
display: flex;
|
|||
|
|
position: relative;
|
|||
|
|
align-items: center;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
background-color: #dcdcdc;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
padding: 0px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: none;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background-color: #026DF7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress {
|
|||
|
|
height: 100%;
|
|||
|
|
background-color: #026DF7;
|
|||
|
|
padding: 0px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: none;
|
|||
|
|
border-top-left-radius: 10rpx;
|
|||
|
|
border-bottom-left-radius: 10rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.txt {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|