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 { setStaff } from "../uilts/storage";
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 onLoginClick = () => {
      post('user/userLogin',{
        userAccountNumber: option.inputName,
        userPassword: option.inputPassword
      }).then((res:any)=>{
        console.log(res)
      })

      // 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 == 1) {
      //       ElMessage.error({
      //         message: res.message,
      //         type: 'error'
      //       });
      //     } else {
      //       // setStaff('login_staff', res.data);
      //       // console.log(res.data)
      //       router.push({
      //         path: '/SystemManagement'
      //       });
      //     }
      //   });
      // }
    }
    // const staffValidate = ()=> {
    //   const errors = [];
    //   if (staff.loginName == null || staff.loginName.trim().length == 0)
    //     errors.push('登录名');
    //
    //   if (staff.loginPassword == null || staff.loginPassword.trim().length == 0)
    //     errors.push('登录密码');
    //
    //   return errors;
    // }


    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: 2.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: 18px;
            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>