app_tree_planting/components/yomol-upgrade/yomol-upgrade.vue
2023-02-08 17:59:16 +08:00

201 lines
3.8 KiB
Vue
Executable File

<template>
<view v-if="visible" class="mark">
<view class="view">
<text class="title">{{title}}</text>
<view class="tip">新版更新内容</view>
<scroll-view class="scroll" scroll-y>
<view class="item" v-for="(item,index) in contents" :key="index">
{{item}}
</view>
</scroll-view>
<view v-if="!downloading" class="btns">
<image class="icon" src="../../static/ic_download.png"></image>
<view class="sure" @click="onSureClick()">马上升级</view>
</view>
<cmd-progress v-else class="progress" type="line" stroke-color="#1ca52e" :percent="progress">
</cmd-progress>
</view>
</view>
</template>
<script>
import cmdProgress from '@/components/cmd-progress/cmd-progress.vue'
export default {
components: {
cmdProgress
},
data() {
return {
visible: false,
progress: 0,
contents: [],
downloading: false,
success: true
}
},
props: {
type: {
type: String,
default: 'pkg'
},
url: {
type: String,
default: ''
},
title: {
type: String,
default: '版本更新'
},
content: {
type: String,
default: ""
}
},
watch: {
content() {
var strs = this.content.split('\\n')
for (var i = 0; i < strs.length; i++) {
this.contents.push(strs[i])
}
}
},
methods: {
show() {
setTimeout(() => {
if (this.success) {
this.visible = true
}
}, 100);
},
hide() {
setTimeout(() => {
this.visible = false
}, 100);
},
onCancelClick() {
this.hide()
},
onSureClick() {
var _self= this
var platform = uni.getSystemInfoSync().platform
if (platform == 'ios' && this.type == 'pkg') {
plus.runtime.openURL(this.url);
} else {
_self.downloading = true
var downloadTask = uni.downloadFile({
url: this.url,
success: (downloadResult) => {
this.hide()
if (downloadResult.statusCode === 200) {
plus.runtime.install(downloadResult.tempFilePath, {
force: false
}, function() {
plus.runtime.restart();
}, (e) => {
console.log(e);
this.success = false
uni.showToast({
title: '安装升级包失败',
icon: 'none'
})
});
}
}
});
downloadTask.onProgressUpdate((e) => {
_self.progress = e.progress
})
}
}
},
}
</script>
<style>
.mark {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: rgba(0, 0, 0, 0.6);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
z-index: 1000;
}
.view {
width: 80vw;
height: 70vw;
background-color: white;
border-radius: 15rpx;
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: center;
}
.title {
margin-top: 20rpx;
color: #000000;
font-weight: bold;
font-size: 38rpx;
text-align: center;
}
.tip {
margin-top: 20rpx;
margin-left: 30rpx;
align-self: flex-start;
font-size: 32rpx;
font-weight: 600;
color: black;
}
.scroll {
width: 100%;
height: 200rpx;
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
}
.item {
margin-left: 50rpx;
text-align: left;
font-size: 30rpx;
}
.btns {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
margin-bottom: 10rpx;
}
.icon {
width: 45rpx;
height: 45rpx;
margin-right: 10rpx;
}
.sure {
padding: 10rpx 0;
text-align: center;
color: #008B8B;
font-size: 30rpx;
font-weight: 500;
}
.progress {
margin-bottom: 20rpx;
width: 80%;
}
</style>