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