| | |
| | | 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 { 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: '', |
| | |
| | | passWord: '', |
| | | confirmPassword:'' |
| | | }) |
| | | |
| | | /*方法*/ |
| | | const checkName = (rule: any, value: any, callback: any) => { |
| | | if (value.trim() === '') { |
| | |
| | | callback() |
| | | } |
| | | } |
| | | |
| | | const checkPassword = (rule: any, value: any, callback: any) => { |
| | | if (value.trim() === '') { |
| | | callback(new Error(t('login.passnull'))) |
| | |
| | | callback() |
| | | } |
| | | } |
| | | |
| | | const checkConfirmPassword = (rule: any, value: any, callback: any) => { |
| | | if (value.trim() === '') { |
| | | callback(new Error(t('login.spwn'))) |
| | |
| | | callback() |
| | | } |
| | | } |
| | | |
| | | const ruleFormRef = ref<FormInstance>() |
| | | const rules = reactive<FormRules<typeof register>>({ |
| | | userName: [{ validator: checkName, trigger: 'blur' }], |
| | |
| | | confirmPassword:[{ validator: checkConfirmPassword, trigger: 'blur' }], |
| | | // loginName: [{ validator: validateString, trigger: 'blur' }] |
| | | }) |
| | | |
| | | const submitForm = (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return |
| | | formEl.validate((valid) => { |
| | |
| | | } |
| | | }) |
| | | }) |
| | | |
| | | ElMessage.success(t('register.registerSuccessful')) |
| | | loginLoadings.value=false |
| | | } else { |
| | |
| | | }) |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | |
| | | <div class="mainDiv" > |
| | | <div id="main-login"> |
| | | <div> |
| | |
| | | plain |
| | | >{{ $t('register.false') }} |
| | | </el-button> |
| | | |
| | | </el-form-item> |
| | | </div> |
| | | </el-form> |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | #div-login{ |
| | | margin-top: 5%; |
| | |
| | | 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; |
| | |
| | | overflow: hidden; |
| | | min-width: 718px; |
| | | background-image: url("../../src/assets/background.jpg"); |
| | | |
| | | } |
| | | #main-login{ |
| | | margin: 150px auto 0 auto; |