自动更新功能新增

jt

2023-02-17 2882a094730135ac3420756666e0f48188bb0107

 pages/login/index.vue

@@ -1,8 +1,8 @@

<style>
   input::-webkit-input-placeholder {
      font-size: 12rpx;
   }

   #headr {
      background: #434343;
      /* width: 375px; */
@@ -13,36 +13,43 @@
      background-size: cover !important; 
      background-repeat: no-repeat !important; */
   }

   .SetServer{    
      float: left;
      margin-left: 20rpx;
   }

   .check_rememberPwd{
      margin-top: 20rpx;
      margin-left: 20rpx;
   }

   .logo {
      height: 180rpx;
      width: 180rpx; 
      margin-top: 170rpx;
   }

   .logo_input {
      height: 40rpx;
      width: 40rpx;
      margin-left: 40rpx;
   }

   .logo_icon {
      height: 50rpx;
      width: 50rpx;
      margin-left: 15rpx;
      margin-top: 20rpx;
   }

   .mui-content{
      height: 100%;
      padding-top: 140rpx;
      background: #FFFFFF;
      z-index: 1;
   }

   .mui-input-group .la_icon {
       width: 100rpx;
       text-align: center;
@@ -51,21 +58,26 @@
       float: left;
       padding: 7px 13px;
   }

   .mui-input-group .mui-input-row {
       height: 85rpx;
      position: relative;
      clear: left;
      overflow: hidden;
   }

   .mui-input-row:first-child {
      border-top: 1px solid #c8c7cc;
   }

   .mui-input-row:last-child {
      border-bottom: 1px solid #c8c7cc;
   }

   .mui-input-group .mui-input-row:last-child:after {
      background-color:#fff;
   }

   .mui-input-group .mui-input-row:after {
       position: absolute;
       right: 0;
@@ -76,6 +88,7 @@
       transform: scaleY(.5);
       background-color: #c8c7cc;
   }

   .mui-input-row input {
      font-family: 'Helvetica Neue',Helvetica,sans-serif;
      font-size: 15px;
@@ -131,12 +144,16 @@
               <label class="mui-navigate-right" id="sersel"><image class="logo_icon" src="../../images/login/sel_left.png" ></image></label>
            </div> -->
            <div class="mui-input-row">
               <label class="la_icon" ><image class="logo_input" src="../../images/login/person_30.png"></image></label>
               <label class="la_icon">
                  <image class="logo_input" src="../../images/login/person_30.png"></image>
               </label>
               <input type="text" class="mui-input" v-model="userName" placeholder="请输入账号">
               <!-- <label class="mui-navigate-right" id="namsel"><image class="logo_icon" src="../../images/login/user-photo.png</image></label> -->
            </div>
            <div class="mui-input-row">
               <label class="la_icon" ><image class="logo_input" src="../../images/login/lock_30.png"></image></label>
               <label class="la_icon">
                  <image class="logo_input" src="../../images/login/lock_30.png"></image>
               </label>
               <input type="password" class="mui-input" v-model="userPwd" placeholder="请输入密码">
            </div>
            <checkbox-group class="check_rememberPwd" @change="rememberPwd">
@@ -151,27 +168,52 @@
            <span>版本号：</span>
            <span>{{version}}</span>
         </p>
         <div class="" style="text-align: center;background: white;border-top: 0px solid #C0C0C0;color: #7cd0f8;position: absolute;bottom: 0;width: 100%;height: 24px;padding-top:3px;font-size: 11px;">
         <div class=""
            style="text-align: center;background: white;border-top: 0px solid #C0C0C0;color: #7cd0f8;position: absolute;bottom: 0;width: 100%;height: 24px;padding-top:3px;font-size: 11px;">
         </div>
      </div>
      <view>
         <!-- 输入框示例 -->
         <uni-popup ref="inputDialog" type="dialog">
            <uni-popup-dialog ref="inputClose"  mode="input" title="设置" :value="userServer"
               placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
            <uni-popup-dialog ref="inputClose" mode="input" title="设置" :value="userServer" placeholder="请输入内容"
               @confirm="dialogInputConfirm"></uni-popup-dialog>
         </uni-popup>
         <!-- 版本升级弹窗开始 -->
         <uni-popup ref="promotion" type="center">
            <view class="promotion" style="width: 700rpx;padding:20rpx 40rpx; background: white;font-size: 36rpx;">
               <view class="operates" v-if="showBtns==true">
                  <view style="text-align: center;padding-top:20rpx;padding-bottom: 40rpx;">
                     系统有新版本，是否需要更新
      </view>
                  <text @click="cancel"
                     style="display: inline-block;color: #7cd0f8;width: 50%; text-align: center;">取消</text>
                  <text @click="sure"
                     style="display: inline-block;color: #7cd0f8;width: 50%; text-align: center;">确认</text>
               </view>
               <view class="operates" v-else>
                  <cmd-progress :percent="percentage" stroke-color="linear-gradient(to right, #ef32d9, #89fffd)">
                  </cmd-progress>
               </view>
            </view>
         </uni-popup>
         <!-- 版本升级弹窗结束 -->
      </view>

   </view>
    
</template>

<script> 
   import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
   // import {
   //    mapState,
   //    mapMutations,
   //    mapActions ,
   // } from 'vuex'
   export default {
      components: {
         cmdProgress
      },
      data(){
         //获取全局参数：url-服务器地址
         var server = uni.getStorageSync('server');
@@ -195,6 +237,21 @@
            userPwd:password,
            ischecked:ischecked,
            version:"1.0.0",
            downloadUrl: "", //安卓app下载链接
            percentage: 0, //下载进度
            showBtns: true,
         }
      },
      onShow() {
         this.query(); //版本升级
      },
      watch: {
         //监听进度条
         percentage(e) {
            // console.log(e);
            if (e >= 100) {
               this.$refs.promotion.close();
            }
         }
      },
      // computed: mapState({
@@ -204,6 +261,156 @@
      //    appinfo:state=>state.appInfo
      // }),
      methods:{
         //查询当前版本号
         query() {
            // #ifdef APP-PLUS
            plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
               console.log(wgtinfo);
               var version = wgtinfo.version; //客户端版本号
               // var versionCode = parseInt(wgtinfo.versionCode); //客户端版本号编码
               this.check(version) //检测是否需要更新
            })
            //#endif
         },
         //检测是否需要更新
         async check(version) {
            if (!this.userServer) {
               uni.showModal({
                  title: "提示",
                  content: "未输入网站地址，请重新配置输入！",
                  showCancel: false,
                  confirmText: "取消"
               });
               return;
            }
            var dataInfo = {
               server: this.userServer
            };
            this.$store.dispatch('GetApkVersionInfo', dataInfo).then(success => {
               console.log(success);
               if (success.code == '00000') {
                  let resp = success.data;
                  if (resp) {
                     // const obj = resp.data.filter(item => {
                     //    return item.groupName == 'version'
                     // })
                     //获取当前版本号
                     const VersionName = resp.VersionName; //更新包名称
                     const VersionCode = resp.VersionCode; //版本编码
                     const versionNum = resp.Version; //服务端版本号
                     // this.downloadUrl = resp.PdaUrl+"/"+VersionName; //app下载链接
                     this.downloadUrl = "http://" + this.userServer + "/Program/" + VersionName; //app下载链接this.
                     var isver = this.compare(versionNum,version);
                     if (isver) {
                        this.$refs.promotion.open();
                     } else {
                        console.log('当前已是最新版本')
                     }
                  }
               } else {
                  uni.showModal({
                     title: "错误",
                     content: success.msg,
                     showCancel: false,
                     confirmText: "取消"
                  });
               }
            }).catch(ex => {
               console.log(ex);
               uni.showModal({
                  title: "错误",
                  content: ex.errMsg ? ex.errMsg : ex.message,
                  showCancel: false,
                  confirmText: "取消"
               });
            });
         },
         compare(curV, reqV) {
            var arr1 = curV.toString().split('.');
             var arr2 = reqV.toString().split('.');
             //将两个版本号拆成数字
             var minL = Math.min(arr1.length, arr2.length);
             var pos = 0; //当前比较位
             var diff = 0; //当前为位比较是否相等
             var flag = false;
             //逐个比较如果当前位相等则继续比较下一位
             while (pos < minL) {
                 diff = parseInt(arr1[pos]) - parseInt(arr2[pos]);
                 if (diff == 0) {
                     pos++;
                     continue;
                 } else if (diff > 0) {
                     flag = true;
                     break;
                 } else {
                     flag = false;
                     break;
                 }
             }
             return flag;
         },
         //确认更新
         sure() {
            //关闭按钮
            this.showBtns = false;
            let sys = uni.getSystemInfoSync().platform //检查系统
            if (sys == "ios") {
               // this.getIosInfo()
            } else if (sys == "android") {
               this.updateAPP() // 调用下载方法app内下载
            }
         },
         //取消更新
         cancel() {
            this.$refs.promotion.close();
         },
         //链接苹果商店下载
         // getIosInfo() {
         //    let appleId = "你的appid"
         //    plus.runtime.launchApplication({
         //       action: "itms-apps://itunes.apple.com/cn/app/id" + appleId + "?mt=8"
         //    }, function(e) {
         //       console.log('Open system default browser failed: ' + e.message);
         //    });
         // },
         //安卓更新
         updateAPP() {
            let _this = this;
            let url = this.downloadUrl;
            // 官方API
            var dtask = plus.downloader.createDownload(url, {}, function(d, status) {
               //d为下载的文件对象
               if (status == 200) {
                  //下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
                  var fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
                  plus.runtime.openFile(d.filename); //选择软件打开文件
                  uni.showToast({
                     icon: 'none',
                     title: '更新成功'
                  });
                  _this.$refs.promotion.close();
               } else {
                  //下载失败
                  plus.downloader.clear(); //清除下载任务
                  uni.showToast({
                     icon: 'none',
                     title: '更新失败'
                  });
                  _this.showBtns = false;
               }
            })
            //开始下载
            dtask.start();
            //监听下载进度
            dtask.addEventListener('statechanged', function(task) {
               _this.percentage = parseInt(
                  (parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) * 100);
               if (_this.percentage == 100) {
                  _this.$refs.promotion.close();
               }
               console.log('下载进度：' + _this.percentage);
            });
         },
         // ...mapMutations({
         //    mutatLogin:'login'
         // }),
