parking_operation/pages/appUpdate/appUpdate.vue

<template>
  <view class="page-height">
    <view class="page-content">
      <view class="wrap" v-if="popup_show">
        <view class="popup-bg">
          <view class="popup-content" :class="{ 'popup-content-show': popup_show }">
            <view class="update-wrap">
              <image src="/static/images/img.png" class="top-img"></image>
              <view class="content">
                <text class="title">发现新版本V{{ updateInfo.version }}</text>
                <!-- 升级描述 -->
                <view class="title-sub" v-html="updateInfo.note"></view>
                <!-- 操作按钮 -->
                <view class="operation-btn" v-if="downstatus < 1">
                  <button class="btn cancel" @click="cancel()">暂不升级</button>
                  <button class="btn" @click="onUpdate()">立即升级</button>
                </view>
                <!-- 下载进度 -->
                <view class="sche-wrap" v-else>
                  <!-- 更新包下载中 -->
                  <view class="sche-bg">
                    <view class="sche-bg-jindu" :style="lengthWidth"></view>
                  </view>
                  <text class="down-text">下载进度:{{ (downSize / 1024 / 1024).toFixed(2) }}M/{{ (fileSize / 1024 / 1024).toFixed(2) }}M</text>
                </view>
              </view>
            </view>
            <image src="/static/images/close.png" class="close-ioc" @click="closeUpdate()" v-if="downstatus < 1 && updateInfo.force == 0"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { config } from '@/common/config.js';
export default {
  data() {
    return {
      popup_show: true,
      updateInfo: {
        note: '',
        version: '',
        downloadUrl: ''
      }, //上一页面传过来的升级参数
      note: [], //升级说明数组格式
      fileSize: 0, //文件大小
      downSize: 0, //已下载大小
      downing: false, //是否下载中
      downstatus: 0 //0未下载  1已开始 2已连接到资源  3已接收到数据  4下载完成
    };
  },
  onLoad(option) {
    this.updateInfo.version = option.version;
    this.updateInfo.downloadUrl = option.downloadUrl;
  },
  onBackPress(e) {
    if (e.from == 'backbutton') return true; //APP安卓物理返回键逻辑
  },
  computed: {
    // 下载进度计算
    lengthWidth: function () {
      let w = (this.downSize / this.fileSize) * 100;
      if (!w) {
        w = 0;
      } else {
        w = w.toFixed(2);
      }
      return {
        width: w + '%' //return 宽度半分比
      };
    },
    getHeight: function () {
      let bottom = 0;
      if (this.tabbar) {
        bottom = 50;
      }
      return {
        bottom: bottom + 'px',
        height: 'auto'
      };
    }
  },
  methods: {
    // 当点击更新时
    onUpdate() {
      //判断是否为wifi模式
      uni.getNetworkType({
        success: (res) => {
          if (res.networkType == 'wifi') {
            this.startUpdate(); //开始更新
          } else {
            uni.showModal({
              title: '提示',
              content: '当前网络非WIFI,继续更新可能会产生流量,确认要更新吗？',
              success: (modal_res) => {
                if (modal_res.confirm) {
                  this.startUpdate(); //开始更新
                }
              }
            });
          }
        }
      });
    },
    /**
     * 取消升级
     */
    cancel() {
      uni.$u.route({
        type: 'back',
        delta: 1
      });
    },
    //开始更新
    startUpdate() {
      if (this.downing) return false; //如果正在下载就停止操作
      this.downing = true; //状态改变 正在下载中
      if (/\.wgt$/.test(this.updateInfo.downloadUrl)) {
        // 如果是更新包
        this.download_wgt(); // 安装包/升级包更新
      } else {
        plus.runtime.openURL(this.updateInfo.downloadUrl, function () {
          //调用外部浏览器打开更新地址
          plus.nativeUI.toast('打开错误');
        });
      }
    },
    // 下载升级资源包
    download_wgt() {
      plus.nativeUI.showWaiting('下载更新文件...'); //下载更新文件...
      let options = {
        method: 'get'
      };
      let dtask = plus.downloader.createDownload(this.updateInfo.downloadUrl, options);
      dtask.addEventListener('statechanged', (task, status) => {
        if (status === null) {
        } else if (status == 200) {
          //在这里打印会不停的执行，请注意，正式上线切记不要在这里打印东西!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
          this.downstatus = task.state;
          switch (task.state) {
            case 3: // 已接收到数据
              plus.nativeUI.closeWaiting();
              this.downSize = task.downloadedSize;
              if (task.totalSize) {
                this.fileSize = task.totalSize; //服务器须返回正确的content-length才会有长度
              }
              break;
            case 4:
              this.installWgt(task.filename); // 安装
              break;
          }
        } else {
          plus.nativeUI.closeWaiting();
          plus.nativeUI.toast('下载出错');
          this.downing = false;
          this.downstatus = 0;
        }
      });
      dtask.start();
    },
    // 安装文件
    installWgt(path) {
      plus.nativeUI.showWaiting('安装更新文件...'); //安装更新文件...
      plus.runtime.install(
        path,
        {
          force: true
        },
        function () {
          plus.nativeUI.closeWaiting();
          // 应用资源下载完成！
          plus.nativeUI.alert('更新完成,请重启APP！', function () {
            plus.runtime.restart(); //重启APP
          });
        },
        function (e) {
          plus.nativeUI.closeWaiting();
          // 安装更新文件失败
          plus.nativeUI.alert('安装更新文件失败[' + e.code + ']：' + e.message);
        }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.page-height {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: 0.7);
}

.popup-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 750rpx;
}

.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-content-show {
  animation: mymove 300ms;
  transform: scale(1);
}

@keyframes mymove {
  0% {
    transform: scale(0);
    /*开始为原始大小*/
  }

  100% {
    transform: scale(1);
  }
}

.update-wrap {
  width: 580rpx;
  border-radius: 18rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  padding: 170rpx 30rpx 0;

  .top-img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 256rpx;
    top: -128rpx;
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 40rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #6526f3;
    }

    .title-sub {
      text-align: center;
      font-size: 24rpx;
      color: #666666;
      padding: 30rpx 0;
    }
    .operation-btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .btn {
      width: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 30rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 100px;
      background-color: #6526f3;
      margin-top: 20rpx;
    }
		.cancel {
			background-color: #cccccc;
			color: #6526f3;
		}
  }
}

.close-ioc {
  width: 70rpx;
  height: 70rpx;
  margin-top: 30rpx;
}

.sche-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 10rpx 50rpx 0;

  .sche-wrap-text {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 20rpx;
  }

  .sche-bg {
    position: relative;
    background-color: #cccccc;
    height: 30rpx;
    border-radius: 100px;
    width: 480rpx;
    display: flex;
    align-items: center;

    .sche-bg-jindu {
      position: absolute;
      left: 0;
      top: 0;
      height: 30rpx;
      min-width: 40rpx;
      border-radius: 100px;
      background: url(/static/images/round.png) #6526f3 center right 4rpx no-repeat;
      background-size: 26rpx 26rpx;
    }
  }

  .down-text {
    font-size: 24rpx;
    color: #6526f3;
    margin-top: 16rpx;
  }
}
</style>