384 lines
10 KiB
Vue
384 lines
10 KiB
Vue
<template>
|
|
<div class="site-wrapper site-page--login">
|
|
<div class="site-content__wrapper">
|
|
<div class="site-content">
|
|
<div class="login-main">
|
|
<h3 class="login-title">{{ entryName }}</h3>
|
|
<el-form
|
|
:model="dataForm"
|
|
:rules="dataRule1"
|
|
ref="dataForm"
|
|
@keyup.enter.native="dataFormSubmit()"
|
|
status-icon
|
|
>
|
|
<div v-if="!isLogin">
|
|
<el-form-item prop="mobile">
|
|
<div class="flex" style="display: flex">
|
|
<el-input v-model.trim="dataForm.mobile" placeholder="手机号">
|
|
</el-input>
|
|
<el-button
|
|
style="margin-left: 20px"
|
|
type="primary"
|
|
size="medium"
|
|
@click="sendMsg()"
|
|
>
|
|
{{ msgTime >= 60 ? "发送验证码" : msgTime }}</el-button
|
|
>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item prop="code">
|
|
<el-input
|
|
v-model.trim="dataForm.code"
|
|
placeholder="验证码"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="email">
|
|
<el-input
|
|
v-model.trim="dataForm.email"
|
|
placeholder="邮箱"
|
|
></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<el-form-item prop="userName">
|
|
<el-input
|
|
v-model.trim="dataForm.userName"
|
|
placeholder="帐号"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item prop="password">
|
|
<el-input
|
|
type="password"
|
|
v-model.trim="dataForm.password"
|
|
placeholder="密码"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="password1" v-if="!isLogin">
|
|
<el-input
|
|
v-model.trim="dataForm.password1"
|
|
type="password"
|
|
placeholder="密码"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="captcha" v-if="isLogin">
|
|
<el-row :gutter="20">
|
|
<el-col :span="14">
|
|
<el-input
|
|
v-model.trim="dataForm.captcha"
|
|
placeholder="验证码"
|
|
>
|
|
</el-input>
|
|
</el-col>
|
|
<el-col :span="10" class="login-captcha">
|
|
<img :src="captchaPath" @click="getCaptcha()" alt="" />
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="isLogin">
|
|
<div class="btn-box">
|
|
<div class="" style="margin-top: 38px">
|
|
<el-button
|
|
class="login-btn-submit"
|
|
type="primary"
|
|
@click="dataFormSubmit()"
|
|
>登录</el-button
|
|
>
|
|
</div>
|
|
<!-- <div>
|
|
<el-button
|
|
class="login-btn-submit"
|
|
plain
|
|
type="text"
|
|
@click="isLogin = false"
|
|
>注册</el-button
|
|
>
|
|
</div> -->
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item v-if="!isLogin">
|
|
<div class="btn-box">
|
|
<div class="" style="margin-top: 38px">
|
|
<el-button
|
|
class="login-btn-submit"
|
|
type="primary"
|
|
@click="register()"
|
|
>立即注册</el-button
|
|
>
|
|
</div>
|
|
<div>
|
|
<el-button
|
|
class="login-btn-submit"
|
|
plain
|
|
type="text"
|
|
@click="isLogin = true"
|
|
>返回登录</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getUUID } from "@/utils";
|
|
import { entryName } from "@/utils/httpRequest";
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLogin: true,
|
|
timer: null,
|
|
msgTime: 60,
|
|
dataForm: {
|
|
mobile: "",
|
|
email: "",
|
|
userName: "",
|
|
password: "",
|
|
password1: "",
|
|
uuid: "",
|
|
captcha: "",
|
|
entryName: "",
|
|
code: "",
|
|
},
|
|
dataRule1: {
|
|
mobile: [
|
|
{ required: true, message: "手机号不能为空", trigger: "blur" },
|
|
],
|
|
email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
|
|
code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
|
|
userName: [
|
|
{ required: true, message: "帐号不能为空", trigger: "blur" },
|
|
],
|
|
password: [
|
|
{ required: true, message: "密码不能为空", trigger: "blur" },
|
|
],
|
|
password1: [
|
|
{ required: true, message: "密码不能为空", trigger: "blur" },
|
|
],
|
|
captcha: [
|
|
{ required: true, message: "验证码不能为空", trigger: "blur" },
|
|
],
|
|
},
|
|
captchaPath: "",
|
|
};
|
|
},
|
|
watch: {
|
|
isLogin(newval) {
|
|
this.$refs.dataForm.resetFields();
|
|
if (newval) {
|
|
this.getCaptcha();
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.entryName = entryName;
|
|
this.getCaptcha();
|
|
},
|
|
methods: {
|
|
sendMsg() {
|
|
if (this.msgTime < 60) {
|
|
return;
|
|
}
|
|
this.$http({
|
|
// url: this.$http.adornUrl('app/Login/sendMsg/'+this.tableData.mobile+'/regis'),
|
|
url: this.$http.adornUrl(
|
|
"app/Login/sendMsg/" + this.dataForm.mobile + "/regis"
|
|
),
|
|
method: "get",
|
|
}).then((res) => {
|
|
console.log(res);
|
|
if (res.data.code == 0) {
|
|
this.$message({
|
|
message: "发送成功",
|
|
type: "success",
|
|
});
|
|
this.msgTime--;
|
|
this.timer = setInterval(() => {
|
|
this.msgTime--;
|
|
if (this.msgTime == 0) {
|
|
clearInterval(this.timer);
|
|
this.msgTime = 60;
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
this.$message({
|
|
message: "发送失败",
|
|
type: "error",
|
|
});
|
|
}
|
|
});
|
|
},
|
|
reset() {
|
|
this.dataForm.code = "";
|
|
this.timer = null;
|
|
cleartimeout(this.timer);
|
|
this.msgTime = 60;
|
|
},
|
|
register() {
|
|
if (this.dataForm.password != this.dataForm.password1) {
|
|
this.$notify({
|
|
title: "提示",
|
|
duration: 1800,
|
|
message: "两次密码不一致",
|
|
type: "warning",
|
|
});
|
|
this.$message.error("两次密码不一致");
|
|
return;
|
|
}
|
|
this.$refs["dataForm"].validate((valid) => {
|
|
if (valid) {
|
|
this.$http({
|
|
url: this.$http.adornUrl(
|
|
"sys/registered?msg=" + this.dataForm.code
|
|
),
|
|
method: "post",
|
|
data: this.$http.adornData({
|
|
mobile: this.dataForm.mobile,
|
|
username: this.dataForm.userName,
|
|
password: this.dataForm.password,
|
|
email: this.dataForm.email,
|
|
}),
|
|
}).then(({ data }) => {
|
|
if (data && data.code === 0) {
|
|
this.$message.success("注册成功，请登录");
|
|
this.isLogin = true;
|
|
// this.$cookie.set("token", data.token);
|
|
// this.$router.replace({ name: "home" });
|
|
} else {
|
|
// this.getCaptcha();
|
|
this.$message.error(data.msg);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 提交表单
|
|
dataFormSubmit() {
|
|
this.$refs["dataForm"].validate((valid) => {
|
|
if (valid) {
|
|
this.$http({
|
|
url: this.$http.adornUrl("sys/login"),
|
|
method: "post",
|
|
data: this.$http.adornData({
|
|
username: this.dataForm.userName,
|
|
password: this.dataForm.password,
|
|
uuid: this.dataForm.uuid,
|
|
captcha: this.dataForm.captcha,
|
|
adminType: 2,
|
|
}),
|
|
}).then(({ data }) => {
|
|
if (data && data.code === 0) {
|
|
this.$cookie.set("token", data.token);
|
|
this.$router.replace({ name: "home" });
|
|
} else {
|
|
this.getCaptcha();
|
|
this.$message.error(data.msg);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
// 获取验证码
|
|
getCaptcha() {
|
|
this.dataForm.uuid = getUUID();
|
|
this.captchaPath = this.$http.adornUrl(
|
|
`/captcha.jpg?uuid=${this.dataForm.uuid}`
|
|
);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.btn-box {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-direction: column;
|
|
}
|
|
.site-wrapper.site-page--login {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: rgba(38, 50, 56, 0.2);
|
|
overflow: hidden;
|
|
&:before {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
content: "";
|
|
background-image: url(~@/assets/img/login_bg.jpg);
|
|
background-size: cover;
|
|
}
|
|
.site-content__wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
background-color: transparent;
|
|
}
|
|
.site-content {
|
|
min-height: 100%;
|
|
// padding: 30px 500px 30px 30px;
|
|
}
|
|
.brand-info {
|
|
margin: 220px 100px 0 90px;
|
|
color: #fff;
|
|
}
|
|
.brand-info__text {
|
|
margin: 0 0 22px 0;
|
|
font-size: 48px;
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
}
|
|
.brand-info__intro {
|
|
margin: 10px 0;
|
|
font-size: 16px;
|
|
line-height: 1.58;
|
|
opacity: 0.6;
|
|
}
|
|
.login-main {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
// margin-left: -200px;
|
|
// margin-top: -150px;
|
|
padding: 20px 30px;
|
|
width: 400px;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
}
|
|
.login-title {
|
|
font-size: 20px;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
.login-captcha {
|
|
overflow: hidden;
|
|
> img {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.login-btn-submit {
|
|
width: 100%;
|
|
// margin-top: 38px;
|
|
}
|
|
}
|
|
</style>
|