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

<template>
    <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>
</template>

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

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 guid = ()=> {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    }

    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 {
            setStaff('login_staff', guid())
            router.push("/MicrowaveRadiation")
          }
        })
      }
    }

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

<style lang="less" scoped>
    .loginInput {
        width: 6.51rem;
        border-radius: 10px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .litterSemicircle {
            width: 2.4rem;
            height: 2.4rem;
            margin: 0 auto;
            position: relative;
            z-index: 10;
            background: #FFFFFF;
            border-radius: 50%;
            display: flex;
            justify-content: center;
        }

        .importInput {
            margin-top: -1.2rem;
            background: #FFFFFF;
            border-radius: 0.10rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: flex-start;
            border: 1px solid rgb(112, 112, 112);

            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);
                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;
                margin-bottom: 0.7rem;

                .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.18rem;
                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.2rem;
    }

  </style>