313 lines
7.2 KiB
Vue
313 lines
7.2 KiB
Vue
<template>
|
||
<div>
|
||
<h2>注册</h2>
|
||
<p class="register" @click="$emit('setState',false)">
|
||
我有账号，点击登录
|
||
</p>
|
||
<el-form
|
||
ref="registerRuleFormRef"
|
||
:model="register"
|
||
:rules="registerRules"
|
||
label-width="0px"
|
||
>
|
||
<el-form-item
|
||
style="margin-bottom: 10px"
|
||
prop="nickname"
|
||
class="app-form-center"
|
||
label-width="80px"
|
||
label="昵称"
|
||
>
|
||
<el-input
|
||
v-model="register.nickname"
|
||
size="large"
|
||
type="text"
|
||
maxlength="50"
|
||
|
||
placeholder="请输入您的昵称"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
style="margin-bottom: 10px"
|
||
prop="name"
|
||
class="app-form-center"
|
||
label-width="80px"
|
||
label="用户名"
|
||
>
|
||
<el-input
|
||
v-model="register.name"
|
||
size="large"
|
||
type="text"
|
||
maxlength="50"
|
||
placeholder="请输入您的用户名"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
style="margin-bottom: 10px"
|
||
prop="email"
|
||
class="app-form-center"
|
||
label-width="80px"
|
||
label="邮箱"
|
||
>
|
||
<el-input
|
||
v-model="register.email"
|
||
size="large"
|
||
type="text"
|
||
maxlength="50"
|
||
placeholder="请输入您的邮箱"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
style="margin-bottom: 10px"
|
||
prop="password"
|
||
class="app-form-center"
|
||
label-width="80px"
|
||
label="密码"
|
||
>
|
||
<el-input
|
||
v-model="register.password"
|
||
placeholder="请输入您的密码"
|
||
type="password"
|
||
autocomplete="off"
|
||
size="large"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
style="margin-bottom: 10px"
|
||
prop="entryPassword"
|
||
class="app-form-center"
|
||
label-width="80px"
|
||
label="确认密码"
|
||
>
|
||
<el-input
|
||
v-model="register.entryPassword"
|
||
placeholder="请输入二次确认密码"
|
||
type="password"
|
||
autocomplete="off"
|
||
size="large"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item
|
||
label-width="80px"
|
||
label="验证码"
|
||
style="margin-bottom: 10px"
|
||
class="app-form-center"
|
||
prop="verify"
|
||
|
||
>
|
||
<div class="verify">
|
||
<div style="width: 80px">
|
||
<el-input
|
||
v-model="register.verify"
|
||
placeholder="验证码"
|
||
size="large"
|
||
autocomplete="off"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<img src="/api/get/imgCode" height="30px" alt="">
|
||
</div>
|
||
<div>换一张</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="" prop="agreement">
|
||
<div class="">
|
||
<div>
|
||
<el-checkbox v-model="register.agreement" />
|
||
我已阅读并同意“铜壶协议和隐私条款”
|
||
</div>
|
||
<div class="submit-btn" @click="onRegister">
|
||
注册
|
||
</div>
|
||
|
||
<div class="Short-flex">
|
||
<span @click="$emit('setMssages',true)">短信快捷登录</span>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import {reactive, defineComponent, toRefs, onBeforeMount, ref, onUnmounted, unref, getCurrentInstance} from 'vue'
|
||
import verify from './verify.png'
|
||
import {types} from "sass";
|
||
import {register, sendCode} from "@/api/work";
|
||
import {ElForm, ElMessage} from "element-plus";
|
||
import {registerUserApi} from "@/api/user";
|
||
let time:number = -9999
|
||
export default defineComponent({
|
||
emits:["setState","setMssages"],
|
||
props:{
|
||
islogin:{
|
||
type:Boolean,
|
||
default:()=>false
|
||
}
|
||
},
|
||
setup(props,{emit}) {
|
||
const { proxy }: any = getCurrentInstance()
|
||
const registerRuleFormRef = ref<InstanceType<typeof ElForm>>()
|
||
const onRegister = () => {
|
||
if (!register.agreement) {
|
||
proxy.$message.error('请先勾选协议', 2000)
|
||
return
|
||
}
|
||
const formWrap = unref<any>(registerRuleFormRef)
|
||
if (!formWrap) return
|
||
// 验证成功
|
||
formWrap.validate((valid: boolean) => {
|
||
console.log(valid)
|
||
if (valid) {
|
||
registerUserApi({
|
||
password_1: register.password,
|
||
password_2: register.entryPassword,
|
||
email: register.email,
|
||
agree: register.agreement
|
||
}).then((res: any) => {
|
||
console.log(res)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
// 注册验证
|
||
const registerRules = reactive({
|
||
email: [
|
||
// { required: true, message: '邮箱不能为空', trigger: 'blur' },
|
||
{
|
||
trigger: 'blur',
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
console.log(rule, value, callback)
|
||
|
||
if (!value) {
|
||
return callback(new Error('请填写您的email'))
|
||
}
|
||
callback()
|
||
}
|
||
}
|
||
],
|
||
password: [
|
||
{
|
||
required: true,
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (!value) {
|
||
return callback(new Error('请填写您的密码'))
|
||
}
|
||
callback()
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
entryPassword: [
|
||
{
|
||
// required: true,
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (value !== register.password) {
|
||
return callback(new Error('两次密码不一致'))
|
||
}
|
||
callback()
|
||
},
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
verify: [
|
||
{
|
||
required: true,
|
||
trigger: 'blur',
|
||
message: '请填写验证码'
|
||
}
|
||
]
|
||
})
|
||
const register = reactive({
|
||
email: '',
|
||
password: '',
|
||
nickname: '',
|
||
name: '',
|
||
entryPassword: '',
|
||
agreement: false,
|
||
verify: '',
|
||
imgVerify: null
|
||
})
|
||
return {
|
||
register,
|
||
registerRuleFormRef,
|
||
registerRules,
|
||
onRegister
|
||
}
|
||
},
|
||
mounted() {
|
||
clearInterval(time)
|
||
},
|
||
onBeforeUnmount() {
|
||
clearInterval(time)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.forms-sumit {
|
||
width: 360px;
|
||
transition: all 1s;
|
||
}
|
||
.submit-btn {
|
||
outline: none;
|
||
margin: 0 auto;
|
||
padding: 12px 30px;
|
||
line-height: 1;
|
||
font-size: 16px;
|
||
border-radius: 60px;
|
||
color: #fff;
|
||
background-color: var(--system-primary-color);
|
||
border: none;
|
||
&:hover {
|
||
background-color: var(--system-primary-text-color);
|
||
}
|
||
}
|
||
.form-center {
|
||
text-align: center;
|
||
}
|
||
.verify {
|
||
width: 100%;
|
||
text-align: left;
|
||
// display: flex;
|
||
> div {
|
||
display: inline-block;
|
||
}
|
||
> div:first-child {
|
||
width: 80px;
|
||
}
|
||
> div:nth-child(2) {
|
||
margin-left: 10px;
|
||
vertical-align: middle;
|
||
}
|
||
> div:nth-child(3) {
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
img {
|
||
width: 100%;
|
||
display: block;
|
||
transition: transform 0.9s ease-in-out;
|
||
transition-delay: 0.5s;
|
||
}
|
||
.Short-flex {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
> span {
|
||
color: #19abdb;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.el-form-item{
|
||
align-items: center;
|
||
}
|
||
.register {
|
||
text-align: center;
|
||
color: #19abdb;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
</style>
|