登录页调整样式 增加重置密码

qingyiay

2023-10-16 546863eae7d337d47260d63a4b3733f7313ce52d

 pages/login/login.vue

@@ -2,286 +2,308 @@
   <view class="login">
      <view class="logo">无人值守</view>
      <!--用户名密码登录-->
      <user-password :btnText='0'/>
      <user-password :btnText="0" />
      <!-- 微信openid登录 -->
      <view class="loginBtn">
         <u-button class="button" @click.stop="beforeLoginEvent" :disabled="btnLoading" :loading="btnLoading" type="primary" text="微信一键登录"></u-button>
         <u-button class="button"
            @click.stop="beforeLoginEvent"
            :disabled="btnLoading"
            :loading="btnLoading"
            type="primary"
            text="微信一键登录"></u-button>
      </view>
      <view class="register" @click="registerClick"><text>注册</text></view>
      <view class="utils-block">
         <view @click="forgetPassword"><text>忘记密码?</text></view>
         <view @click="PrivacyAgreementHandle"><text>新用户注册</text></view>
      </view>

      <view class="login-bottom-box">
         <view class="copyright">冀中能源无人值守微信小程序</view>
         <view class="copyright">小程序仅供已拥有系统账号特定内部人员使用</view>
      </view>
      <!-- 微信授权前的弹框 -->
      <view class="loginPopup">
         <u-popup :show="loginPopupShow" mode="bottom" @close="closePopup" @open="openPopup" round="10" :safeAreaInsetBottom="true">
         <u-popup :show="loginPopupShow"
            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="loginPopupShow = false" type="error" text="不同意" shape="circle" :plain="true"></u-button>
                  <u-button @click="wxLogin" type="error" text="同意" throttleTime="3000" shape="circle"></u-button>
                  <u-button @click="loginPopupShow = 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 class="bindWxModel">
         <u-modal :show="bindWxModelShow" :title="bindWxModelTitle" showCancelButton :content="bindWxContent" @confirm="bindWxConfirm" @cancel="bindWxCancel"></u-modal>
         <u-modal :show="bindWxModelShow"
            :title="bindWxModelTitle"
            showCancelButton
            :content="bindWxContent"
            @confirm="bindWxConfirm"
            @cancel="bindWxCancel"></u-modal>
      </view>
   </view>
</template>

