|
|
@@ -0,0 +1,424 @@
|
|
|
+<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">发现新版本V{{update_info.versionno}}</text>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <view class="title-sub" v-html="update_info.title" style="font-weight: bold;"></view>
|
|
|
+ <!-- 升级描述 -->
|
|
|
+ <view class="title-sub" v-html="update_info.content" style="padding-top: 8rpx;"></view>
|
|
|
+ <!-- 升级按钮 -->
|
|
|
+ <button class="btn" v-if="downstatus < 1" @click="nowUpdate()">立即升级</button>
|
|
|
+ <!-- 下载进度 -->
|
|
|
+ <view class="sche-wrap" v-else>
|
|
|
+ <!-- 更新包下载中 -->
|
|
|
+ <view style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
+ <view class="sche-bg">
|
|
|
+ <view class="sche-bg-jindu" :style="lengthWidth"></view>
|
|
|
+ </view>
|
|
|
+ <text style="color: #999999;margin-left: 4rpx;">{{width}}%</text>
|
|
|
+ </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>
|
|
|
+ var vm;
|
|
|
+ export default {
|
|
|
+ name: "appUpdate",
|
|
|
+ //@是否强制更新
|
|
|
+ props: {
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ popup_show: false, //弹窗是否显示
|
|
|
+ platform: "", //ios or android
|
|
|
+ version: "", //当前软件版本
|
|
|
+ wgtLatestVersion: "", //最新资源
|
|
|
+ apkLatestVersion: "", //最新整包
|
|
|
+ need_update: false, // 是否更新
|
|
|
+ downing: false, //是否下载中
|
|
|
+ downstatus: 0, //0未下载 1已开始 2已连接到资源 3已接收到数据 4下载完成
|
|
|
+ update_info: {},
|
|
|
+ fileSize: 0, //文件大小
|
|
|
+ downSize: 0, //已下载大小
|
|
|
+ viewObj: null, //原生遮罩view
|
|
|
+ force: true,
|
|
|
+ width: "",
|
|
|
+ wgtInfo: {},
|
|
|
+ apkInfo: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ vm = this;
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // 下载进度计算
|
|
|
+ lengthWidth: function() {
|
|
|
+ let w = this.downSize / this.fileSize * 100;
|
|
|
+ let result = w;
|
|
|
+ this.width = Math.floor(result)
|
|
|
+ if (!w) {
|
|
|
+ w = 0
|
|
|
+ } else {
|
|
|
+ w = w.toFixed(2)
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ width: w + "%" //return 宽度百分比
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getHeight: function() {
|
|
|
+ let bottom = 0;
|
|
|
+ return {
|
|
|
+ "bottom": bottom + 'px',
|
|
|
+ "height": "auto"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 检查更新
|
|
|
+ update() {
|
|
|
+
|
|
|
+ console.log('-----------')
|
|
|
+ // alert(plus.runtime.appid)
|
|
|
+ // 获取手机系统信息
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: function(res) {
|
|
|
+ vm.platform = res.platform //ios or android
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 获取当前版本号
|
|
|
+ plus.runtime.getProperty(plus.runtime.appid, function(inf) {
|
|
|
+ vm.version = inf.version
|
|
|
+ });
|
|
|
+ vm.getUpdateInfo(); //获取更新信息
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ // 获取线上版本信息
|
|
|
+ async getUpdateInfo() {
|
|
|
+ //向后台发起请求，获取最新版本号
|
|
|
+ let apkquote = await this.$http.post('/sysVersionRecord/sysVersionRecord/queryByAppId', {
|
|
|
+ apptype:'2',
|
|
|
+ appId:"__UNI__E0EA6E1"
|
|
|
+ });
|
|
|
+ vm.apkInfo = apkquote.data.result
|
|
|
+ vm.apkLatestVersion = apkquote.data.result.versionno;
|
|
|
+ let wgtquote = await this.$http.post('/sysVersionRecord/sysVersionRecord/queryByAppId', {
|
|
|
+ apptype:'2',
|
|
|
+ appId:"__UNI__E0EA6E1"
|
|
|
+ });
|
|
|
+ console.log(apkquote,wgtquote)
|
|
|
+ // wgtquote
|
|
|
+ vm.wgtInfo = wgtquote.data.result
|
|
|
+ vm.wgtLatestVersion = wgtquote.data.result.versionno;
|
|
|
+ vm.checkUpdate(); //检查是否更新
|
|
|
+ // var data = {
|
|
|
+ // appid: "__UNI__D4FE29A"
|
|
|
+ // }
|
|
|
+ // let res = await this.$http.get('/sysVersion/queryMaxNum', data);
|
|
|
+ // vm.update_info = res.data;
|
|
|
+ // if (vm.update_info.updateflag == '1') {
|
|
|
+ // vm.force = true;
|
|
|
+ // } else {
|
|
|
+ // vm.force = false;
|
|
|
+ // }
|
|
|
+ // if (!vm.update_info.platform) {
|
|
|
+ // // 后台未配置当前系统的升级数据
|
|
|
+ // } else {
|
|
|
+ //
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // 检查是否更新
|
|
|
+ checkUpdate() {
|
|
|
+ // alert('旧的：'vm.version,'----------' '新的：' vm.apkLatestVersion)
|
|
|
+ let apkneed = vm.compareVersion(vm.version, vm.apkLatestVersion); // 检查包版本
|
|
|
+ let wgtneed = vm.compareVersion(vm.version, vm.wgtLatestVersion); // 检查资源版本
|
|
|
+ if (apkneed) {
|
|
|
+ vm.update_info = vm.apkInfo;
|
|
|
+ vm.popup_show = true; //线上版本号大于当前安装的版本号 显示升级框
|
|
|
+ //页面是否有原生tabbar组件
|
|
|
+ // 创建原生view用来遮罩tabbar的点击事件 (如果是没有用原生的tabbar这一步可以取消)
|
|
|
+ vm.viewObj = new plus.nativeObj.View('viewObj', {
|
|
|
+ bottom: '0px',
|
|
|
+ left: '0px',
|
|
|
+ height: '10px',
|
|
|
+ width: '100%',
|
|
|
+ position: "fixed",
|
|
|
+ backgroundColor: "rgba(0,0,0,.6)"
|
|
|
+ });
|
|
|
+ vm.viewObj.show() //显示原生遮罩
|
|
|
+ } else {
|
|
|
+ if (wgtneed) {
|
|
|
+ vm.update_info = vm.wgtInfo;
|
|
|
+ vm.popup_show = true; //线上版本号大于当前安装的版本号 显示升级框
|
|
|
+ //页面是否有原生tabbar组件
|
|
|
+ // 创建原生view用来遮罩tabbar的点击事件 (如果是没有用原生的tabbar这一步可以取消)
|
|
|
+ vm.viewObj = new plus.nativeObj.View('viewObj', {
|
|
|
+ bottom: '0px',
|
|
|
+ left: '0px',
|
|
|
+ height: '10px',
|
|
|
+ width: '100%',
|
|
|
+ position: "fixed",
|
|
|
+ backgroundColor: "rgba(0,0,0,.6)"
|
|
|
+ });
|
|
|
+ vm.viewObj.show() //显示原生遮罩
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 取消更新
|
|
|
+ closeUpdate() {
|
|
|
+ if (vm.force) {
|
|
|
+ // 强制更新，取消退出app
|
|
|
+ plus.os.name == "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.path)) {
|
|
|
+ // 如果是apk地址
|
|
|
+ vm.download_wgt() // 安装包/升级包更新
|
|
|
+ } else if (/\.wgt$/.test(vm.update_info.path)) {
|
|
|
+ // 如果是更新包
|
|
|
+ vm.download_wgt() // 安装包/升级包更新
|
|
|
+ } else {
|
|
|
+ plus.runtime.openURL(vm.update_info.path, function() { //调用外部浏览器打开更新地址
|
|
|
+ plus.nativeUI.toast("打开错误");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 下载升级资源包
|
|
|
+ download_wgt() {
|
|
|
+ plus.nativeUI.showWaiting("下载更新文件..."); //下载更新文件...
|
|
|
+ let options = {
|
|
|
+ method: "get"
|
|
|
+ };
|
|
|
+ let dtask = plus.downloader.createDownload(vm.update_info.path, 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: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: var(--window-bottom);
|
|
|
+ width: 750rpx;
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ z-index: 99999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: #3a63f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-sub {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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: #3a63f6;
|
|
|
+ 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>
|
