pipeline_disinfection_front_end/src/components/LoginForm.vue

<template>
  <div class="login_modal">
    <img :src="showPassword ? Open : Eye" class="eye" @click="handleEye" />
    <p class="tips">{{ tip }}</p>
    <input
      type="text"
      v-model="username"
      class="username"
      @focus="handleFocus(1)"
      placeholder="请输入用户名"
    />
    <input
      :type="showPassword ? 'text' : 'password'"
      class="password"
      v-model="password"
      @focus="handleFocus(2)"
      id="txtPassword"
      placeholder="请输入设备密码"
    />
    <div class="login_btn style-btn" @click="handleLogin"></div>
  </div>
</template>

<script setup>
import Eye from '@/assets/img/login/eye.png'
import Open from '@/assets/img/login/open.png'
import { useWebSocketStore, useUserStore } from '@/store'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { loginJSON } from '@/mock/command'

const props = defineProps({
  handleShowKey: {
    type: Function,
  },
  handleHideKey: {
    type: Function,
  },
  clearInput: {
    type: Function,
  },
  input: {
    type: String,
  },
  hideLoginModal: {
    type: Function,
    default: () => {},
  },
  modal: {
    type: Boolean,
    default: false,
  },
})

const activeInput = ref(1)
const handleFocus = flag => {
  props.handleShowKey()
  props.clearInput()
  activeInput.value = flag
}

const router = useRouter()
const userStore = useUserStore()
const webSocketStore = useWebSocketStore()
const showPassword = ref(false)
const username = ref('')
const password = ref('')
const tip = ref('')

const handleEye = () => {
  showPassword.value = !showPassword.value
}
watch(() => {
  // 需要有个逻辑判断
  if (activeInput.value == 1) {
    username.value = props.input
  } else {
    password.value = props.input
  }
})

const handleLogin = () => {
  props.handleHideKey()
  if (username.value == '') {
    tip.value = '用户名不能为空'
    return
  }
  if (password.value == '') {
    tip.value = '密码不能为空'
    return
  }
  tip.value = ''
  webSocketStore?.sendCommandMsg(loginJSON(username.value, password.value))
  // 前端自己校验
  console.log(userStore.allUserList)
  let flag = false
  userStore.allUserList?.map(item => {
    if (item.uid == username.value && password.value == item.passwd) {
      // 登陆成功
      flag = true
      userStore.updatePermission(item.permission_level)
      userStore.updateLoginUser(item.uid)
      if (props.modal) {
        props.hideLoginModal()
      } else {
        window.location.href = 'http://127.0.0.1/'
      }
    }
  })
  if (!flag) {
    tip.value = '账号或密码错误'
  }
}
</script>

<style lang="scss" scoped>
.login_modal {
  width: 476px;
  height: 414px;
  border-radius: 16px;
  overflow: hidden;
  background: url(../assets/img/login/login.png) no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;
  .eye {
    width: 16px;
    height: 13px;
    position: absolute;
    right: 78.04px;
    top: 211px;
  }
  .tips {
    font-family: Source Han Sans CN;
    font-size: 12px;
    font-weight: 350;
    letter-spacing: 0.06em;
    color: #fa1c1c;
    position: absolute;
    left: 73px;
    bottom: 143px;
  }
  .username {
    border: none;
    outline: none;
    width: 253px;
    height: 17px;
    position: absolute;
    left: 120px;
    top: 142px;
    font-family: Source Han Sans CN;
    font-size: 22px;
    font-weight: 350;
    letter-spacing: 0.06em;
  }
  .password {
    border: none;
    outline: none;
    width: 253px;
    height: 17px;
    position: absolute;
    left: 120px;
    top: 209px;
    font-family: Source Han Sans CN;
    font-size: 18px;
    font-weight: 350;
    letter-spacing: 0.06em;
  }
  .login_btn {
    position: absolute;
    width: 340px;
    height: 68px;
    left: 68px;
    bottom: 62px;
  }
}
</style>