LK/income_payments_enterprise_terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录页，忘记密码

Browse Source
This commit is contained in:
姚亚男
2021-09-14 18:17:07 +08:00
parent df61c30adc
commit ecfaaaf1ab
6 changed files with 373 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/user/Login.vue
+73 -176
View File
@@ -1,11 +1,13 @@
<template>
<div class="main">
<a-form v-if="!mobile" :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
<a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
<div class="user-box">
<span class="title">用户登录</span>
<span class="title">
<img src='../../assets/userLogin.png' alt=''>
</span>
<a-row>
<a-col :span="3"></a-col>
<a-col :span="18">
<a-col :span="6"></a-col>
<a-col :span="12">
<a-form-item>
<a-input
size="large"
@@ -16,11 +18,11 @@
</a-input>
</a-form-item>
</a-col>
<a-col :span="3"></a-col>
<a-col :span="6"></a-col>
</a-row>
<a-row>
<a-col :span="3"></a-col>
<a-col :span="18">
<a-col :span="6"></a-col>
<a-col :span="12">
<a-form-item>
<a-input
v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
@@ -33,11 +35,11 @@
</a-input>
</a-form-item>
</a-col>
<a-col :span="3"></a-col>
<a-col :span="6"></a-col>
</a-row>
<a-row style="margin-bottom: 0%;">
<a-col :span="3"></a-col>
<a-col :span="12">
<a-col :span="6"></a-col>
<a-col :span="7">
<a-form-item>
<a-input
v-decorator="['inputCode',validatorRules.inputCode]"
@@ -50,124 +52,39 @@
</a-input>
</a-form-item>
</a-col>
<a-col :span="6" style="text-align: right">
<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
<a-col :span="5" class='code' style='text-align: right'>
<img v-if="requestCodeSuccess" :src="randCodeImage" @click="handleChangeCheckCode"/>
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
</a-col>
<a-col :span="3"></a-col>
<a-col :span="4"></a-col>
</a-row>
<a-row style="margin-bottom: 2%;">
<a-col :span="3"></a-col>
<a-col :span="7">
<a-row class="login-btn">
<a-col :span="6"></a-col>
<a-col :span="12">
<a-form-item>
<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
<a-button
block
size="large"
type="primary"
htmlType="submit"
:loading="loginBtn"
@click.stop.prevent="handleSubmit"
:disabled="loginBtn">
{{ loginBtn ? "登录中" : "登录" }}
</a-button>
</a-form-item>
</a-col>
<a-col :span="6"></a-col>
<a-col :span="5" style="text-align: right;color: #1891FF;">
<a-form-item>
<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
忘记密码
</router-link>
</a-form-item>
</a-col>
</a-row>
<a-row class="login-btn">
<a-row style="margin-bottom: 2%;">
<a-col :span="3"></a-col>
<a-col :span="18">
<a-form-item>
<a-button
block
size="large"
type="primary"
htmlType="submit"
:loading="loginBtn"
@click.stop.prevent="handleSubmit"
:disabled="loginBtn">
{{ loginBtn ? "登录中" : "登录" }}
</a-button>
</a-form-item>
</a-col>
<a-col :span="3"></a-col>
</a-row>
</div>
</a-form>
<a-form v-if="mobile" :form="form" class="user-layout-login user-layout-login-mobile" ref="formLogin" id="formLogin">
<div class="user-box user-box-mobile">
<a-row>
<a-col :span="24">
<a-form-item>
<a-input
size="large"
v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
type="text"
placeholder="请输入帐号">
<a-icon slot="prefix" type="user" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<a-form-item>
<a-input
v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
size="large"
type="password"
autocomplete="false"
placeholder="请输入密码"
>
<a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
</a-input>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="14">
<a-form-item>
<a-input
v-decorator="['inputCode',validatorRules.inputCode]"
size="large"
type="text"
@change="inputCodeChange"
placeholder="请输入验证码">
<a-icon slot="prefix" type="safety" :style="{ color: '#B3B7C2',fontSize:'20px'}"/>
</a-input>
</a-form-item>
</a-col>
<a-col :span="10" style="text-align: right">
<img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
</a-col>
</a-row>
<a-row>
<a-col :span="10">
<a-form-item>
<a-checkbox v-decorator="['rememberMe', {initialValue: true, valuePropName: 'checked'}]">自动登录</a-checkbox>
</a-form-item>
</a-col>
<a-col :span="4"></a-col>
<a-col :span="9" style="text-align: right;color: #1891FF;">
<a-col :span="6"></a-col>
<a-col :span="5" style="text-align: right;">
<a-form-item>
<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">
忘记密码
</router-link>
</a-form-item>
</a-col>
</a-row>
<a-row class="login-btn">
<a-col :span="24">
<a-form-item>
<a-button
block
size="large"
type="primary"
htmlType="submit"
:loading="loginBtn"
@click.stop.prevent="handleSubmit"
:disabled="loginBtn">
{{ loginBtn ? "登录中" : "登录" }}
</a-button>
<span @click='forgetPassword' class="forget-password" style="float: right;color: #BFBFBF;">
忘记密码 <img style='height: 14px' src='../../assets/wenhao.png' alt=''>
</span>
</a-form-item>
</a-col>
</a-row>
@@ -179,11 +96,9 @@
import { mapActions } from "vuex"
import { timeFix } from "@/utils/util"
import Vue from 'vue'
import { ACCESS_TOKEN ,ENCRYPTED_STRING} from "@/store/mutation-types"
import { putAction,postAction,getAction } from '@/api/manage'
import { USER_INFO } from "@/store/mutation-types"
import { ACCESS_TOKEN } from "@/store/mutation-types"
import { postAction,getAction } from '@/api/manage'
import {getRSAPublicKey} from '@/api/login.js'
const Base64 = require('js-base64').Base64
import {JSEncrypt} from 'jsencrypt'
export default {
@@ -191,8 +106,6 @@
data () {
return {
loginBtn: false,
mobile:isMobile(),
// login type: 0 email, 1 username, 2 telephone
loginType: 0,
stepCaptchaVisible: false,
form: this.$form.createForm(this),
@@ -306,6 +219,10 @@
}
);
},
// 忘记密码
forgetPassword() {
this.$router.push({ name: 'alteration' })
},
handleChangeCheckCode(){
this.currdatetime = new Date().getTime();
getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
@@ -383,30 +300,6 @@
},
}
}
// 判断当前设备
function isMobile() {
var userAgentInfo = navigator.userAgent;
var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var mobile_flag = false;
//根据userAgent判断是否是手机
for (var v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
var screen_width = window.screen.width;
var screen_height = window.screen.height;
//根据屏幕分辨率判断是否是手机
if (screen_width < 500 && screen_height < 800) {
mobile_flag = true;
}
return mobile_flag;
}
</script>
<style lang="less" scoped>
@@ -420,15 +313,11 @@
height: 100%;
.user-layout-login{
z-index: 99;
width: 24%;
height: 56%;
padding: 3% 0 3% 0;
min-width: 332px;
min-height: 460px;
background: #fff;
border-radius: 20px;
width: 50%;
box-sizing: border-box;
height: 60%;
position: absolute;
right: 8%;
right: 0;
top: 50%;
transform: translateY(-50%);
.user-box{
@@ -439,34 +328,42 @@
justify-content: space-between;
flex-direction: column;
.title{
display: block;
color: #1891FF;
font-size: 28px;
font-weight: 500;
margin: 0 0 5% 0;
text-align: center;
display: flex;
justify-content: center;
img{
width: 395px;
height: 124px;
}
}
.code{
img{
height: 60px;
border-radius: 30px;
}
}
.login-btn{
margin-top: 20px;
margin-bottom: 0;
font-size: 10px;
/deep/.ant-btn-primary{
height: 60px;
background: #069F99;
border: none;
border-radius: 30px;
}
}
}
}
.user-layout-login-mobile{
right: 0;
width: 100%;
min-width: 0 !important;
height: 46% !important;
background: transparent;
min-height: 0;
padding: 0 2rem 0 2rem;
position: absolute;
top: 50%;
margin-top: 6rem;
transform: translateY(-50%);
.ant-row{
margin-bottom: 0;
}
/deep/.ant-row{
margin-bottom: 0 !important;
}
/deep/.ant-input-affix-wrapper .ant-input{
border-radius: 30px;
height: 60px;
border: 1px solid #E6E3E3;
}
.forget-password{
cursor: pointer;
}
}
</style>