Skip to content

G
gs1
Commit a3ded428 by tang
Options

feat: 登录功能

parent 2581f4ba
Showing with 117 additions and 106 deletions
src/axios/api.js
......@@ -22,6 +22,7 @@ import search from "./module/search.js"
import service from "./module/service.js"
import knowledge from "./module/knowledge.js"
import news from "./module/news.js"
import user from "./module/user.js"
const api = {
home,
......@@ -32,6 +33,7 @@ const api = {
knowledge,
news,
getCaptcha,
user,
}
export default api
src/axios/module/user.js 0 → 100644
import {
POST
} from "../fetch.js"
const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
// 用户登录
const login = (params = {}) => {
return POST(`${Prefix}/office/loglogin/api/login`, params)
}
export default {
login,
}
src/views/User/index.vue
......@@ -62,7 +62,7 @@ export default {
display: flex;
flex: 0 0 112px;
justify-content: center;
padding-top: 58px;
//padding-top: 58px;
width: 100%;
text-align: left;
......@@ -123,7 +123,7 @@ export default {
.gs-entry {
.header{
flex: 0 0 60px;
padding-top: 20px;
//padding-top: 20px;
padding-bottom: 10px;
.content {
......
src/views/User/login.vue
<template>
<EntryCard title="网站用户登录">
<div class="login">
<el-tabs v-model="activeName" class="tab-no-bottom">
<el-tab-pane label="用户名登录" name="first">
<el-form :model="userForm" status-icon ref="userLoginFormRef">
<el-form-item prop="userName"
:rules="[{ required: true, message: '请输入用户名/条码卡号', trigger: 'blur' }]"
>
<el-input v-model="userForm.userName"
placeholder="请输入用户名/条码卡号(test)"></el-input>
</el-form-item>
<el-form-item prop="password"
:rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
>
<el-input type="password"
v-model="userForm.password"
placeholder="请输入密码(test)"
autocomplete="off"></el-input>
</el-form-item>
<el-form-item class="validate-append"
prop="validateCode"
:rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]"
>
<el-input
v-model="userForm.validateCode"
placeholder="请输入验证码"
>
<template slot="append"><img src="../../assets/image/validate.jpg" alt=""></template>
</el-input>
</el-form-item>
<div v-if="showUserLoginError" class="login-error">
{{ userLoginError }}
</div>
<el-form-item>
<el-button type="primary" @click="loginByUser" style="width: 100%">登 录</el-button>
</el-form-item>
<el-form-item class="bottom-btn">
<el-button type="text" @click="$router.push({name:'reset-pass'})">忘记密码</el-button>
<el-divider direction="vertical"></el-divider>
<el-button type="text" @click="$router.push({name:'register'})">注册</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="手机号登录" name="second">
<el-form :model="mobileForm" status-icon>
<el-form-item>
<el-input v-model="mobileForm.mobile"
placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="mobileForm.validateCode"
placeholder="请输入短信验证码"
>
<template slot="append">
<el-button v-if="!hasSent" type="primary" @click.stop="sendValidateCode">发送验证码</el-button>
<el-button disabled v-else>
发送验证码({{ time }}S)
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginByMobile" style="width: 100%">登 录</el-button>
</el-form-item>
<el-form-item class="bottom-btn">
<el-button type="text" @click="$router.push({name:'register'})">注册</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<div class="entry-login-title">用户名登录</div>
<el-form :model="userForm" status-icon ref="userLoginFormRef">
<el-form-item prop="userName"
:rules="[{ required: true, message: '请输入用户名/条码卡号', trigger: 'blur' }]"
>
<el-input v-model="userForm.userName"
placeholder="请输入用户名/条码卡号"></el-input>
</el-form-item>
<el-form-item prop="passWord"
:rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
>
<el-input type="password"
v-model="userForm.passWord"
placeholder="请输入密码"
autocomplete="off"></el-input>
</el-form-item>
<el-form-item class="validate-append"
prop="verification"
:rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]"
>
<el-input
v-model="userForm.verification"
placeholder="请输入验证码"
>
<template slot="append"><img :src="captchaPath" style="cursor: pointer" @click="getCaptcha" alt="">
</template>
</el-input>
</el-form-item>
<div v-if="showUserLoginError" class="login-error">
{{ userLoginError }}
</div>
<el-form-item>
<el-button type="primary" @click="loginByUser" style="width: 100%">登 录</el-button>
</el-form-item>
<el-form-item class="bottom-btn">
<el-button type="text" @click="$router.push({name:'reset-pass'})">忘记密码</el-button>
<el-divider direction="vertical"></el-divider>
<el-button type="text" @click="$router.push({name:'register'})">注册</el-button>
</el-form-item>
</el-form>
</div>
</EntryCard>
</template>
<script>import EntryCard from './entry-card.vue'
<script>
import EntryCard from './entry-card.vue'
import {getUUID} from "@/utils/utils";
export default {
name: "login",
......@@ -99,37 +68,58 @@ export default {
activeName: 'first',
userForm: {
userName: '',
password: '',
validateCode: ''
},
mobileForm: {
mobile: '',
validateCode: ''
passWord: '',
verification: ''
},
captchaPath: '',
uuid: '',
captcha: '',
errorMsg: '',
}
},
created() {
this.getCaptcha();
},
methods: {
getCaptcha() {
this.uuid = getUUID()
const query = {
uuid: this.uuid
};
this.$api.getCaptcha(query).then((res) => {
this.captchaPath = window.URL.createObjectURL(res.body);
});
},
loginByUser() {
this.$refs['userLoginFormRef'].validate((valid) => {
if (valid) {
if (this.userForm.validateCode.toLowerCase() === 'kjjj') {
if (this.userForm.userName === 'test' && this.userForm.password === 'test') {
localStorage.setItem('gs-user', JSON.stringify({type: 'unVerify'}))
this.$router.push({path: '/MyManage/UnVerify/index'})
} else if (this.userForm.userName === 'test1' && this.userForm.password === 'test1') {
localStorage.setItem('gs-user', JSON.stringify({type: 'verify'}))
this.$router.push({path: '/MyManage/SystemMember/index'})
} else if (this.userForm.userName === 'admin' && this.userForm.password === 'admin') {
localStorage.setItem('gs-user', JSON.stringify({type: 'admin'}))
this.$router.push({path: '/MyManage/admin/check'})
} else {
this.userLoginError = '用户名或密码不正确！'
// if (this.userForm.validateCode.toLowerCase() === 'kjjj') {
// if (this.userForm.userName === 'test' && this.userForm.password === 'test') {
// localStorage.setItem('gs-user', JSON.stringify({type: 'unVerify'}))
// this.$router.push({path: '/MyManage/UnVerify/index'})
// } else if (this.userForm.userName === 'test1' && this.userForm.password === 'test1') {
// localStorage.setItem('gs-user', JSON.stringify({type: 'verify'}))
// this.$router.push({path: '/MyManage/SystemMember/index'})
// } else if (this.userForm.userName === 'admin' && this.userForm.password === 'admin') {
// localStorage.setItem('gs-user', JSON.stringify({type: 'admin'}))
// this.$router.push({path: '/MyManage/admin/check'})
// } else {
// this.userLoginError = '用户名或密码不正确！'
// this.showUserLoginError = true;
// }
// } else {
// this.userLoginError = '验证码不正确！'
// this.showUserLoginError = true;
// }
this.$api.user.login({
...this.userForm
}).then(res => {
console.log(res)
if (!res.success) {
this.userLoginError = res.returnMsg || '用户名或密码不正确！'
this.showUserLoginError = true;
}
} else {
this.userLoginError = '验证码不正确！'
this.showUserLoginError = true;
}
})
} else {
console.log('error submit!!');
return false;
......@@ -137,9 +127,6 @@ export default {
});
},
loginByMobile() {
},
sendValidateCode() {
if (this.mobileForm.mobile === '') {
this.$message({type: 'error', message: '请输入手机号码'});
......@@ -163,6 +150,14 @@ export default {
.login {
width: 360px;
.entry-login-title {
font-size: 16px;
font-weight: 500;
color: $theme-color1;
margin-bottom: 44px;
text-align: center;
}
.el-form {
.validate-append .el-input-group__append {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment