<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>
|
::v-deep .el-input__inner {
|
background: none;
|
color: #fff;
|
border: none;
|
border-radius: 0;
|
border-bottom: #ccc solid 1px;
|
}
|
.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: #333;
|
}
|
|
.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: #287dff;
|
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;
|
font-size: 16px;
|
border-radius: 25px;
|
margin-top: 10px;
|
}
|
|
.login-options {
|
text-align: center;
|
margin-top: 15px;
|
font-size: 14px;
|
color: #606266;
|
|
.register-link {
|
color: #287dff;
|
margin-left: 5px;
|
text-decoration: none;
|
|
&:hover {
|
text-decoration: underline;
|
}
|
}
|
}
|
}
|
</style>
|