@@ -224,7 +431,10 @@
            uni.setStorageSync('server',val);
            // this.value = val
            // 关闭窗口后，恢复默认内容
            this.$refs.inputDialog.close()
            this.$refs.inputDialog.close();

            this.query(); //版本升级
            // }, 3000)
            // }, 3000)
         },
         rememberPwd(e){  //记住密码
@@ -257,15 +467,30 @@
         // },
         logind(){
            if(!this.userServer){
               uni.showModal({title:"提示",content:"未输入网站地址，请重新配置输入！",showCancel:false,confirmText:"取消"});
               uni.showModal({
                  title: "提示",
                  content: "未输入网站地址，请重新配置输入！",
                  showCancel: false,
                  confirmText: "取消"
               });
               return;
            }
            if(!this.userName){
               uni.showModal({title:"提示",content:"未输入用户名，请重新输入！",showCancel:false,confirmText:"取消"});
               uni.showModal({
                  title: "提示",
                  content: "未输入用户名，请重新输入！",
                  showCancel: false,
                  confirmText: "取消"
               });
               return;
            }
            if(!this.userPwd){
               uni.showModal({title:"提示",content:"未输入密码，请重新输入！",showCancel:false,confirmText:"取消"});
               uni.showModal({
                  title: "提示",
                  content: "未输入密码，请重新输入！",
                  showCancel: false,
                  confirmText: "取消"
               });
               return;
            }
            //检查 "登录状态/锁屏状态" 结束
@@ -307,12 +532,22 @@
                  this.login="开始登录";
                  
               }else{
                  uni.showModal({title:"错误",content:success.msg,showCancel:false,confirmText:"取消"});
                  uni.showModal({
                     title: "错误",
                     content: success.msg,
                     showCancel: false,
                     confirmText: "取消"
                  });
                  this.login="开始登录";
               }
            }).catch(ex=>{
               console.log(ex);
               uni.showModal({title:"错误",content:ex.errMsg,showCancel:false,confirmText:"取消"});
               uni.showModal({
                  title: "错误",
                  content: ex.errMsg,
                  showCancel: false,
                  confirmText: "取消"
               });
               this.login="开始登录";
            });
         }