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.
237 lines
8.5 KiB
237 lines
8.5 KiB
<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="accountForm" label-width="110px" :model="accountForm" :rules="accountRules"> |
|
<el-form-item prop="schoolId" label="所属院校"> |
|
<el-select class="w-100" v-model="accountForm.schoolId" filterable placeholder="请选择院校" @change="schoolChange"> |
|
<el-option v-for="(item, i) in schoolList" :key="i" :label="item.schoolName" |
|
:value="item.schoolId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item prop="workNumber" label="学号"> |
|
<el-input placeholder="申请后无法修改，请确认填写正确" v-model="accountForm.workNumber" |
|
@change="workNumberChange"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="userName" label="姓名"> |
|
<el-input placeholder="请输入姓名" v-model="accountForm.userName" :disabled="formEnable"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="phone" label="手机号"> |
|
<el-input placeholder="请输入手机号" maxlength="11" v-model.trim="accountForm.phone" |
|
:disabled="formEnable"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="code" label="验证码"> |
|
<div class="ver-code"> |
|
<el-input v-model="accountForm.code" placeholder="请输入验证码" maxlength="6" :disabled="formEnable"></el-input> |
|
<el-button style="top: 1px" type="text" @click="sendCode" :disabled="phoneDisabled && formEnable">{{ |
|
phoneBtnText }} |
|
</el-button> |
|
</div> |
|
</el-form-item> |
|
<el-form-item prop="password" label="登录密码"> |
|
<el-input placeholder="请输入登录密码" type="password" maxlength="6" v-model="accountForm.password" |
|
:disabled="formEnable"></el-input> |
|
</el-form-item> |
|
<el-form-item prop="rePassword" label="确认登录密码"> |
|
<el-input placeholder="请再次输入登录密码" type="password" maxlength="6" v-model="accountForm.rePassword" |
|
:disabled="formEnable"></el-input> |
|
</el-form-item> |
|
</el-form> |
|
<span slot="footer" class="dialog-footer"> |
|
<el-button v-if="!formEnable" size="small" type="primary" @click="accountSubmit">申请</el-button> |
|
<el-button size="small" @click="accountVisible = false">取消</el-button> |
|
</span> |
|
</el-dialog> |
|
|
|
<!-- 购买弹框 --> |
|
<el-dialog title="温馨提示" :visible.sync="buyVisible" width="400px" center :close-on-click-modal="false"> |
|
<div class="buy"> |
|
<p class="tips">您所选择的院校暂未在本平台开通组织账号，请通知院校老师联系下方二维码客服咨询。</p> |
|
<img src="@/assets/img/wechat-code.jpeg" alt=""> |
|
</div> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
<script> |
|
import Setting from '@/setting' |
|
import Util from '@/libs/util' |
|
export default { |
|
props: ['visible'], |
|
data () { |
|
const workNumberPass = (rule, value, callback) => { |
|
const val = this.accountForm.workNumber |
|
if (val === '') { |
|
callback(new Error('请输入学号')) |
|
} else { |
|
const pattern = /^[A-Za-z0-9]*$/ |
|
if (pattern.test(val)) { |
|
callback() |
|
} else { |
|
callback(new Error('请输入正确学号格式')) |
|
} |
|
} |
|
} |
|
const phonePass = (rule, value, callback) => { |
|
const val = this.accountForm.phone |
|
if (val === '') { |
|
callback(new Error('请输入手机号')) |
|
} else { |
|
if (this.phoneReg.test(val)) { |
|
callback() |
|
} else { |
|
callback(new Error('请输入正确手机号格式')) |
|
} |
|
} |
|
} |
|
return { |
|
accountVisible: false, |
|
formEnable: true, |
|
schoolList: [], |
|
accountForm: { |
|
schoolId: '', |
|
account: '', |
|
code: '', |
|
password: '', |
|
rePassword: '', |
|
phone: '', |
|
userName: '', |
|
workNumber: '', |
|
uniqueIdentification: Date.now() |
|
}, |
|
accountRules: { |
|
schoolId: [{ required: true, message: "请选择所属院校", trigger: "change" }], |
|
userName: [{ required: true, message: "请输入姓名", trigger: "blur" }], |
|
workNumber: [{ required: true, validator: workNumberPass, 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: '发送验证码', |
|
buyVisible: false, |
|
submiting: false, |
|
}; |
|
}, |
|
watch: { |
|
visible () { |
|
this.accountVisible = this.visible |
|
} |
|
}, |
|
mounted () { |
|
localStorage.getItem('toMatch') && this.getSchool() |
|
}, |
|
methods: { |
|
// 获取学校列表 |
|
getSchool () { |
|
this.$get(this.api.querySchool, { |
|
provinceId: '', |
|
cityId: '' |
|
}).then(({ list }) => { |
|
this.schoolList = list |
|
}).catch(res => { }) |
|
}, |
|
// 学号输入完回调。学校和学号都输入完后，调这个接口查询是否有存在的学生，如果没有，才能继续输入，如果有，不让添加 |
|
workNumberChange () { |
|
const form = this.accountForm |
|
form.schoolId && form.workNumber && this.$get(`${this.api.enquireAboutSchoolStudents}?schoolId=${form.schoolId}&workNumber=${form.workNumber}&applyFor=1`).then(({ account }) => { |
|
if (account) this.form = account |
|
this.formEnable = !!account |
|
}).catch(res => { |
|
this.formEnable = true |
|
}) |
|
}, |
|
// 学校选择回调 |
|
schoolChange (schoolId) { |
|
this.$get(this.api.getCustomerBySchoolId, { |
|
schoolId |
|
}).then(res => { |
|
if (!res) { |
|
this.accountVisible = false |
|
this.buyVisible = true |
|
} |
|
}).catch(res => { }) |
|
}, |
|
|
|
// 发送验证码 |
|
sendCode () { |
|
const { phone } = this.accountForm |
|
// 校验用户手机号是否存在 |
|
phone && this.$get(`${this.api.checkPhoneOrEmailExist}?phone=${phone}&type=1&email=`).then(res => { |
|
if (res) return Util.errorMsg('手机号已存在，请更换手机号！') |
|
if (!this.verifyPhone(phone)) return false |
|
this.$post(`${this.api.sendPhoneVerificationCode}?phoneOrEmail=${phone}&loginOrBind=1&platform=${Setting.platformId}`).then(({ message }) => { |
|
Util.successMsg(message) |
|
this.phoneCountdown() |
|
}).catch(res => { }) |
|
}).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.accountForm.validate(valid => { |
|
if (valid) { |
|
const form = this.accountForm |
|
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('账号申请已提交，需管理员审核，请10分钟后再登录') |
|
}).catch(res => { }) |
|
} |
|
}) |
|
}, |
|
// 账号申请关闭 |
|
accountClose () { |
|
this.accountForm = { |
|
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> |