liaotian/pages/index/upApp.vue

<template>
    <view class="content">
        <view class="up-wrap">
            <image src="../../static/img/upapp.png" mode="" class="upapp-bg"></image>
            <view class="tit">
                新版本升级
            </view>
            <view class="val">
                客户端体验优化
            </view>
            <view class="btn444" @click="upApp">
                {{is_up?(schedule + '%'): '马上更新'}}
            </view>
        </view>
    </view>
</template>

<script>
    import api from "../../library/index.js"
    export default {
        data() {
            return {
                schedule: 0,
                is_up: false,
            }
        },
        onLoad() {

        },
        onShow() {

        },
        onBackPress() {
            return true
        },
        methods: {
            upApp() {
                let _this = this
                plus.runtime.getProperty(plus.runtime.appid, function(info) {
                    console.log(info, 'info');
                    api.update({
                        version: info.version,
                        osname: plus.os.name
                    }).then(res => {
                        console.log(res);
                        if (res.data.status == 1) {
                            // plus.runtime.openURL(res.data.downurl);
                            console.log(res.data.downurl,'res.data.downurl');
                            _this.is_up = true
                            let downloadTask = uni.downloadFile({
                                url: res.data.downurl,
                                success: (res1) => {
                                    // wgtWaiting.close();
                                    if (res1.statusCode === 200) {
                                        plus.runtime.install(res1.tempFilePath, {}, () => {
                                            plus.runtime.restart();
                                        }, (e) => {
                                            uni.showModal({
                                                content: "update error [" +
                                                    e
                                                    .code + "]：" + e
                                                    .message,
                                                showCancel: false,
                                            });
                                        });
                                    } else {
                                        uni.showModal({
                                            content: "api error update fail!",
                                            showCancel: false,
                                        });
                                    }
                                }
                            });
                            downloadTask.onProgressUpdate((res) => {
                                console.log(res.progress);
                                _this.schedule = res.progress
                            });
                        }
                    })
                })
            }

        }
    }
</script>

<style lang="scss" scoped>
    .content {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: #7f7f7f;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .up-wrap {
        width: 522rpx;
        height: 499rpx;
        background: #FFFFFF;

        border-radius: 28rpx;
        position: relative;

        .upapp-bg {
            width: 345rpx;
            height: 307rpx;
            position: absolute;
            left: 0;
            right: 0;
            top: -150rpx;
            margin: auto;
        }

        .tit {
            margin-top: 190rpx;
            font-size: 39rpx;
            font-weight: 500;
            color: #FF443F;
            text-align: center;
        }

        .val {
            font-size: 31rpx;
            font-weight: 500;
            color: #A5A5A5;
            text-align: center;
            margin-top: 10rpx;
        }

        .btn444 {
            width: 357rpx;
            height: 83rpx !important;
            background: #FF443F;
            border-radius: 41rpx;
            text-align: center;
            line-height: 83rpx;
            font-size: 34rpx;
            font-weight: 500;
            color: #FFFFFF;
            margin: 10rpx auto 0;
        }
    }
</style>