提交

马宇豪

2024-07-24 33413c6be7f338ba1ee92b3218e5c078364675dc

 pages/index/index.vue

@@ -1,25 +1,34 @@
<template>
   <view class="box">
      <view class="header">
         <view class="titleFirst"><b>新疆维吾尔自治区自然灾害综合监测预警</b></view>
         <view class="titleSecond"><b>自然灾害综合风险预警发布及响应联动系统</b></view>
      </view>
      <view>	
         <u-form :model="form" ref="uForm" class="form" >
            <u-form-item style="width: 75%;"><u-input color="#fff" v-model="form.name" placeholder="请输入用户名"  /></u-form-item>
            <u-form-item style="margin-top: 10px;width: 75%;" ><u-input color="#fff" v-model="form.pwd" type="password" placeholder="请输入密码"  /></u-form-item>
            <!-- <view class="loginPsw">
                   <u-checkbox-group >
                     <u-checkbox disabled="true"></u-checkbox><text style="color: #fff;">自动登录</text>
                   </u-checkbox-group>
                    <text style="color: lightblue;">忘记密码</text>
            </view> -->
            <u-form-item style="margin-top: 10px;width: 75%;">
               <u-button :loading="isLogining" type="primary" style="width: 100%;" @click="Login">登录</u-button>
               </u-form-item>
            <view style="color: white;margin-top: 150px;">技术支持：技术保障部</view>
         </u-form>
      </view>
    <image :src="loginTop" class="topImg" mode="widthFix"></image>
    <view class="main">
      <view class="header">
        <view class="titleFirst">
          你好~<br/>欢迎来到安全教育在线平台</view>
      </view>
      <view>
        <u-form :model="form" ref="uForm" class="form" >
          <u-form-item style="width: 75%;"><u-input v-model="form.username" :class="{'isFocused': userFocused}" placeholder="请输入用户名" @focus="focusUser"/></u-form-item>
          <u-form-item style="margin-top: 10px;width: 75%;" ><u-input v-model="form.password" :class="{'isFocused': codeFocused}" :type="codeType" placeholder="请输入密码"  @focus="focusCode">
            <template slot="suffix">
              <u-icon v-show="codeType == 'password'" name="eye" color="#999" size="20" @click="viewCode"></u-icon>
              <u-icon v-show="codeType == 'text'" name="eye-off" color="#999" size="20" @click="viewCode"></u-icon>
            </template>
          </u-input></u-form-item>
          <!-- <view class="loginPsw">
                 <u-checkbox-group >
                <u-checkbox disabled="true"></u-checkbox><text style="color: #fff;">自动登录</text>
                 </u-checkbox-group>
                  <text style="color: lightblue;">忘记密码</text>
          </view> -->
          <u-form-item style="margin-top: 10px;width: 75%;">
            <u-button class="loginBtn" :loading="isLogining" style="width: 100%;height: 56px;border-radius: 28px" @click="Login" type="primary">登录</u-button>
          </u-form-item>
          <!--            <view style="color: white;margin-top: 150px;">技术支持：技术保障部</view>-->
        </u-form>
      </view>
    </view>

   </view>
</template>

