<template>
  <div class="login-container">
    <div class="login-bg"></div>
    <div class="login-page">
      <div class="login-page-body">
        <div class="login-page-title">客户端登录</div>
        <div class="login-page-form">
          <van-form @submit="onSubmit">
            <van-field
              v-model="userInfo.username"
              name="用户名"
              left-icon="manager"
              placeholder="请输入用户名"
              :rules="[{ required: true, message: '用户名不能为空' }]"
            />
            <van-field
              v-model="userInfo.password"
              type="password"
              name="密码"
              left-icon="lock"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '密码不能为空' }]"
            />
            <div class="login-page-button">
              <van-button type="default" native-type="submit">登录</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  mounted() {},
  methods: {
    onSubmit() {
      let vm = this;
      let param = {
        password: this.userInfo.password,
        username: this.userInfo.username,
      };
      vm.$https(
        {
          url: "ajaxLogin",
          method: "post",
          authType: this.backToken,
        },
        vm.$qs.stringify(param)
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            let data = res.data;
            const isOpt = data.user.type;
            localStorage.setItem("token", data.token);
            localStorage.setItem("userInfo", JSON.stringify(data.user));
            if (isOpt == "4") {
              this.$router.push("/opt");
            }
            if (isOpt == "2") {
              this.$router.push("/commit");
            }
          } else {
            this.$toast.fail(res.data.message);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss">
.login-container {
  width: 100%;
  height: 100%;
  max-width: 1280px;
  .login-bg {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background: #a4171d;
    &:before {
      display: inline-block;
      content: "";
      width: 100%;
      height: 106px;
      background: url("/images/topBox/bg-bottom.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &:after {
      display: inline-block;
      content: "";
      width: 100%;
      height: 421px;
      background: url("/images/topBox/bg-top.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .login-page {
    height: 350px;
    position: absolute;
    bottom: 58px;
    left: 24px;
    right: 24px;
    padding: 24px;
    background: #ffffff;
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    .login-page-form {
      padding-top: 24px;
      .van-field {
        background: #f5f5f5;
        border-radius: 4px;
        margin-bottom: 32px;
        .van-field__left-icon {
          margin-right: 12px;
        }
      }
    }
    .login-page-title {
      font-size: 18px;
      color: #333;
      text-align: center;
      margin: 24px 0;
    }
    .login-page-button {
      text-align: center;
      background: #a4151d;
      border-radius: 4px;
      position: absolute;
      bottom: 40px;
      left: 24px;
      right: 24px;
      box-sizing: border-box;
      .van-button {
        font-size: 16px;
        color: #fff;
        background-color: transparent;
        border: none;
      }
    }
  }
}
</style>

