CZC/login/src/views/Login/index.vue

<template>
  <div class="login-wrap">
    <div
      class="logo"
      :class="{ logoleave: jumpAnimate }"
    >
      <img src="@assets/img/icon_logo2.png" />
    </div>
    <div class="login-title">
      <h1 class="title-name">智慧社区管理平台</h1>
      <!-- <p class="title-lang">Smart community management platform</p> -->
      <p class="title-lang">SMART COMMUNITY MANAGEMENT PLATFORM</p>
    </div>
    <div
      class="ms-login ms-login1"
      :class="{ 'ms-login1leave': jumpAnimate }"
      v-show="!isSelectTenant"
    >
      <div class="ms-main">
        <!-- <div class="login-topImg paTop10"><img
            src="@assets/img/loginPop/img1.png"
            alt=""
          /></div> -->
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          class="login-body"
        >
          <el-tab-pane
            label="账号登录"
            name="accountNumber"
            class="regist_class"
          >
            <el-form>
              <div class="form-item">
                <el-input
                  type="text"
                  placeholder="请输入账号"
                  required="required"
                  v-model="accountNumberData.mobile"
                  maxlength="11"
                  @focus="namefocus = true"
                  @blur="onnamefocus"
                  clearable
                >
                </el-input>
              </div>
              <div class="form-item">
                <el-input
                  type="password"
                  placeholder="请输入密码"
                  v-model="accountNumberData.password"
                  @focus="phonefocus = true"
                  @blur="onphonefocus"
                  clearable
                >
                </el-input>
              </div>
              <div class="remember">
                <el-checkbox v-model="rememberName">记住账号</el-checkbox>
              </div>
              <span
                class="tips"
                v-if="accountNumberData.errMsg"
              >{{ accountNumberData.errMsg }}</span>
              <el-button
                type="primary"
                class="btn"
                @click="accountNumberSubmit"
                v-preventReClick
              >登录</el-button>
            </el-form>
          </el-tab-pane>
          <el-tab-pane
            label="手机登录"
            name="login"
            class="login_class"
          >
            <el-form>
              <div class="form-item">
                <el-input
                  type="text"
                  placeholder="请输入手机号"
                  required="required"
                  v-model="loginData.mobile"
                  maxlength="11"
                  @focus="mobilefocus = true"
                  @blur="onmobilefocus"
                  clearable
                >
                </el-input>
              </div>
              <div class="form-item">
                <el-input
                  type="text"
                  placeholder="请输入校验码"
                  required="required"
                  v-model="loginData.code"
                  @focus="codefocus = true"
                  @blur="oncodefocus"
                >
                </el-input>
                <img
                  class="el-fl-right codeImg codeImg-item"
                  :src="loginData.codeUrl"
                  @click="refreshCode"
                />
              </div>

              <div class="form-item">
                <el-input
                  type="text"
                  placeholder="请输入手机验证码"
                  v-model="loginData.smsCode"
                  @focus="smsCodefocus = true"
                  @blur="onsmsCodefocus"
                >
                </el-input>
                <el-button
                  type="text"
                  v-if="loginData.time"
                  class="el-fl-right codeImg sms-code sms-code-istime"
                  :disabled="!!loginData.time"
                  @click="getCode"
                >
                  {{ `${loginData.time}s后重新获取` }}</el-button>
                <el-button
                  type="text"
                  v-else
                  class="el-fl-right codeImg sms-code sms-code-notime"
                  :disabled="!!loginData.time"
                  @click="getCode"
                >
                  获取验证码</el-button>
              </div>
              <span
                class="tips"
                v-if="loginData.errMsg"
              >{{ loginData.errMsg }}</span>
              <el-button
                type="primary"
                class="btn mgTop16"
                @click="loginSubmit"
              >登录</el-button>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <!-- <div class="login-buttonImg paTop10"><img
            src="@assets/img/loginPop/img2.png"
            alt=""
          /></div> -->
      </div>
    </div>
    <select-tenant
      :selectDta="loginInfoArr"
      :class="{ 'ms-login1leave': jumpAnimate }"
      v-show="isSelectTenant"
    ></select-tenant>
  </div>
</template>

<script>
import SelectTenant from '@/components/ToggleTenant';
let timer;
const phoneRegExp = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|147)\d{8}$/,
  codeRegExp = /^\d{4}$/;
