peisweb/src/views/login/Login.vue

<template>
  <div class="bg">
    <div style="display: flex;justify-content: space-between;padding-top: 5px;">
      <div></div>
      <div style="display: flex;">
        <i class="el-icon-setting" @click="toggleDevTools" style="padding-right: 5px;font-size: 22px;cursor:pointer;"></i>
        <i class="el-icon-minus" @click="btnMin" style="padding-right: 5px;font-size: 22px;cursor:pointer;"></i>
        <i class="el-icon-copy-document" @click="btnMax" style="padding-right: 5px;font-size: 22px;cursor:pointer;"></i>
        <i class="el-icon-close" @click="btnClose" style="padding-right: 5px;font-size: 22px;cursor:pointer;"></i>
      </div>
    </div>
    <div class="box">
      <div class="mainbody">
        <div class="title">
          <img src="@/assets/images/logo1.png" />
          <div>神豚体检管理系统</div>
        </div>
        <div class="userform">
          <div style="color: #232748;font-size: 24px;font-weight: 700;margin-bottom: 20px;font-family: NotoSansSC-Bold;">
            登录账号</div>
          <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
            <el-form-item label="" prop="Username" style="margin-bottom: 20px">
              <div
                style="font-size:16px;font-weight: 400;color: #232748;    line-height: 22px;margin-bottom: 10px;font-family: NotoSansSC-Regular;">
                用户名</div>
              <el-input class="inputcolor" v-model="form.Username" placeholder="请输入用户名" prefix-icon="el-icon-s-custom"
                style="color: #fff" @keyup.native.enter="nextFocus('Username')"></el-input>
            </el-form-item>
            <el-form-item label="" prop="Password" style="margin-bottom: 5px">
              <div
                style="font-size:16px;font-weight: 400;color: #232748;line-height: 22px;margin-bottom: 10px;font-family: NotoSansSC-Regular;">
                密码</div>
              <el-input v-model="form.Password" placeholder="请输入密码" type="password" prefix-icon="el-icon-unlock"
                @keyup.native.enter="nextFocus('Password')" ref="password"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item>
                  <el-checkbox></el-checkbox>
                  <span
                    style="    font-family: NotoSansSC-Regular;color: #232748;font-weight: 400;font-size: 14px;margin-left: 5px;">记住密码</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <div style="text-align: right;color:#396FFA;font-family: NotoSansSC-Regular;">忘记密码？</div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-button type="primary" class="btn" @click="onSubmit(form)" style="margin-bottom: 20px;">
              用户登录
            </el-button>
            <div style="color:#396FFA;font-size:14px;text-align: center;font-family: NotoSansSC-Regular;">注册新账号</div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import { writetoken } from "@/utlis/istoken";
import axios from "axios";

export default {
  data() {
    return {
      sysConfig: {}, // 配置信息
      form: {
        Username: "",
        Password: "",
      },
      rules: {
        Username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          //{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        Password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          //{ min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },
  async mounted() {
    await this.getSysConfig()
    // 壳程序懒加载通讯组件
    if (this.$peisAPI) {
      this.$peisAPI.lazyLoad(); // 加载报表 dll
      this.$peisAPI.lazyLoadReportTemplate(); //加载报表 模版
    }
  },
  methods: {

    async getSysConfig() {
      try {
        let res = await axios.get('/sysConfig.html') // , { timeout: 50000 }
        console.log('axios.get /sysConfig.html',res)
        if(!res.data.apiurl) this.$message.error({ showClose: true, message: `获取配置参数错误，请重新刷新本页面！` })        
        this.sysConfig = res.data
        window.sessionStorage.setItem('sysConfig', JSON.stringify(res.data))
      } catch (error) {
        this.$message.error({ showClose: true, message: `获取配置参数错误 ${error}` })
      }
    },

    //打开客户端调试工具
    toggleDevTools() {
      if (!this.$peisAPI) {
        this.$message.info("此功能，需要在壳客户端才可运行！")
        return
      }
      this.$peisAPI.toggleDevTools();
    },
    btnMin() {
      if (!this.$peisAPI) {
        this.$message.info("此功能，需要在壳客户端才可运行！")
        return
      }
      this.$peisAPI.windowMin();
    },
    btnMax() {
      if (!this.$peisAPI) {
        this.$message.info("此功能，需要在壳客户端才可运行！")
        return
      }
      this.$peisAPI.windowMax();
    },
    btnClose() {
      if (!this.$peisAPI) {
        this.$message.info("此功能，需要在壳客户端才可运行！")
        return
      }
      this.$peisAPI.windowClose();
    },
    nextFocus(e) {
      if (e == 'Username') {
        this.$refs['password'].focus()
      } else (
        this.onSubmit()
      )
    },
    onSubmit() {

      this.$refs.form.validate((valid) => {
        if (valid) {
          axios.post(`${this.sysConfig.apiurl}/api/identity/users/login`, {
            userName: this.form.Username,
            passWord: this.form.Password,
          }).then(ret => {
            let res = ret.data
            if (res.code != -1) {

              window.sessionStorage.setItem("peisid", res.data.peisid); //设置当前人员所属体检中心
              writetoken(res.data.expires_in);
              window.sessionStorage.setItem("token", res.data.access_token);
              window.sessionStorage.setItem("refresh_token", res.data.refresh_token);
              window.sessionStorage.setItem("tokentype", res.data.token_type);
              window.sessionStorage.setItem("user", this.form.Username);

              this.$router.push({ path: "/home" });
              this.$store.state.changepassword = this.form.Password;
            } else {
              this.$message.warning(res.message);
            }
          }).catch(err => {
            this.$message.error(err);
          })
        }
      });
    },
  },
  created() { },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input {
  color: #232748;
}



// ::v-deep .el-form-item {
//   border: 1px solid rgb(0, 183, 92);
// }
.bg {
  background-color: black;
  // background: url("https://img.zcool.cn/community/013c8b5b62d108a801206a35bea1eb.jpg@2o.jpg");1
  // background: url("https://img1.baidu.com/it/u=1097534320,1746985227&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500");
  background: url("@/assets/images/BG.png");
  background-size: cover;

  height: 100%;
  width: 100%;
  min-height: 100vh;
}

.el-form-item.is-error .el-input__inner {
  color: none;
}

.inputcolor {
  border: none;
}

.box {
  position: absolute;
  right: 140px;
  top: 119px;
}

.mainbody {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .title {
    width: 443px;
    height: 107px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;

    img {
      width: 45.86px;
      height: 45.86px;
    }

    div {
      font-size: 38px;
      margin-left: 15px;
      color: #232748;
      font-weight: 600;
    }
  }
}

.userform {
  width: 356px;
  height: 366px;
  background-color: #fff;
  border-radius: 12px;
  padding: 40px 32px;
}

// .btn :hover {
//   // background-color: rgb(0, 183, 92);
// }
::v-deep .el-input__icon {
  font-size: 18px;
}

.btn {
  background-color: #396FFA;
  ;
  font-size: 16px;
  // background-color: #ccc;
  border: none;
  color: #fff;
  font-weight: 700;
  height: 40px;
  width: 100%;
}

:deep .el-input--prefix .el-input__inner {
  padding-left: 30px;
}

:deep .el-form-item {
  margin-bottom: 22px;
}

:deep .el-button {
  color: #fff;
}
</style>