注册，登录，主页，日计划的修改

付延余

2022-12-19 8fc8838a441ae3d3b1616f4fc003b16292978b54

 pages/login/login.vue

@@ -1,11 +1,10 @@
<template>
<!-- <template>
   <view class="login">
      <image src="@/static/login/banner.png" class="background"></image>
      <view class="login-container">
         <view class="loginBtn"><u-button text="微信账号快捷登录" type="success" shape="circle" icon="weixin-fill" @click="toGrantAuthorization"></u-button></view>
         <view class="utils"><text @click="toBindPage">绑定系统账号</text></view>
      </view>
      <!-- 特定范围说明 -->
      <view class="loginBottom"><text>小程序仅供已拥有系统账号特定内部人员使用</text></view>
      <u-modal
         @confirm="wxLoginConfirm"
@@ -201,3 +200,155 @@
   }
}
</style>
 -->
 
 <template>
    <view class="login">
      <u-overlay :show="show" @click="show = false"></u-overlay>
       <image src="@/static/login/banner.png" class="background"></image>
       <view class="inputBox">
          <view class="phone">
             <image src="@/static/login/phone.png" mode="加载错误"></image>
             <input type="text" placeholder="请输入用户名/手机号" v-model="formData.username" />
          </view>
          <view class="password">
             <image src="@/static/login/lock.png" mode="加载错误" />
             <input type="password" placeholder="请输入账号密码" v-model="formData.password" />
          </view>
          <view class="loginBtn"><button type="default" @click="loginSubmit">登录</button></view>
       </view>
    </view>
 </template>
 
 <script>
 import { setAccessToken, setTokenType, setRefreshToken, setClientId, setScope, redirectHome, redirectLogin } from '@/utils/status.js';
 export default {
    name: 'login',
    data() {
       return {
         show:false,
          formData: {
             // username: 'zhangjialiang',
             // password: '123456aaa',
            // username: 'gequan',
            // password: 'gequan!@#$',
            username: '',
            password: ''
          },
          bindData: {
             state: 'MINI',
             code: ''
          }
       };
    },
   onShow() {
      // 清除缓存
      if (uni.getStorageSync('userInfo') || uni.getStorageSync('access_token') || uni.getStorageSync('refresh_token')) {
         uni.clearStorageSync();
      }
   },
    methods: {
       loginSubmit() {
         if(this.formData.username == ''){
            uni.showToast({
               title:'请输入用户名！',
               icon:'none'
            })
         } else if(this.formData.password == ''){
            uni.showToast({
               title:'请输入密码！',
               icon:'none'
            })
         } else {
            this.show = true;
            uni.showLoading({
               title: '登录中...'
            });
            this.apiLogin(this.formData)
               .then(this.saveUserInfo)
               .catch(this.loginFail);
         }
       },
       saveUserInfo(response) {
          uni.hideLoading();
         this.show = false;
          if (response.statusCode === 200) {
             const { access_token, refresh_token, token_type, scope } = response.data;
             try {
                setAccessToken(access_token);
                setTokenType(token_type);
                setRefreshToken(refresh_token);
                setScope(scope);
                this.$store.dispatch('menus');
                uni.hideLoading();
                redirectHome();
             } catch (e) {
                console.log('检测到错误',e);
             }
          } else {
             uni.showToast({
                title: response.data.msg,
                icon:'none',
                duration: 2000
             });
          }
       },
       loginFail(err) {
         this.show = false;
          console.log('登录接口错误', err);
       }
    }
 };
 </script>
 
 <style lang="scss" scoped>
 .login {
    .background {
       width: 100%;
       height: vww(289);
       // height: vww(246);
    }
    .inputBox {
       width: vww(280);
       margin: vww(40) auto;
       input {
          width: vww(240);
          margin-left: vww(8);
       }
       .phone {
          width: vww(280);
          height: vww(36);
          display: flex;
          align-items: center;
          border-bottom: vww(1) solid #cccccc;
          image {
             width: vww(20);
             height: vww(20);
          }
       }
       .password {
          width: vww(280);
          height: vww(36);
          display: flex;
          align-items: center;
          margin-top: vww(40);
          border-bottom: vww(1) solid #cccccc;
          image {
             width: vww(20);
             height: vww(20);
          }
       }
       .loginBtn {
          margin-top: vww(80);
 
          button {
             background-color: #007aff;
             color: #ffffff;
             font-size: vww(16);
             border-radius: vww(22);
          }
       }
    }
 }
 </style>