376 lines
10 KiB
Vue
376 lines
10 KiB
Vue
|
<template>
|
||
|
|
<div class="site-wrapper site-page--login">
|
||
|
|
<div class="site-content__wrapper">
|
||
|
|
<div class="site-content">
|
||
|
|
<div class="brand-info">
|
||
|
|
<h1 class="brand-info__text" style="margin-left: 0px">
|
||
|
|
大妈集市商户端
|
||
|
|
</h1>
|
||
|
|
<!-- <h1 class="brand-info__text1" style="margin-left: 145px">
|
||
|
|
登录
|
||
|
|
</h1> -->
|
||
|
|
<!-- <p class="brand-info__intro">追寻红色历史,传承红色精神。</p> -->
|
||
|
|
</div>
|
||
|
|
<div class="login-main">
|
||
|
|
<h3 class="login-title">大妈集市商户端登录</h3>
|
||
|
|
<el-tabs v-if="false" :stretch="true" v-model="loginWay" @tab-click="loginWayClick">
|
||
|
|
<el-tab-pane label="账户登录" name="account_login">
|
||
|
|
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
|
||
|
|
status-icon>
|
||
|
|
<el-form-item prop="userName">
|
||
|
|
<el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="password">
|
||
|
|
<el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<!-- <el-form-item prop="captcha">
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="14">
|
||
|
|
<el-input v-model="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>
|
||
|
|
<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="验证码登录" name="code_login">
|
||
|
|
<el-form :model="loginByYZMForm" :rules="loginByYZMFormRule" ref="loginByYZMRef"
|
||
|
|
@keyup.enter.native="loginByYZMSubmit()" status-icon>
|
||
|
|
<el-form-item prop="mobile">
|
||
|
|
<el-input v-model="loginByYZMForm.mobile" placeholder="手机号码"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="code">
|
||
|
|
<el-input v-model="loginByYZMForm.code" placeholder="短信验证码">
|
||
|
|
<template slot="append">
|
||
|
|
<el-button v-if="mobileCodeCountDown <= 0" @click="getCode">获取验证码</el-button>
|
||
|
|
<el-button v-else>{{ mobileCodeCountDown }}s</el-button>
|
||
|
|
</template>
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button class="login-btn-submit" type="primary" @click="loginByYZMSubmit()">登录</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<el-form :model="loginByYZMForm" :rules="loginByYZMFormRule" ref="loginByYZMRef"
|
||
|
|
@keyup.enter.native="loginByYZMSubmit()" status-icon>
|
||
|
|
<el-form-item prop="mobile">
|
||
|
|
<el-input v-model="loginByYZMForm.mobile" placeholder="手机号码"></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item prop="code">
|
||
|
|
<el-input v-model="loginByYZMForm.code" placeholder="短信验证码">
|
||
|
|
<template slot="append">
|
||
|
|
<el-button v-if="mobileCodeCountDown <= 0" @click="getCode">获取验证码</el-button>
|
||
|
|
<el-button v-else>{{ mobileCodeCountDown }}s</el-button>
|
||
|
|
</template>
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button class="login-btn-submit" type="primary" @click="loginByYZMSubmit()">登录</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getUUID } from "@/utils";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loginWay: "code_login",
|
||
|
|
loginType: "教育局",
|
||
|
|
mobileCodeCountDown: 0,
|
||
|
|
mobileCodeCountDownTimer: null,
|
||
|
|
dataForm: {
|
||
|
|
userName: "",
|
||
|
|
password: "",
|
||
|
|
uuid: "",
|
||
|
|
captcha: "",
|
||
|
|
},
|
||
|
|
loginByYZMForm: {
|
||
|
|
mobile: "",
|
||
|
|
code: "",
|
||
|
|
},
|
||
|
|
dataRule: {
|
||
|
|
userName: [
|
||
|
|
{ required: true, message: "帐号不能为空", trigger: "blur" },
|
||
|
|
],
|
||
|
|
password: [
|
||
|
|
{ required: true, message: "密码不能为空", trigger: "blur" },
|
||
|
|
],
|
||
|
|
captcha: [
|
||
|
|
{ required: true, message: "验证码不能为空", trigger: "blur" },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
loginByYZMFormRule: {
|
||
|
|
mobile: [
|
||
|
|
{ required: true, message: "手机号码不能为空", trigger: "blur" },
|
||
|
|
],
|
||
|
|
code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
|
||
|
|
},
|
||
|
|
captchaPath: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getCaptcha();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
loginWayClick(tab, event) { },
|
||
|
|
// 提交表单
|
||
|
|
dataFormSubmit() {
|
||
|
|
const _loginTypeMapper = {
|
||
|
|
管理员: "ROLE_ADMIN",
|
||
|
|
教育局: "ROLE_EDU",
|
||
|
|
学校: "ROLE_SCHOOL",
|
||
|
|
教师: "ROLE_TEACHER",
|
||
|
|
};
|
||
|
|
this.$refs["dataForm"].validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
if (this.loginType == "管理员") {
|
||
|
|
this.$api
|
||
|
|
.login(
|
||
|
|
this.dataForm.userName,
|
||
|
|
this.dataForm.password,
|
||
|
|
this.dataForm.uuid,
|
||
|
|
this.dataForm.captcha
|
||
|
|
)
|
||
|
|
.then(({ data }) => {
|
||
|
|
console.log("data", data);
|
||
|
|
this.$cookie.set("token", data.data.token);
|
||
|
|
this.$router.replace({ name: "home" });
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// this.getCaptcha();
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
this.$api.local_admin
|
||
|
|
.loginByAccount({
|
||
|
|
role: _loginTypeMapper[this.loginType],
|
||
|
|
username: this.dataForm.userName,
|
||
|
|
password: this.dataForm.password,
|
||
|
|
// mobile: "",
|
||
|
|
// code: "",
|
||
|
|
})
|
||
|
|
.then(({ data }) => {
|
||
|
|
console.log("data", data);
|
||
|
|
this.$cookie.set("token", data.data.token);
|
||
|
|
this.$router.replace({ name: "home" });
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// this.getCaptcha();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//验证码登录
|
||
|
|
loginByYZMSubmit() {
|
||
|
|
const _loginTypeMapper = {
|
||
|
|
管理员: "ROLE_ADMIN",
|
||
|
|
教育局: "ROLE_EDU",
|
||
|
|
学校: "ROLE_SCHOOL",
|
||
|
|
教师: "ROLE_TEACHER",
|
||
|
|
};
|
||
|
|
this.$refs["loginByYZMRef"].validate((valid) => {
|
||
|
|
console.log("验证码登录");
|
||
|
|
this.$api.local_admin
|
||
|
|
.loginByMobile({
|
||
|
|
// role: _loginTypeMapper[this.loginType],
|
||
|
|
mobile: this.loginByYZMForm.mobile,
|
||
|
|
code: this.loginByYZMForm.code,
|
||
|
|
})
|
||
|
|
.then(({ data }) => {
|
||
|
|
console.log("data", data);
|
||
|
|
this.$cookie.set("token", data.data.token);
|
||
|
|
this.$router.replace({ name: "home" });
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
console.log(err);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
//获取短信验证码
|
||
|
|
getCode() {
|
||
|
|
//正则表达式校验手机号是否合法
|
||
|
|
const reg = /^1[3456789]\d{9}$/;
|
||
|
|
if (!reg.test(this.loginByYZMForm.mobile)) {
|
||
|
|
this.$message.error("请输入正确的手机号码");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.$api.local_admin.getYZM(this.loginByYZMForm.mobile).then((res) => {
|
||
|
|
this.mobileCodeCountDown = 60;
|
||
|
|
this.mobileCodeCountDownTimer = setInterval(() => {
|
||
|
|
this.mobileCodeCountDown--;
|
||
|
|
if (this.mobileCodeCountDown <= 0) {
|
||
|
|
clearInterval(this.mobileCodeCountDownTimer);
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 获取验证码
|
||
|
|
getCaptcha() {
|
||
|
|
this.dataForm.uuid = getUUID();
|
||
|
|
this.captchaPath = this.$http.adornUrl(
|
||
|
|
`auth/captcha?uuid=${this.dataForm.uuid}`
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.login-main ::v-deep {
|
||
|
|
.el-input__inner {
|
||
|
|
height: 46px;
|
||
|
|
border-radius: 10px;
|
||
|
|
border-color: #f0f0f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-radio-group {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-radio-button__inner {
|
||
|
|
border: 1px solid #f0f0f0 !important;
|
||
|
|
border-radius: 10px !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-btn-submit {
|
||
|
|
height: 46px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-input-group__append {
|
||
|
|
border-radius: 10px !important;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.site-wrapper.site-page--login {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
background-color: rgba(38, 50, 56, 0.6);
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
// z-index: -1;
|
||
|
|
filter: brightness(0.56) saturate(0.75) contrast(0.8);
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
content: "";
|
||
|
|
background-image: url(~@/assets/img/login_bg2.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__text1 {
|
||
|
|
margin: 0 0 22px 0;
|
||
|
|
font-size: 36px;
|
||
|
|
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: 0;
|
||
|
|
right: 0;
|
||
|
|
padding: 120px 60px 120px 60px;
|
||
|
|
width: 38.2%;
|
||
|
|
min-height: 100%;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-title {
|
||
|
|
font-size: 32px;
|
||
|
|
font-weight: 300;
|
||
|
|
// margin:0%;
|
||
|
|
// text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-captcha {
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
>img {
|
||
|
|
width: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-btn-submit {
|
||
|
|
width: 100%;
|
||
|
|
// margin-top: 38px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
// transform: translateY(100px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
opacity: 1;
|
||
|
|
// transform: translateY(0px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.site-wrapper {
|
||
|
|
// animation: fadeIn 1s;
|
||
|
|
animation: fadeIn 0.618s ease-out;
|
||
|
|
}
|
||
|
|
</style>
|