xt_pad/src/pages/home/login.vue

<template>
  <div class="container">
    <div class="login">
      <div class="logo"><img src="../../assets/login/logo.png" alt=""></div>
      <div class="reg">
        <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>
        <!-- </router-link> -->
        <!-- <div class="forget">
          <a href="">免密码登录</a>
          <a href="">忘记密码？</a>
        </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[234578]\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)

          var user = resp.data.user
          var org = resp.data.org
          var subscibe = resp.data.subscibe
          var config_list = resp.data.config_list
          this.$store.dispatch("InitUserInfo", {user: user, org: org, subscibe: subscibe })
          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;
  @include box-sizing;
  position: fixed;
  width: 100%;
  height: 100%;
  .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: 0 0 1rem;
      img {
        width: 70%;
        height: auto;
        display: inline-block;
      }
    }
    .reg {
      width: 10.77rem;
      .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.34rem;
          }
          .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: 1rem;
        line-height: 1rem;
        background: $main-color;
        color: #fff;
        font-size: 0.36rem;
        @include text-align;
        border-radius: 4px;
        margin: 40px 0 0 0;
      }
      .disableLoginBtn {
        background: lightgray;
      }
    }
  }
}
</style>