新增微信账号快捷登录、账号绑定、换绑功能，及页面更新。

付延余

2022-09-06 f47ce70afac05ce941b5eafb2d9114c7a017f774

 pages/login/login.vue

@@ -1,125 +1,100 @@
<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>
      <view class="loginBtn"><u-button throttleTime="3000" text="微信账号快捷登录" type="success" shape="circle" icon="weixin-fill" @click="wxLogin"></u-button></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: ''
      };
   },
  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');
      wxLogin() {
         uni.showLoading({
            title:'登录中...'
            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;
         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('未绑定系统账号，即将跳转绑定页面！')
                           setTimeout(()=>{
                              uni.navigateTo({
                                 url: '/pages/register/register'
                              });
                           },1000)
                        } 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')
                              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:response.data.msg,
               icon:'error',
                     title: '微信登录失败！',
               duration:2000
            })
                  });
         }
      }

         });
      }
   }
};
</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);
         }
      }
      .loginBtn {
         margin-top: vww(80);

         button {
            background-color: #007aff;
            color: #ffffff;
            font-size: vww(16);
            border-radius: vww(22);
   .loginBtn {
      margin: vww(60) auto;
      width: 80%;
      .u-button {
         .u-icon {
            .u-icon__icon {
               font-size: vww(30) !important;
         }
      }
   }

      .u-button--success {
         border-style: none;
      }
   }
}
</style>