mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-02-03 17:15:41 +08:00
JeecgBoot低代码平台 3.0版本发布—新里程牌开始,迎接VUE3版本到来!!
This commit is contained in:
@ -1,183 +0,0 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
|
||||
<a-form style="max-width: 500px; margin: 40px auto 0;" :form="form" @keyup.enter.native="nextStep">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-decorator="['username',validatorRules.username]"
|
||||
size="large"
|
||||
type="text"
|
||||
autocomplete="false"
|
||||
placeholder="请输入用户账号或手机号">
|
||||
<a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-row :gutter="0">
|
||||
<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" v-if=" inputCodeContent==verifiedCode " type="smile"
|
||||
:style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
<a-icon slot="prefix" v-else type="frown" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
||||
</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-form-item :wrapperCol="{span: 19, offset: 5}">
|
||||
<router-link style="float: left;line-height: 40px;" :to="{ name: 'login' }">使用已有账户登录</router-link>
|
||||
<a-button type="primary" @click="nextStep">下一步</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction,postAction } from '@/api/manage'
|
||||
import { checkOnlyUser } from '@/api/api'
|
||||
|
||||
export default {
|
||||
name: "Step1",
|
||||
data() {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
inputCodeContent: "",
|
||||
inputCodeNull: true,
|
||||
verifiedCode: "",
|
||||
validatorRules: {
|
||||
username: {rules: [{required: false}, {validator: this.validateInputUsername}]},
|
||||
inputCode: {rules: [{required: true, message: '请输入验证码!'}]},
|
||||
},
|
||||
randCodeImage:'',
|
||||
requestCodeSuccess:true,
|
||||
currdatetime:''
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.handleChangeCheckCode();
|
||||
},
|
||||
methods: {
|
||||
handleChangeCheckCode(){
|
||||
this.currdatetime = new Date().getTime();
|
||||
getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
|
||||
if(res.success){
|
||||
this.randCodeImage = res.result
|
||||
this.requestCodeSuccess=true
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
this.requestCodeSuccess=false
|
||||
}
|
||||
}).catch(()=>{
|
||||
this.requestCodeSuccess=false
|
||||
})
|
||||
},
|
||||
nextStep() {
|
||||
let that = this
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
let isPhone = false;
|
||||
var params = {}
|
||||
var reg = /^[1-9]\d*$|^0$/;
|
||||
var username = values.username;
|
||||
if (reg.test(username) == true) {
|
||||
params.phone = username;
|
||||
isPhone = true
|
||||
} else {
|
||||
params.username = username;
|
||||
}
|
||||
that.validateInputCode().then(()=>{
|
||||
getAction("/sys/user/querySysUser", params).then((res) => {
|
||||
if (res.success) {
|
||||
var userList = {
|
||||
username: res.result.username,
|
||||
phone: res.result.phone,
|
||||
isPhone: isPhone
|
||||
};
|
||||
setTimeout(function () {
|
||||
that.$emit('nextStep', userList)
|
||||
})
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
validateInputCode() {
|
||||
return new Promise((resolve,reject)=>{
|
||||
postAction("/sys/checkCaptcha",{
|
||||
captcha:this.inputCodeContent,
|
||||
checkKey:this.currdatetime
|
||||
}).then(res=>{
|
||||
if(res.success){
|
||||
resolve();
|
||||
}else{
|
||||
this.$message.error(res.message)
|
||||
reject();
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
inputCodeChange(e) {
|
||||
this.inputCodeContent = e.target.value;
|
||||
console.log(this.inputCodeContent)
|
||||
if (!e.target.value || 0 == e.target.value) {
|
||||
this.inputCodeNull = true
|
||||
} else {
|
||||
this.inputCodeContent = this.inputCodeContent.toLowerCase()
|
||||
this.inputCodeNull = false
|
||||
}
|
||||
},
|
||||
generateCode(value) {
|
||||
this.verifiedCode = value.toLowerCase();
|
||||
console.log(this.verifiedCode);
|
||||
},
|
||||
validateInputUsername(rule, value, callback) {
|
||||
console.log(value);
|
||||
var reg = /^[0-9]+.?[0-9]*/;
|
||||
if (!value) {
|
||||
callback("请输入用户名和手机号!");
|
||||
}
|
||||
|
||||
//判断用户输入账号还是手机号码
|
||||
if (reg.test(value)) {
|
||||
var params = {
|
||||
phone: value,
|
||||
};
|
||||
checkOnlyUser(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback("用户名不存在!")
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
var params = {
|
||||
username: value,
|
||||
};
|
||||
checkOnlyUser(params).then((res) => {
|
||||
if (res.success) {
|
||||
callback("用户名不存在!")
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user