登录完成
This commit is contained in:
xiayuping666
+130
-30
@@ -23,46 +23,49 @@
|
||||
<div class="login-main">
|
||||
<!-- <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4> -->
|
||||
<h4 class="login-title">数字校园教育管理平台</h4>
|
||||
<h5>请使用钉钉小程序扫码登录</h5>
|
||||
<!-- <h5>请使用钉钉小程序扫码登录</h5> -->
|
||||
<el-form class="el-form login-form">
|
||||
<el-form-item style="margin-left: 0px" prop="userName">
|
||||
<el-form-item style="margin-left: 0px" prop="phone">
|
||||
<el-input
|
||||
type="text"
|
||||
:placeholder="$t('message.login.placeholder1')"
|
||||
prefix-icon="el-icon-user"
|
||||
v-model="ruleForm.userName"
|
||||
v-model="loginForm.phone"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-left: 0px" prop="password">
|
||||
<!-- <el-form-item style="margin-left: 0px" prop="code">
|
||||
<el-input
|
||||
type="password"
|
||||
type="code"
|
||||
:placeholder="$t('message.login.placeholder2')"
|
||||
prefix-icon="el-icon-lock"
|
||||
v-model="ruleForm.password"
|
||||
v-model="loginForm.code"
|
||||
autocomplete="off"
|
||||
:show-password="true"
|
||||
:show-code="true"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item style="margin-left: 0px" prop="code">
|
||||
<div class="el-row" span="24">
|
||||
<div class="el-col el-col-16">
|
||||
<div class="el-col el-col-14">
|
||||
<el-input
|
||||
type="text"
|
||||
maxlength="4"
|
||||
:placeholder="$t('message.login.placeholder3')"
|
||||
prefix-icon="el-icon-position"
|
||||
v-model="ruleForm.code"
|
||||
:placeholder="$t('message.login.placeholder2')"
|
||||
prefix-icon="el-icon-lock"
|
||||
v-model="loginForm.code"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="el-col el-col-8">
|
||||
<div class="login-code">
|
||||
<span class="login-code-img">1234</span>
|
||||
<div class="el-col el-col-10">
|
||||
<div @click="onClickSendCode" class="login-code">
|
||||
<!-- <span class="login-code-img" > -->
|
||||
<!-- <i class="el-icon-position">{{ sendText }}</i> -->
|
||||
<!-- </span> -->
|
||||
<el-button class="el-icon-position" style="width: 100%;">{{ sendText }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,7 +110,8 @@ import { PrevLoading } from "@/utils/loading.js";
|
||||
import { quotationsList } from "./mock";
|
||||
import { useLoginApi } from "@/api/login";
|
||||
import { Message } from "element-ui";
|
||||
|
||||
import { rulesPhone } from '@/com/index.js'
|
||||
import { getSmsCaptcha, login } from './api'
|
||||
const LoginApi = useLoginApi();
|
||||
|
||||
export default {
|
||||
@@ -120,15 +124,15 @@ export default {
|
||||
submit: {
|
||||
loading: false,
|
||||
},
|
||||
ruleForm: {
|
||||
userName: "admin",
|
||||
password: "123456",
|
||||
code: "1234",
|
||||
loginForm: {
|
||||
phone: "18015724687",
|
||||
code: "",
|
||||
},
|
||||
time: {
|
||||
txt: "",
|
||||
fun: null,
|
||||
},
|
||||
sendText: '发送'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -146,6 +150,10 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.initRandomQuotations();
|
||||
// console.log(localStorage.getItem('user'))
|
||||
console.log('this.$store.state.loginConfig')
|
||||
console.log(this.$store.state.loginConfig.loginConfig)
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 随机语录
|
||||
@@ -164,7 +172,101 @@ export default {
|
||||
// 登录按钮点击
|
||||
submitForm() {
|
||||
this.submit.loading = true;
|
||||
// 登录发请求获取用户信息
|
||||
this.$router.push('/evaluate')
|
||||
console.log(this.$router)
|
||||
localStorage.setItem('token', 123)
|
||||
|
||||
if( rulesPhone(this.loginForm.phone) ){ // 判断是否存在手机号验证码
|
||||
if(this.loginForm.code){
|
||||
// 登录发请求获取用户信息
|
||||
let obj = {...this.$store.state.loginConfig.loginConfig, ...this.loginForm}
|
||||
let formData = new FormData()
|
||||
for( let key in obj){
|
||||
formData.append(key, obj[key])
|
||||
}
|
||||
this.$store.dispatch('loginIn', formData).then(res =>{
|
||||
this.$message.success('登录成功！')
|
||||
// this.$router.push('/evaluate')
|
||||
this.oldSet()
|
||||
|
||||
}).finally(err =>{
|
||||
this.submit.loading = false;
|
||||
this.sendText = '发送'
|
||||
})
|
||||
}
|
||||
}else {
|
||||
this.$message.error('请输入正确的手机号！')
|
||||
}
|
||||
|
||||
},
|
||||
// 点击发送验证码
|
||||
onClickSendCode() {
|
||||
if( rulesPhone(this.loginForm.phone)){
|
||||
if(this.sendText == '发送' || this.sendText == '重新发送'){
|
||||
getSmsCaptcha(this.loginForm.phone).then(res =>{
|
||||
this.sendText = '发送成功'
|
||||
}).catch(err =>{
|
||||
this.sendText = '重新发送'
|
||||
})
|
||||
}
|
||||
}else{
|
||||
this.$message.error('请输入正确的手机号！')
|
||||
}
|
||||
},
|
||||
// 验证表单
|
||||
rulesForm() {
|
||||
// if(loginForm.phone){
|
||||
|
||||
// }
|
||||
// this.loginForm.phone
|
||||
},
|
||||
oldSet() {
|
||||
let defaultRoles = [];
|
||||
let defaultAuthBtnList = [];
|
||||
// admin 页面权限标识，对应路由 meta.roles
|
||||
let adminRoles = ["admin"];
|
||||
// admin 按钮权限标识
|
||||
let adminAuthBtnList = ["btn.add", "btn.del", "btn.edit", "btn.link"];
|
||||
// common 页面权限标识，对应路由 meta.roles
|
||||
let testAuthPageList = ["common"];
|
||||
// test 按钮权限标识
|
||||
let testAuthBtnList = ["btn.add", "btn.link"];
|
||||
if (this.loginForm.phone === "admin") {
|
||||
defaultRoles = adminRoles;
|
||||
defaultAuthBtnList = adminAuthBtnList;
|
||||
} else {
|
||||
defaultRoles = testAuthPageList;
|
||||
defaultAuthBtnList = testAuthBtnList;
|
||||
}
|
||||
const userInfos = {
|
||||
phone: this.loginForm.phone === "admin" ? "admin" : "test",
|
||||
photo:
|
||||
this.loginForm.phone === "admin"
|
||||
? "https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200"
|
||||
: "https://img2.baidu.com/it/u=2187913762,2708298335&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
|
||||
time: new Date().getTime(),
|
||||
roles: defaultRoles,
|
||||
authBtnList: defaultAuthBtnList,
|
||||
};
|
||||
// 存储用户信息到浏览器缓存
|
||||
Session.set("userInfo", userInfos);
|
||||
// 存储用户信息到vuex
|
||||
this.$store.dispatch("userInfos/setUserInfos", userInfos);
|
||||
PrevLoading.start();
|
||||
this.$router.push("/");
|
||||
setTimeout(() => {
|
||||
this.$message.success(
|
||||
`${this.currentTime}，${this.$t("message.login.signInText")}`
|
||||
);
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.time.fun);
|
||||
},
|
||||
|
||||
|
||||
/*
|
||||
setTimeout(() => {
|
||||
let defaultRoles = [];
|
||||
let defaultAuthBtnList = [];
|
||||
@@ -176,7 +278,7 @@ export default {
|
||||
let testAuthPageList = ["common"];
|
||||
// test 按钮权限标识
|
||||
let testAuthBtnList = ["btn.add", "btn.link"];
|
||||
if (this.ruleForm.userName === "admin") {
|
||||
if (this.loginForm.phone === "admin") {
|
||||
defaultRoles = adminRoles;
|
||||
defaultAuthBtnList = adminAuthBtnList;
|
||||
} else {
|
||||
@@ -184,9 +286,9 @@ export default {
|
||||
defaultAuthBtnList = testAuthBtnList;
|
||||
}
|
||||
const userInfos = {
|
||||
userName: this.ruleForm.userName === "admin" ? "admin" : "test",
|
||||
phone: this.loginForm.phone === "admin" ? "admin" : "test",
|
||||
photo:
|
||||
this.ruleForm.userName === "admin"
|
||||
this.loginForm.phone === "admin"
|
||||
? "https://img0.baidu.com/it/u=1833472230,3849481738&fm=253&fmt=auto?w=200&h=200"
|
||||
: "https://img2.baidu.com/it/u=2187913762,2708298335&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200",
|
||||
time: new Date().getTime(),
|
||||
@@ -206,12 +308,9 @@ export default {
|
||||
`${this.currentTime}，${this.$t("message.login.signInText")}`
|
||||
);
|
||||
}, 300);
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.time.fun);
|
||||
},
|
||||
}, 300);
|
||||
*/
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -344,6 +443,7 @@ export default {
|
||||
cursor: pointer;
|
||||
transition: all ease 0.2s;
|
||||
border-radius: 4px;
|
||||
font-weight: 400;
|
||||
&:hover {
|
||||
border-color: var(--prev-border-color-hover);
|
||||
transition: all ease 0.2s;
|
||||
|
||||
Reference in New Issue
Block a user