<script>
import { apiLoginWx, apiLoginPassword } from '@/api/publicInterface.js';
import { mapMutations } from 'vuex';
import userPassword from './userPassword.vue';
import { setToken, setRefreshToken, setUsernameKey, setCustomerId, redirectHome } from '@/utils/status.js';
export default {
   data() {
      return {
         wxcode: '', // 司机1
         btnLoading: false,
         loginPopupShow: false,
         // 绑定微信模态框
         bindWxModelShow: false,
         bindWxModelTitle: '提示',
         bindWxContent: '如果已拥有系统账号，可以直接跳转绑定微信页面'
      };
   },
   components: {
      userPassword
   },
   methods: {
      ...mapMutations(['setUserTabbar']),
      // 访问wx.login,获取code
      beforeLoginEvent() {
         this.loginPopupShow = true;
   import { apiLoginWx, apiLoginPassword } from '@/api/publicInterface.js';
   import { mapMutations } from 'vuex';
   import userPassword from './userPassword.vue';
   import { setToken, setRefreshToken, setUsernameKey, setCustomerId, redirectHome } from '@/utils/status.js';
   export default {
      data() {
         return {
            btnLoading: false,
            loginPopupShow: false,
            // 绑定微信模态框
            bindWxModelShow: false,
            bindWxModelTitle: '提示',
            bindWxContent: '如果已拥有系统账号，可以直接跳转绑定微信页面',
            appid: "",
            secret: "",
         };
      },
      wxLogin() {
         // 获取登录用户code
         uni.login({
            success: res => {
               if (res.code) {
                  this.wxcode = res.code;
                  this.apiLogin();
               } else {
                  uni.showToast({
                     title: '微信登录失败！',
                     duration: 2000
                  });
               }
            }
         });
      components: {
         userPassword
      },
      // 登录接口
      apiLogin() {
         // apiLoginWx({ code: this.wxcode })
         //    .then(res => {
         //       console.log('请求登录', res);
         //       if (res.msg == '需绑定') {
         //          uni.navigateTo({
         //             url: `/pages/register/register?code=${res.data}`
         //          });
         //       }
         //       if (res.msg == '登录成功') {
         //          uni.setStorageSync('userInfo', res.data);
         //          this.setUserTabbar(res.data.type);
         //          uni.switchTab({
         //             url: '/pages/tabbar-page/index-tabbar/index-tabbar'
         //          });
         //       }
         //    })
         //    .catch(err => {
         //       console.log('错误', err);
         //    });

         /**
          * @openid
          * 获取微信用户openid,微信一键登录暂无相关接口，用于测试呼叫客服功能
          */

         wx.request({
            url: `https://api.weixin.qq.com/sns/jscode2session?appid=wx4a62fc1684c429a9&secret=ee90afe376cdcec2fdd947c0a4db961a&js_code=${this.wxcode}&grant_type=authorization_code`,
            success(res) {
               let id = res.data.openid;
               uni.setStorageSync('openid', id);
               uni.showToast({
                  title: '成功获取测试openid',
                  icon: 'none'
               });
            }
         });
         this.$nextTick(() => {
            apiLoginWx({ code: uni.getStorageSync('openid') }).then(res => {
               if (res.code != 1) {
                  this.$u.toast('恭喜您，登录成功！');
                  // 登陆成功，存储相关信息
                  setToken(res.access_token);
                  setRefreshToken(res.refresh_token);
                  setUsernameKey(res.username);
                  //查询用户详细信息并储存
                  this.$reqGet('getUserEntity').then(res => {
                     this.setUserTabbar(res.data.type);
                     uni.setStorageSync('roleType', res.data.type);
                     setCustomerId(res.data.customerid);
                     //跳转页面
                     this.$nextTick(() => {
                        redirectHome();
      methods: {
         ...mapMutations(['setUserTabbar', 'changeisLogin']),
         getAppidAndSercet() {
            this.$reqGet('getAppidAndSercet').then(res => {
               this.appid = res.data.appid;
               this.secret = res.data.secret
            })
         },
         // 访问wx.login,获取code
         beforeLoginEvent() {
            this.loginPopupShow = true;
            this.getAppidAndSercet();
         },
         wxLogin() {
            // 获取登录用户code
            uni.login({
               success: res => {
                  if (res.code) {
                     uni.setStorageSync('code', res.code);
                     this.apiLogin(res.code);
                  } else {
                     uni.showToast({
                        title: '微信登录失败！',
                        duration: 2000
                     });
                  });
               } else {
                  this.$u.toast(res.msg);
                  this.bindWxModelShow = true;
                  }
               }
            });
         });

         this.loginPopupShow = false;
      },
      bindWxConfirm() {
         uni.navigateTo({
            url: `/pages/login/wxLogin?code=${uni.getStorageSync('openid')}`
         });
         this.bindWxModelShow = false;
      },
      bindWxCancel() {
         this.bindWxModelShow = false;
      },
      // 弹出层时间
      closePopup() {
         this.loginPopupShow = false;
      },
      openPopup() {
         console.log('打开了');
      },
      registerClick() {
         uni.navigateTo({
            url: '/pages/register/register'
         });
         },
         // 登录接口
         apiLogin(code) {
            // 获取微信用户openid,微信一键登录暂无相关接口，用于测试呼叫客服功能
            uni.showLoading({
               title: '加载中...'
            });
            wx.request({
               url: `https://api.weixin.qq.com/sns/jscode2session?appid=${this.appid}&secret=${this.secret}&js_code=${code}&grant_type=authorization_code`,
               success(res) {
                  console.log(res, 'openid');
                  uni.setStorageSync('openid', res.data.openid);
                  // uni.showToast({
                  //    title: '成功获取测试openid',
                  //    icon: 'none'
                  // });
               }
            });
            this.$nextTick(() => {
               apiLoginWx({ code: code }).then(res => {
                  if (res.code != 1) {
                     this.$u.toast('登录成功');
                     this.changeisLogin(true);
                     // 登陆成功，存储相关信息
                     setToken(res.access_token);
                     setRefreshToken(res.refresh_token);
                     setUsernameKey(res.username);
                     //查询用户详细信息并储存
                     this.$reqGet('getUserEntity').then(res => {
                        this.setUserTabbar(res.data.type);
                        uni.setStorageSync('roleType', res.data.type);
                        uni.setStorageSync("userId", res.data.userId)
                        uni.setStorageSync("carNo", res.data.carNo)
                        setCustomerId(res.data.customerid);
                        uni.hideLoading();
                        //跳转页面
                        this.$nextTick(() => {
                           redirectHome();
                        });
                     });
                  } else {
                     this.$u.toast(res.msg);
                     this.bindWxModelShow = true;
                  }
               });
            });
            this.loginPopupShow = false;
         },
         bindWxConfirm() {
            uni.navigateTo({
               url: `/pages/login/wxLogin?code=${uni.getStorageSync('code')}`
            });
            this.bindWxModelShow = false;
         },
         bindWxCancel() {
            this.bindWxModelShow = false;
         },
         // 弹出层时间
         closePopup() {
            this.loginPopupShow = false;
         },
         openPopup() {
            console.log('打开了');
         },
         forgetPassword() {
            uni.navigateTo({
               url: '/pages/login/forgetPassword/forgetPassword'
            })
         },
         PrivacyAgreementHandle() {
            uni.navigateTo({
               url: '/pages/login/PrivacyAgreementText/PrivacyAgreementText'
            })
         },
      }
   }
};
   };
</script>

<style lang="scss">
@import 'index.scss';
.login {
   // height: 100vh;
   // display: flex;
   // align-items: center;
   @import 'index.scss';

   // .loginBtn {
   //   margin: 0 auto;
   //   width: 80%;
   .PrivacyAgreement {
      color: rgb(60, 156, 255)
   }

   //   .u-button {
   //     .u-icon {
   //       .u-icon__icon {
   //         font-size: vww(20) !important;
   //       }
   //     }
   //   }
   .login {
      .loginBtn {
         margin-top: vww(20);

   //   .u-button--success {
   //     border-style: none;
   //   }
   // }
   .loginBtn {
      margin-top: vww(20);
      .u-button {
         .u-button {
            width: 80%;
         }
      }

      .utils-block {
         width: 80%;
      }
   }
   .logo {
      width: 80%;
      font-size: 64rpx;
      color: #497bff;
      margin: vww(100) auto 0;
      text-align: center;
   }

   .list-call-icon {
      color: #ff0000;
   }

   .currentPhone-box {
      text-align: center;
      padding: 40rpx 80rpx;

      .number-text {
         color: #000000;
         font-size: 60rpx;
         margin: vww(20) auto;
         display: flex;
         justify-content: space-between;
         color: #497bff;
         font-size: vww(17);
      }

      .other-text {
         color: #999999;
         font-size: 26rpx;
         padding: 20rpx 0;
      .logo {
         width: 80%;
         font-size: 64rpx;
         color: #497bff;
         margin: vww(100) auto 0;
         text-align: center;
      }

      .u-btn {
         margin: 30rpx auto;
      .list-call-icon {
         color: #ff0000;
      }

      .u-hairline-border {
         border: 1px solid #fff;
      .currentPhone-box {
         text-align: center;
         padding: 40rpx 80rpx;

         .number-text {
            color: #000000;
            font-size: 60rpx;
         }

         .other-text {
            color: #999999;
            font-size: 26rpx;
            padding: 20rpx 0;
         }

         .u-btn {
            margin: 30rpx auto;
         }

         .u-hairline-border {
            border: 1px solid #fff;
         }
      }
   }

   .register {
      color: #497bff;
      height: 40rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      position: fixed;
      bottom: vww(70);
      text-align: center;
      width: 100%;
   }

   .register-link {
      float: right;
      padding: 0 16rpx;
   }

   .reg-link {
      display: inline-block;
      color: #497bff;
   }

   .oauth2 {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin: 0rpx 100rpx 30rpx;

      image {
         height: 80rpx;
         width: 80rpx;
      .register {
         color: #497bff;
         height: 40rpx;
         line-height: 40rpx;
         font-size: 28rpx;
         position: fixed;
         bottom: vww(70);
         text-align: center;
         width: 100%;
      }
   }

   .u-tabs {
      padding: 0 70rpx;
   }
      .register-link {
         float: right;
         padding: 0 16rpx;
      }

   // 弹出框
   .loginPopup {
      .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%;
      .reg-link {
         display: inline-block;
         color: #497bff;
      }

      .oauth2 {
         display: flex;
         flex-direction: row;
         justify-content: space-around;
         margin: 0rpx 100rpx 30rpx;

         image {
            height: 80rpx;
            width: 80rpx;
         }
      }

      .u-tabs {
         padding: 0 70rpx;
      }

      // 弹出框
      .loginPopup {
         .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%;
                        }
                     }
                  }
               }
@@ -289,5 +311,4 @@
         }
      }
   }
}
</style>
</style>