xt_pad/src/pages/home/login.vue

<template>
  <div class="container">
    <div class="newLogin">
      <div class="login">
        <div class="logo">
          <img src="../../assets/login/newLogo.png" alt />
        </div>
        <div class="reg">
          <div class="welcome">欢迎登录</div>
          <div class="form">
            <ul>
              <li>
                <span class="iconfont">&#xe78b;</span>
                <input placeholder="请输入手机号" type="tel" class="tel" v-model="form.mobile" />
              </li>
              <li>
                <span class="iconfont">&#xe6c0;</span>
                <input placeholder="请输入密码" type="password" class="tel" v-model="form.pwd" />
              </li>
            </ul>
          </div>
          <!-- <router-link to="/product"> -->
          <button
            class="loginBtn"
            @click="loginAction"
            :class="loginDisable ? 'disableLoginBtn' : ''"
            :disabled="loginDisable"
          >登录</button>
          <div class="newForget">忘记密码</div>
          <!-- </router-link> -->
          <!-- <div class="forget">
          <a href="">免密码登录</a>
          <a href="">忘记密码？</a>
          </div>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { loginByPwd } from "@/api/login";
import { hex_md5 } from "@/utils/md5";
import { getLoginInfoCache, cacheLoginInfo } from "@/utils/admin_info_cache";

export default {
  name: "Home",
  data() {
    return {
      form: {
        mobile: "",
        pwd: ""
      }
    };
  },
  computed: {
    loginDisable() {
      // return false
      return (
        this.form.mobile.length == 0 ||
        /^1[2345789]\d{9}$/.test(this.form.mobile) == false ||
        this.form.pwd.length == 0
      );
    }
  },
  created() {
    var loginInfo = getLoginInfoCache();
    this.form.mobile = loginInfo.mobile;
    this.form.pwd = loginInfo.password;
  },
  methods: {
    loginAction: function() {
      loginByPwd(this.form.mobile, hex_md5(this.form.pwd)).then(rs => {
        var resp = rs.data;

        if (resp.state == 1) {
          cacheLoginInfo(this.form.mobile, this.form.pwd);
          console.log(resp);

          var user = resp.data.user;
          var org = resp.data.org;
          var subscibe = resp.data.subscibe;
          var config_list = resp.data.config_list;
          var template_info = resp.data.template_info;
          var filed_list = resp.data.filed_list;
          console.log(resp.data.filed_list);
          console.log(filed_list);

          this.$store.dispatch("InitUserInfo", {
            user: user,
            org: org,
            subscibe: subscibe,
            template_info: template_info,
            filed_list: filed_list
          });
          this.$store.dispatch("SetConfigList", config_list);

          // this.$router.push({path: "/product"})
          this.$router.push({ path: "/main" });
        } else {
          this.$toast({
            message: resp.msg
          });
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped >
.container {
  // background: $white-bg;
  background: #f5f5f5;
  @include box-sizing;
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .newLogin {
    width: 90%;
    height: 90%;
    margin: auto;
    box-shadow: 0px 2px 25px 0px rgba(37, 143, 252, 0.1);
    border-radius: 14px;
    background: #fff;
  }
  .login {
    // @include box-shadow;
    @include text-align;
    @include display-flex;
    @include align-items-center;
    // @include justify-content-center;
    @include flex-direction;
    height: 100%;
    .logo {
      padding: 3rem 0 1rem;
      img {
        width: 40%;
        height: auto;
        display: inline-block;
      }
    }
    .reg {
      width: 8.77rem;
      .welcome {
        text-align: left;
        font-size: 0.55rem;
        font-weight: 400;
        color: rgba(37, 143, 252, 1);
        margin-bottom: 0.5rem;
        // line-height: 14px;
      }
      .newForget {
        text-align: right;
        font-size: 0.5rem;
        font-weight: 400;
        color: rgba(37, 143, 252, 1);
        margin-top: 0.5rem;
      }
      .form {
        border: 1px $border-color solid;
        border-radius: 4px;
        li {
          border-bottom: 1px $border-color solid;
          @include align-items-center;
          @include text-align;
          @include display-flex;
          @include box-sizing;
          .tel {
            padding: 0.4rem 0;
            width: 90%;
            border: none;
            outline: none;
            font-size: 0.45rem;
          }
          .mint-cell {
            width: 100%;
          }
          &:last-child {
            border: none;
          }
          .iconfont {
            color: $main-color;
            font-size: 0.5rem;
            margin: 0 0.46rem;
          }
        }
      }
      .forget {
        text-align: left;
        padding: 0.45rem 1rem;
        a {
          float: left;
          font-size: 0.28rem;
          color: $main-color;
          &:nth-child(2) {
            color: #999999;
            float: right;
          }
          &:active {
            background: $white-bg;
          }
        }
      }
      .loginBtn {
        width: 100%;
        height: 1.3rem;
        line-height: 1.3rem;
        background: $main-color;
        color: #fff;
        font-size: 0.45rem;
        @include text-align;
        border-radius: 4px;
        margin: 40px 0 0 0;
      }
      .disableLoginBtn {
        background: lightgray;
      }
    }
  }
}
</style>