<template>
<view>
<!-- 遮罩滚动锁定组件 -->
<page-meta :page-style="'overflow:' + (popupShow ? 'hidden' : 'visible')"></page-meta>
<uni-popup ref="upgradePopup" background-color="#fff" class="upgradePopup" @change="upgradePopupChange" :mask-click="false">
<view class="rocket-content">
<view class="rocket-img"></view>
</view>
<view class="content-v-des">
<view class="content-v">V{{ appUpgeadeObj.versionName }}</view>
<view class='content-text'>发现新版本</view>
<view class="title">
<!-- 更新内容 -->
<scroll-view class="info_desc_scroll" scroll-y="true">
<rich-text v-if="appUpgeadeObj.content" class='scroll-text' :nodes="appUpgeadeObj.content"></rich-text>
</scroll-view>
</view>
</view>
<view class="update-content">
<text space="nbsp">{{ appUpgeadeObj.updateContent }}</text>
</view>
<view v-if="updateButtonBoolean" class="update-button">
<button class="not-updated-button" :disabled="noUpdatedDisabled"
v-show="appUpgeadeObj.forceUpdate == false" type="warn" @tap.stop="noUpdate">暂不更新</button>
<button v-show='appUpgeadeObj.type == "ANDROID"' class="updated-button" type="warn"
@tap.stop="upgradeNowAndroid">立即升级</button>
<button v-show='appUpgeadeObj.type == "IOS"' class="updated-button" type="warn"
@tap.stop="upgradeNow">立即升级</button>
</view>
<view v-if="progressBolean" class="progress-bar">
<progress border-radius="90" font-size="24" activeColor="#DB4032" backgroundColor="#f0f0f0" show-info
:percent="progressData.percent" stroke-width="15" />
</view>
</uni-popup>
</view>
</template>
<script>
export default {
props: {
appUpgeadeObj: {
type: Object,
default: () => {
return {}
}
}
},
components: {
},
data() {
return {
popupShow: false,
updateButtonBoolean: true, // 按钮的显示和隐藏
// 进度条数据
progressData: {
percent: 0, //百分比
},
progressBolean: false, // 进度条的显示和隐藏
noUpdatedDisabled: false,
isWGT: false,// 是否wgt资源包
};
},
watch: {
'progressData.percent': {
handler(newdata) {
if (newdata) {
this.progressBolean = true
this.updateButtonBoolean = false
}
if (newdata == 100) {
this.noUpdatedDisabled = false
}
},
immediate: true,
},
},
beforeMount() {
uni.hideTabBar()
},
mounted() {
this.$refs.upgradePopup.open('center')
},
methods: {
// 升级弹窗的change事件
upgradePopupChange(e) {
this.popupShow = e.show
},
// 暂不更新按钮事件
noUpdate() {
this.popupShow = false
uni.showTabBar()
setTimeout(() => {
this.$emit('pause')
}, 10)
},
// 立即升级事件
upgradeNow() {
const that = this
that.noUpdatedDisabled = true
let platform = uni.getSystemInfoSync().platform
const wgtType = that.containsWGTExtension(that.appUpgeadeObj.downloadUrl)
that.isWGT = wgtType
const index = that.appUpgeadeObj.downloadUrl.indexOf('apps.apple.com')
console.log(that.isWGT, 'that.isWGT3333')
if (that.isWGT == true) {
that.updateWgt(that.appUpgeadeObj.downloadUrl, that.appUpgeadeObj.downloadUrl.versionName)
} else {
if (platform == 'ios' && index !== -1) return plus.runtime.openURL(that.appUpgeadeObj.downloadUrl);
}
},
upgradeNowAndroid() {
let that = this
that.noUpdatedDisabled = true
let platform = uni.getSystemInfoSync().platform
const index = that.containsApkExtension(that.appUpgeadeObj.downloadUrl)
const wgtType = that.containsWGTExtension(that.appUpgeadeObj.downloadUrl)
console.log(wgtType, 'that.isWGT')
that.isWGT = wgtType
if (index == true) {
plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
var downloadTask = uni.downloadFile({
url: that.appUpgeadeObj.downloadUrl,
success: (downloadResult) => {
if (downloadResult.statusCode === 200) {
plus.runtime.install(downloadResult
.tempFilePath, {
force: false
},
function () {
plus.cache.clear();
plus.runtime.restart();
},
function (err) {
console.log('err--------安装升级包失败', err)
uni.showToast({
title: '安装升级包失败',
icon: 'none'
});
});
}
},
});
downloadTask.onProgressUpdate((res) => {
this.progressData.percent = res.progress
});
})
} else {
console.log(333, 'indexw')
//跳转到应用商店
let appurl = "market://details?id=io.dcloud.ddh"
plus.runtime.openURL(appurl)
}
// }
},
//wgt更新
updateWgt(downloadUrl, newVersion) {
uni.showModal({
title: '已发现新版本',
content: '确认更新？',
showCancel: false,
success: function (res) {
uni.setStorageSync('checkVersions', newVersion)
if (res.confirm) {
uni.downloadFile({
url: downloadUrl,
success: (downloadResult) => {
plus.runtime.install(downloadResult.tempFilePath, { force: true }, function () {
//应用热重启，重新启动进入首页
plus.runtime.restart();
uni.showModal({
title: '安装成功！',
content: '已重新进入应用',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击确定');
}
}
})
},
function (e) {
console.log(e, '安装失败')
uni.showModal({
title: '安装失败',
icon: 'none'
})
})
},
fail: (err) => {
uni.showToast({
title: '下载失败',
icon: 'none'
})
}
})
} else if (res.cancel) {
uni.showToast({
title: '已取消',
icon: 'none'
})
}
}
})
},
containsApkExtension(url) {
return /\.apk$/i.test(url);
},
containsWGTExtension(url) {
return /\.wgt$/i.test(url);
}
}
};
</script>
<style scoped lang="scss">
.upgradePopup {
z-index: 999;
/deep/.uni-popup__wrapper {
width: 602rpx;
background-image: url('./imgs/upgradeBackground.png');
background-repeat: no-repeat;
background-size: 100% 100%;
border-radius: 15rpx;
// border: solid 1px red;
position: relative;
display: flex;
flex-direction: column;
.rocket-content {
height: 368rpx;
.rocket-img {
background-image: url('./imgs/rocket.png');
background-repeat: no-repeat;
background-size: 100% 100%;
width: 152rpx;
height: 212rpx;
position: absolute;
top: -105rpx;
left: 225rpx;
}
}
.content-v-des {
position: absolute;
left: 40rpx;
top: 30rpx;
z-index: 3;
.content-v {
font-size: 75rpx;
color: #FFFFFF;
}
.content-text {
padding-top: 20rpx;
font-family: PingFangSC, PingFang SC;
font-size: 42rpx;
color: #333333;
}
.title {
margin-top: 20rpx;
display: flex;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 16px;
color: #999999;
line-height: 28px;
text-align: left;
font-style: normal;
.info_desc_scroll {
width: 450rpx;
height: 200rpx;
box-sizing: border-box;
line-height: 1.3;
.scroll-text {
padding-bottom: 6rpx;
}
}
}
}
.update-content {
margin-top: 44rpx;
// border: solid 1rpx red;
padding-left: 100rpx;
display: flex;
flex-direction: column;
uni-text {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #989899;
margin-bottom: 8rpx;
}
}
.update-button {
// border: solid 1rpx yellow;
display: flex;
width: 482rpx;
margin: 0 auto;
margin-top: 48rpx;
uni-button {
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin: 0rpx;
flex: 1;
height: 80rpx;
margin-bottom: 80rpx;
}
.not-updated-button {
margin-right: 40rpx;
}
}
.progress-bar {
width: 538rpx;
// border: solid 1px red;
margin: 0 auto;
margin-top: 96rpx;
margin-bottom: 102rpx;
uni-progress {
.uni-progress-bar {
border-radius: 50rpx;
.uni-progress-inner-bar {
border-radius: 50rpx;
}
}
}
}
}
}
</style>