国际化命名

wangfei

14 小时以前 2b91b242113bd10f1be241d19ab154e9ad6506cd

 UI-Project/src/views/RegisterView.vue

@@ -4,14 +4,15 @@
  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: '',
@@ -19,40 +20,36 @@
    passWord: '',
    confirmPassword:''
  })

  /*方法*/
  const checkName = (rule: any, value: any, callback: any) => {
    if (value.trim() === '') {
      callback(new Error('姓名不能为空'))
      callback(new Error(t('login.namea')))
    }else if(value.length>16){
      callback(new Error('长度不能超过16'))
      callback(new Error(t('login.len')))
    }else{
      callback()
    }
  }

  const checkPassword = (rule: any, value: any, callback: any) => {
    if (value.trim() === '') {
      callback(new Error('密码不能为空'))
      callback(new Error(t('login.passnull')))
    }else if(value.length>16 || value.length<6){
      callback(new Error('密码长度不能低于6或超过16'))
      callback(new Error(t('login.leng')))
    }else{
      callback()
    }
  }

  const checkConfirmPassword = (rule: any, value: any, callback: any) => {
    if (value.trim() === '') {
      callback(new Error('确认密码不能为空'))
      callback(new Error(t('login.spwn')))
    }else if(value !== register.passWord){
      callback(new Error('两次密码不相同'))
      callback(new Error(t('login.depass')))
    }else if(value.length>16 || value.length<6){
      callback(new Error('密码长度不能低于6或超过16'))
      callback(new Error(t('login.leng')))
    }else{
      callback()
    }
  }

  const ruleFormRef  = ref<FormInstance>()
  const rules = reactive<FormRules<typeof register>>({
    userName: [{ validator: checkName, trigger: 'blur' }],
@@ -60,7 +57,6 @@
    confirmPassword:[{ validator: checkConfirmPassword, trigger: 'blur' }],
    // loginName: [{ validator: validateString, trigger: 'blur' }]
  })

  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
@@ -69,7 +65,6 @@
        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>`,
@@ -87,15 +82,14 @@
                }
              })
            })

            ElMessage.success(`注册成功`)
            ElMessage.success(t('register.registerSuccessful'))
            loginLoadings.value=false
          } else {
            ElMessage.error(res['msg'])
            return false
          }
        }).catch(error => {
          ElMessage.error("服务器连接失败")
          ElMessage.error(t('main.connectErr'))
          loginLoadings.value=false
          return false
        })
@@ -107,15 +101,8 @@
                path:'/login',
              })
  }




  // console.log(route.params)
</script>

<template>
  
  <div class="mainDiv" >
    <div id="main-login">
     <div>
@@ -123,7 +110,7 @@
        <img src="../../src/assets/3.png">
      </div> 
       <div style="position: absolute; left: 15vw; top: 22vw; font-size: 55px;color: rgba(29, 33, 41, 1);">
        北玻MES系统
        {{ $t('northglassMESsystem') }}
      </div>
    </div>
    <div id="div-login">
@@ -135,33 +122,33 @@
            :rules="rules"
            label-width="75px"
        >
          <div id="title">注册新用户</div>
          <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="姓名:">
          <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="请输入姓名"
                :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="密码:">
          <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="请输入密码"
                :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="确认密码:">
          <el-form-item prop="confirmPassword" :label="$t('register.passwordation')">
            <el-input
            style="width: 200px;"
                v-model="register.confirmPassword" 
@@ -169,7 +156,7 @@
                :prefix-icon="Lock"
                autocomplete="off"
                show-password
                placeholder="请确认密码"
                :placeholder="$t('register.pwErration')"
            />
          </el-form-item>
          <el-form-item id="submitForm">
@@ -178,15 +165,14 @@
                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>
@@ -194,27 +180,7 @@
</div>
</div>
</template>

<style scoped>
/* #main-div{
  position: absolute;
  left:75%;
  top:45%;
  transform: translate(-50%, -50%);
} */
/* #register{
  background-color: #fff;
  width: 32vw;
  height: 35vh;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 280px;
} */
/* .el-form{
  max-width: 300px;
} */
#div-login{
  margin-top: 5%;
  /* margin-top: 20%; */
@@ -227,7 +193,6 @@
  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;
@@ -236,7 +201,6 @@
  overflow: hidden;
  min-width: 718px;
  background-image: url("../../src/assets/background.jpg");

}
#main-login{
  margin: 150px auto 0 auto;