<template>
|
<el-form class="login-content-form" ref="ruleFormRef">
|
<el-form-item class="form-input">
|
<el-input type="text" placeholder="请输入用户名" :prefix-icon="Avatar" v-model="ruleForm.userName" clearable autocomplete="off">
|
</el-input>
|
</el-form-item>
|
<el-form-item class="form-input form-item-bottom">
|
<el-input
|
:type="isShowPassword ? 'text' : 'password'"
|
placeholder="请输入密码"
|
v-model="ruleForm.password"
|
autocomplete="off"
|
:prefix-icon="GoodsFilled"
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item>
|
<div class="login-footer">
|
<div>
|
<span style="vertical-align: middle;margin-right:10px">
|
<el-checkbox v-model="rememberPassword"></el-checkbox>
|
</span>
|
<span>自动登录</span>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
|
<span>立即登录</span>
|
</el-button>
|
</el-form-item>
|
</el-form>
|
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, defineComponent, computed, getCurrentInstance } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
import { Session } from '@/utils/storage'
|
import { Avatar, GoodsFilled } from '@element-plus/icons-vue'
|
import { ElMessage } from 'element-plus';
|
|
import {signIn,getuserinfo} from '@/api/user/index';
|
export default defineComponent({
|
name: 'loginAccount',
|
setup() {
|
const { proxy } = getCurrentInstance() as any;
|
const route = useRoute();
|
const router = useRouter();
|
const state = reactive({
|
isShowClients2:false,
|
// 记住密码
|
rememberPassword: false,
|
isShowClients:false,
|
isShowPassword: false,
|
user:{},
|
clientCode:'',
|
CilentOptions:[],
|
ruleForm: {
|
userName: '',
|
password: '',
|
code: '1234',
|
},
|
|
seconds:60,
|
loading: {
|
signIn: false,
|
},
|
});
|
// 登录
|
const onSignIn = async () => {
|
state.loading.signIn = true;
|
if(state.ruleForm.userName===""||state.ruleForm.password===""){
|
ElMessage.error('登录名和密码不能为空')
|
state.loading.signIn = false;
|
return
|
}
|
const signInRes = await signIn(`user_no=${state.ruleForm.userName}&user_password=${state.ruleForm.password}`)
|
// 缓存token游览器
|
Session.set('token', signInRes.data);
|
const userinfoRes = await getuserinfo()
|
const userRet=userinfoRes.data
|
// 模拟数据
|
state.loading.signIn = false;
|
// 跳转到首页
|
router.push('/');
|
|
};
|
|
|
|
|
|
return {
|
onSignIn,
|
GoodsFilled,
|
Avatar,
|
...toRefs(state),
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.el-input__icon {
|
color: rgb(32, 80, 240);
|
}
|
.login-content-form {
|
margin-top: 20px;
|
.login-footer {
|
display: flex;
|
justify-content: space-between;
|
font-weight: 400;
|
color: #AAAAAA;
|
}
|
.login-content-password {
|
display: inline-block;
|
width: 25px;
|
cursor: pointer;
|
&:hover {
|
color: #909399;
|
}
|
}
|
.form-input {
|
::v-deep .el-input__inner {
|
border: none !important;
|
border-bottom: 1px solid #EBEBEB !important;
|
padding: 0 50px;
|
font-weight: 500;
|
}
|
}
|
::v-deep .form-item-bottom.el-form-item {
|
margin-bottom: 0 !important;
|
}
|
.login-content-code {
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
.login-content-code-img {
|
width: 100%;
|
height: 40px;
|
line-height: 40px;
|
background-color: #ffffff;
|
border: 1px solid rgb(220, 223, 230);
|
color: #333;
|
font-size: 16px;
|
font-weight: 700;
|
letter-spacing: 5px;
|
text-indent: 5px;
|
text-align: center;
|
cursor: pointer;
|
transition: all ease 0.2s;
|
border-radius: 4px;
|
user-select: none;
|
&:hover {
|
border-color: #c0c4cc;
|
transition: all ease 0.2s;
|
}
|
}
|
}
|
.login-content-submit {
|
width: 100%;
|
letter-spacing: 2px;
|
margin-top: 15px;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
</style>
|
