crmeb_shop/template/uni-app/pages/index/update/app-update.vue

<template>
  <view class="wrap" v-if="popup_show">
    <view class="popup-bg" :style="getHeight">
      <view class="popup-content" :class="{ 'popup-content-show': popup_show }">
        <view class="update-wrap">
          <image src="./images/img.png" class="top-img"></image>
          <view class="content">
            <text class="title">发现新版本{{ update_info.version }}</text>
            <!-- 升级描述 -->
            <view class="title-sub" v-html="update_info.info"></view>
            <!-- 升级按钮 -->
            <button class="btn" v-if="downstatus < 1" @click="nowUpdate()">
              立即升级
            </button>
            <!-- 下载进度 -->
            <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="./images/close.png"
          class="close-ioc"
          @click="closeUpdate()"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
let vm;
	import {
		getUpdateInfo
	} from '@/api/public.js'

export default {
  name: "appUpdate",
  //@是否强制更新
  props: {
    tabbar: {
      type: Boolean,
      default: false, //是否有原生tabbar组件
    },
  },
  data() {
    return {
      popup_show: true, //弹窗是否显示
      platform: "", //ios or android
      version: "1.0.0", //当前软件版本
      need_update: false, // 是否更新
      downing: false, //是否下载中
      downstatus: 0, //0未下载  1已开始 2已连接到资源  3已接收到数据  4下载完成
      update_info: {
        os: "", //设备系统
        version: "", //最新版本
        info: "", //升级说明
      },
      fileSize: 0, //文件大小
      downSize: 0, //已下载大小
      viewObj: null, //原生遮罩view
    };
  },
  created() {
    vm = this;
  },
  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: {
    // 检查更新
    update() {
      // #ifdef APP-PLUS
      // 获取手机系统信息
      uni.getSystemInfo({
        success: function (res) {
          vm.platform = res.platform; //ios  or android
          console.log("手机系统信息", vm.platform);
        },
      });

      // 获取版本号
      plus.runtime.getProperty(plus.runtime.appid, function (inf) {
        vm.version = inf.version;
      });
      console.log("当前版本", vm.version);
      this.getUpdateInfo(); //获取更新信息
      // #endif
    },

    // 获取线上版本信息
    getUpdateInfo() {
      //向后台发起请求，获取最新版本号
      getUpdateInfo(this.platform === "ios" ? 2 : 1)
        .then((res) => {
          // 这里的返回的数据跟后台约定
          let data = res.data;
          // 循环获取当前设备对应的更新数据
          vm.update_info = data;
          if (!vm.update_info.platform) {
            // 后台未配置当前系统的升级数据
          } else {
            vm.checkUpdate(); ///检查是否更新
          }
        })
        .catch((err) => {
					vm.popup_show = false
          console.log(err);
        });
    },
    // 检查是否更新
    checkUpdate() {
      vm.need_update = vm.compareVersion(vm.version, vm.update_info.version); // 检查是否需要升级
      if (vm.need_update) {
        vm.popup_show = true; //线上版本号大于当前安装的版本号  显示升级框
        if (vm.tabbar) {
          //页面是否有原生tabbar组件
          // 创建原生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(); //显示原生遮罩
        }
      }
    },

    // 取消更新
    closeUpdate() {
      if (vm.update_info.is_force) {
        // 强制更新，取消退出app
        this.platform == "android"
          ? plus.runtime.quit()
          : plus.ios
              .import("UIApplication")
              .sharedApplication()
              .performSelector("exit");
      } else {
        vm.popup_show = false; //关闭升级弹窗
        if (vm.viewObj) vm.viewObj.hide(); //隐藏原生遮罩
      }
    },
    // 立即更新
    nowUpdate() {
      if (vm.downing) return false; //如果正在下载就停止操作
      vm.downing = true; //状态改变 正在下载中

      if (/\.apk$/.test(vm.update_info.url)) {
        // 如果是apk地址
        vm.download_wgt(); // 安装包/升级包更新
      } else if (/\.wgt$/.test(vm.update_info.url)) {
        // 如果是更新包
        vm.download_wgt(); // 安装包/升级包更新
      } else {
        plus.runtime.openURL(vm.update_info.url, function () {
          //调用外部浏览器打开更新地址
          plus.nativeUI.toast("打开错误");
        });
      }
    },
    // 下载升级资源包
    download_wgt() {
      plus.nativeUI.showWaiting("下载更新文件..."); //下载更新文件...
      let options = {
        method: "get",
      };
      let dtask = plus.downloader.createDownload(
        vm.update_info.url,
        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.downSize = task.downloadedSize;
              if (task.totalSize) {
                vm.fileSize = task.totalSize; //服务器须返回正确的content-length才会有长度
              }
              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>
.popup-bg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0rpx;
  right: 0;
  bottom: 0;
  width: 750rpx;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10000;
}

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

.popup-content-show {
  animation: mymove 500ms;
  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;
    }

    .btn {
      width: 460rpx;
      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;
    }
  }
}

.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(images/round.png) #5775e7 center right 4rpx no-repeat;
      background-size: 26rpx 26rpx;
    }
  }

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