|
|
<template>
|
|
|
<div class="base">
|
|
|
<!-- 注册登录界面 -->
|
|
|
<div class="loginAndRegist">
|
|
|
<!--登录表单-->
|
|
|
<div class="loginArea">
|
|
|
<transition
|
|
|
name="animate__animated animate__bounce"
|
|
|
enter-active-class="animate__fadeInUp"
|
|
|
leave-active-class="animate__zoomOut"
|
|
|
appear
|
|
|
>
|
|
|
<!-- 标语 -->
|
|
|
<div v-show="isShow" class="title">
|
|
|
登录
|
|
|
</div>
|
|
|
</transition>
|
|
|
<transition
|
|
|
name="animate__animated animate__bounce"
|
|
|
enter-active-class="animate__fadeInUp"
|
|
|
leave-active-class="animate__zoomOut"
|
|
|
appear
|
|
|
>
|
|
|
<!-- 密码框和用户名框 -->
|
|
|
<div v-show="isShow" class="pwdArea">
|
|
|
<div style="flex: 1;justify-content: center;display: flex;align-items: center">
|
|
|
用 户 名:
|
|
|
<el-input class="username" v-model="loginUser.name" style="width: 185px;" placeholder="请输入用户名"></el-input>
|
|
|
</div>
|
|
|
<div style="flex: 1;justify-content: center;display: flex;align-items: center">
|
|
|
密 码:
|
|
|
<el-input placeholder="请输入密码" v-model="loginUser.password" style="width: 185px" show-password></el-input>
|
|
|
</div>
|
|
|
<div style="flex: 1;justify-content: center;display: flex;align-items: center">
|
|
|
验 证 码:
|
|
|
<el-input placeholder="请输入验证码" v-model="loginUser.code" style="width: 125px" ></el-input>
|
|
|
<img src="../../assets/pictures/yanzheng.png" style="width: 60px" alt="假验证码" />
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
<transition
|
|
|
name="animate__animated animate__bounce"
|
|
|
enter-active-class="animate__fadeInUp"
|
|
|
leave-active-class="animate__zoomOut"
|
|
|
appear
|
|
|
>
|
|
|
<!-- 登录注册按钮 -->
|
|
|
<div v-show="isShow" class="btnArea">
|
|
|
<el-button
|
|
|
type="success"
|
|
|
round
|
|
|
style="background-color: #E44B9D; letter-spacing: 5px; height: 40px; width: 100px; font-size: 14px;"
|
|
|
@click="UserLogin">
|
|
|
登录
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</transition>
|
|
|
</div>
|
|
|
<!-- 注册表单 -->
|
|
|
<div class="registArea">
|
|
|
<transition
|
|
|
name="animate__animated animate__bounce"
|
|
|
enter-active-class="animate__fadeInUp"
|
|
|
leave-active-class="animate__zoomOut"
|
|
|
appear
|
|
|
>
|
|
|
<!-- 注册表头-->
|
|
|
<div v-show="!isShow" class="rigestTitle">
|
|
|
注册
|
|
|
</div>
|
|
|
</transition>
|
|
|
<transition
|
|
|
name="animate__animated animate__bounce"
|
|
|
enter-active-class="animate__fadeInUp"
|
|
|
leave-active-class="animate__zoomOut"
|
|
|
appear
|
|
|
>
|
|
|
<!-- 注册表单-->
|
|
|
<div v-show="!isShow" class="registForm">
|
|
|
<div style="flex: 1;display: flex;justify-content: center;align-items: center">
|
|
|
用 户 名:
|
|
|
<el-input
|
|
|
placeholder="请输入用户名"
|
|
|
v-model="regUser.regUsername"
|
|
|
style="width: 165px;margin-left: 10px"
|
|
|
clearable
|
|
|
>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<div style="flex: 1;display: flex;justify-content: center;align-items: center">
|
|
|
密 码:
|
|
|
<el-input placeholder="请输入密码" style="width: 165px;margin-left: 10px" v-model="regUser.regPwd" show-password></el-input>
|
|
|
</div>
|
|
|
<div style="flex: 1;display: flex;justify-content: center;align-items: center;">
|
|
|
确 认 密 码:
|
|
|
<el-input placeholder="请再次输入密码" style="width: 165px;margin-left: 10px" v-model="regUser.regRePwd" show-password></el-input>
|
|
|
</div>
|
|
|
<div style="flex: 1;display: flex;align-items: center">
|
|
|
验 证 码:
|
|
|
<el-input placeholder="请输入验证码" v-model="regUser.code" style="width: 105px;margin-left: 10px"></el-input>
|
|
|
<img src="../../assets/pictures/yanzheng.png" style="width: 60px;" alt="假验证码" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
<transition
|
|
|
name="animate__animated animate__bounce"
|
|
|
enter-active-class="animate__fadeInUp"
|
|
|
leave-active-class="animate__zoomOut"
|
|
|
appear
|
|
|
>
|
|
|
<!-- 注册按钮-->
|
|
|
<div v-show="!isShow" class="registBtn">
|
|
|
<el-button type="success" round style="background-color: #E44B9D;letter-spacing: 5px ;height: 40px; width: 100px; font-size: 14px" @click="userRegister">注册</el-button>
|
|
|
</div>
|
|
|
</transition>
|
|
|
</div>
|
|
|
<!-- 信息展示界面 -->
|
|
|
<div id="aaa" class="showInfo"
|
|
|
:style="{
|
|
|
borderTopRightRadius:styleObj.bordertoprightradius,
|
|
|
borderBottomRightRadius:styleObj.borderbottomrightradius,
|
|
|
borderTopLeftRadius:styleObj.bordertopleftradius,
|
|
|
borderBottomLeftRadius:styleObj.borderbottomleftradius,
|
|
|
right:styleObj.rightDis
|
|
|
}"
|
|
|
ref="showInfoView">
|
|
|
|
|
|
<transition
|
|
|
name="animate__animated animate__bounce"
|
|
|
enter-active-class="animate__fadeInUp"
|
|
|
leave-active-class="animate__zoomOut"
|
|
|
appear
|
|
|
>
|
|
|
<!-- 没有用户输入用户名或者找不到用户名的时候 -->
|
|
|
<div v-show="isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
|
|
|
<!-- 欢迎语 -->
|
|
|
<div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #E44B9D;font-weight: bold">
|
|
|
欢迎你加入恋爱森林！
|
|
|
</div>
|
|
|
<!-- 欢迎图片 -->
|
|
|
<div style="flex: 2">
|
|
|
<el-button type="success" style="background-color:#E44B9D;border: 1px solid #ffffff; height: 40px; width: 180px; font-size: 14px" round @click="changeToRegiest">还没有账户？点击注册</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
<!-- 用户输入用户名时展示头像以及姓名 -->
|
|
|
<!-- <div>-->
|
|
|
|
|
|
<!-- </div>-->
|
|
|
<transition
|
|
|
name="animate__animated animate__bounce"
|
|
|
enter-active-class="animate__fadeInUp"
|
|
|
leave-active-class="animate__zoomOut"
|
|
|
appear
|
|
|
>
|
|
|
<!-- 用户注册的时候展示信息 -->
|
|
|
<div v-show="!isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
|
|
|
<!-- 欢迎语 -->
|
|
|
<div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #E44B9D;font-weight: bold">
|
|
|
欢迎注册
|
|
|
</div>
|
|
|
<!-- 欢迎图片 -->
|
|
|
<div style="flex: 2">
|
|
|
<el-button type="success" style="background-color:#E44B9D;border: 1px solid #ffffff;height: 40px; width: 180px; font-size: 14px" round @click="changeToLogin">已有账户？点击登录</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// import 'animate.css';
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
|
import {Axios as request} from "axios";
|
|
|
import axios from '@/utils/axiosConfig';
|
|
|
import {setToken} from '@/token/auth'
|
|
|
export default {
|
|
|
name:'loginIndex',
|
|
|
data(){
|
|
|
return{
|
|
|
//看看用不用转成用户对象
|
|
|
loginUser:{
|
|
|
name:"",
|
|
|
password:"",
|
|
|
code:'',
|
|
|
},
|
|
|
|
|
|
admins:{},
|
|
|
////看看用不用转成用户对象
|
|
|
regUser:{
|
|
|
regUsername:'',
|
|
|
regRePwd:'',
|
|
|
regPwd:'',
|
|
|
code:'',
|
|
|
},
|
|
|
styleObj:{
|
|
|
bordertoprightradius:'15px',
|
|
|
borderbottomrightradius: '15px',
|
|
|
bordertopleftradius:'0px',
|
|
|
borderbottomleftradius:'0px',
|
|
|
rightDis:'0px'
|
|
|
},
|
|
|
isShow:true
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
changeToRegiest(){
|
|
|
this.styleObj.bordertoprightradius= '0px'
|
|
|
this.styleObj.borderbottomrightradius='0px'
|
|
|
this.styleObj.bordertopleftradius='15px'
|
|
|
this.styleObj.borderbottomleftradius='15px'
|
|
|
this.styleObj.rightDis='50%'
|
|
|
this.isShow = !this.isShow
|
|
|
},
|
|
|
changeToLogin(){
|
|
|
this.styleObj.bordertoprightradius= '15px'
|
|
|
this.styleObj.borderbottomrightradius='15px'
|
|
|
this.styleObj.bordertopleftradius='0px'
|
|
|
this.styleObj.borderbottomleftradius='0px'
|
|
|
this.styleObj.rightDis='0px'
|
|
|
this.isShow = !this.isShow
|
|
|
},
|
|
|
async UserLogin() {
|
|
|
// this.$router.push('/main');
|
|
|
if(this.loginUser.code === 'Yj98') {
|
|
|
try {
|
|
|
const response = await axios.post('/auth/login', {
|
|
|
username: this.loginUser.name,
|
|
|
password: this.loginUser.password
|
|
|
})
|
|
|
console.log('登录成功', response)
|
|
|
// 假设token在响应的data字段中
|
|
|
// !!存疑！!
|
|
|
const token = response.token;
|
|
|
// 存储token
|
|
|
setToken(token);
|
|
|
// console.log( 'token是：' + getToken() )
|
|
|
// 登录成功后的操作，比如跳转到主页
|
|
|
this.$router.push('/main');
|
|
|
} catch (error) {
|
|
|
// 处理登录错误
|
|
|
console.error('登录错误:', error);
|
|
|
}
|
|
|
}else{
|
|
|
alert("验证码错误")
|
|
|
}
|
|
|
},
|
|
|
async userRegister() {
|
|
|
if (this.regUser.regPwd !== this.regUser.regRePwd) {
|
|
|
alert('两次输入的密码不一致');
|
|
|
return;
|
|
|
}
|
|
|
if (this.regUser.code !== 'Yj98') {
|
|
|
alert('验证码错误')
|
|
|
}
|
|
|
try {
|
|
|
// 这里调用后端注册接口
|
|
|
const response = await axios.post('', null, {
|
|
|
params:{
|
|
|
username: this.regUser.regUsername,
|
|
|
password: this.regUser.regPwd,
|
|
|
}
|
|
|
});
|
|
|
// 处理注册成功逻辑
|
|
|
alert('注册成功');
|
|
|
console.log('注册成功', response);
|
|
|
} catch (error) {
|
|
|
// 处理注册失败逻辑
|
|
|
console.error('注册失败', error);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
}
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@import url('../../assets/css/login/login.css');
|
|
|
</style> |
