376 lines
11 KiB
Vue
376 lines
11 KiB
Vue
<template>
|
||
<view class="zy-modal" :class="dshow?'show':''">
|
||
<view style="position: absolute;top: 240rpx;left: 850rpx;z-index: 9999;">
|
||
<image style="width: 400rpx;height: 370rpx;position: absolute;top: 0rpx;left: 0rpx;"
|
||
src="/static/index/update/fly.png" />
|
||
</view>
|
||
<view class="zy-dialog">
|
||
<view
|
||
style="height: 250rpx;width: 100%;position: relative;background: linear-gradient(to bottom,#d7e3f8 , #ffffff);">
|
||
<!-- <image style="width: 1800rpx;height: 1600rpx;position: absolute;top: -370rpx;left: -220rpx;" src="/static/index/update/bgc.png" /> -->
|
||
</view>
|
||
<view :class="'zy-upgrade-topbg-'+theme">
|
||
<view>
|
||
<text class="zy-upgrade-title">
|
||
发现新版本
|
||
</text>
|
||
</view>
|
||
<text class="flex-wrap" style="margin-top: 10rpx;">{{version}}</text>
|
||
</view>
|
||
<view class="padding-xl text-left">
|
||
<scroll-view class="scroll-box" scroll-y="true">
|
||
<text>{{update_tips}}</text>
|
||
</scroll-view>
|
||
<view class="zy-progress radius striped active" style="border-radius: 36upx;overflow: hidden;"
|
||
v-if="update_flag">
|
||
<view :class="'bg-'+theme" style="background-color: royalblue;border-radius: 36upx;"
|
||
:style="'width: '+update_process+'%;'">
|
||
{{update_process}}%
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="zy-bar">
|
||
<view class="action" v-if="!update_flag && forceupgrade">
|
||
<button class="zy-btn" :class="'bg-'+theme" @click="upgrade_checked">确认升级</button>
|
||
|
||
</view>
|
||
<view class="action" v-if="!update_flag && !forceupgrade">
|
||
<view class="zy-btn" @click="upgrade_checked">确认升级</view>
|
||
<view class="zy-quxiao" v-if="!forceupgrade" @click="upgrade_cancel">取消升级</view>
|
||
</view>
|
||
<view class="action text-center" v-if="update_flag&&!forceupgrade" style="margin-top: 40rpx;">
|
||
<button class="zy-btn" :class="'bg-'+theme" @click="upgrade_break">中断升级</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'ZyUpgrade',
|
||
props: {
|
||
theme: { //主题，目前支持green,pink,blue,yellow,red
|
||
type: String,
|
||
default: 'green'
|
||
},
|
||
updateurl: { //升级检测url，全路径
|
||
type: String,
|
||
default: ''
|
||
},
|
||
h5preview: { //H5界面下是否预览升级
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
oldversion: { //如果是H5，为了方便测试，可以传入一个旧版本号进来。
|
||
type: String,
|
||
default: ''
|
||
},
|
||
oldcode: { //如果是H5，为了方便测试，可以传一个旧版本的code进来。
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
appstoreflag: { //是否启用appstore升级，如果启用，由服务端返回appstore的地址
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
noticeflag: { //是否通知主界面无需更新
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
autocheckupdate: { //是否页面截入时就判断升级
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
update_flag: false, //点击升级按钮后，显示进度条
|
||
dshow: false,
|
||
update_process: 0,
|
||
downloadTask: [],
|
||
updated2version: '',
|
||
version_url: '',
|
||
update_tips: '',
|
||
forceupgrade: false,
|
||
currentversion: this.oldversion,
|
||
versionname: '',
|
||
vesioncode: this.oldcode,
|
||
wgt_flag: 0,
|
||
wgt_url: '',
|
||
size: 0, //开启gzip等情形下，获取不到安装包大小，可以服务端返回安装包大小
|
||
header: {
|
||
Authorization: uni.getStorageSync('token') || "token"
|
||
}
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
let app_flag = false
|
||
// #ifdef APP-PLUS
|
||
app_flag = true
|
||
// #endif
|
||
if ((this.h5preview || app_flag) && this.autocheckupdate) {
|
||
this.check_update()
|
||
}
|
||
},
|
||
computed: {
|
||
version() {
|
||
let retversion = ''
|
||
retversion = this.currentversion + (this.currentversion != '' && this.updated2version != '' ? ' -> ' :
|
||
'') + this.updated2version
|
||
return retversion
|
||
}
|
||
},
|
||
methods: {
|
||
//检测升级
|
||
check_update() {
|
||
let that = this
|
||
// #ifdef APP-PLUS
|
||
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
|
||
that.currentversion = widgetInfo.version
|
||
that.versionname = widgetInfo.name
|
||
that.versioncode = widgetInfo.versionCode
|
||
that.updatebusiness(that)
|
||
});
|
||
// #endif
|
||
// #ifdef H5
|
||
if (this.h5preview) {
|
||
this.updatebusiness(that)
|
||
}
|
||
// #endif
|
||
},
|
||
updatebusiness: function(that) { //具体升级的业务逻辑 https://www.focusnu.com/opeapi
|
||
uni.request({
|
||
url: `https://www.focusnu.com/devopsapi/api/pad/versionUpdate?platform=1&version=${that.currentversion}`,
|
||
method: 'GET',
|
||
dataType: 'json',
|
||
success: (res) => {
|
||
// console.log("?????",`https://www.focusnu.com/devopsapi/api/pad/versionUpdate?platform=1&version=${that.currentversion}`)
|
||
// this.$emit('chuandinew',this.updated2version)
|
||
if (res.statusCode === 404) {
|
||
return
|
||
}
|
||
if (res.data.code == 100) {
|
||
//提示升级
|
||
// console.log(res.data.data,111111111)
|
||
if (res.data.data.wgt_flag == '2') {
|
||
that.wgt_flag = res.data.data.wgt_flag;
|
||
that.updated2version = res.data.data.version;
|
||
that.update_tips = res.data.data.update_tips;
|
||
that.forceupgrade = res.data.data.forceupdate == 1;
|
||
that.version_url = res.data.data.update_url;
|
||
that.updated2version = res.data.data.version;
|
||
that.wgt_flag = res.data.data.wgt_flag;
|
||
that.wgt_url = res.data.data.wgt_url;
|
||
that.size = res.data.data.size;
|
||
that.dshow = true;
|
||
|
||
} else if (res.data.data.update_url) {
|
||
that.dshow = true;
|
||
|
||
that.update_tips = res.data.data.update_tips;
|
||
that.forceupgrade = res.data.data.forceupdate == 1;
|
||
that.version_url = res.data.data.update_url;
|
||
that.updated2version = res.data.data.version;
|
||
that.wgt_flag = res.data.data.wgt_flag;
|
||
that.wgt_url = res.data.data.wgt_url;
|
||
that.size = res.data.data.size;
|
||
that.getnewbanben();
|
||
} else {
|
||
if (that.noticeflag) {
|
||
//通知父组件，当前版为最新版本
|
||
that.$emit("showupdateTips", 0)
|
||
}
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: '请求升级出错：' + data.msg,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
fail() {
|
||
this.loading = false;
|
||
}
|
||
});
|
||
},
|
||
getnewbanben: function() {
|
||
this.$emit('chuandinew', this.updated2version)
|
||
},
|
||
//点击开始升级按钮，开始升级
|
||
upgrade_checked: function() {
|
||
if (this.wgt_flag == 2) {
|
||
this.dshow = false
|
||
this.updateversion()
|
||
} else {
|
||
uni.removeStorageSync('token')
|
||
this.update_flag = true
|
||
this.updateversion()
|
||
}
|
||
|
||
},
|
||
//点击取消升级按钮，取消升级
|
||
upgrade_cancel: function() {
|
||
this.dshow = false
|
||
},
|
||
//升级过程中，点击中断升级按钮，中断升级
|
||
upgrade_break: function() {
|
||
this.downloadTask.abort()
|
||
this.update_flag = false
|
||
},
|
||
//升级下载apk安装包的具体处理业务逻辑
|
||
updateversion: function() {
|
||
//console.log("检查升级方法")
|
||
let platform = uni.getSystemInfoSync().platform
|
||
let that = this
|
||
//console.log("操作系统：",platform)
|
||
if (that.wgt_flag == 2) {
|
||
try {
|
||
const Intent = plus.android.importClass('android.content.Intent')
|
||
const Uri = plus.android.importClass('android.net.Uri')
|
||
const main = plus.android.runtimeMainActivity()
|
||
const intent = new Intent(Intent.ACTION_VIEW)
|
||
intent.setData(Uri.parse('mimarket://details?id=com.android.hldy'))
|
||
// 强制使用小米应用商店
|
||
intent.setPackage('com.xiaomi.market')
|
||
main.startActivity(intent)
|
||
} catch (e) {
|
||
// 小米商店不存在 or 被禁用
|
||
console.log('打开小米应用商店失败', e)
|
||
}
|
||
|
||
return
|
||
}
|
||
if (platform == 'ios' && this.appstoreflag && that.wgt_flag != 1) {
|
||
//如果启用ios appstore升级，则打开appstore
|
||
that.dshow = false
|
||
//console.log("跳转至appstore")
|
||
plus.runtime.launchApplication({
|
||
action: that.version_url
|
||
}, function(e) {
|
||
uni.showToast({
|
||
title: '打开appstore失败',
|
||
icon: 'none'
|
||
});
|
||
});
|
||
} else {
|
||
|
||
let that = this
|
||
let downloadurl = that.wgt_flag == 1 ? that.wgt_url : that.version_url;
|
||
let targetUrl = "https://www.focusnu.com/devopsapi/sys/common/static/" + downloadurl
|
||
this.update_confirm = true
|
||
this.downloadTask = uni.downloadFile({
|
||
url: targetUrl,
|
||
header: this.header,
|
||
success: function(res) {
|
||
console.log("!!!", res)
|
||
if (res.statusCode == 200) {
|
||
//开始安装
|
||
plus.runtime.install(res.tempFilePath, {
|
||
force: false
|
||
}, function() {
|
||
plus.runtime.restart();
|
||
}, function(e) {
|
||
uni.showToast({
|
||
title: '升级失败',
|
||
icon: 'none'
|
||
});
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: '下载失败，网络错误',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
fail: function(e) {
|
||
uni.showToast({
|
||
title: '下载失败:' + e.errMsg,
|
||
icon: 'none'
|
||
});
|
||
this.update_flag = false
|
||
},
|
||
complete: function() {}
|
||
})
|
||
this.downloadTask.onProgressUpdate(function(res) {
|
||
that.update_process = res.progress
|
||
if (res.progress == Infinity) {
|
||
let progress = (res.totalBytesWritten / that.size) * 100
|
||
if (progress > 100) {
|
||
progress = 100
|
||
}
|
||
that.update_process = progress
|
||
}
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import url("static/css/main.css");
|
||
|
||
.zy-upgrade-topbg-green {
|
||
background-image: url('static/images/green.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
height: 290rpx;
|
||
}
|
||
|
||
.zy-upgrade-topbg-red {
|
||
background-image: url('static/images/red.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
height: 290rpx;
|
||
}
|
||
|
||
.zy-upgrade-topbg-pink {
|
||
background-image: url('static/images/pink.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
height: 290rpx;
|
||
}
|
||
|
||
.zy-upgrade-topbg-yellow {
|
||
background-image: url('static/images/yellow.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
height: 290rpx;
|
||
}
|
||
|
||
.zy-upgrade-topbg-blue {
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.zy-upgrade-title {
|
||
font-size: 35rpx;
|
||
font-weight: 800;
|
||
/* color: white; */
|
||
}
|
||
|
||
.scroll-box {
|
||
height: 250rpx;
|
||
}
|
||
|
||
/* ✅ 显示滚动条（App / H5 都有效） */
|
||
.scroll-box::-webkit-scrollbar {
|
||
width: 8rpx;
|
||
/* 滚动条宽度 */
|
||
}
|
||
|
||
::v-deep ::-webkit-scrollbar {
|
||
/* 滚动条整体样式 */
|
||
display: block !important;
|
||
width: 7rpx;
|
||
}
|
||
|
||
::v-deep ::-webkit-scrollbar-thumb {
|
||
/* 滚动条里面小方块 */
|
||
border-radius: 5rpx !important;
|
||
box-shadow: inset 0 0 1rpx rgba(0, 0, 0, 0.2) !important;
|
||
background-color: #CCCCCC !important;
|
||
}
|
||
</style> |