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="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"> -->
          <div class="remember">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </div>
          <!-- <button
            class="loginBtn"
            @click="loginAction"
            :class="loginDisable ? 'disableLoginBtn' : ''"
            :disabled="loginDisable"
          >
            登录
          </button>-->
          <button
            class="loginBtn"
            @click="submitForm"
            :class="loginDisable ? 'disableLoginBtn' : ''"
            :disabled="loginDisable"
          >登录</button>

          <!-- <router-link to="/forgetPassword"> -->
          <div class="newForget" style="display:none">忘记密码</div>
          <!-- </router-link> -->
          <!-- </router-link> -->
          <!-- <div class="forget">
          <a href="">免密码登录</a>
          <a href="">忘记密码？</a>
          </div>-->
          <div class="agree">
            <el-checkbox v-model="agreement">
              我已阅读并同意
              <!-- <router-link to="/privacyPolicy"> -->

              <!-- </router-link> -->
            </el-checkbox>
            <!-- <router-link to="/privacyPolicy"> -->
            <span class="agreeText" @click="agree">《隐私服务协议》</span>
            <!-- </router-link> -->
          </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";
import { Toast } from "vant";

export default {
  name: "Home",
  data() {
    return {
      form: {
        mobile: "",
        pwd: ""
      },
      checked: false,
      agreement: true
    };
  },
  computed: {
    loginDisable() {
      // return false
      return this.form.mobile.length == 0 || this.form.pwd.length == 0;
    }
  },
  created() {
    var loginInfo = getLoginInfoCache();
    this.form.mobile = loginInfo.mobile;
    this.form.pwd = loginInfo.password;
  },
  mounted() {
    this.getCookie();
  },
  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
          });
        }
      });
    },
    to: function() {
      this.$router.push({ path: "/forgetPassword" });
    },
    submitForm() {
      const self = this;
      //判断复选框是否被勾选 勾选则调用配置cookie方法
      if (self.checked == true) {
        console.log("checked == true");
        //传入账号名，密码，和保存天数3个参数
        self.setCookie(self.form.mobile, self.form.pwd, 7);
      } else {
        console.log("清空Cookie");
        //清空Cookie
        self.clearCookie();
      }

      //与后端请求代码，本功能不需要与后台交互所以省略

      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
          });
        }
      });
      console.log("登陆成功");
    },
    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },
    getCookie: function() {
      this.$nextTick(() => {
        if (this.form.pwd != "") {
          this.checked = true;
        }
      });
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "userName") {
            this.form.mobile = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.form.pwd = arr2[1];
          }
        }
      }
    },
    //清除cookie
    clearCookie: function() {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },
    agree() {
      this.$router.push({ path: "/privacyPolicy" });
    }
  }
};
</script>

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

  .newLogin {
    width: 100%;
    height: 100%;
    margin: auto;
    // box-shadow: 0px 2px 25px 0px rgba(37, 143, 252, 0.1);
    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 2.5rem;
      img {
        width: 44%;
        height: auto;
        display: inline-block;
      }
    }
    .reg {
      width: 9.3rem;
      .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.45rem;
        font-weight: 400;
        color: rgba(37, 143, 252, 1);
        margin-top: 0.3rem;
      }
      .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.6rem;
          }
          .mint-cell {
            width: 100%;
          }
          &:last-child {
            border: none;
          }
          .iconfont {
            color: $main-color;
            font-size: 0.6rem;
            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.4rem;
        line-height: 1.4rem;
        background: $main-color;
        color: #fff;
        font-size: 0.6rem;
        @include text-align;
        border-radius: 4px;
        margin: 1rem 0 0 0;
      }
      .disableLoginBtn {
        background: lightgray;
      }
    }
  }
  .remember {
    float: left;
  }
  .agreeText {
    color: #409eff;
    font-size: 14px;
  }
}
</style>

<style lang="scss">
.remember {
  .el-checkbox__inner {
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      width: 20px;
      height: 20px;
    }
    @media only screen and (min-width: 768px) {
      width: 20px;
      height: 20px;
    }
  }
  .el-checkbox__inner::after {
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      left: 7px;
      height: 12px;
      width: 4px;
    }

    @media only screen and (min-width: 768px) {
      left: 7px;
      height: 12px;
      width: 4px;
    }
  }
  .el-checkbox__label {
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      font-size: 0.45rem;
    }
    @media only screen and (min-width: 768px) {
      font-size: 0.45rem;
    }
  }
}
.agree {
  .el-checkbox__inner {
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      width: 20px;
      height: 20px;
    }
    @media only screen and (min-width: 768px) {
      width: 20px;
      height: 20px;
    }
  }
  .el-checkbox__inner::after {
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      left: 7px;
      height: 12px;
      width: 4px;
    }

    @media only screen and (min-width: 768px) {
      left: 7px;
      height: 12px;
      width: 4px;
    }
  }
  .el-checkbox__label {
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      font-size: 0.45rem;
    }
    @media only screen and (min-width: 768px) {
      font-size: 0.45rem;
    }
  }
  .agreeText {
    @media only screen and (min-width: 415px) and (max-width: 767px) {
      font-size: 0.45rem;
    }
    @media only screen and (min-width: 768px) {
      font-size: 0.45rem;
    }
  }
}
</style>