2023-12-09 17:00:58 +08:00
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
|
import { getCodeInfoApi, registerNowApi } from 'http/api/register/index'
|
|
|
|
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
// const userStore = useStore()
|
|
|
|
|
|
|
|
|
|
|
|
/* 注册参数 */
|
|
|
|
|
|
const registerForm = ref({
|
|
|
|
|
|
/* 用户手机号 */
|
|
|
|
|
|
phonenumber: '',
|
|
|
|
|
|
/* 登录账号 */
|
|
|
|
|
|
username: '',
|
|
|
|
|
|
/* 登录密码 */
|
|
|
|
|
|
password: '',
|
|
|
|
|
|
/* 验证码 */
|
|
|
|
|
|
code: '',
|
|
|
|
|
|
/* 确认密码 */
|
|
|
|
|
|
checkPass: ''
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
/* 获取验证码 */
|
|
|
|
|
|
const getCodeInfo = () => {
|
|
|
|
|
|
registerFormRef.value.validateField('phonenumber', async (valid: any) => {
|
|
|
|
|
|
if (valid) {
|
|
|
|
|
|
const res: any = await getCodeInfoApi(registerForm.value.phonenumber)
|
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
|
ElMessage({
|
|
|
|
|
|
showClose: true,
|
|
|
|
|
|
message: res.msg,
|
|
|
|
|
|
type: 'success'
|
|
|
|
|
|
})
|
|
|
|
|
|
reduceSeconds()
|
|
|
|
|
|
} else {
|
|
|
|
|
|
ElMessage({
|
|
|
|
|
|
showClose: true,
|
|
|
|
|
|
message: res.msg,
|
|
|
|
|
|
type: 'info'
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 立即注册按钮 */
|
|
|
|
|
|
const handlerRegisterNow = () => {
|
|
|
|
|
|
registerFormRef.value.validate(async (valid: any) => {
|
|
|
|
|
|
if (valid) {
|
|
|
|
|
|
const res: any = await registerNowApi(registerForm.value)
|
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
|
ElMessage({
|
|
|
|
|
|
showClose: true,
|
|
|
|
|
|
message: '注册成功',
|
|
|
|
|
|
type: 'success'
|
|
|
|
|
|
})
|
|
|
|
|
|
router.push('/login')
|
|
|
|
|
|
} else {
|
|
|
|
|
|
ElMessage({
|
|
|
|
|
|
showClose: true,
|
|
|
|
|
|
message: res.msg,
|
|
|
|
|
|
type: 'success'
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 手机号码校验规则 */
|
|
|
|
|
|
const validatePhone = (rule: any, value: any, callback: any) => {
|
|
|
|
|
|
// let phone = value.replace(/\s/g, '')
|
|
|
|
|
|
let regexpPhone = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/
|
|
|
|
|
|
if (value === '') {
|
|
|
|
|
|
callback(new Error('手机号码不能为空'))
|
|
|
|
|
|
} else if (!regexpPhone.test(value)) {
|
|
|
|
|
|
callback(new Error('手机号码输入不合法'))
|
|
|
|
|
|
} else {
|
|
|
|
|
|
callback()
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
/* 确认密码校验 */
|
|
|
|
|
|
const validatePass2 = (rule: any, value: any, callback: any) => {
|
|
|
|
|
|
if (value === '') {
|
|
|
|
|
|
callback(new Error('请确认密码'))
|
|
|
|
|
|
} else if (value !== registerForm.value.password) {
|
|
|
|
|
|
callback(new Error('两次密码不一致，请确定'))
|
|
|
|
|
|
} else {
|
|
|
|
|
|
callback()
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
/* 校验规则 */
|
|
|
|
|
|
const registerRules = ref({
|
|
|
|
|
|
phonenumber: [{ required: true, validator: validatePhone, trigger: 'blur' }],
|
|
|
|
|
|
username: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
|
|
|
|
|
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
|
|
|
|
|
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
|
|
|
|
|
|
checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const registerFormRef: any = ref(null)
|
|
|
|
|
|
|
|
|
|
|
|
/* 获取验证码按钮禁用 */
|
|
|
|
|
|
const getCodeBtnDisabled = ref(false)
|
|
|
|
|
|
|
|
|
|
|
|
/* 定义倒计时的定时器 */
|
|
|
|
|
|
const secondsTimer: any = ref(null)
|
|
|
|
|
|
|
|
|
|
|
|
/* 剩余秒数 */
|
|
|
|
|
|
const residuSeconds: any = ref(60)
|
|
|
|
|
|
|
|
|
|
|
|
/* 开启一个定时器 */
|
|
|
|
|
|
const reduceSeconds = () => {
|
|
|
|
|
|
getCodeBtnDisabled.value = true
|
|
|
|
|
|
secondsTimer.value = setInterval(() => {
|
|
|
|
|
|
if (residuSeconds.value === 0) {
|
|
|
|
|
|
clearInterval(secondsTimer.value)
|
|
|
|
|
|
secondsTimer.value = null
|
|
|
|
|
|
residuSeconds.value = 60
|
|
|
|
|
|
getCodeBtnDisabled.value = false
|
|
|
|
|
|
return
|
|
|
|
|
|
} else {
|
|
|
|
|
|
residuSeconds.value--
|
|
|
|
|
|
}
|
|
|
|
|
|
}, 1000)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
|
|
if (secondsTimer.value) {
|
|
|
|
|
|
secondsTimer.value = null
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<!-- 注册页面 -->
|
|
|
|
|
|
<div class="register-container">
|
|
|
|
|
|
<div class="register-form">
|
|
|
|
|
|
<h3>机具租赁共享平台</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="register-container-box">
|
|
|
|
|
|
<div class="register-type">用户注册</div>
|
|
|
|
|
|
|
|
|
|
|
|
<el-form
|
|
|
|
|
|
label-position="top"
|
|
|
|
|
|
:model="registerForm"
|
|
|
|
|
|
:rules="registerRules"
|
|
|
|
|
|
ref="registerFormRef">
|
|
|
|
|
|
<el-form-item label="用户手机号" prop="phonenumber">
|
|
|
|
|
|
<el-input
|
|
|
|
|
|
v-model.trim="registerForm.phonenumber"
|
|
|
|
|
|
placeholder="输入手机号"
|
|
|
|
|
|
clearable />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="登录帐号" prop="username">
|
|
|
|
|
|
<el-input
|
|
|
|
|
|
v-model.trim="registerForm.username"
|
|
|
|
|
|
placeholder="登录帐号"
|
|
|
|
|
|
clearable
|
|
|
|
|
|
type="text" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="登录密码" prop="password">
|
|
|
|
|
|
<el-input
|
|
|
|
|
|
v-model.trim="registerForm.password"
|
|
|
|
|
|
placeholder="登录密码"
|
|
|
|
|
|
clearable
|
|
|
|
|
|
type="password"
|
|
|
|
|
|
show-password />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
|
|
<el-form-item label="确认密码" prop="checkPass">
|
|
|
|
|
|
<el-input
|
|
|
|
|
|
v-model.trim="registerForm.checkPass"
|
|
|
|
|
|
placeholder="确认密码"
|
|
|
|
|
|
clearable
|
|
|
|
|
|
type="password"
|
|
|
|
|
|
show-password />
|
|
|
|
|
|
</el-form-item>
|
2023-12-09 21:53:41 +08:00
|
|
|
|
<el-row>
|
|
|
|
|
|
<el-form-item label="验证码" class="get-code" prop="code">
|
|
|
|
|
|
<el-col :span="16">
|
2023-12-09 17:00:58 +08:00
|
|
|
|
<div>
|
|
|
|
|
|
<el-input
|
|
|
|
|
|
v-model.trime="registerForm.code"
|
|
|
|
|
|
placeholder="验证码"
|
|
|
|
|
|
clearable
|
|
|
|
|
|
type="text" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
2023-12-09 21:53:41 +08:00
|
|
|
|
|
2023-12-09 17:00:58 +08:00
|
|
|
|
<el-col :span="8">
|
2023-12-09 21:53:41 +08:00
|
|
|
|
<div style="width: 100%">
|
2023-12-09 17:00:58 +08:00
|
|
|
|
<el-button
|
2023-12-09 22:58:48 +08:00
|
|
|
|
style="width: calc(100% - 8px); margin-left: 8px"
|
2023-12-09 17:00:58 +08:00
|
|
|
|
type="primary"
|
|
|
|
|
|
@click="getCodeInfo"
|
|
|
|
|
|
:disabled="getCodeBtnDisabled">
|
2023-12-09 22:58:48 +08:00
|
|
|
|
{{
|
|
|
|
|
|
getCodeBtnDisabled
|
|
|
|
|
|
? `${residuSeconds}秒后重新发送`
|
|
|
|
|
|
: '获取验证码'
|
|
|
|
|
|
}}
|
2023-12-09 17:00:58 +08:00
|
|
|
|
</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</el-col>
|
2023-12-09 21:53:41 +08:00
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
2023-12-09 17:00:58 +08:00
|
|
|
|
<el-form-item>
|
|
|
|
|
|
<el-button type="primary" @click="handlerRegisterNow" style="width: 100%">
|
|
|
|
|
|
立 即 注 册
|
|
|
|
|
|
</el-button>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item class="forget-password">
|
|
|
|
|
|
<span>已有账号？</span>
|
|
|
|
|
|
<a @click="$router.push('/login')">去登录 ></a>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
|
.register-container {
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
background-color: #125ab6;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
.register-form {
|
|
|
|
|
|
width: 500px;
|
|
|
|
|
|
// height: 360px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
|
|
|
|
h3 {
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.register-container-box {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
background-color: #c7dff4;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
.register-type {
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
// display: flex;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
div {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
|
color: #3498db;
|
|
|
|
|
|
border-bottom: 1px solid #3498db;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.el-form {
|
|
|
|
|
|
padding: 0 50px;
|
|
|
|
|
|
|
|
|
|
|
|
.el-input {
|
|
|
|
|
|
height: 37px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.el-button {
|
|
|
|
|
|
// width: 100%;
|
|
|
|
|
|
height: 37px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.forget-password {
|
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.forget-password .el-form-item__content {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
|
color: #3498db;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2023-12-09 22:58:48 +08:00
|
|
|
|
.get-code {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
2023-12-09 17:00:58 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
