172 lines
4.0 KiB
Vue
172 lines
4.0 KiB
Vue
<template>
|
|
<div class="module">
|
|
<div class="module_mian">
|
|
<div class="module_title">注册帐户</div>
|
|
<div class="module_desc">输入用户名 & 密码</div>
|
|
<div class="module_m">
|
|
<div class="module_text">用户名</div>
|
|
<input class="module_input" type="text" placeholder="输入用户名" v-model="register.username" />
|
|
</div>
|
|
<div class="module_m">
|
|
<div class="module_text">密码</div>
|
|
<input class="module_input" type="password" placeholder="输入密码" v-model="register.password" />
|
|
</div>
|
|
<div class="module_m">
|
|
<div class="module_text">确认密码</div>
|
|
<div class="module_code">
|
|
<input class="module_input" type="password" placeholder="再次输入密码" v-model="register.confirmPassword" />
|
|
</div>
|
|
</div>
|
|
<!-- <div class="module_m">-->
|
|
<!-- <div class="module_text">验证码</div>-->
|
|
<!-- <div class="module_code">-->
|
|
<!-- <input class="module_code_input" type="text" placeholder="输入验证码" v-model="vftcode" />-->
|
|
<!-- <img class="module_code_img" src="/codeimg.png" @click="onCode">-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="module_radio"><input type="radio"/>记住密码 </div>-->
|
|
<div class="forgetpwd" @click="router.push('/login')">有账号？</div>
|
|
<button class="module_button" @click="onRegister">注册</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useRouter } from "vue-router";
|
|
import { registerFront } from '~/api/user/frontUserApi'
|
|
const router = useRouter();
|
|
const register = reactive({
|
|
username: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
captcha: '',
|
|
uuid: ''
|
|
})
|
|
|
|
/**
|
|
* 注册成功
|
|
*/
|
|
const onRegister = () => {
|
|
if (register.username == 'admin') {
|
|
ElMessage.warning("不能创建账号Admin")
|
|
return
|
|
}
|
|
registerFront(register).then(() =>{
|
|
ElMessage.success("注册成功~")
|
|
router.push("/login")
|
|
})
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.module{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
background: url("/login/e36341619bf8f04dcbdc6b01105a85a.png");
|
|
background-size: 100% 100%;
|
|
.module_mian{
|
|
width: 26%;
|
|
background: #FFFFFF;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
.module_title{
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
color:#333333;
|
|
}
|
|
.module_desc{
|
|
font-size: 12px;
|
|
text-align: center;
|
|
color:#a7a7a7;
|
|
margin-bottom: 20px;
|
|
}
|
|
.module_m{
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
height: auto;
|
|
margin-top: 10px;
|
|
.module_text{
|
|
font-size: 14px;
|
|
color: #333333;
|
|
margin-bottom: 5px;
|
|
}
|
|
.module_input{
|
|
width: 96%;
|
|
height: 40px;
|
|
padding-left: 2%;
|
|
padding-right: 2%;
|
|
border:1px solid #eee;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
}
|
|
.module_code{
|
|
width: 96%;
|
|
display: flex;
|
|
align-items: center;
|
|
.module_code_input{
|
|
width: 60%;
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
border:1px solid #eee;
|
|
font-size: 12px;
|
|
padding-left: 2%;
|
|
padding-right: 2%;
|
|
}
|
|
.module_code_img{
|
|
width: 130px;
|
|
height: 40px;
|
|
border-radius: 5px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
.module_radio{
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
font-size: 14px;
|
|
color: #333333;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
}
|
|
.module_radio input{
|
|
margin-right: 5px;
|
|
}
|
|
.forgetpwd{
|
|
cursor: pointer;
|
|
margin: 0 auto;
|
|
width: 80%;
|
|
font-size: 14px;
|
|
color: #328d86;
|
|
margin-top: 10px;
|
|
}
|
|
.module_button{
|
|
margin: 0 auto;
|
|
display: block;
|
|
width: 80%;
|
|
background:#328d86;
|
|
color: #FFFFFF;
|
|
height: 40px;
|
|
margin-top: 20px;
|
|
border-radius: 5px;
|
|
font-weight: 500;
|
|
}
|
|
.module_button:active{
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<route lang="json">
|
|
{
|
|
"meta": {
|
|
"layout": "notFound"
|
|
}
|
|
}
|
|
</route>
|