nsgk_mobile/src/views/homestead/login.vue

<template>
  <div class="app-container" :style="{ height: windowHeight + 'px' }">
    <div class="login_header"></div>
    <div class="login_content">
      <div class="homestead_wrap">
        <div class="key_title">环翠区两清三化</div>
        <div class="slogan">数据调查系统</div>
      </div>
      <div class="from_wrap">
        <div class="from_content">
          <div class="signIn_container">
            <div class="signIn_input_wrap">
              <van-field
                autosize
                v-model="formData.username"
                placeholder="请输入用户名"
              />
            </div>
          </div>
          <div class="signIn_container">
            <div class="signIn_input_wrap">
              <van-field
                autosize
                type="password"
                placeholder="请输入密码"
                v-model="formData.password"
              />
            </div>
          </div>
          <div class="signIn_container">
            <div class="signIn_input_wrap">
              <div class="verification_code">
                <van-field
                  autosize
                  placeholder="请输入验证码"
                  v-model="formData.code"
                />
              </div>
              <div class="verification_images">
                <img class="code-img" :src="codeUrl" @click="getCode" />
              </div>
            </div>
          </div>
          <div class="signIn_container">
            <div class="remember_num">
              <van-checkbox
                v-model="rememberPassword"
                icon-size="16px"
                checked-color="#3CBF5B"
                >记住密码</van-checkbox
              >
            </div>
          </div>
        </div>
        <div class="from_btn" @click="handleLogin">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
export default {
  name: "homesteadLogin",
  data() {
    return {
      formData: {
        username: "", //账号
        password: "", //密码
        code: null, //图片验证码
        uuid: null, //识别uuid
      },
      codeUrl: "", //图片验证码
      rememberPassword: false, //记住密码 1记住 2不记住
      windowHeight: 0,
    };
  },
  created() {
    this.getCode();
    let userName = Cookies.get("homesteadUserName"); // => 'value'
    let password = Cookies.get("homesteadPassword"); // => undefined
    if (userName != undefined) {
      this.formData.username = userName;
      this.rememberPassword = true;
    }
    if (password != undefined) {
      this.formData.password = password;
    }
  },
  mounted() {
    let windowHeight = document.documentElement.clientHeight;
    this.windowHeight = windowHeight;
  },
  methods: {
    getCode() {
      getCodeImg().then((res) => {
        this.formData.uuid = res.uuid;
        this.codeUrl = "data:image/gif;base64," + res.img;
      });
    },
    handleLogin() {
      //账号密码登录
      if (this.formData.username == "") {
        this.$dialog.alert({
          message: "账号不能为空",
        });
        return false;
      } else if (this.formData.password == "") {
        this.$dialog.alert({
          message: "密码不能为空",
        });
        return false;
      } else if (this.formData.code == "") {
        this.$dialog.alert({
          message: "图片验证码不能为空",
        });
        return false;
      }

      this.$store
        .dispatch("Login", this.formData)
        .then(() => {
          if (this.rememberPassword == true) {
            Cookies.set("homesteadUserName", this.formData.username, {
              expires: 30,
            });
            Cookies.set("homesteadPassword", this.formData.password, {
              expires: 30,
            });
          }
          this.$router
            .push({ path: this.redirect || "/homestead/index" })
            .catch(() => {});
        })
        .catch(() => {
          this.loading = false;
          this.getCode();
        });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  .login_header {
    flex: 0.35;
    background: url("../../assets/images/homestead/login_bg.jpg") center bottom
      no-repeat;
    background-size: 100% 100%;
  }
  .login_content {
    flex: 0.65;
    display: flex;
    flex-direction: column;

    .homestead_wrap {
      flex: 0.28;
      display: flex;
      justify-content: center; /* 相对父元素水平居中 */
      align-items: center; /*  子元素相对父元素垂直居中 */
      flex-direction: column;
      .key_title {
        font-size: 56px;
        margin-bottom: 10px;
      }
      .slogan {
        font-size: 32px;
        color: #9f9f9f;
      }
    }
    .from_wrap {
      flex: 0.72;
      padding-bottom: 14%;
      flex-direction: column;
      display: flex;
      margin: 0 40px;
      .from_content {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-bottom: 14%;
        .signIn_container {
          flex: 1;
          display: flex;
          max-height: 90px;
          margin-bottom: 24px;
          &:last-child {
            margin-bottom: 0;
          }
          .signIn_input_wrap {
            flex: 1;
            display: flex;
            .verification_code {
              flex: 1;
            }
            .verification_images {
              flex: 0 0 220px;
              margin-left: 20px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .van-cell {
              border: 2px solid #f1f0f5;
              border-radius: 46px;
              font-size: 32px;
            }
          }
          .remember_num {
            margin-left: 14px;
            font-size: 28px;
            color: #3cbf5b;
          }
        }
      }
      .from_btn {
        display: flex;
        flex: 0 0 80px;
        background: #3cbf5b;
        border-radius: 40px;
        font-size: 36px;
        justify-content: center; /* 相对父元素水平居中 */
        align-items: center; /*  子元素相对父元素垂直居中 */
        color: #fff;
      }
    }
  }
}
</style>