<template>
|
<div class="login-container page-w page-content">
|
<div class="login-left">
|
<div class="logo-container flex-center">
|
<img src="@/assets/images/logo.png" alt="Kuspit Pro" class="logo" />
|
</div>
|
<div class="slogan">
|
<h1>Purchase, Trading</h1>
|
<h2>All here</h2>
|
</div>
|
</div>
|
<div class="login-right">
|
<div class="login-form">
|
<h2>{{ $t('dlan') }}</h2>
|
<el-form :model="loginForm" :rules="rules" ref="loginForm">
|
<el-form-item prop="phone">
|
<label>{{ $t('hj27') }}</label>
|
<el-input v-model="loginForm.phone" placeholder=""></el-input>
|
</el-form-item>
|
<el-form-item prop="userPwd">
|
<label>{{ $t('Password') }}</label>
|
<el-input v-model="loginForm.userPwd" type="password" placeholder="" show-password></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" class="login-button" @click="submitForm('loginForm')"
|
:loading="isloading">
|
{{ $t('dlan') }}
|
</el-button>
|
</el-form-item>
|
<div class="login-options">
|
<span>{{ $t('hj14') }}?</span>
|
<router-link to="/register" class="register-link">{{ $t('ar1') }}</router-link>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from '@/axios/api.js'
|
export default {
|
name: "LoginView",
|
data() {
|
return {
|
loginForm: {
|
phone: "",
|
userPwd: ""
|
},
|
rules: {
|
phone: [
|
{ required: true, message: this.$t('请输入'), trigger: "blur" }
|
],
|
userPwd: [
|
{ required: true, message: this.$t('请输入'), trigger: "blur" }
|
]
|
},
|
isloading: false,
|
};
|
},
|
methods: {
|
// 提交表单 登录
|
submitForm(formName) {
|
this.$refs[formName].validate(async (valid) => {
|
if (valid) {
|
// 登录逻辑
|
this.isloading = true; // 显示加载状态
|
let data = await api.login(this.loginForm);
|
|
if (data.status == 0) {
|
this.$store.commit("undataToken", data.data.token); // 存储token,vuex
|
window.localStorage.setItem("USERTOKEN", data.data.token); // 存储token,浏览器
|
this.$router.replace({ path: "/" }); // 跳转到首页
|
}
|
this.isloading = false; // 隐藏加载状态
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.login-container {
|
display: flex;
|
height: 100vh;
|
width: 100%;
|
background-color: #fff;
|
}
|
|
.login-left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
background-color: #f5f5f5;
|
}
|
|
.logo-container {
|
margin-bottom: 40px;
|
}
|
|
.logo {
|
width: 200px;
|
}
|
|
.slogan {
|
margin: 0 auto;
|
|
h1 {
|
font-size: 36px;
|
color: #333;
|
margin-bottom: 10px;
|
font-weight: bold;
|
}
|
|
h2 {
|
font-size: 36px;
|
color: #c8d405;
|
font-weight: bold;
|
}
|
}
|
|
.login-right {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.login-form {
|
width: 70%;
|
max-width: 400px;
|
|
h2 {
|
font-size: 24px;
|
margin-bottom: 30px;
|
font-weight: normal;
|
}
|
|
label {
|
display: block;
|
margin-bottom: 8px;
|
color: #606266;
|
}
|
|
.el-form-item {
|
margin-bottom: 25px;
|
}
|
|
.el-input {
|
width: 100%;
|
}
|
|
.login-button {
|
width: 100%;
|
height: 50px;
|
background-color: #c8d405;
|
border-color: #c8d405;
|
font-size: 16px;
|
border-radius: 25px;
|
margin-top: 10px;
|
|
&:hover,
|
&:focus {
|
background-color: #b8c205;
|
border-color: #b8c205;
|
}
|
}
|
|
.login-options {
|
text-align: center;
|
margin-top: 15px;
|
font-size: 14px;
|
color: #606266;
|
|
.register-link {
|
color: #c8d405;
|
margin-left: 5px;
|
text-decoration: none;
|
|
&:hover {
|
text-decoration: underline;
|
}
|
}
|
}
|
}
|
</style>
|
