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