@@ -28,43 +37,48 @@
   import store from '@/store/index.js'
   import VUE_APP_BASE_URL from '../../common/constant.js'
   const jpushModule = uni.requireNativePlugin('JG-JPush')
  import loginTop from '../../static/loginTop1.png'
   export default {
      data() {
         return {
        loginTop: loginTop,
        userFocused: false,
        codeFocused: false,
            form: {
               name: '',
               pwd: '',
               registrationId: ''
               username: '',
               password: '',
          code: '',
          uuid: ''
            },
        codeType: 'password',
            type: '',
            //极光推送
            connectStatus: '未连接',
            registrationID: '未获得',
            isLogining: false,
            isLogining: false
         }
      },
      onShow() {
         console.log("数据",uni.getStorageSync('name'))
         if(uni.getStorageSync('name') && uni.getStorageSync('pwd')){
            // this.form.name = uni.getStorageSync('name');
            // this.form.pwd = uni.getStorageSync('pwd');
            if(uni.getStorageSync('roleName') == '工作人员'){
               this.$store.commit('setRoleId', 'user_other');
               uni.switchTab({
                    url: '/pages/tabBar/notice/notice'
                 });
            }else if (uni.getStorageSync('roleName') == '管理员'){
               this.$store.commit('setRoleId', '');
               uni.showToast({
                  icon: "none",
                  title: '管理员请使用平台登录'
               });
            }else{
               this.$store.commit('setRoleId', 'user_leader');
               uni.switchTab({
                        url: '/pages/tabBar/firstPage/firstPage'
                    });
            }
//             if(uni.getStorageSync('roleName') == '工作人员'){
//                this.$store.commit('setRoleId', 'user_other');
//                uni.switchTab({
//                     url: '/pages/tabBar/notice/notice'
//                  });
//             }else if (uni.getStorageSync('roleName') == '管理员'){
//                this.$store.commit('setRoleId', '');
//                uni.showToast({
//                   icon: "none",
//                   title: '管理员请使用平台登录'
//                });
//             }else{
//                this.$store.commit('setRoleId', 'user_leader');
//                uni.switchTab({
//                         url: '/pages/tabBar/firstPage/firstPage'
//                     });
//             }
         }else{
            uni.clearStorageSync();
            uni.clearStorage();
@@ -72,56 +86,63 @@
      },
      onLoad() {
         this.connect()
         this.getMaxVersion()
      },
      methods: {
      base64Encode(str) {
        return btoa(unescape(encodeURIComponent(str)));
      },
         Login(){
            this.isLogining = true;
            login(this.form).then(res => {
               if (res.code === 100) {
        // this.form.password = this.base64Encode(this.form.password)
        const {username,password,code,uuid} = this.form
        const data = {username,password,code,uuid}
        data.password = this.base64Encode(data.password)
        uni.removeStorageSync('tk');
            login(data).then(res => {
               if (res.code === 200) {
                  this.isLogining = false;
                   //登录成功后
                   //设置别名
                  jpushModule.setAlias({
                     'alias': this.phone,
                     'sequence': 1
                  })
                  uni.setStorageSync("name", this.form.name);
                  uni.setStorageSync("pwd", this.form.pwd);
                  uni.setStorageSync("tk", res.data.tk);
                  uni.setStorageSync("uid",res.data.uid);
                  // jpushModule.setAlias({
                  //    'alias': this.phone,
                  //    'sequence': 1
                  // })
                  uni.setStorageSync("name", this.form.username);
                  uni.setStorageSync("pwd", this.form.password);
                  uni.setStorageSync("tk", res.data.token);
                  uni.setStorageSync("uid",res.data.id);
                  uni.setStorageSync('user', res.data);
                  uni.setStorageSync('unittype',res.data.unittype);
                  uni.setStorageSync('roleName', res.data.role.roleName);
                  if(res.data.role.roleName == '工作人员'){
                     this.$store.commit('setRoleId', 'user_other');
                     uni.switchTab({
                          url: '/pages/tabBar/notice/notice'
                       });
                  }else if (res.data.role.roleName == '管理员'){
                     this.$store.commit('setRoleId', '');
                     uni.showToast({
                        icon: "none",
                        title: '管理员请使用平台登录'
                     });
                  }else{
                  // uni.setStorageSync('unittype',res.data.unittype);
                  // uni.setStorageSync('roleName', res.data.role.roleName);
      //             if(res.data.role.roleName == '工作人员'){
      //                this.$store.commit('setRoleId', 'user_other');
      //                uni.switchTab({
      //                     url: '/pages/tabBar/notice/notice'
      //                  });
      //             }else if (res.data.role.roleName == '管理员'){
      //                this.$store.commit('setRoleId', '');
      //                uni.showToast({
      //                   icon: "none",
      //                   title: '管理员请使用平台登录'
      //                });
      //             }else{
                     this.$store.commit('setRoleId', 'user_leader');
                     uni.switchTab({
                              url: '/pages/tabBar/firstPage/firstPage'
                          });
                  }
                url: '/pages/tabBar/firstPage/firstPage'
              })
      //             }
               }else{
                  uni.showToast({
                     icon: "none",
                     title: res.msg
                     title: res.message
                  });
                  this.form.name = '';
                  this.form.pwd = '';
                  this.form.username = '';
                  this.form.password = '';
                  this.isLogining = false;
               }
            }).catch(err=>{
               this.form.name = '';
               this.form.pwd = '';
          this.form.username = '';
          this.form.password = '';
               this.isLogining = false;
            })
         },
@@ -142,135 +163,123 @@
         getRegistrationID() {
            jpushModule.getRegistrationID(result => {
               let registerID = result.registerID
               console.log('registerID',registerID)
               this.registrationID = registerID
               this.form.registrationId = registerID;
               uni.setStorageSync('registrationID', registerID);
               console.log("iddd",uni.getStorageSync('registrationID'))
            })
         },
             // 获取最新版本
             getMaxVersion() {
               uni.getSystemInfo({
                 success: (res) => {
                 getLastApp().then(res => {
                    if (res.code === 100) {
                       console.log(res,'res');
                       this.updateVersion(res.data);
                    }
                 })
                 },
               });
             },
				
             // 版本对比
             updateVersion(data) {
              const lastVersion = data.version; //最新版本
               const curVersion = uni.getStorageSync("version"); // 当前版本
              console.log("lastVersion",lastVersion)
              console.log("curVersion",curVersion)
               if (curVersion && lastVersion) {
                 const curNum =  parseInt(curVersion.replace(/[,|.]/g, ''))
                 const lastNum =  parseInt(lastVersion.replace(/[,|.]/g, ''))
                 if (lastNum > curNum) {
                   this.showFly(data.attachmentInfo.fileUrl,lastVersion);
                 }
               }
             },
               // 版本下载 升级
             showFly(url,lastVersion) {
               console.log("url",url)
               uni.showModal({
                 title: "提示",
                 content: `发现新版本${lastVersion}，立即升级！`,
                 showCancel: false, // 如果是强制更新就不显示取消按钮
                 success: (e) => {
                   if (e.confirm) {
                     uni.showLoading({
                       title: "更新中……",
                     });
                     const downloadTask = uni.downloadFile({
                       url: VUE_APP_BASE_URL + url, // 这个是最新版本apk包的地址
                       success: (res) => {
                         uni.hideLoading();
                         if (res.statusCode === 200) {
                        console.log("url",VUE_APP_BASE_URL + url)
                           plus.runtime.install(res.tempFilePath, { force: true }, _res => {
                               uni.showToast({
                                 title: "更新成功，重启中",
                                 duration: 1600,
                               });
                               plus.runtime.restart();
                               uni.hideToast();
                             }
                           );
                         } else {
                           uni.showToast({
                             title: "下载失败！",
                             icon: "none",
                             duration: 800,
                           });
                         }
                       },
                     });
                     // downloadTask.onProgressUpdate((res) => {
                     //   // _this.startDown = true;
                     //   // _this.calcPro(res.progress);
                     //   // console.log('下载进度' + res.progress);
                     //   // console.log('已经下载的数据长度' + res.totalBytesWritten);
                     //   // console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
                     //   // 测试条件，取消下载任务。
                     //   // if (res.progress > 50) {
                     //   //     downloadTask.abort();
                     //   // }
                     // });
                   }
                 },
               });
             }

      focusUser(){
        this.userFocused = true
        this.codeFocused = false
      },
      focusCode(){
        this.codeFocused = true
        this.userFocused = false
      },
      viewCode(){
        if(this.codeType == 'password'){
          this.codeType = 'text'
        } else{
          this.codeType = 'password'
        }
      }
      }
   }
</script>

<style>
<style scoped lang="scss">
.box{
   width: 100%;
   height: 100vh;
   background: url('../../static/shu.jpg') no-repeat;
   background-size: 100% 100%;
   background-attachment: fixed;/* 不设置的话页面滑动时，背景会不铺满*/
  background: #f5f5f5;
   display: flex;
   flex-direction: column;
}
.titleFirst{
   text-align: center;
   font-size: 18px;
   color:#fff;

.topImg{
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 5px rgba(21,148,232,.1))
}

.main{
  width: 100%;
  margin-top: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: left;
}

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

.titleFirst{
  width: 75%;
   font-size: 40rpx;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 2px;
   color: #333;
}

.titleSecond{
   text-align: center;
   font-size: 19px;
   color:#fff;
   color: #fff;
   margin-top: 10px;
}
.header {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding-top:100px;
   text-shadow:0 0 1px #000;
}
.form{
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 25%;
  margin-top: 40rpx;
}

.u-input{
  border-color: #f5f5f5 !important;
  border-radius: 99px;
  background: #f5f5f5;
  padding: 15px 20px !important;
  box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 15px rgba(0, 0, 0, 0.1) !important;
  transition: box-shadow .1s ease !important;

  &:active{
    box-shadow: 0px -6px 10px rgba(255, 255, 255, 1), 0px 4px 12px rgba(0, 0, 0, 0.1),inset 0 3px 6px rgba(50, 50, 50, .05) !important;
  }
}

.isFocused{
  background: #fff;
  border-width: 1.5px !important;
  border-color: #e6e6e6 !important;
  box-shadow: 0px -6px 10px rgba(255, 255, 255, 0), 0px 4px 12px rgba(0, 0, 0, 0),inset 0 3px 6px rgba(50, 50, 50, .05) !important;
}

.loginPsw{
   margin-bottom: 20px;
   display: flex;
   justify-content: space-between;
}

.loginBtn{
  border: 1px solid rgba(255,255,255,.4);
  letter-spacing: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  background-image: linear-gradient(#41a2ff,#0f7ff9);
  transition: box-shadow .15s ease !important;
}

.loginBtn:active{
  box-shadow: 0 2px 4px rgba(0,0,0,0);
  background-image: linear-gradient(#0f7ff9,#41a2ff);
}


</style>