JeecgBoot低代码平台 3.0版本发布—新里程牌开始,迎接VUE3版本到来!!

This commit is contained in:
zhangdaiscott
2021-10-27 10:26:33 +08:00
parent ac0422788b
commit 41cd7823ea
31 changed files with 449 additions and 568 deletions

View File

@ -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>