131 lines
3.4 KiB
Vue
131 lines
3.4 KiB
Vue
<template>
|
||
<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large">
|
||
<el-form-item prop="user">
|
||
<el-input v-model="form.username" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="password">
|
||
<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="veryCode">
|
||
<el-input v-model="form.code" prefix-icon="el-icon-iphone" clearable :placeholder="$t('login.codePlaceholder')">
|
||
<template #append>
|
||
<el-image :src="verImage" @click="getCode" style="padding: 1px;"/>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item style="margin-bottom: 10px;">
|
||
<el-col :span="12">
|
||
<el-checkbox :label="$t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
|
||
</el-col>
|
||
<el-col :span="12" class="login-forgot">
|
||
<router-link to="/reset_password">{{ $t('login.forgetPassword') }}？</router-link>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
|
||
</script>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
username: "",
|
||
password: "",
|
||
code: "",
|
||
uuid: "",
|
||
autologin: false
|
||
},
|
||
verImage: '',
|
||
rules: {
|
||
username: [
|
||
{required: true, message: this.$t('login.userError'), trigger: 'blur'}
|
||
],
|
||
password: [
|
||
{required: true, message: this.$t('login.PWError'), trigger: 'blur'}
|
||
],
|
||
code: [
|
||
{required: true, message: this.$t('login.codeError'), trigger: 'blur'}
|
||
]
|
||
},
|
||
islogin: false,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getCode()
|
||
this.rememberMe()
|
||
},
|
||
methods: {
|
||
rememberMe() {
|
||
const data = this.$TOOLS.data.get("ACCOUNT")
|
||
if (data) {
|
||
this.form.username = data.username
|
||
this.form.password = data.password
|
||
this.form.autologin = true
|
||
}
|
||
},
|
||
async getCode() {
|
||
// const res = await this.$API.auth.verify();
|
||
// this.form.uuid = res.data.uuid
|
||
// this.verImage = res.data.image
|
||
this.form.code = "";
|
||
},
|
||
async login(){
|
||
// 校验登录
|
||
const validate = await this.$refs.loginForm.validate().catch(() => {});
|
||
if(!validate){ return false }
|
||
|
||
this.islogin = true
|
||
const data = {
|
||
username: this.form.username,
|
||
password: this.$TOOL.crypto.MD5(this.form.password),
|
||
uuid: this.form.uuid,
|
||
code: this.form.code
|
||
};
|
||
// 登录接口
|
||
const [res, err] = await this.$TOOLS.go(this.$API.auth.token(data))
|
||
this.islogin = false
|
||
if (err) {
|
||
await this.getCode();
|
||
return false;
|
||
}
|
||
this.$TOOL.data.set("TOKEN", res.data.token, res.data.expireIn)
|
||
// 记住密码
|
||
if (this.form.autologin) {
|
||
this.$TOOL.data.set("ACCOUNT", {
|
||
username: this.form.username,
|
||
password: this.form.password
|
||
})
|
||
}
|
||
// 获取账号信息
|
||
await this.getInfo()
|
||
// 获取菜单信息
|
||
// await this.getMenu()
|
||
},
|
||
async getInfo() {
|
||
const [res, err] = await this.$TOOLS.go(this.$API.auth.getAccountInfo())
|
||
if (err) {
|
||
return false
|
||
}
|
||
this.$TOOL.data.set("USER_INFO", res.data)
|
||
// 登录成功跳转首页
|
||
this.$router.replace({path: '/'})
|
||
this.$message.success("Login Success 登录成功")
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
:deep(.el-input-group__append, .el-input-group__prepend) {
|
||
padding: 0;
|
||
}
|
||
</style>
|