export default {
  components: {
    SelectTenant
  },
  data () {
    return {
      isSelectTenant: false,
      loginInfoArr: [],
      // 获取url地址后面的参数
      activeName: 'accountNumber',
      urlQuery: '',
      activeIndex: '1',
      loginData: {
        mobile: '17800000001', //手机号
        code: '', //校验码
        codeUrl: '',
        smsCode: '', //手机校验码
        time: 0,
        random: '', //用于重新获取数字校验码的随机数
        errMsg: ''
      },
      accountNumberData: {
        mobile: '',
        password: '',
        errMsg: ''
      },
      rememberName: false,
      registerData: {
        registered: false,
        name: '',
        mobile: '',
        errMsg: '',
        roleType: '',
        roleTypeOptions: [
          {
            id: 1,
            label: '水表厂家用户'
          },
          {
            id: 2,
            label: '自来水公司用户'
          },
          {
            id: 3,
            label: '城市合伙人'
          }
        ]
      },
      mobilefocus: false,
      codefocus: false,
      smsCodefocus: false,
      namefocus: false,
      phonefocus: false,
      tanasfocus: false,
      jumpAnimate: false
    };
  },
  methods: {
    onmobilefocus () {
      if (this.loginData.mobile.length === 0) {
        this.mobilefocus = false;
      }
    },
    oncodefocus () {
      if (this.loginData.code.length === 0) {
        this.codefocus = false;
      }
    },
    onsmsCodefocus () {
      if (this.loginData.smsCode.length === 0) {
        this.smsCodefocus = false;
      }
    },
    onnamefocus () {
      if (this.registerData.name.length === 0) {
        this.namefocus = false;
      }
    },
    onphonefocus () {
      if (this.registerData.mobile.length === 0) {
        this.phonefocus = false;
      }
    },
    ontanasfocus () {
      if (this.registerData.roleType.length === 0) {
        this.tanasfocus = false;
      }
    },
    ontanaschange (val) {
      if (val.length === 0) {
        this.tanasfocus = false;
      }
    },
    //获取随机数
    getRandom () {
      const CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
      for (var r, chars = CHARS, uuid = new Array(36), rnd = 0, i = 0; 36 > i; i++) {
        8 == i || 13 == i || 18 == i || 23 == i
          ? (uuid[i] = '-')
          : 14 == i
            ? (uuid[i] = '4')
            : (2 >= rnd && (rnd = (33554432 + 16777216 * Math.random()) | 0),
              (r = 15 & rnd),
              (rnd >>= 4),
              (uuid[i] = chars[19 == i ? (3 & r) | 8 : r]));
      }
      return uuid.join('');
    },
    refreshCode () {
      this.loginData.random = this.getRandom();
      this.loginData.codeUrl = `/czc-user-auth/validateCode/image?random=${this.loginData.random}`;
    },
    //获取手机验证码
    getCode () {
      const { mobile, code, random } = this.loginData;
      let errorMsg = '';
      if (!codeRegExp.test(code)) {
        errorMsg = '您输入的图形验证码有误，请重新输入';
      }
      if (!code) {
        errorMsg = '请输入图形验证码';
      }
      if (!phoneRegExp.test(mobile)) {
        errorMsg = '您输入的手机号码格式有误，请重新输入';
      }
      if (!mobile) {
        errorMsg = '请输入手机号码';
      }
      if (errorMsg) {
        this.loginData.errMsg = errorMsg;
        return;
      }
      this.loginData.errMsg = '';
      this.$http
        .postForm('/sms/v2/send', {
          mobile,
          code,
          random
        })
        .then(({ status, msg }) => {
          this.$message({
            type: status === 0 ? 'success' : 'error',
            message: msg
          });
          if (status === 0) {
            this.loginData.time = 60;
            timer = setInterval(() => {
              this.loginData.time -= 1;
              if (this.loginData.time == 0) {
                clearInterval(timer);
              }
            }, 1000);
          }
        });
    },
    registerSubmit () {
      const params = { ...this.registerData };
      if (!params.name) {
        this.registerData.errMsg = '· 请输入姓名';
        return;
      }
      if (!params.mobile) {
        this.registerData.errMsg = '· 请输入手机号';
        return;
      }
      if (!phoneRegExp.test(params.mobile)) {
        this.registerData.errMsg = '· 请输入正确的手机号';
        return;
      }
      if (!params.roleType) {
        this.registerData.errMsg = '· 请输入用户类型';
        return;
      }
      let registparams = {
        username: params.name,
        phone: params.mobile,
        userType: params.roleType
      };
      this.$http.post('/user/insertRegister', registparams).then(({ status, data, msg }) => {
        if (status === 0) {
          this.registerData.errMsg = '';
          this.$message({
            type: 'success',
            message: '注册成功，请登录'
          });
          this.activeName = 'accountNumber';
        } else {
          this.$message({
            type: 'err',
            message: '注册失败'
          });
        }
      });
    },
    accountNumberSubmit () {
      let errorMsg = '';
      const params = { ...this.accountNumberData };
      if (!params.password) {
        errorMsg = '· 请输入密码';
      }
      if (!params.mobile) {
        errorMsg = '· 请输入账号';
      }
      if (errorMsg) {
        this.accountNumberData.errMsg = errorMsg;
        return;
      }
      if (this.rememberName) {
        localStorage.setItem('accountNumberName', params.mobile);
      } else {
        localStorage.removeItem('accountNumberName');
      }
      this.$http.postForm('/user/mobileLogin', params).then(({ status, data, msg }) => {
        if (status === 0 && data) {
          localStorage.setItem('CZC_token', data.token.access_token);
          this.loginInfoArr = data.loginInfo;
          if (data.loginInfo.length > 1) {
            this.isSelectTenant = true;
          } else {
            console.log('this.loginInfoArr', this.loginInfoArr);
            this.$store.commit('setloginInfo', data.loginInfo[0]);
            this.jumpAnimate = true;
            window.sessionStorage.setItem('loginJson', JSON.stringify(this.loginInfoArr));
            window.sessionStorage.setItem('loginJsonActive', JSON.stringify(this.loginInfoArr[0]));
            setTimeout(() => {
              this.$router.push({
                path: '/nav'
              });
            }, 1500);
          }
        } else {
          this.$message.error(msg);
          if (msg === '您输入的手机验证码已过期，请重新输入') {
            self.refreshCode();
            self.loginData.code = '';
          }
        }
      });
    },
    loginSubmit () {
      let errorMsg = '';
      const params = { ...this.loginData };
      if (!codeRegExp.test(params.smsCode)) {
        errorMsg = '· 您输入的手机验证码有误，请重新输入';
      }
      if (!params.smsCode) {
        errorMsg = '· 请输入手机检验码';
      }
      if (!codeRegExp.test(params.code)) {
        errorMsg = '· 您输入的图形验证码有误，请重新输入';
      }
      if (!params.code) {
        errorMsg = '· 请输入图形验证码';
      }
      if (!phoneRegExp.test(params.mobile)) {
        errorMsg = '· 请输入正确的手机号';
      }
      if (!params.mobile) {
        errorMsg = '· 请输入手机号';
      }
      if (errorMsg) {
        this.loginData.errMsg = errorMsg;
        return;
      }
      this.$http.postForm('/user/smsCodeLogin', params).then(({ status, data, msg }) => {
        if (status === 0 && data) {
          localStorage.setItem('CZC_token', data.token.access_token);
          this.loginInfoArr = data.loginInfo;
          if (data.loginInfo.length > 1) {
            this.isSelectTenant = true;
          } else {
            console.log('this.loginInfoArr', this.loginInfoArr);
            this.$store.commit('setloginInfo', data.loginInfo[0]);
            this.jumpAnimate = true;
            window.sessionStorage.setItem('loginJson', JSON.stringify(this.loginInfoArr));
            window.sessionStorage.setItem('loginJsonActive', JSON.stringify(this.loginInfoArr[0]));
            setTimeout(() => {
              this.$router.push({
                path: '/nav'
              });
            }, 1500);
          }
        } else {
          this.$message.error(msg);
          if (msg === '您输入的手机验证码已过期，请重新输入') {
            self.refreshCode();
            self.loginData.code = '';
          }
        }
      });
    }
  },
  created () {
    if (localStorage.getItem('logOut')) {
      this.$message.success('您已退出登录');
      localStorage.removeItem('logOut');
    }
    let that = this;
    document.onkeydown = function (e) {
      e = window.event || e;
      if (that.$route.path == '/login' && (e.code == 'Enter' || e.code == 'enter') && that.activeName == 'accountNumber') {
        that.loginSubmit(); //登录函数
      }
    };
    this.refreshCode();
    localStorage.removeItem('menupath');
    localStorage.removeItem('ms_username');
    localStorage.removeItem('CZC_token');
    // sessionStorage.removeItem('tabs');
    sessionStorage.clear();
    const accountNumberName = localStorage.getItem('accountNumberName') || '';
    this.accountNumberData.mobile = accountNumberName;
    this.rememberName = !!accountNumberName;
  }
};
</script>

