439 lines
10 KiB
Vue
439 lines
10 KiB
Vue
<template>
|
||
<view class="wrap" v-show="popup_show">
|
||
<u-popup v-model="popup_show" :mask-close-able="!force" mode="center" borderRadius="10" :mask="false">
|
||
<view class="update-wrap">
|
||
<view class="update-content">
|
||
<view class="update-con-top">
|
||
<text class="update-top-title">发现新版本</text>
|
||
<text class="update-top-version">: V{{update_info.version}}</text>
|
||
</view>
|
||
<text class="uodate-content" v-if="downstatus < 1">更新内容 : {{update_info.note}}</text>
|
||
<text class="current-version" v-if="downstatus < 1">当前版本 : V{{version}}</text>
|
||
|
||
<view class="update-btn" v-if="downstatus < 1">
|
||
<view class="btn-item" @tap="closeUpdate">
|
||
<!-- 残忍拒绝 -->
|
||
<text class="item-text ">取消</text>
|
||
</view>
|
||
<view class="btn-item" @tap="nowUpdate">
|
||
<!-- 立即升级 -->
|
||
<text class="item-text text-bule">立即升级</text>
|
||
</view>
|
||
</view>
|
||
<!-- 下载进度 -->
|
||
<view class="sche-wrap" v-else>
|
||
<!-- 更新包下载中 -->
|
||
<text class="sche-wrap-text">发现新版本...</text>
|
||
<view class="sche-bg">
|
||
<view class="sche-bg-jindu" :style="lengthWidth">
|
||
<view class="sche-bg-round">
|
||
<text class="sche-bg-round-text" v-if="schedule">{{schedule}}%</text>
|
||
<text class="sche-bg-round-text"
|
||
v-else>{{(downloadedSize/1024/1024 ).toFixed(2)}}M</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="updata-bg-img"></view>
|
||
<view class="updata-bg-color"></view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
let vm;
|
||
export default {
|
||
name: "unicorn_app_update",
|
||
//@是否强制更新
|
||
props: {
|
||
force: {
|
||
type: Boolean,
|
||
default: false, //true强制更新 false非强制更新
|
||
},
|
||
application: {
|
||
type: String,
|
||
default: "app"
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
popup_show: false, //弹窗是否显示
|
||
platform: "", //ios or android
|
||
version: "1.0.0", //当前软件版本
|
||
need_update: false, // 是否更新
|
||
downing: false, //是否下载中
|
||
downstatus: 0, //0未下载 1已开始 2已连接到资源 3已接收到数据 4下载完成
|
||
update_info: {
|
||
os: '', //设备系统
|
||
version: '', //最新版本
|
||
note: '', //升级说明
|
||
},
|
||
schedule: 0, //下载进度宽度
|
||
downloadedSize: 0, //下载大小
|
||
viewObj: null, //原生遮罩view
|
||
};
|
||
},
|
||
created() {
|
||
vm = this;
|
||
},
|
||
computed: {
|
||
// 下载进度计算
|
||
lengthWidth: function() {
|
||
return {
|
||
width: vm.schedule * 480 / 100 + "rpx"
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 检查更新
|
||
update() {
|
||
// 获取手机系统信息
|
||
uni.getSystemInfo({
|
||
success: function(res) {
|
||
vm.platform = res.platform //ios or android
|
||
// 获取版本号
|
||
plus.runtime.getProperty(plus.runtime.appid, function(inf) {
|
||
vm.version = inf.version
|
||
vm.getUpdateInfo(); //获取更新信息
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 获取线上版本信息
|
||
getUpdateInfo: function() {
|
||
//向后台发起请求，获取最新版本号
|
||
let paramData = {
|
||
application: 'filmTV',
|
||
appType: vm.platform
|
||
};
|
||
this.$api.post('/appUpgrade/new/version', paramData).then(res => {
|
||
console.log(res)
|
||
vm.update_info = res;
|
||
vm.checkUpdate(); ///检查是否更新
|
||
})
|
||
|
||
},
|
||
// 检查是否更新
|
||
checkUpdate: function() {
|
||
vm.need_update = vm.compareVersion(vm.version, vm.update_info.version); // 检查是否需要升级
|
||
if (vm.need_update) {
|
||
/* uni.showToast({
|
||
icon: 'none',
|
||
title: "开始下载更新",
|
||
duration: 2000
|
||
}) */
|
||
//plus.runtime.openURL(vm.update_info.downloadUrl);
|
||
vm.popup_show = true; //线上版本号大于当前安装的版本号 显示升级框
|
||
//vm.nowUpdate();
|
||
// 创建原生view用来遮罩tabbar的点击事件 (如果是没有用原生的tabbar这一步可以取消)
|
||
// vm.viewObj = new plus.nativeObj.View('viewObj', {
|
||
// bottom: '0px',
|
||
// left: '0px',
|
||
// height: '50px',
|
||
// width: '100%',
|
||
// backgroundColor: "rgba(0,0,0,.6)"
|
||
// });
|
||
// vm.viewObj.show(); //显示原生遮罩
|
||
} else {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: "不需要更新",
|
||
duration: 2000
|
||
})
|
||
}
|
||
},
|
||
|
||
// 取消更新
|
||
closeUpdate() {
|
||
if (vm.force) {
|
||
// 强制更新，取消退出app
|
||
plus.os.name == "Android" ? plus.runtime.quit() : plus.ios.import("UIApplication").sharedApplication()
|
||
.performSelector(
|
||
"exit");
|
||
} else {
|
||
vm.popup_show = false; //关闭升级弹窗
|
||
//vm.viewObj.hide() //隐藏原生遮罩
|
||
}
|
||
},
|
||
// 立即更新
|
||
nowUpdate() {
|
||
if (vm.downing) {
|
||
return false //如果正在下载就停止操作
|
||
} else {
|
||
vm.downing = true; //状态改变 正在下载中
|
||
}
|
||
vm.download_wgt()
|
||
/* if (/\.apk$/.test(vm.update_info.downloadUrl)) {
|
||
// 如果是apk地址
|
||
vm.download_wgt() // 安装包/升级包更新
|
||
} else if (/\.wgt$/.test(vm.update_info.downloadUrl)) {
|
||
// 如果是更新包
|
||
vm.download_wgt() // 安装包/升级包更新
|
||
} else {
|
||
plus.runtime.openURL(vm.update_info.downloadUrl, function() { //调用外部浏览器打开更新地址
|
||
plus.nativeUI.toast("打开错误");
|
||
});
|
||
} */
|
||
},
|
||
// 下载升级资源包
|
||
download_wgt() {
|
||
plus.nativeUI.showWaiting('更新包下载中'); //下载更新文件...
|
||
let options = {
|
||
method: "get"
|
||
};
|
||
let dtask = plus.downloader.createDownload(vm.update_info.downloadUrl, options, function(d, status) {
|
||
|
||
});
|
||
|
||
dtask.addEventListener("statechanged", function(task, status) {
|
||
if (status === null) {} else if (status == 200) {
|
||
//在这里打印会不停的执行，请注意，正式上线切记不要在这里打印东西///////////////////////////////////////////////////
|
||
vm.downstatus = task.state;
|
||
switch (task.state) {
|
||
case 3: // 已接收到数据
|
||
vm.downloadedSize = task.downloadedSize;
|
||
let totalSize = 0;
|
||
if (task.totalSize) {
|
||
totalSize = task.totalSize //服务器须返回正确的content-length才会有长度
|
||
}
|
||
vm.schedule = parseInt(100 * task.downloadedSize / totalSize);
|
||
break;
|
||
case 4:
|
||
vm.installWgt(task.filename); // 安装wgt包
|
||
break;
|
||
}
|
||
} else {
|
||
plus.nativeUI.closeWaiting();
|
||
plus.nativeUI.toast("下载出错");
|
||
vm.downing = false;
|
||
vm.downstatus = 0;
|
||
}
|
||
});
|
||
dtask.start();
|
||
},
|
||
// 安装文件
|
||
installWgt(path) {
|
||
plus.nativeUI.showWaiting("安装更新文件..."); //安装更新文件...
|
||
plus.runtime.install(path, {}, function() {
|
||
plus.nativeUI.closeWaiting();
|
||
// 应用资源下载完成！
|
||
plus.nativeUI.alert("更新包下载中)", function() {
|
||
plus.runtime.restart();
|
||
});
|
||
}, function(e) {
|
||
plus.nativeUI.closeWaiting();
|
||
// 安装更新文件失败
|
||
plus.nativeUI.alert("安装更新文件失败[" + e.code + "]：" + e.message);
|
||
});
|
||
},
|
||
// 对比版本号
|
||
compareVersion(ov, nv) {
|
||
if (!ov || !nv || ov == "" || nv == "") {
|
||
return false;
|
||
}
|
||
let b = false,
|
||
ova = ov.split(".", 4),
|
||
nva = nv.split(".", 4);
|
||
for (let i = 0; i < ova.length && i < nva.length; i++) {
|
||
let so = ova[i],
|
||
no = parseInt(so),
|
||
sn = nva[i],
|
||
nn = parseInt(sn);
|
||
if (nn > no || sn.length > so.length) {
|
||
return true;
|
||
} else if (nn < no) {
|
||
return false;
|
||
}
|
||
}
|
||
if (nva.length > ova.length && 0 == nv.indexOf(ov)) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.wrap {
|
||
/deep/.u-mode-center-box {
|
||
background: none;
|
||
}
|
||
}
|
||
|
||
.update-wrap {
|
||
width: 580rpx;
|
||
height: 500rpx;
|
||
border-radius: 10rpx;
|
||
padding-bottom: 0px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.updata-bg-img {
|
||
position: absolute;
|
||
background: url("images/update-img.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
top: 0vw;
|
||
left: 0px;
|
||
width: 580rpx;
|
||
height: 440rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.updata-bg-color {
|
||
position: absolute;
|
||
width: 580rpx;
|
||
top: 10vw;
|
||
height: calc(100% - 10vw);
|
||
background-color: #ffffff;
|
||
z-index: 0;
|
||
|
||
}
|
||
|
||
.update-content {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.update-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.update-con-top {
|
||
position: relative;
|
||
padding: 70rpx 50rpx;
|
||
margin-top: auto;
|
||
}
|
||
|
||
|
||
.update-btn {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
padding: 0px 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-top: 1px solid #e7e7e7;
|
||
background-color: #fff;
|
||
border-bottom-left-radius: 30rpx;
|
||
border-bottom-right-radius: 30rpx;
|
||
|
||
.btn-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 1;
|
||
|
||
.item-text {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.text-bule {
|
||
color: $uni-color-primary;
|
||
}
|
||
}
|
||
|
||
|
||
.btn-item:first-child {
|
||
border-right: 1px solid #e7e7e7
|
||
}
|
||
}
|
||
|
||
.update-top-title {
|
||
color: #fff;
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.update-top-version {
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.uodate-content {
|
||
color: #333;
|
||
font-size: 30rpx;
|
||
padding: 0px 50rpx;
|
||
margin-top: 100rpx;
|
||
}
|
||
|
||
.current-version {
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
|
||
.sche-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding: 0px 50rpx 40rpx;
|
||
height: 100rpx;
|
||
border-bottom-left-radius: 30rpx;
|
||
border-bottom-right-radius: 30rpx;
|
||
flex: 1;
|
||
|
||
.sche-wrap-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.sche-bg {
|
||
position: relative;
|
||
background-color: #ccc;
|
||
height: 20rpx;
|
||
border-radius: 100px;
|
||
width: 480rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.sche-bg-jindu {
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 0px;
|
||
height: 20rpx;
|
||
background-color: $uni-color-primary;
|
||
border-radius: 100px;
|
||
|
||
.sche-bg-round {
|
||
position: absolute;
|
||
left: 100%;
|
||
height: 24rpx;
|
||
width: 24rpx;
|
||
background-color: #fff;
|
||
border-color: #fff;
|
||
border-style: solid;
|
||
border-width: 10px;
|
||
border-radius: 100px;
|
||
transform: translateX(-20rpx) translateY(-10rpx);
|
||
|
||
.sche-bg-round-text {
|
||
position: relative;
|
||
top: 10rpx;
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
color: $uni-color-primary;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|