You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
349 lines
14 KiB
349 lines
14 KiB
<template> |
|
<div> |
|
<!-- <h2>学生注册 <div class="back" @click="toLogin">返回登录</div></h2> --> |
|
<h2>学生注册</h2> |
|
|
|
<el-form class="register" :model="regForm" :rules="regRules" ref="reg" label-width="0px"> |
|
<div class="line"> |
|
<el-form-item prop="userName"> |
|
<p class="label">*学生姓名</p> |
|
<el-input v-model="regForm.userName" placeholder="姓名"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="workNumber" style="margin-right: 5%"> |
|
<p class="label">*学生学号</p> |
|
<el-input v-model="regForm.workNumber" placeholder="学生学号" @change="worknumberChange"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="phone"> |
|
<p class="label">*手机号</p> |
|
<el-input v-model="regForm.phone" placeholder="手机号" maxlength="11" @change="phoneChange"></el-input> |
|
</el-form-item> |
|
</div> |
|
|
|
<p class="label">*学校</p> |
|
<div class="line"> |
|
<el-form-item prop="provinceId"> |
|
<p class="prop">省份</p> |
|
<el-select v-model="regForm.provinceId" placeholder="省份" @change="getCity"> |
|
<el-option |
|
v-for="item in provinceList" |
|
:key="item.value" |
|
:label="item.provinceName" |
|
:value="item.provinceId" |
|
></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="cityId" style="margin-right: 5%"> |
|
<p class="prop">城市</p> |
|
<el-select v-model="regForm.cityId" placeholder="城市" @change="getSchoolData"> |
|
<el-option |
|
v-for="item in cityList" |
|
:key="item.value" |
|
:label="item.cityName" |
|
:value="item.cityId" |
|
></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="schoolAppellationId"> |
|
<p class="prop">学校</p> |
|
<el-select v-model="regForm.schoolAppellationId" placeholder="学校名称" filterable @change="worknumberChange"> |
|
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</div> |
|
<!-- <div class="line"> |
|
<el-form-item prop="phone"> |
|
<p class="label">手机号</p> |
|
<el-input v-model="regForm.phone" placeholder="请输入手机号"></el-input> |
|
</el-form-item> |
|
<el-form-item style="margin-right: 5%"> |
|
<button type="button" class="code-btn">发送验证码</button> |
|
</el-form-item> |
|
<el-form-item prop="code"> |
|
<el-input v-model="regForm.code" placeholder="输入验证码"></el-input> |
|
</el-form-item> |
|
</div> --> |
|
<div class="line"> |
|
<el-form-item prop="password"> |
|
<p class="label">*密码设置</p> |
|
<el-input type="password" v-model="regForm.password" placeholder="请输入密码"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="rePassword"> |
|
<el-input type="password" v-model="regForm.rePassword" placeholder="请再次输入密码"></el-input> |
|
</el-form-item> |
|
</div> |
|
<div class="line"> |
|
<el-form-item> |
|
<p class="label">*验证码</p> |
|
<el-input v-model="regForm.validateCode" placeholder="请输入验证码" @keyup.enter.native="registerForm"></el-input> |
|
</el-form-item> |
|
<el-form-item> |
|
<img :src="verifyCode" style="cursor: pointer;" @click="getVerificationCode" title="看不清？换一张" /> |
|
</el-form-item> |
|
</div> |
|
<el-button class="submit" type="primary" @click="registerForm">注册</el-button> |
|
</el-form> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import axios from 'axios'; |
|
export default { |
|
data: function() { |
|
return { |
|
verifyCode:'', |
|
regForm: { |
|
userName: '', |
|
workNumber: '', |
|
provinceId: '', |
|
cityId: '', |
|
schoolAppellationId: '', |
|
phone: '', |
|
password: '', |
|
rePassword: '', |
|
roleId: 4, |
|
schoolId: 2105, |
|
validateCode:'' |
|
}, |
|
regRules: { |
|
userName: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }], |
|
workNumber: [{ required: true, message: '请输入学生学号', trigger: 'blur' }], |
|
provinceId: [{ required: true, message: '请选择省份', trigger: 'change' }], |
|
cityId: [{ required: true, message: '请选择城市', trigger: 'change' }], |
|
schoolAppellationId: [{ required: true, message: '请选择学校', trigger: 'change' }], |
|
phone: [ |
|
{ required: true, message: '请输入手机号', trigger: 'blur' }, |
|
{ pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' } |
|
], |
|
password: [ |
|
{ required: true, message: '请输入密码', trigger: 'blur' }, |
|
{ pattern: /^.{6,}$/, message: '请输入6位数以上的密码', trigger: 'blur' } |
|
], |
|
rePassword: [ |
|
{ required: true, message: '请再次输入密码', trigger: 'blur' }, |
|
{ pattern: /^.{6,}$/, message: '请输入6位数以上的密码', trigger: 'blur' } |
|
] |
|
}, |
|
provinceList: this.$store.state.provinceList, //省份 |
|
cityList: [], //城市 |
|
schoolList: [], |
|
phoneRepeat: false, |
|
workNumberReapeat: false |
|
}; |
|
}, |
|
mounted() { |
|
this.getProvince() |
|
this.getSchoolData() |
|
this.getVerificationCode() |
|
}, |
|
methods: { |
|
//获取图形验证码 |
|
getVerificationCode(){ |
|
// this.$get(this.api.getValidateCode) |
|
axios({ |
|
url:this.api.getValidateCode, |
|
methods:'get', |
|
headers: { |
|
"Content-Type": "application/json", |
|
"EngineCode": "j371gy1q1ioeveq2y05l4gjz3", |
|
"EngineSecret": "IgMlZo+KOs8FthII3KnobUoynILH5ELJVqcHNZcs1G2mwrkofR1THw==" |
|
}, |
|
responseType: 'arraybuffer', |
|
}) |
|
.then(res => { |
|
const bufferUrl = btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')); |
|
this.verifyCode = 'data:image/png;base64,' + bufferUrl; |
|
}).catch(res => {}); |
|
}, |
|
getProvince(){ |
|
this.$get(this.api.queryProvince).then(res => { |
|
this.provinceList = res.message |
|
this.$store.commit("provinceData", { provinceList : this.provinceList}); |
|
}).catch(res => {}); |
|
}, |
|
// 获取城市 |
|
getCity(){ |
|
this.regForm.cityId = '' |
|
this.$get(this.api.queryCity,{provinceId: this.regForm.provinceId}).then(res => { |
|
this.cityList = res.message |
|
this.getSchoolData() |
|
}).catch(res => {}) |
|
}, |
|
// 获取学校名称 |
|
getSchoolData(){ |
|
this.regForm.schoolAppellationId = '' |
|
this.$get(this.api.querySchoolData,{provinceId: this.regForm.provinceId,cityId: this.regForm.cityId,schoolName: ''}).then(res => { |
|
this.schoolList = res.message |
|
}).catch(res => {}); |
|
}, |
|
registerForm() { |
|
this.$refs.reg.validate(valid => { |
|
if (valid) { |
|
if(this.phoneRepeat) return this.$message.warning('该手机号已存在') |
|
if(this.workNumberReapeat) return this.$message.warning('该学生学号已存在') |
|
if(this.regForm.password !== this.regForm.rePassword) return this.$message.warning('两次输入的密码不一致，请重新输入') |
|
|
|
let data = this.regForm |
|
data.account = data.phone |
|
data.uniqueIdentificationAccount = new Date().getTime() |
|
this.$post(`${this.api.save}?workNumber=${this.regForm.workNumber}&validateCode=${this.regForm.validateCode}`,data).then(res => { |
|
this.$message.success('注册成功') |
|
this.$emit('update:isReg',false) |
|
this.$emit('updateInfo',{username: this.regForm.phone,password: this.regForm.password}) |
|
this.$refs.reg.resetFields() |
|
}).catch(res => { |
|
// this.$message.error(res) |
|
}); |
|
} else { |
|
// this.$message.error('请输入账号和密码'); |
|
return false; |
|
} |
|
}); |
|
}, |
|
async phoneChange(){ |
|
let res = await this.$get(this.api.queryPhone, { phone: this.regForm.phone }); |
|
if(res.message.length != 0){ |
|
this.$message.warning('该手机号已存在'); |
|
this.phoneRepeat = true |
|
}else{ |
|
this.phoneRepeat = false |
|
} |
|
}, |
|
async worknumberChange(){ |
|
let res = await this.$get(this.api.queryWorkNumberIsExist, { |
|
workNumber: this.regForm.workNumber, |
|
schoolAppellationId: this.regForm.schoolAppellationId |
|
}); |
|
if(res.status != 200){ |
|
this.$message.warning('该学生学号已存在'); |
|
this.workNumberReapeat = true |
|
}else{ |
|
this.workNumberReapeat = false |
|
} |
|
}, |
|
toLogin() { |
|
this.$emit('update:isReg',false) |
|
} |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.wrap { |
|
.right{ |
|
h2{ |
|
position: relative; |
|
padding-bottom: 10px; |
|
font-size: 24px; |
|
font-weight: 400; |
|
color: #303d4c; |
|
text-align: center; |
|
border-bottom: 1px solid #E5E5E5; |
|
.back{ |
|
position: absolute; |
|
top: 5px; |
|
right: 0; |
|
font-size: 12px; |
|
color: #ccc; |
|
cursor: pointer; |
|
} |
|
} |
|
.el-form{ |
|
margin-top: 30px; |
|
.label{ |
|
margin-bottom: 10px; |
|
color: #105CB2; |
|
font-size: 14px; |
|
} |
|
/deep/.el-input__inner{ |
|
height: 46px; |
|
padding: 0 23px; |
|
line-height: 46px; |
|
border: 1px solid #AFB5BB; |
|
border-radius: 23px !important; |
|
} |
|
/deep/.el-form-item__error{ |
|
top: 105%; |
|
left: auto; |
|
right: 0; |
|
color: #FFA94E; |
|
} |
|
.submit{ |
|
width: 100%; |
|
height: 48px; |
|
margin-top: 60px; |
|
line-height: 48px; |
|
padding: 0; |
|
font-size: 20px; |
|
background-color: #105cb2; |
|
border-radius: 23px; |
|
border: 0; |
|
} |
|
.links{ |
|
margin: 20px 0 20px; |
|
} |
|
.ques{ |
|
color: #105cb2; |
|
font-size: 14px; |
|
} |
|
.forget{ |
|
color: #ffa94e; |
|
font-size: 14px; |
|
} |
|
.login-tips{ |
|
margin-bottom: 20px; |
|
font-size: 16px; |
|
color: #105CB2; |
|
text-align: center; |
|
} |
|
.thirdParty{ |
|
.item{ |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin-bottom: 20px; |
|
padding: 10px 0; |
|
color: #AFB5BB; |
|
font-size: 16px; |
|
background-color: #eff0f1; |
|
border-radius: 36px; |
|
cursor: pointer; |
|
img{ |
|
width: 40px; |
|
margin-right: 10px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.register{ |
|
.line{ |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: flex-end; |
|
} |
|
.el-form-item{ |
|
&:first-child{ |
|
margin-right: 5%; |
|
} |
|
} |
|
.label{ |
|
margin-bottom: 0; |
|
} |
|
.code-btn{ |
|
min-width: 120px; |
|
height: 46px; |
|
padding: 0 10px; |
|
line-height: 46px; |
|
color: #fff; |
|
font-size: 14px; |
|
border-radius: 23px; |
|
border: 0; |
|
background-color: #105cb2; |
|
} |
|
.submit{ |
|
margin-bottom: 20px; |
|
} |
|
} |
|
} |
|
} |
|
</style> |