<style lang="scss" scoped>
@import './style.scss';
// /deep/.el-input__inner {
//     font-family: Microsoft YaHei;
//     height: 48px;
//     line-height: 10px;
//     border-radius: 6px;
//     background: #1d212a;
//     border: 1px solid rgba(255, 255, 255, 0.3);
//     color: #ffffff;
//     font-size: 16px;
//     font-weight: 400;
//     &:focus {
//         border: 1px solid #0eaeff;
//         border-radius: 6px;
//     }
//     // opacity: 0.3;
// }
// /deep/.el-form-item {
//     margin-bottom: 30px;
// }

// /deep/.el-tabs {
//     // position: relative;
//     // position: absolute;
//     // top: 10px;
//     width: 100%;
//     // padding: 0px 30px 30px 30px;
//     // height: 360px;
//     .el-tabs__header {
//         margin: 0;
//     }
//     .el-tabs__content {
//         .el-form .form-item {
//         }
//     }
//     .el-tabs__nav-wrap::after {
//         display: none;
//     }
//     .el-tabs__nav {
//         width: 100%;
//         .el-tabs__bar {
//             height: 0;
//         }
//         .el-tabs__active-bar {
//             background-color: transparent;
//         }
//         .el-tabs__item {
//             width: 50%;
//             color: #ffffff33;
//             text-align: center;
//             padding: 0;
//         }
//         .el-tabs__item.is-active {
//             color: #ffffff;
//             &::after {
//                 display: block;
//                 content: '';
//                 position: absolute;
//                 width: 48px;
//                 left: 50%;
//                 transform: translateX(-50%);
//                 height: 2px;
//                 background: #0eaeff;
//                 bottom: 0;
//             }
//         }
//     }
// }

