完善登录，登录授权

付延余

2022-09-07 513be798a677672644770e2b2f7025b6d4d20414

 pages/login/login.vue

@@ -1,7 +1,32 @@
<template>
   <view class="login">
      <image src="@/static/login/banner.png" class="background"></image>
      <view class="loginBtn"><u-button throttleTime="3000" text="微信账号快捷登录" type="success" shape="circle" icon="weixin-fill" @click="wxLogin"></u-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>

@@ -10,7 +35,13 @@
export default {
   data() {
      return {
         wxcode: ''
         wxcode: '', //微信code
         wxLoginModal: {
            show: false,
            title: '提示',
            content: ''
         },
         popupShow: false
      };
   },
   onShow() {
@@ -20,7 +51,11 @@
      }
   },
   methods: {
      toGrantAuthorization() {
         this.popupShow = true;
      },
      wxLogin() {
         this.popupShow = false;
         uni.showLoading({
            title: '加载中...'
         });
@@ -32,12 +67,9 @@
                  this.wxSmallLogin(this.wxcode)
                     .then(res => {
                        if (res.data.data == '用户不存在') {
                           this.$u.toast('未绑定系统账号，即将跳转绑定页面！')
                           setTimeout(()=>{
                              uni.navigateTo({
                                 url: '/pages/register/register'
                              });
                           },1000)
                           // 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 {
@@ -66,6 +98,32 @@
               }
            }
         });
      },
      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');
      }
   }
};
@@ -80,20 +138,65 @@
      // height: vww(289);
      height: vww(246);
   }

   .loginBtn {
   .login-container {
      margin: vww(60) auto;
      width: 80%;
      .u-button {
         .u-icon {
            .u-icon__icon {
               font-size: vww(30) !important;
      .loginBtn {
         .u-button {
            .u-icon {
               .u-icon__icon {
                  font-size: vww(30) !important;
               }
            }
            .u-button__text {
               font-size: vww(17) !important;
               font-weight: 530;
            }
         }

         .u-button--success {
            border-style: none;
            background-color: #3ebc17;
         }
      }

      .u-button--success {
         border-style: none;
      .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%;
                     }
                  }
               }
            }
         }
      }
   }
}