parent
a5a224d885
commit
175962b8dc
11 changed files with 603 additions and 95 deletions
@ -0,0 +1,188 @@ |
||||
<template> |
||||
<!-- 赛事报名-账号申请（从官网跳进来注册专用） --> |
||||
<div> |
||||
<el-dialog title="账号申请" :visible.sync="accountVisible" :close-on-click-modal="false" width="500px" |
||||
@close="accountClose" @closed="closeDia"> |
||||
<el-form class="dia-form" ref="form" label-width="110px" :model="form" :rules="rules"> |
||||
<el-form-item prop="schoolId" label="所属院校"> |
||||
<el-input disabled value="2024年全国大学生金融投资创新大赛"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="workNumber" label="学号"> |
||||
<el-input disabled v-model="form.workNumber"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="phone" label="手机号"> |
||||
<el-input placeholder="请输入手机号" maxlength="11" v-model.trim="form.phone" |
||||
@input="checkAccountByPhoneReg"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="userName" label="姓名"> |
||||
<el-input placeholder="请输入姓名" v-model="form.userName" :disabled="exist"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="code" label="验证码"> |
||||
<div class="ver-code"> |
||||
<el-input v-model="form.code" placeholder="请输入验证码" maxlength="6" :disabled="exist"></el-input> |
||||
<el-button style="top: 1px" type="text" @click="sendCode" :disabled="phoneDisabled || exist">{{ |
||||
phoneBtnText }} |
||||
</el-button> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item prop="password" label="登录密码"> |
||||
<el-input placeholder="请输入登录密码" type="password" maxlength="6" v-model="form.password" |
||||
:disabled="exist"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="rePassword" label="确认登录密码"> |
||||
<el-input placeholder="请再次输入登录密码" type="password" maxlength="6" v-model="form.rePassword" |
||||
:disabled="exist"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button v-if="!exist" size="small" type="primary" @click="accountSubmit">申请</el-button> |
||||
<el-button size="small" @click="accountVisible = false">取消</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
export default { |
||||
props: ['visible'], |
||||
data () { |
||||
const phonePass = (rule, value, callback) => { |
||||
const val = this.form.phone |
||||
if (val === '') { |
||||
callback(new Error('请输入手机号')) |
||||
} else { |
||||
if (this.$parent.phoneReg.test(val)) { |
||||
callback() |
||||
} else { |
||||
callback(new Error('请输入正确手机号格式')) |
||||
} |
||||
} |
||||
} |
||||
return { |
||||
accountVisible: false, |
||||
exist: true, |
||||
form: { |
||||
schoolId: '', |
||||
account: '', |
||||
code: '', |
||||
password: '', |
||||
rePassword: '', |
||||
phone: '', |
||||
userName: '', |
||||
workNumber: '', |
||||
uniqueIdentification: Date.now() |
||||
}, |
||||
rules: { |
||||
userName: [{ required: true, message: "请输入姓名", trigger: "blur" }], |
||||
phone: [{ required: true, validator: phonePass, trigger: "blur" }], |
||||
password: [{ required: true, message: "请输入密码", trigger: "blur" }], |
||||
rePassword: [{ required: true, message: "请再次输入密码", trigger: "blur" }], |
||||
code: [{ required: true, message: "请输入验证码", trigger: "blur" }] |
||||
}, |
||||
phoneDisabled: false, |
||||
phoneTimer: null, |
||||
phoneOpener: '', |
||||
phoneBtnText: '发送验证码', |
||||
submiting: false, |
||||
}; |
||||
}, |
||||
watch: { |
||||
visible () { |
||||
this.accountVisible = this.visible |
||||
} |
||||
}, |
||||
mounted () { |
||||
|
||||
}, |
||||
methods: { |
||||
// 注册手机号输入完回调。没有账号才能继续操作 |
||||
async checkAccountByPhoneReg (val) { |
||||
if (!this.$parent.phoneReg.test(val)) { |
||||
this.exist = true |
||||
return false |
||||
} |
||||
|
||||
try { |
||||
const { message } = await this.$get(`${this.api.forgotPreVerification}?phoneOrEmail=${val}&platform=${Setting.platformId}`) |
||||
this.exist = message === 'success' // 用户已存在 |
||||
this.form.workNumber = this.exist ? '' : val |
||||
} catch (e) { } |
||||
}, |
||||
// 发送验证码 |
||||
sendCode () { |
||||
const { phone } = this.form |
||||
// 校验用户手机号是否存在 |
||||
if (!this.$parent.phoneReg.test(phone)) return false |
||||
this.$post(`${this.api.sendPhoneVerificationCode}?phoneOrEmail=${phone}&loginOrBind=1&platform=${Setting.platformId}`).then(({ message }) => { |
||||
Util.successMsg(message) |
||||
this.phoneCountdown() |
||||
}).catch(res => { }) |
||||
}, |
||||
// 验证码倒计时 |
||||
phoneCountdown () { |
||||
let count = 60 |
||||
if (!this.phoneTimer) { |
||||
this.phoneDisabled = true |
||||
this.phoneTimer = setInterval(() => { |
||||
if (count > 0) { |
||||
count-- |
||||
this.phoneBtnText = `${count}秒后重试` |
||||
} else { |
||||
this.phoneDisabled = false |
||||
clearInterval(this.phoneTimer) |
||||
this.phoneTimer = null |
||||
this.phoneBtnText = `发送验证码` |
||||
} |
||||
}, 1000) |
||||
} |
||||
}, |
||||
// 账号申请提交 |
||||
accountSubmit () { |
||||
this.$refs.form.validate(valid => { |
||||
if (valid) { |
||||
const form = this.form |
||||
form.schoolId = 208 |
||||
if (form.password !== form.rePassword) return Util.errorMsg('两次输入的密码不一致，请重新输入！') |
||||
// 平台id-端id-schoolId-workNumber组成账号 |
||||
form.account = `${Setting.platformId}-1-${form.schoolId}-${form.workNumber}` |
||||
this.$post(this.api.studentAccountApplication, form).then(res => { |
||||
this.accountVisible = false |
||||
Util.successMsg('注册成功！') |
||||
}).catch(res => { }) |
||||
} |
||||
}) |
||||
}, |
||||
// 账号申请关闭 |
||||
accountClose () { |
||||
this.form = { |
||||
schoolId: '', |
||||
account: '', |
||||
code: '', |
||||
password: '', |
||||
rePassword: '', |
||||
phone: '', |
||||
userName: '', |
||||
workNumber: '', |
||||
uniqueIdentification: Date.now() |
||||
} |
||||
}, |
||||
// 弹框关闭回调 |
||||
closeDia () { |
||||
this.$emit('update:visible', false) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.ver-code { |
||||
position: relative; |
||||
|
||||
.el-button { |
||||
position: absolute; |
||||
top: 10px; |
||||
right: 10px; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue