sis_zhfx/src/views/layout/login-page.vue

<template>
  <div class="login-panel">
     <!-- <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :fit="fit"
    ></el-image> -->
    <!-- <img src="../../assets/sislogo.png" /> -->
    <el-form class="mg-b-16">
      <el-form-item class="mg-b-8">
        <el-input v-model="username" placeholder="请输入登录名"></el-input>
      </el-form-item>
      <el-form-item class="mg-b-8">
        <el-input
          v-model="password"
          placeholder="请输入密码"
          show-password
        ></el-input>
      </el-form-item>
    </el-form>
    <button style="width:100%;" class="btn" @click="Login">登录</button>
     <!-- <button style="width:30%;float:right" class="btn" @click="Login">登录</button> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      token: "",
      url:"../../assets/sislogo.png",
    };
  },
  props: { token: "" },
  emits: {
    onLogin: null,
  },
  methods: {
    Login() {
      let that = this;
      if (that.username !== "" && that.password !== "") {
        that.API.requestData({
          isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
          // baseURL: "http://192.168.10.15:8082",
          method: "POST", // 请求方式，默认为 GET ，可缺省
          subUrl: "sys/login", // 请求接口地址，必传项
          data: {
            username: that.username,
            password: that.password,
          },
          success(res) {
            console.log("res:", res);
            if (res.data.authToken && res.data.user.laborName) {
              localStorage.setItem("authToken", res.data.authToken);
              localStorage.setItem("username", res.data.user.laborName);
              
              that.BASE.showMsg({
                msg: "登录成功",
                type: "success",
              });
              that.$router.push("/"); // 跳转到首页
            } else {
              that.BASE.showMsg({
                type: "error",
                msg: "输入的账号或密码错误",
              });
            }
          },
        });
        // that.$router.push('/monitor/home')
        // console.log(that.username,"---",that.password)
      } else {
        that.BASE.showMsg({
          type: "warning",
          msg: "请输入完整的账号或密码",
        });
      }

      //       localStorage.setItem("token",'2222')
      //           that.token=localStorage.getItem('token')
      // console.log("token:",that.token)
      // that.$emit("onLogin", {
      //   username: that.username,
      //   password: that.password,
      //   token:that.token
      // });

      // console.log("token:",that.token)
      // that.$router.push('/')
    },
  },
  created() {
    // console.log("username:", that.username, "----", "password:", that.password);
    //  that.$nextTick(() => {
    //   that.API.requestData({
    //     isMust: false, // 请求是否携带 token ，默认为 true ，可缺省
    //     baseURL:"http://192.168.10.44:8082",
    //     method: "POST", // 请求方式，默认为 GET ，可缺省
    //     subUrl: "admin/loginvue", // 请求接口地址，必传项
    //     data: {
    //       username: that.username,
    //       password: that.password,
    //     },
    //     success(res) {
    //       localStorage.setItem("authToken", res.data.authToken);
    //       localStorage.setItem("username", res.data.user.laborName);

    //       // that.API.requestData({
    //       //   method: "POST", // 请求方式，默认为 GET ，可缺省
    //       //   subUrl: "admin/usermenu", // 请求接口地址，必传项
    //       //   success() {
    //       //     that.BASE.showMsg({
    //       //       msg: "登陆成功",
    //       //       type: "success",
    //       //     });
    //       //     that.$router.push('/'); // 跳转到首页
    //       //   },
    //       // });
    //     },
    //   });
    // });
  },
};
</script>

<style lang="less">
.login-panel {
  // width: 300px;
  // height: 200px;
  // position: absolute;
  // padding: 32px;
  // left: calc(50vw - 150px);
  // top: calc(50vh - 120px);
  // // border: 1px solid @green;
  // border:2px solid #fff;
  // border-radius: 8px;
  // background-image: url('../../assets/login.jpg')

  width: 700px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -350px;
    margin-top: -150px;
    border-radius: 10px;
    border: 1px solid #ccc;
  .btn{
        border: 1px solid #fff;
  }
}
</style>