// /deep/ .right-tabbox-newnotice /deep/.el-tabs__nav-wrap::after {
//     position: static !important;
// }

// // 改版
// // 动画

// @-webkit-keyframes lightfadeout {
//     0% {
//         opacity: 0;
//     }
//     100% {
//         opacity: 1;
//     }
// }
// @keyframes lightfadeout {
//     0% {
//         opacity: 0;
//     }
//     100% {
//         opacity: 1;
//     }
// }
// @-webkit-keyframes lightfadeoutleave {
//     0% {
//         opacity: 1;
//     }
//     100% {
//         opacity: 0;
//     }
// }
// @keyframes lightfadeoutleave {
//     0% {
//         opacity: 1;
//     }
//     100% {
//         opacity: 0;
//     }
// }

// .login-wrap .logo {
//     position: absolute;
//     top: 120px;
//     left: 130px;
//     margin: 0;
//     opacity: 0;
//     animation-name: lightfadeout;
//     animation-duration: 0.267s;
//     animation-timing-function: linear;
//     animation-delay: 1.267s;
//     animation-iteration-count: 1;
//     animation-fill-mode: forwards;
// }
// .login-wrap .logo > img {
//     width: 150px;
//     height: 40px;
// }
// .login-wrap .logoleave {
//     opacity: 1;
//     animation-name: lightfadeoutleave;
//     animation-duration: 0.267s;
//     animation-timing-function: linear;
//     animation-delay: 0.3s;
//     animation-iteration-count: 1;
//     animation-fill-mode: forwards;
// }
// .ms-login1 {
//     opacity: 0;
//     animation-name: lightfadeout;
//     animation-duration: 0.5s;
//     animation-timing-function: linear;
//     animation-delay: 0.5s;
//     animation-iteration-count: 1;
//     animation-fill-mode: forwards;
// }
// .ms-login1leave {
//     opacity: 1;
//     animation-name: lightfadeoutleave;
//     animation-duration: 0.5s;
//     animation-timing-function: linear;
//     animation-delay: 0.5s;
//     animation-iteration-count: 1;
//     animation-fill-mode: forwards;
// }

// /deep/.el-input__inner {
//     &::placeholder {
//         font-size: 16px;
//         font-family: Microsoft YaHei;
//         font-weight: 400;
//         color: #ffffff33;
//     }
// }

// .prefix-img {
//     height: 18px;
//     position: absolute;
//     top: 15px;
//     padding: 0 10px 0 14px;
// }
// .center-middle {
//     width: 1660px;
//     height: 430px;
//     position: absolute;
//     top: 23%;
//     left: 50%;
//     transform: translate(-50%, -50%);
// }

