<script setup lang="ts">
|
import {useRouter,useRoute} from 'vue-router'
|
import { reactive, ref } from 'vue'
|
import type { FormProps,FormInstance, FormRules } from 'element-plus'
|
import {ElMessage,ElMessageBox} from "element-plus";
|
import request from "@/utils/request";
|
import { Lock,Avatar } from '@element-plus/icons-vue'
|
// import {Avatar, UserFilled} from "@element-plus/icons-vue";
|
|
import { useI18n } from 'vue-i18n'
|
const { t } = useI18n()
|
let language = ref(localStorage.getItem('lang') || 'zh')
|
|
const router = useRouter()
|
const route = useRoute()
|
let loginLoadings= ref(false)
|
const labelPosition = ref<FormProps['labelPosition']>('right')
|
|
//注册用户参数
|
const register = reactive({
|
userName: '',
|
// loginName: '',
|
passWord: '',
|
confirmPassword:''
|
})
|
|
/*方法*/
|
const checkName = (rule: any, value: any, callback: any) => {
|
if (value.trim() === '') {
|
callback(new Error(t('login.namea')))
|
}else if(value.length>16){
|
callback(new Error(t('login.len')))
|
}else{
|
callback()
|
}
|
}
|
|
const checkPassword = (rule: any, value: any, callback: any) => {
|
if (value.trim() === '') {
|
callback(new Error(t('login.passnull')))
|
}else if(value.length>16 || value.length<6){
|
callback(new Error(t('login.leng')))
|
}else{
|
callback()
|
}
|
}
|
|
const checkConfirmPassword = (rule: any, value: any, callback: any) => {
|
if (value.trim() === '') {
|
callback(new Error(t('login.spwn')))
|
}else if(value !== register.passWord){
|
callback(new Error(t('login.depass')))
|
}else if(value.length>16 || value.length<6){
|
callback(new Error(t('login.leng')))
|
}else{
|
callback()
|
}
|
}
|
|
const ruleFormRef = ref<FormInstance>()
|
const rules = reactive<FormRules<typeof register>>({
|
userName: [{ validator: checkName, trigger: 'blur' }],
|
passWord:[{ validator: checkPassword, trigger: 'blur' }],
|
confirmPassword:[{ validator: checkConfirmPassword, trigger: 'blur' }],
|
// loginName: [{ validator: validateString, trigger: 'blur' }]
|
})
|
|
const submitForm = (formEl: FormInstance | undefined) => {
|
if (!formEl) return
|
formEl.validate((valid) => {
|
if (valid) {
|
loginLoadings.value=true
|
request.post('/user/register',
|
register).then((res) => {
|
if(res['code']==200){
|
console.log(res.data)
|
ElMessageBox.alert(
|
`<strong>用户:<i style="color: #1890FF;">'${res.data.userName}</i>'
|
<br>账号ID:<i style="color: #1890FF;">${res.data.loginName}</i> </strong>`,
|
'注册提示：',
|
{
|
dangerouslyUseHTMLString: true,
|
confirmButtonText: '登陆',
|
center: true,
|
}
|
).then(()=>{
|
router.push({
|
path:'/login',
|
query: {
|
id: res.data.loginName
|
}
|
})
|
})
|
|
ElMessage.success(t('register.registerSuccessful'))
|
loginLoadings.value=false
|
} else {
|
ElMessage.error(res['msg'])
|
return false
|
}
|
}).catch(error => {
|
ElMessage.error(t('main.connectErr'))
|
loginLoadings.value=false
|
return false
|
})
|
}
|
})
|
}
|
const toLogin = () => {
|
router.push({
|
path:'/login',
|
})
|
}
|
</script>
|
|
<template>
|
|
<div class="mainDiv" >
|
<div id="main-login">
|
<div>
|
<div style="position: absolute; left: 8vw; top: 6vw; ">
|
<img src="../../src/assets/3.png">
|
</div>
|
<div style="position: absolute; left: 15vw; top: 22vw; font-size: 55px;color: rgba(29, 33, 41, 1);">
|
{{ $t('northglassMESsystem') }}
|
</div>
|
</div>
|
<div id="div-login">
|
<el-form
|
@submit.native.prevent
|
ref="ruleFormRef"
|
:model="register"
|
status-icon
|
:rules="rules"
|
label-width="75px"
|
>
|
<div id="title">{{ $t('register.newuserregister') }}</div>
|
<div id="center">
|
<!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">姓名</div> -->
|
<el-form-item prop="userName" :label="$t('register.name')">
|
<el-input
|
style="width: 200px;"
|
v-model="register.userName"
|
type="text"
|
autocomplete="off"
|
:prefix-icon="Avatar"
|
:placeholder="$t('register.inputname')"
|
/>
|
</el-form-item>
|
<!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">密码</div> -->
|
<el-form-item prop="passWord" :label="$t('register.password')">
|
<el-input
|
style="width: 200px;"
|
v-model="register.passWord"
|
type="password"
|
autocomplete="off"
|
:prefix-icon="Lock"
|
:placeholder="$t('register.pwErr')"
|
show-password
|
/>
|
</el-form-item>
|
<!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">确认密码</div> -->
|
<el-form-item prop="confirmPassword" :label="$t('register.passwordation')">
|
<el-input
|
style="width: 200px;"
|
v-model="register.confirmPassword"
|
type="password"
|
:prefix-icon="Lock"
|
autocomplete="off"
|
show-password
|
:placeholder="$t('register.pwErration')"
|
/>
|
</el-form-item>
|
<el-form-item id="submitForm">
|
<el-button
|
:loading="loginLoadings"
|
type="primary"
|
@click="submitForm(ruleFormRef)"
|
plain
|
>{{ $t('register.registration') }}
|
</el-button>
|
<el-button
|
type="primary"
|
@click="toLogin"
|
plain
|
>{{ $t('register.false') }}
|
</el-button>
|
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
#div-login{
|
margin-top: 5%;
|
/* margin-top: 20%; */
|
/* margin-left: 650px; */
|
background-color: #fff;
|
border-radius: 4px;
|
float: right;
|
width: 40%;
|
height: 60%;
|
min-width: 318px;
|
box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);
|
}
|
|
#center{
|
margin-top: 45px;
|
margin-left: 100px;
|
}
|
.mainDiv{
|
overflow: hidden;
|
min-width: 718px;
|
background-image: url("../../src/assets/background.jpg");
|
|
}
|
#main-login{
|
margin: 150px auto 0 auto;
|
height: 70vh;
|
width: 80vw;
|
}
|
#submitForm{
|
margin-top: 30px;
|
margin-left: -10px;
|
}
|
#title{
|
font-size: 25px;
|
text-align: center;
|
margin-top: 10px;
|
}
|
</style>
|
