test push two

付延余

2022-12-19 2c11814ecf148a5fe5a80d03e29481476e47f34d

 pages/login/login.vue

@@ -1,125 +1,354 @@
<template>
<!-- <template>
   <view class="login">
      <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 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"
         @cancel="wxLoginCancel"
         @close="wxLoginClose"
         :show="wxLoginModal.show"
         :title="wxLoginModal.title"
         :content="wxLoginModal.content"
         :showCancelButton="true"
      ></u-modal>
      <view class="toGrantAuthorization-container">
         <u-popup :show="popupShow" mode="bottom" @close="closePopup" @open="openPopup" round="10" :safeAreaInsetBottom="true">
            <view class="popup-warp">
               <view class="body"><text>本小程序，仅供已拥有系统账号特定内部人员登录使用，点击同意即表示您已同意相应信息授权。</text></view>
               <view class="btn">
                  <u-button @click="popupShow = false" type="error" text="不同意" shape="circle" :plain="true"></u-button>
                  <u-button @click="wxLogin" type="error" text="同意" throttleTime="3000" shape="circle"></u-button>
               </view>
            </view>
         </u-popup>
      </view>
   </view>
</template>

<script>
import { setAccessToken,setTokenType,setRefreshToken,setClientId,setScope,redirectHome,redirectLogin } from '@/utils/status.js'
import { setAccessToken, setTokenType, setRefreshToken, setClientId, setScope, redirectHome, redirectLogin } from '@/utils/status.js';
export default {
   name: 'login',
   data() {
      return {
         formData:{
            username:'',
            password:''
         }
         wxcode: '', //微信code
         wxLoginModal: {
            show: false,
            title: '提示',
            content: ''
         },
         popupShow: false
      };
   },
  onShow(){
     // 清除缓存
    if(uni.getStorageSync('userInfo')||uni.getStorageSync('access_token')||uni.getStorageSync('refresh_token')){
      this.$u.toast('成功进入登录页');
      uni.clearStorageSync();
    }
  },
   methods:{
      loginSubmit(){
      console.log('点击登录');
      // console.log('login');
         uni.showLoading({
            title:'登录中...'
         });
         this.apiLogin(this.formData).then(this.saveUserInfo).catch(this.loginFail);
      },
      saveUserInfo(response){
         uni.hideLoading();
         if(response.statusCode === 200){
            // console.log('res',response);
            const { data } = response;
            const { access_token,refresh_token,token_type,scope } = data;
            try {
               setAccessToken(access_token);
               setTokenType(token_type);
               setRefreshToken(refresh_token);
               setScope(scope);
               this.$store.dispatch('menus')
               redirectHome();
               uni.hideLoading();
            } catch (e) {
               // error
               console.log(e);
            }
         } else{
            uni.showToast({
               title:response.data.msg,
               icon:'error',
               duration:2000
            })
         }
   onShow() {
      // 清除缓存
      if (uni.getStorageSync('userInfo') || uni.getStorageSync('access_token') || uni.getStorageSync('refresh_token')) {
         uni.clearStorageSync();
      }

   },
   methods: {
      toGrantAuthorization() {
         this.popupShow = true;
      },
      wxLogin() {
         this.popupShow = false;
         uni.showLoading({
            title: '加载中...'
         });
         uni.login({
            success: res => {
               console.log('登录loginRes', res);
               if (res.code) {
                  this.wxcode = res.code;
                  this.wxSmallLogin(this.wxcode)
                     .then(res => {
                        if (res.data.data == '用户不存在') {
                           // this.$u.toast('未绑定系统账号，即将跳转绑定页面！');
                           this.wxLoginModal.content = '未绑定系统账号，是否跳转账号绑定页面！';
                           this.wxLoginModal.show = true;
                        } else if (res.data.active && res.data.active == true) {
                           const { access_token, refresh_token, token_type, scope } = res.data;
                           try {
                              setAccessToken(access_token);
                              setTokenType(token_type);
                              setRefreshToken(refresh_token);
                              setScope(scope);
                              this.$store.dispatch('menus');
                              redirectHome();
                              uni.hideLoading();
                           } catch (e) {
                              // error
                              console.log(e);
                           }
                        }
                        console.log('微信登录', res);
                     })
                     .catch(err => {
                        console.log('错误', err);
                     });
               } else {
                  uni.showToast({
                     title: '微信登录失败！',
                     duration: 2000
                  });
               }
            }
         });
      },
      toBindPage() {
         uni.navigateTo({
            url: '/pages/register/register'
         });
      },
      // 模态框
      wxLoginConfirm() {
         uni.navigateTo({
            url: '/pages/register/register'
         });
         this.wxLoginModal.show = false;
      },
      wxLoginCancel() {
         this.wxLoginModal.show = false;
      },
      wxLoginClose() {
         this.wxLoginModal.show = false;
      },
      // 弹出框
      openPopup() {
         console.log('open');
      },
      closePopup() {
         this.popupShow = false;
         console.log('close');
      }
   }
};
</script>

<style lang="scss" scoped>
.login {
::v-deep.login {
   height: 100vh;

   .background {
      width: 100%;
      height: vww(289);
      // 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);
         }
      }
   .login-container {
      margin: vww(60) auto;
      width: 80%;
      .loginBtn {
         margin-top: vww(80);
         .u-button {
            .u-icon {
               .u-icon__icon {
                  font-size: vww(30) !important;
               }
            }
            .u-button__text {
               font-size: vww(17) !important;
               font-weight: 530;
            }
         }

         button {
            background-color: #007aff;
            color: #ffffff;
            font-size: vww(16);
            border-radius: vww(22);
         .u-button--success {
            border-style: none;
            background-color: #3ebc17;
         }
      }

      .utils {
         font-size: vww(14);
         margin-top: vww(20);
         text-align: center;
         color: #346a9d;
      }
   }

   .loginBottom {
      color: #aaaaaa;
      margin-top: vww(180);
      font-size: vww(14);
      text-align: center;
   }

   // 弹出框
   .toGrantAuthorization-container {
      .u-popup {
         .u-transition {
            .u-popup__content {
               .popup-warp {
                  height: vww(200);
                  padding: vww(10) vww(20);
                  .body {
                     width: 100%;
                     height: 70%;
                  }
                  .btn {
                     display: flex;
                     justify-content: space-between;
                     .u-button {
                        width: 40%;
                     }
                  }
               }
            }
         }
      }
   }
}
</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>