// .suffix-img {
//     position: absolute;
//     top: 15px;
//     right: 0;
//     padding: 0 10px 0 14px;
// }
// /deep/.el-input--prefix .el-input__inner {
//     padding-left: 44px;
// }
// .login-wrap .ms-main .form-item .codeImg-item {
//     width: 110px;
//     height: 34px;
//     background: #97a3c1;
//     opacity: 0.8;
//     border-radius: 4px;
// }
// .login-wrap .ms-main .form-item .sms-code {
//     border-left: 1px solid rgba(38, 133, 242, 0.3);
//     padding-left: 26px;
//     font-size: 16px;
//     font-family: Microsoft YaHei;
//     font-weight: 400;
//     color: rgba(14, 174, 255, 1);
// }
// .login-wrap .ms-main .form-item .sms-code-notime {
//     width: 110px;
//     padding-left: 10px;
// }
// .login-wrap .ms-main .form-item .sms-code-istime {
//     font-size: 16px;
//     font-family: Microsoft YaHei;
//     font-weight: 400;
//     color: rgba(255, 255, 255, 0.4);
// }
// .login-wrap .ms-main .btn {
//     border: none;
// }

// .define-el-select {
//     /deep/ .el-input__suffix {
//         display: none;
//     }
// }
// .login-wrap .ms-main .form-item .btn-select {
//     padding: 0 10px 0 20px;
//     pointer-events: none;
//     img {
//         width: 18px;
//         height: 18px;
//     }
// }

// .login-wrap {
//     min-width: 1280px;
//     width: 100%;
//     height: 100%;
//     background: url(../../assets/img/loginPop/bg.png) center no-repeat;
//     background-size: cover;
//     overflow: hidden;
//     position: relative;
//     .ms-login {
//         position: absolute;
//         top: 50%;
//         right: 215px;
//         transform: translateY(-50%);
//     }
//     .login-title {
//         position: absolute;
//         top: 226px;
//         left: 130px;
//         color: white;
//         font-family: PingFangSC-Semibold;
//         .title-name {
//             font-size: 60px;
//         }
//         .title-lang {
//             font-size: 17.5px;
//             display: inline-block;
//             // margin-left: 60px;
//             // transform: scale(1.35, 0.9);
//             // -ms-transform: scale(1.35, 0.9);
//             // -webkit-transform: scale(1.35, 0.9);
//             // -moz-transform: scale(1.35, 0.9);
//             // -o-transform: scale(1.35, 0.9);
//             margin-left: 30px;
//             transform: scale(1.15, 0.8);
//             -ms-transform: scale(1.15, 0.8);
//             -webkit-transform: scale(1.15, 0.8);
//             -moz-transform: scale(1.15, 0.8);
//             -o-transform: scale(1.15, 0.8);
//         }
//     }
//     .ms-main {
//         width: 400px;
//         border: 1px solid rgba(240, 238, 241, 0.2);
//         border-radius: 10px;
//         opacity: 0.8;
//         height: 468px;
//         background: linear-gradient(0deg, #101327 0%, #29314c 100%);
//         box-shadow: 0px 10px 80px 0px rgba(0, 0, 0, 0.15);
//         .login-topImg,
//         .login-buttonImg {
//             width: 100%;
//             text-align: center;
//         }
//         .login-buttonImg {
//             position: absolute;
//             bottom: 0;
//         }
//         .login-body {
//             padding: 15px 30px 0 30px;
//             .tips {
//                 color: #f25050;
//                 font-size: 14px;
//                 display: inline-block;
//                 margin-bottom: 10px;
//             }
//             .btn {
//                 width: 100%;
//                 background: linear-gradient(-90deg, #0098ef 0%, #0eaeff 100%);
//                 border-radius: 6px;
//                 height: 48px;
//                 font-size: 20px;
//                 font-family: Microsoft YaHei;
//                 font-weight: 400;
//                 color: #ffffff;
//             }
//             .remember {
//                 margin-bottom: 30px;
//             }
//         }
//         .form-item {
//             margin: 24px 0;
//             height: 48px;
//             display: flex;
//             align-items: center;
//             position: relative;
//             .codeImg {
//                 position: absolute;
//                 right: 10px;
//             }
//             .code {
//                 border-left: 1px solid #2887f2;
//                 height: 20px;
//                 line-height: 0px;
//                 padding-left: 10px;
//             }
//             .el-select {
//                 width: 100%;
//             }
//             .icon {
//                 position: absolute;
//                 top: 18px;
//                 left: 6px;
//             }
//         }
//     }
// }
// .paTop10 {
//     padding-top: 10px;
// }
// .mgTop16 {
//     margin-top: 16px;
// }
</style>