NanJingLamanRadarProject/04.系统编码/Frontend/src/components/Login.vue

<template>
  <div class="box">
      <div class="loginInput">
        <div class="litterSemicircle"><img src="/images/logo.png"/> </div>
        <div class="importInput">
            <h1>南京生态环境评估决策平台</h1>
            <el-input placeholder="请输入账户" type="text" class="input" v-model="inputName">
              <template #prefix>
                <el-icon><img src="/images/pen.png"></el-icon>
              </template>
            </el-input>
            <el-input  placeholder="请输入登录密码" type="password" v-model="inputPassword"  class="input" >
              <template #prefix>
                <el-icon><img src="/images/lock.png"></el-icon>
              </template>
            </el-input>
          <el-button type="primary" class="btn" @click="onLoginClick">登录</el-button>
        </div>
      </div>
    </div>
</template>

<script lang="ts">
import {reactive, toRefs} from "vue";
import { post } from "./../uilts/axios";
import { useRouter } from "vue-router"
import { ElMessage } from 'element-plus'

export default {
  name: 'Login',
  setup() {
    let option = reactive({
      inputName: "",
      inputPassword:"" ,
      centerDialogVisible:false
    })
    const router = useRouter()

    const staffValidate = ()=> {
      const errors = [];
      if (option.inputName == null || option.inputName.trim().length == 0)
        errors.push('登录名');

      if (option.inputPassword == null || option.inputPassword.trim().length == 0)
        errors.push('登录密码');

      return errors;
    }

    const onLoginClick = () => {
      const errors = staffValidate();
      if (errors.length > 0) {
        ElMessage.warning({
          message: '请输入' + errors.join('、'),
          type: 'warning'
        })
      }else {
        post("user/userLogin",{
          userAccountNumber: option.inputName,
          userPassword: option.inputPassword
        }).then((res :any)=>{
          if (res.error !=0){
            ElMessage.error({
              message: res.message,
              type: 'error'
            });
          }else {
            console.log(res)
            router.push("/MicrowaveRadiation")
          }
        })
      }


    }

    return {
      ...toRefs(option),
      onLoginClick
    }
  }
}
</script>

<style lang="less" scoped>
    .loginInput {
      width: 6.51rem;
      height: 6.89rem;
      background: #FFFFFF;
      border: 1px solid #707070;
      opacity: 1;
      border-radius: 10px;
      position: relative;
      left: 50%;
      top: 1.55rem;
      transform: translateX(-50%);

      .litterSemicircle {
        position: absolute;
        width: 2.39rem;
        height: 2.39rem;
        background: #FFFFFF;
        border-radius: 50%;
        opacity: 1;
        display: flex;
        justify-content: center;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .importInput {
        //width: 6.51rem;
        //height: 6.89rem;
        background: #FFFFFF;
        border: 1px solid #707070;
        opacity: 1;
        border-radius: 0.10rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: flex-start;

        h1 {
          width: 3.93rem;
          height: 0.4rem;
          font-size: 0.30rem;
          font-weight: bold;
          line-height: 0.4rem;
          color: #222222;
          text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
          opacity: 1;
          margin-top: 1.20rem;
          margin-bottom: 0.52rem;
          padding-left: 0.12rem;
        }

        :deep(.input) {
          width: 4.96rem;
          height: 0.69rem;
          background: #FFFFFF;
          border: 1px solid #BCBCBC;
          opacity: 1;
          margin-bottom: 0.71rem;

          .el-input__inner{
            height: 100% !important;
            position: relative;
            border: none;
            font-size: 0.15rem;
            font-weight: 400;
            line-height: 0.24rem;
            color: #999999;
            padding-left: 0.54rem;
          }
        }
          img {
            width: 0.18rem;
            height: 0.1792rem;
            position: absolute;
            top: -0.10rem;
            left: 0.18rem;
          }
      }
      }
      img {
        width: 1.5733rem;
        height: 1.5715rem;
        margin-top: .35rem;
      }
    .btn{
        width: 4.96rem;
        height: 0.69rem;
        background: #498DF0;
        opacity: 1;
        color: #FFFFFF;
        border: none;
        font-size: 0.22rem;
        margin-bottom: 1.27rem;
      }
  </style>