|
|
@@ -1,18 +1,20 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <a-form-model ref="form" :model="model" :rules="validatorRules">
|
|
|
- <a-form-model-item required prop="username">
|
|
|
- <a-input v-model="model.username" size="large" placeholder="请输入帐户名 / admin">
|
|
|
- <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
|
|
- </a-input>
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item required prop="password">
|
|
|
- <a-input v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码 / 123456">
|
|
|
- <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
|
|
- </a-input>
|
|
|
- </a-form-model-item>
|
|
|
+ <div>
|
|
|
+ <a-form-model ref="form" :model="model" :rules="validatorRules">
|
|
|
+ <a-form-model-item required prop="username">
|
|
|
+ <a-input v-model="model.username" size="large" placeholder="请输入帐户名 ">
|
|
|
+ <!-- / admin -->
|
|
|
+ <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
|
|
|
+ </a-input>
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item required prop="password">
|
|
|
+ <a-input v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码 ">
|
|
|
+ <!-- / 123456 -->
|
|
|
+ <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
|
|
|
+ </a-input>
|
|
|
+ </a-form-model-item>
|
|
|
|
|
|
- <!-- <a-row :gutter="0">
|
|
|
+ <!-- <a-row :gutter="0">
|
|
|
<a-col :span="16">
|
|
|
<a-form-model-item required prop="inputCode">
|
|
|
<a-input v-model="model.inputCode" size="large" type="text" placeholder="请输入验证码">
|
|
|
@@ -25,134 +27,135 @@
|
|
|
<img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
|
|
|
</a-col>
|
|
|
</a-row> -->
|
|
|
- </a-form-model>
|
|
|
- </div>
|
|
|
+ </a-form-model>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { getAction } from '@/api/manage'
|
|
|
- import Vue from 'vue'
|
|
|
- import { mapActions } from 'vuex'
|
|
|
-
|
|
|
- export default {
|
|
|
- name: 'LoginAccount',
|
|
|
- data(){
|
|
|
- return {
|
|
|
- requestCodeSuccess: false,
|
|
|
- randCodeImage: '',
|
|
|
- currdatetime: '',
|
|
|
- loginType: 0,
|
|
|
- model:{
|
|
|
- username: '',
|
|
|
- password: '',
|
|
|
- inputCode: ''
|
|
|
- },
|
|
|
- validatorRules:{
|
|
|
- username: [
|
|
|
- { required: true, message: '请输入用户名!' },
|
|
|
- { validator: this.handleUsernameOrEmail }
|
|
|
- ],
|
|
|
- password: [{
|
|
|
- required: true, message: '请输入密码!', validator: 'click'
|
|
|
- }]
|
|
|
- // ,
|
|
|
- // inputCode: [{
|
|
|
- // required: true, message: '请输入验证码!'
|
|
|
- // }]
|
|
|
- }
|
|
|
+import { getAction } from '@/api/manage'
|
|
|
+import Vue from 'vue'
|
|
|
+import { mapActions } from 'vuex'
|
|
|
|
|
|
+export default {
|
|
|
+ name: 'LoginAccount',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ requestCodeSuccess: false,
|
|
|
+ randCodeImage: '',
|
|
|
+ currdatetime: '',
|
|
|
+ loginType: 0,
|
|
|
+ model: {
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ inputCode: ''
|
|
|
+ },
|
|
|
+ validatorRules: {
|
|
|
+ username: [{ required: true, message: '请输入用户名!' }, { validator: this.handleUsernameOrEmail }],
|
|
|
+ password: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入密码!',
|
|
|
+ validator: 'click'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ // ,
|
|
|
+ // inputCode: [{
|
|
|
+ // required: true, message: '请输入验证码!'
|
|
|
+ // }]
|
|
|
}
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.handleChangeCheckCode();
|
|
|
- },
|
|
|
- methods:{
|
|
|
- ...mapActions(['Login']),
|
|
|
- /**刷新验证码*/
|
|
|
- handleChangeCheckCode(){
|
|
|
- this.currdatetime = new Date().getTime();
|
|
|
- this.model.inputCode = ''
|
|
|
- getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
|
|
|
- if(res.success){
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.handleChangeCheckCode()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(['Login']),
|
|
|
+ /**刷新验证码*/
|
|
|
+ handleChangeCheckCode() {
|
|
|
+ this.currdatetime = new Date().getTime()
|
|
|
+ this.model.inputCode = ''
|
|
|
+ getAction(`/sys/randomImage/${this.currdatetime}`)
|
|
|
+ .then(res => {
|
|
|
+ if (res.success) {
|
|
|
this.randCodeImage = res.result
|
|
|
- this.requestCodeSuccess=true
|
|
|
- }else{
|
|
|
+ this.requestCodeSuccess = true
|
|
|
+ } else {
|
|
|
this.$message.error(res.message)
|
|
|
- this.requestCodeSuccess=false
|
|
|
+ this.requestCodeSuccess = false
|
|
|
}
|
|
|
- }).catch(()=>{
|
|
|
- this.requestCodeSuccess=false
|
|
|
})
|
|
|
- },
|
|
|
- // 判断登录类型
|
|
|
- handleUsernameOrEmail (rule, value, callback) {
|
|
|
- const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
|
|
|
- if (regex.test(value)) {
|
|
|
- this.loginType = 0
|
|
|
- } else {
|
|
|
- this.loginType = 1
|
|
|
- }
|
|
|
- callback()
|
|
|
- },
|
|
|
- /**
|
|
|
- * 验证字段
|
|
|
- * @param arr
|
|
|
- * @param callback
|
|
|
- */
|
|
|
- validateFields(arr, callback){
|
|
|
- let promiseArray = []
|
|
|
- for(let item of arr){
|
|
|
- let p = new Promise((resolve, reject) => {
|
|
|
- this.$refs['form'].validateField(item, (err)=>{
|
|
|
- if(!err){
|
|
|
- resolve();
|
|
|
- }else{
|
|
|
- reject(err);
|
|
|
- }
|
|
|
- })
|
|
|
- });
|
|
|
- promiseArray.push(p)
|
|
|
- }
|
|
|
- Promise.all(promiseArray).then(()=>{
|
|
|
+ .catch(() => {
|
|
|
+ this.requestCodeSuccess = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 判断登录类型
|
|
|
+ handleUsernameOrEmail(rule, value, callback) {
|
|
|
+ const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
|
|
|
+ if (regex.test(value)) {
|
|
|
+ this.loginType = 0
|
|
|
+ } else {
|
|
|
+ this.loginType = 1
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 验证字段
|
|
|
+ * @param arr
|
|
|
+ * @param callback
|
|
|
+ */
|
|
|
+ validateFields(arr, callback) {
|
|
|
+ let promiseArray = []
|
|
|
+ for (let item of arr) {
|
|
|
+ let p = new Promise((resolve, reject) => {
|
|
|
+ this.$refs['form'].validateField(item, err => {
|
|
|
+ if (!err) {
|
|
|
+ resolve()
|
|
|
+ } else {
|
|
|
+ reject(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ promiseArray.push(p)
|
|
|
+ }
|
|
|
+ Promise.all(promiseArray)
|
|
|
+ .then(() => {
|
|
|
callback()
|
|
|
- }).catch(err=>{
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
callback(err)
|
|
|
})
|
|
|
- },
|
|
|
- acceptUsername(username){
|
|
|
- this.model['username'] = username
|
|
|
- },
|
|
|
- //账号密码登录
|
|
|
- handleLogin(rememberMe){
|
|
|
- // [ 'username', 'password', 'inputCode' ]
|
|
|
- //已经去掉验证码校验
|
|
|
- this.validateFields([ 'username', 'password'], (err)=>{
|
|
|
- if(!err){
|
|
|
- let loginParams = {
|
|
|
- username: this.model.username,
|
|
|
- password: this.model.password,
|
|
|
- captcha: this.model.inputCode,
|
|
|
- checkKey: this.currdatetime,
|
|
|
- remember_me: rememberMe,
|
|
|
- }
|
|
|
- console.log("登录参数", loginParams)
|
|
|
- this.Login(loginParams).then((res) => {
|
|
|
+ },
|
|
|
+ acceptUsername(username) {
|
|
|
+ this.model['username'] = username
|
|
|
+ },
|
|
|
+ //账号密码登录
|
|
|
+ handleLogin(rememberMe) {
|
|
|
+ // [ 'username', 'password', 'inputCode' ]
|
|
|
+ //已经去掉验证码校验
|
|
|
+ this.validateFields(['username', 'password'], err => {
|
|
|
+ if (!err) {
|
|
|
+ let loginParams = {
|
|
|
+ username: this.model.username,
|
|
|
+ password: this.model.password,
|
|
|
+ captcha: this.model.inputCode,
|
|
|
+ checkKey: this.currdatetime,
|
|
|
+ remember_me: rememberMe
|
|
|
+ }
|
|
|
+ console.log('登录参数', loginParams)
|
|
|
+ this.Login(loginParams)
|
|
|
+ .then(res => {
|
|
|
this.$emit('success', res.result)
|
|
|
- }).catch((err) => {
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
this.$emit('fail', err)
|
|
|
- });
|
|
|
- }else{
|
|
|
- this.$emit('validateFail')
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$emit('validateFail')
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-
|
|
|
-</style>
|
|
|
+<style scoped></style>
|
zengtx