139 lines
3.6 KiB
Vue
139 lines
3.6 KiB
Vue
<template>
|
|
<div class="login-wrap">
|
|
<div class="ms-login">
|
|
<div class="ms-title">市场部投标信息检索工具</div>
|
|
<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
|
|
<el-form-item prop="username">
|
|
<el-input v-model="param.username" placeholder="请输入登录账号" clearable>
|
|
<template #prepend>
|
|
<el-button :icon="User" disabled></el-button>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
type="password"
|
|
placeholder="请输入密码"
|
|
v-model="param.password"
|
|
@keyup.enter="submitForm(login)"
|
|
show-password
|
|
clearable
|
|
>
|
|
<template #prepend>
|
|
<el-button :icon="Lock" disabled></el-button>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<div class="login-btn">
|
|
<el-button type="primary" @click="submitForm(login)">登录</el-button>
|
|
</div>
|
|
<p class="login-tips">Tips : admin/123456</p>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
import { useTagsStore } from '../store/tags'
|
|
import { useRouter } from 'vue-router'
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
import { ElMessage } from 'element-plus'
|
|
import { Lock, User } from '@element-plus/icons-vue'
|
|
import { login as reqLogin } from '../api/login'
|
|
import { useBasicStore } from '../store/basic'
|
|
|
|
interface LoginInfo {
|
|
username: string
|
|
password: string
|
|
}
|
|
|
|
const router = useRouter()
|
|
const param = reactive<LoginInfo>({
|
|
username: '',
|
|
password: '',
|
|
})
|
|
|
|
const rules: FormRules = {
|
|
username: [
|
|
{
|
|
required: true,
|
|
message: '请输入用户名',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
|
}
|
|
let basicStore = useBasicStore()
|
|
const login = ref<FormInstance>()
|
|
const submitForm = (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return
|
|
formEl.validate((valid: boolean) => {
|
|
if (valid) {
|
|
reqLogin(param).then((res) => {
|
|
ElMessage.success('登录成功')
|
|
localStorage.setItem('token', res.data.token)
|
|
router.push('/')
|
|
basicStore.setUserinfo(res.data)
|
|
})
|
|
} else {
|
|
ElMessage.error('登录失败')
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
|
|
const tags = useTagsStore()
|
|
tags.clearTags()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(../assets/img/login-bg.jpg);
|
|
background-size: 100%;
|
|
}
|
|
|
|
.ms-title {
|
|
width: 100%;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
color: #fff;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.ms-login {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 350px;
|
|
margin: -190px 0 0 -175px;
|
|
border-radius: 5px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms-content {
|
|
padding: 30px 30px;
|
|
}
|
|
|
|
.login-btn {
|
|
text-align: center;
|
|
}
|
|
|
|
.login-btn button {
|
|
width: 100%;
|
|
height: 36px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.login-tips {
|
|
font-size: 12px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
}
|
|
</style>
|