用户注册中心,后端均未实现

readme.md

@@ -1,17 +1,9 @@
-## 个人注册中心
-
-未完成
+## 用户注册中心,后端均未实现
 ![](./picture/register.jpg)
 
-## 验证码及用户注册
-登录页面
+## 登录页面验证码及用户注册
 ![](./picture/Verification_1.jpg)
-个人注册中心
-![](./picture/Verification_2.jpg)
-+ login页面添加“记住密码” && "注册" && "重置"
-+ 使用vueImageVerify完成简单的图片验证码功能并测试
-+ 完成登录页“重置”功能
 
-## 个人中心截图
+## 个人中心
 ![](./picture/personal_1.png)
 ![](./picture/personal_2.png)

src/api/register.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function register(data) {
+  return request({
+    url: '/api/auth/register',
+    method: 'post',
+    data
+  })
+}

src/function-namespace/auth/LoginFunc.js

@@ -1,112 +0,0 @@
-import auth from '@/api/auth'
-import utils from '@/utils/utils'
-import router from '../../router/index'
-import Vue from 'vue'
-
-// 登录表单数据信息
-const loginForm = {
-  username: '',
-  password: '',
-  // 验证码
-  code: ''
-}
-// 自定义验证码校验规则
-const validateCode = (rule, value, callback) => {
-  // 验证码不区分大小写
-  if (value.toString().toLocaleLowerCase() !== code.toString().toLocaleLowerCase()) {
-    callback(new Error('验证码输入错误'))
-  } else {
-    callback()
-  }
-}
-// 登录表单的校验规则
-const loginFormRules = {
-  username: [
-    {
-      required: true,
-      message: '请输入账号',
-      trigger: 'blur'
-    }
-  ],
-  password: [
-    {
-      required: true,
-      message: '请输入密码',
-      trigger: 'blur'
-    },
-    {
-      min: 5,
-      message: '密码不能小于5个字符',
-      trigger: 'blur'
-    }
-  ],
-  code: [
-    {
-      required: true,
-      message: '请输入验证码',
-      trigger: 'blur'
-    },
-    {
-      validator: validateCode,
-      trigger: 'blur'
-    }
-  ]
-}
-// 后台验证码id
-let codeId
-// 后台的验证码
-let code
-// 获取后台验证码
-const getCode = () => {
-  auth.getCode(codeId).then(resp => {
-    code = resp.data
-  })
-}
-// 点击图片刷新验证码
-const changeCode = () => {
-  const codeImg = document.querySelector('#code')
-  codeId = utils.getRandomId()
-  codeImg.src = `${process.env.VUE_APP_CAPTCHA_URL}/util/getCodeImg?id=` + codeId
-  codeImg.onload = () => getCode()
-}
-const toRegisterPage = () => {
-  router.push('/register')
-}
-// 登录
-const login = (formEl) => {
-  utils.validFormAndInvoke(formEl, () => {
-    auth.login(loginForm).then(resp => {
-      if (resp.code === 200) {
-        localStorage.setItem('authorization', resp.data)
-        Vue.prototype.$notify({
-          title: 'Tips',
-          message: '登陆成功^_^',
-          type: 'success',
-          duration: 2000
-        })
-        router.push('/index')
-      }
-    }).catch(err => {
-      console.log(err)
-      // 请求出错
-      changeCode()
-      getCode()
-      Vue.prototype.$notify({
-        title: 'Tips',
-        message: err.response.data.errMsg,
-        type: 'error',
-        duration: 2000
-      })
-    })
-  })
-}
-
-export default {
-  loginForm,
-  loginFormRules,
-  code,
-  getCode,
-  changeCode,
-  toRegisterPage,
-  login
-}

src/function-namespace/auth/RegisterFunc.js

@@ -1,120 +0,0 @@
-import router from '@/router'
-import auth from '@/api/auth'
-import utils from '@/utils/utils'
-
-// 注册表单数据信息
-const registerForm = {
-  username: '',
-  trueName: '',
-  password: '',
-  code: ''
-}
-// 自定义验证码校验规则
-const validateCode = (rule, value, callback) => {
-  // 验证码不区分大小写
-  if (value.toString().toLocaleLowerCase() !== code.toString().toLocaleLowerCase()) {
-    callback(new Error('验证码输入错误'))
-  } else {
-    callback()
-  }
-}
-// 自定义用户名校验规则
-const validateUsername = (rule, value, callback) => {
-  auth.checkUsername(registerForm.username)
-    .then(resp => {
-      if (resp.data) {
-        callback()
-      } else {
-        callback(new Error('用户名已存在'))
-      }
-    })
-}
-// 登录表单的校验规则
-const registerFormRules = {
-  username: [
-    {
-      required: true,
-      message: '请输入账号',
-      trigger: 'blur'
-    },
-    {
-      validator: validateUsername,
-      trigger: 'blur'
-    }
-  ],
-  trueName: [
-    {
-      required: true,
-      message: '请输入您的姓名',
-      trigger: 'blur'
-    }
-  ],
-  password: [
-    {
-      required: true,
-      message: '请输入密码',
-      trigger: 'blur'
-    },
-    {
-      min: 5,
-      message: '密码不能小于5个字符',
-      trigger: 'blur'
-    }
-  ],
-  code: [
-    {
-      required: true,
-      message: '请输入验证码',
-      trigger: 'blur'
-    },
-    {
-      validator: validateCode,
-      trigger: 'blur'
-    }
-  ]
-}
-
-const toLoginPage = () => {
-  router.push('/')
-}
-// 后台的验证码
-let code
-// 后台验证码id
-let codeId
-// 获取后台验证码
-const getCode = () => {
-  auth.getCode(codeId).then(resp => {
-    code = resp.data
-  })
-}
-// 点击图片刷新验证码
-const changeCode = () => {
-  const codeImg = document.querySelector('#code')
-  codeId = utils.getRandomId()
-  codeImg.src = `${process.env.VUE_APP_CAPTCHA_URL}/util/getCodeImg?id=` + codeId
-  codeImg.onload = () => getCode()
-}
-
-// 表单信息提交
-const register = (formEl) => {
-  utils.validFormAndInvoke(formEl, () => {
-    auth.register(registerForm).then(resp => {
-      if (resp.code === 200) {
-        localStorage.setItem('authorization', resp.data)
-        router.push('/index')
-      }
-    })
-  }, '注册失败')
-}
-
-export default {
-  // data
-  code,
-  registerForm,
-  registerFormRules,
-  // method
-  toLoginPage,
-  getCode,
-  changeCode,
-  register
-}

src/permission.js

@@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login', '/auth-redirect', '/recruitment/campus', '/recruitment/social', '/recruitment/result'] // no redirect whitelist
+const whiteList = ['/login', '/Register', '/auth-redirect', '/recruitment/campus', '/recruitment/social', '/recruitment/result'] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {
   console.log('to', to)

src/router/index.js

@@ -55,6 +55,12 @@ export const constantRoutes = [
     component: () => import('@/views/login/index'),
     hidden: true
   },
+  {
+    path: '/Register',
+    name: 'Register',
+    component: () => import('@/views/login/Register'),
+    hidden: true
+  },
   // {
   //   path: '/profile',
   //   component: () => import('@/views/login/profile'),

src/views/login/Register_old.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="login-register">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+      autocomplete="on"
+      label-position="left"
+    >
+      <div class="title-container">
+        <h3 class="title">注册中心</h3>
+      </div>
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model.number="ruleForm.username" />
+      </el-form-item>
+      <!-- <el-form-item label="姓名" prop="name">
+        <el-input v-model.number="ruleForm.name" />
+      </el-form-item> -->
+      <!-- <el-form-item label="工号" prop="id">
+        <el-input v-model.number="ruleForm.id" />
+      </el-form-item> -->
+      <!-- <el-form-item label="部门" prop="department">
+        <el-input v-model.number="ruleForm.department" />
+      </el-form-item>
+      <el-form-item label="职位" prop="position">
+        <el-input v-model.number="ruleForm.position" />
+      </el-form-item>
+      <el-form-item label="手机号" prop="phoneId">
+        <el-input v-model.number="ruleForm.phoneId" />
+      </el-form-item> -->
+      <el-form-item label="密码" prop="pass">
+        <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
+      </el-form-item>
+      <el-form-item label="确认密码" prop="checkPass">
+        <el-input
+          v-model="ruleForm.checkPass"
+          type="password"
+          autocomplete="off"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          @click="submitForm('ruleForm')"
+        >提交</el-button>
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HOME',
+  data() {
+    var checkName = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error('用户名不能为空'))
+      }
+      // setTimeout(() => {
+      //   if (!Number.isInteger(value)) {
+      //     callback(new Error('请输入数字值'))
+      //   } else {
+      //     if (value < 18) {
+      //       callback(new Error('必须年满18岁'))
+      //     } else {
+      //       callback()
+      //     }
+      //   }
+      // }, 1000)
+    }
+    var validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入密码'))
+      } else {
+        if (this.ruleForm.checkPass !== '') {
+          this.$refs.ruleForm.validateField('checkPass')
+        }
+        callback()
+      }
+    }
+    var validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'))
+      } else if (value !== this.ruleForm.pass) {
+        callback(new Error('两次输入密码不一致!'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      ruleForm: {
+        pass: '',
+        checkPass: '',
+        age: ''
+      },
+      rules: {
+        pass: [{ validator: validatePass, trigger: 'blur' }],
+        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
+        age: [{ validator: checkName, trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg: #283443;
+$light_gray: #fff;
+$cursor: #fff;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    color: #454545;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
+
+.el-button--info {
+  background: #1890ff;
+}
+
+.login-register {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .verifyCodeImg {
+    margin-top: 5px;
+    margin-left: 10px;
+    height: 30px;
+    width: "60%";
+  }
+  .login-form {
+    position: relative;
+    width: 450px;
+    max-width: 100%;
+    padding: 160px 35px 0;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+  .tips {
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .svg-container {
+    padding: 6px 5px 6px 15px;
+    color: $dark_gray;
+    vertical-align: middle;
+    width: 30px;
+    display: inline-block;
+  }
+
+  .title-container {
+    position: relative;
+
+    .title {
+      font-size: 26px;
+      color: $light_gray;
+      margin: 0px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+
+    .set-language {
+      color: #fff;
+      position: absolute;
+      top: 3px;
+      font-size: 18px;
+      right: 0px;
+      cursor: pointer;
+    }
+  }
+
+  .show-pwd {
+    position: absolute;
+    right: 10px;
+    top: 7px;
+    font-size: 16px;
+    color: $dark_gray;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .login-code {
+    width: 33%;
+    height: 38px;
+    float: right;
+    img {
+      cursor: pointer;
+      vertical-align: middle;
+    }
+  }
+  .el-login-footer {
+    height: 40px;
+    line-height: 40px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    font-family: Arial;
+    font-size: 12px;
+    letter-spacing: 1px;
+  }
+  .login-code-img {
+    height: 38px;
+  }
+
+  .thirdparty-button {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+  }
+
+  @media only screen and (max-width: 470px) {
+    .thirdparty-button {
+      display: none;
+    }
+  }
+}
+</style>
+

src/views/login/index.vue

@@ -115,7 +115,7 @@
         type="info"
         icon="el-icon el-icon-delete"
         style="width: 30%; margin-bottom: 20px; margin-left: 20px"
-        @click="resetLoginForm"
+        @click="resetLoginForm()"
       >
         重置
         <!-- {{ $t("login.logIn") }} -->
@@ -125,7 +125,7 @@
         type="warning"
         icon="el-icon el-icon-circle-plus"
         style="width: 35%; margin-bottom: 20px; margin-left: 20px"
-        @click="registerForm($refs['loginForm'])"
+        @click="registerForm()"
       >
         注册
         <!-- {{ $t("login.logIn") }} -->
@@ -215,8 +215,8 @@ export default {
   },
   created() {
     // window.addEventListener('storage', this.afterQRScan)
-    this.getCode()
-    this.getCookie()
+    // this.getCode()
+    // this.getCookie()
   },
   mounted() {
     if (this.loginForm.username === '') {
@@ -253,6 +253,9 @@ export default {
         this.$refs.password.focus()
       })
     },
+    registerForm() {
+      this.$router.push({ path: '/Register' })
+    },
     handleLogin() {
       // 验证码判断
       // eslint-disable-next-line eqeqeq

src/views/login/profile.vue

@@ -1,300 +0,0 @@
-<template>
-  <div class="personalCenter">
-    <el-container>
-      <el-header>个人中心</el-header>
-      <el-container>
-        <el-aside width="400px">
-          <el-col :span="12">
-            <div class="sub-title" />
-            <div class="demo-basic--circle">
-              <div class="img">
-                <el-avatar
-                  :size="100"
-                  :src="circleUrl"
-                  align="center"
-                />
-              </div>
-              <div class="block">
-                <span>ADMIN</span>
-              </div>
-            </div>
-          </el-col>
-          <el-input
-            v-model="input1"
-            type="text"
-            placeholder="用户ID"
-            maxlength="6"
-            show-word-limit
-          />
-          <el-input
-            v-model="input2"
-            type="text"
-            placeholder="用户昵称"
-            show-word-limit
-          />
-          <el-input
-            v-model="input3"
-            type="text"
-            placeholder="用户昵称"
-            show-word-limit
-          />
-          <el-input
-            v-model="input4"
-            placeholder="请输入密码"
-            show-password
-          />
-          <el-input
-            v-model="input5"
-            type="text"
-            placeholder="用户姓名"
-            show-word-limit
-          />
-          <el-input
-            v-model="input6"
-            type="text"
-            placeholder="用户权限"
-            maxlength="2"
-            show-word-limit
-          />
-          <el-input v-model="input7" placeholder="邮箱">
-            <template slot="append">@163.com</template>
-          </el-input>
-          <el-input
-            v-model="input8"
-            type="text"
-            placeholder="工号码"
-            maxlength="20"
-            show-word-limit
-          />
-          <el-input
-            v-model="input9"
-            type="text"
-            placeholder="固定电话"
-            maxlength="20"
-            show-word-limit
-          />
-          <el-button-group style="float: right; padding: 3px 0" type="text">
-            <el-button type="primary" size="medium" round>保存</el-button>
-          </el-button-group>
-        </el-aside>
-        <el-container>
-          <el-main>
-            <el-card class="box-card">
-              <div slot="header" class="clearfix">
-                <span style="float: left"><b>账号绑定</b></span>
-                <el-button-group
-                  style="float: right; padding: 3px 0"
-                  type="text"
-                >
-                  <el-button
-                    type="primary"
-                    icon="el-icon-edit"
-                    size="medium"
-                    round
-                  >
-                    修改信息
-                  </el-button>
-                  <el-button
-                    type="primary"
-                    icon="el-icon-check"
-                    size="medium"
-                    round
-                  >
-                    确认修改
-                  </el-button>
-                </el-button-group>
-              </div>
-              <div v-for="o in 1" :key="o" class="text item">
-                <el-table :data="tableData" style="width: 100%">
-                  <el-table-column label="账号名" width="180">
-                    <template slot-scope="scope">
-                      <p>{{ scope.row.name1 }}</p>
-                      <div slot="reference" class="name-wrapper" />
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="操作" align="center">
-                    <template slot-scope="scope">
-                      <el-button
-                        size="mini"
-                        @click="handleEdit(scope.$index, scope.row)"
-                      >
-                        编辑
-                      </el-button>
-                      <el-button
-                        size="mini"
-                        type="danger"
-                        @click="handleDelete(scope.$index, scope.row)"
-                      >
-                        解绑
-                      </el-button>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="更多" align="center">
-                    <el-row>
-                      <el-button
-                        type="info"
-                        icon="el-icon-message"
-                        circle
-                      />
-                      <el-button
-                        type="warning"
-                        icon="el-icon-star-off"
-                        circle
-                      />
-                      <el-button
-                        type="share"
-                        icon="el-icon-share"
-                        circle
-                      />
-                    </el-row>
-                  </el-table-column>
-                </el-table>
-              </div>
-              <div v-for="o in 1" :key="o" class="text item">
-                <el-table :data="tableData" style="width: 100%">
-                  <el-table-column label="账号名" width="180">
-                    <template slot-scope="scope">
-                      <p>{{ scope.row.name2 }}</p>
-                      <div slot="reference" class="name-wrapper" />
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="操作" align="center">
-                    <template slot-scope="scope">
-                      <el-button
-                        size="mini"
-                        @click="handleEdit(scope.$index, scope.row)"
-                      >
-                        编辑
-                      </el-button>
-                      <el-button
-                        size="mini"
-                        type="danger"
-                        @click="handleDelete(scope.$index, scope.row)"
-                      >
-                        解绑
-                      </el-button>
-                    </template>
-                  </el-table-column>
-                  <el-table-column label="更多" align="center">
-                    <el-row>
-                      <el-button
-                        type="info"
-                        icon="el-icon-message"
-                        circle
-                      />
-                      <el-button
-                        type="warning"
-                        icon="el-icon-star-off"
-                        circle
-                      />
-                      <el-button
-                        type="share"
-                        icon="el-icon-share"
-                        circle
-                      />
-                    </el-row>
-                  </el-table-column>
-                </el-table>
-              </div>
-            </el-card>
-            <el-card class="box-card">
-              <div>
-                <span style="float: left" shadow="hover"><b>个人说明</b></span>
-                <br>
-                <br>
-                <span>螃蟹在剥我的壳</span>
-                <el-divider />
-                <span>笔记本在写我</span>
-                <el-divider />
-                <span>漫天的我落在枫叶的雪花上</span>
-              </div>
-            </el-card>
-          </el-main>
-        </el-container>
-      </el-container>
-    </el-container>
-  </div>
-</template>
-<script>
-export default {
-  name: 'PersonalCenter',
-  data() {
-    return {
-      text: '',
-      input1: '',
-      input2: '',
-      input3: '',
-      input4: '',
-      input5: '',
-      input6: '',
-      input7: '',
-      input8: '',
-      input9: '',
-      circleUrl:
-          'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
-      sizeList: ['large'],
-      tableData: [
-        {
-          date: '2016-05-03',
-          name1: 'Wechat',
-          name2: 'Github'
-        }
-      ]
-    }
-  },
-  methods: {
-    handleEdit(index, row) {
-      console.log(index, row)
-    },
-    handleDelete(index, row) {
-      console.log(index, row)
-    }
-  }
-}
-</script>
-<style>
-  .el-header {
-    line-height: 60px;
-    text-align: center;
-    background-color: #b3c0d1;
-  }
-  .el-aside {
-    line-height: 44px;
-    text-align: center;
-    background-color: #d3dce6;
-  }
-  .el-main {
-    line-height: 36px;
-    text-align: center;
-    background-color: #e9eef3;
-  }
-
-  .demo-basic--circle {
-    align: 'center';
-    margin-top: 30px;
-    margin-left: 150px;
-  }
-  .block {
-    margin-left: 25px;
-    font-weight: bold;
-  }
-  .text {
-    font-size: 14px;
-  }
-  .item {
-    margin-bottom: 18px;
-  }
-  .clearfix:before,
-  .clearfix:after {
-    display: table;
-    content: '';
-  }
-  .clearfix:after {
-    clear: both;
-  }
-
-  .box-card {
-    width: 1368px;
-    border-radius: 30px;
-  }
-</style>

src/views/login/profile2.vue

@@ -1,427 +0,0 @@
-
-<template>
-  <div style="background-color: #fcfcfc; font-family: '宋体'; height: 100%">
-    <div>
-      <my-bread
-        level1="个人中心"
-        level2="修改密码"
-        :level3="levelName"
-      />
-    </div>
-    <div style="margin-top: 25px; margin-left: 80px">
-      <el-row :gutter="10">
-        <el-col :span="2">
-          <div
-            style="
-              background-color: #ffebcd;
-              width: 60px;
-              height: 60px;
-              display: inline-block;
-              border-radius: 50%;
-              overflow: hidden;
-            "
-          >
-            <el-image :src="src" style="width: 60px; height: 60px" />
-          </div>
-          <div style="margin-top: 5px; margin-left: 6px">
-            <span>admin</span>
-          </div>
-          <div style="margin-top: 50px; margin-left: 1px">
-            <el-button
-              type="text"
-              style="font-size: 15px; color: #4d4d4d"
-              @click="infomationClick()"
-            >个人信息<span
-              v-show="infomationShow"
-              style="color: #b0e0e6"
-              class="el-icon-s-promotion"
-            /></el-button>
-          </div>
-          <div style="margin-top: 5px; margin-left: 1px">
-            <el-button
-              type="text"
-              style="font-size: 15px; color: #4d4d4d"
-              @click="passwordClick()"
-            >修改密码<span
-              v-show="passwordShow"
-              style="color: #b0e0e6"
-              class="el-icon-s-promotion"
-            /></el-button>
-          </div>
-        </el-col>
-
-        <el-col :span="21">
-          <!-- <el-row :gutter="10" style="margin-top: 20px">
-            <el-col
-              :span="2"
-            ><div style="text-align: right"><span>账号：</span></div></el-col>
-            <el-col :span="5">0000000000</el-col>
-          </el-row> -->
-          <!-- 个人信息 -->
-          <el-row v-show="infomationShow">
-            <el-card style="margin-top: 30px">
-              <el-row>
-                <el-col :span="6">
-                  <el-row :gutter="12" style="margin-top: 20px">
-                    <el-col
-                      :span="8"
-                    ><div style="text-align: right">
-                      <span>姓名：</span>
-                    </div></el-col>
-                    <el-col :span="16">admin</el-col>
-                  </el-row>
-                  <el-row :gutter="12" style="margin-top: 30px">
-                    <el-col
-                      :span="8"
-                    ><div style="text-align: right">
-                      <span>工号：</span>
-                    </div></el-col>
-                    <el-col :span="16">17125463265</el-col>
-                  </el-row>
-                  <el-row :gutter="12" style="margin-top: 30px">
-                    <el-col
-                      :span="8"
-                    ><div style="text-align: right">
-                      <span>电子邮箱：</span>
-                    </div></el-col>
-                    <el-col :span="16">2036128127@qq.com</el-col>
-                  </el-row>
-                  <el-row :gutter="12" style="margin-top: 30px">
-                    <el-col
-                      :span="8"
-                    ><div style="text-align: right">
-                      <span>部门：</span>
-                    </div></el-col>
-                    <el-col :span="16">某某管理中心</el-col>
-                  </el-row>
-                  <el-row :gutter="12" style="margin-top: 30px">
-                    <el-col
-                      :span="8"
-                    ><div style="text-align: right">
-                      <span>职位：</span>
-                    </div></el-col>
-                    <el-col :span="16">部门负责人</el-col>
-                  </el-row>
-                  <el-row :gutter="12" style="margin-top: 30px">
-                    <el-col
-                      :span="8"
-                    ><div style="text-align: right">
-                      <span>项目：</span>
-                    </div></el-col>
-                    <el-col :span="16">某某107项目</el-col>
-                  </el-row>
-                <!-- </el-col>
-                <el-col :span="18">
-                  <el-row>
-                    <el-col>
-                      <el-timeline>
-                        <el-timeline-item timestamp="项目一" placement="top">
-                          <el-card>
-                            <div>
-                              <span><span
-                                style="font-family: '宋体'; font-size: 15px"
-                              ><strong>项目名称</strong></span><span
-                                style="
-                                    font-family: '宋体';
-                                    font-size: 12px;
-                                    margin-left: 20px;
-                                  "
-                              ><strong>管理单位</strong></span></span>
-                            </div>
-                            <div>
-                              <span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span>
-                            </div>
-                          </el-card>
-                        </el-timeline-item>
-                        <el-timeline-item timestamp="项目二" placement="top">
-                          <el-card>
-                            <div>
-                              <span><span
-                                style="font-family: '宋体'; font-size: 15px"
-                              ><strong>项目名称</strong></span><span
-                                style="
-                                    font-family: '宋体';
-                                    font-size: 12px;
-                                    margin-left: 20px;
-                                  "
-                              ><strong>管理单位</strong></span></span>
-                            </div>
-                            <div>
-                              <span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span>
-                            </div>
-                          </el-card>
-                        </el-timeline-item>
-                        <el-timeline-item timestamp="项目三" placement="top">
-                          <el-card>
-                            <div>
-                              <span><span
-                                style="font-family: '宋体'; font-size: 15px"
-                              ><strong>项目名称</strong></span><span
-                                style="
-                                    font-family: '宋体';
-                                    font-size: 12px;
-                                    margin-left: 20px;
-                                  "
-                              ><strong>管理单位</strong></span></span>
-                            </div>
-                            <div>
-                              <span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span>
-                            </div>
-                          </el-card>
-                        </el-timeline-item>
-                        <el-timeline-item timestamp="项目四" placement="top">
-                          <el-card>
-                            <div>
-                              <span><span
-                                style="font-family: '宋体'; font-size: 15px"
-                              ><strong>项目名称</strong></span><span
-                                style="
-                                    font-family: '宋体';
-                                    font-size: 12px;
-                                    margin-left: 20px;
-                                  "
-                              ><strong>管理单位</strong></span></span>
-                            </div>
-                            <div>
-                              <span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span>
-                            </div>
-                          </el-card>
-                        </el-timeline-item>
-                        <el-timeline-item timestamp="项目五" placement="top">
-                          <el-card>
-                            <div>
-                              <span><span
-                                style="font-family: '宋体'; font-size: 15px"
-                              ><strong>项目名称</strong></span><span
-                                style="
-                                    font-family: '宋体';
-                                    font-size: 12px;
-                                    margin-left: 20px;
-                                  "
-                              ><strong>管理单位</strong></span></span>
-                            </div>
-                            <div>
-                              <span>项目创建时间</span>/<span>项目竣工时间</span>/<span>角色</span>/<span>周期</span>
-                            </div>
-                          </el-card>
-                        </el-timeline-item>
-                      </el-timeline>
-                    </el-col>
-                  </el-row> -->
-                </el-col>
-              </el-row>
-            </el-card>
-          </el-row>
-          <!-- 修改密码 -->
-          <el-row v-show="passwordShow">
-            <el-card style="margin-top: 30px">
-              <el-form :model="personalForm">
-                <el-row :gutter="12" style="margin-top: 20px">
-                  <el-col :span="6">
-                    <div style="text-align: right"><span>账号：</span></div>
-                  </el-col>
-                  <el-col :span="5">
-                    <el-form-item prop="account">
-                      <el-input
-                        v-model="personalForm.account"
-                        type="text"
-                        placeholder="请输入您的账号"
-                      />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="12" style="margin-top: 1px">
-                  <el-col :span="6">
-                    <div style="text-align: right"><span>工号：</span></div>
-                  </el-col>
-                  <el-col :span="5">
-                    <el-form-item prop="phone_num">
-                      <el-input
-                        v-model="personalForm.phone_num"
-                        type="text"
-                        placeholder="绑定的工号"
-                      />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="12" style="margin-top: 1px">
-                  <el-col :span="6">
-                    <div style="text-align: right"><span>密码：</span></div>
-                  </el-col>
-                  <el-col :span="5">
-                    <el-form-item prop="password1">
-                      <el-input
-                        v-model="personalForm.password1"
-                        type="password"
-                        show-password
-                        placeholder="请输入新的密码"
-                      />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="12" style="margin-top: 1px">
-                  <el-col :span="6">
-                    <div style="text-align: right"><span>确认密码：</span></div>
-                  </el-col>
-                  <el-col :span="5">
-                    <el-form-item prop="password2">
-                      <el-input
-                        v-model="personalForm.password2"
-                        type="password"
-                        show-password
-                        placeholder="请再次输入新的密码"
-                      />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="12" style="margin-top: 1px">
-                  <el-col :span="6">
-                    <div style="text-align: right"><span>验证码：</span></div>
-                  </el-col>
-                  <el-col :span="5">
-                    <el-form-item prop="verification">
-                      <el-input
-                        v-model="personalForm.verification"
-                        type="text"
-                        placeholder="验证码"
-                      />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="2">
-                    <el-button
-                      type="primary"
-                      plain
-                      round
-                      size="medium"
-                      :disabled="isDisabled"
-                      @click="sendMsg()"
-                    >{{ buttonName }}</el-button>
-                  </el-col>
-                </el-row>
-                <el-row :gutter="12" style="margin-top: 10px">
-                  <el-col :span="17" style="text-align: center">
-                    <el-button
-                      type="primary"
-                      plain
-                      round
-                      size="medium"
-                      @click="submit()"
-                    >修改</el-button>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </el-card>
-          </el-row>
-        </el-col>
-      </el-row>
-    </div>
-
-    <div />
-  </div>
-</template>
-<script>
-import yu from './images/yu.png'
-
-export default {
-  data() {
-    return {
-      src: yu,
-      levelName: '',
-      isCollapse: false,
-      infomationShow: false,
-      passwordShow: false,
-      buttonName: '发送短信',
-      isDisabled: false,
-      time: 60,
-      personalForm: {
-        account: '',
-        phone_num: '',
-        verification: '',
-        password1: '',
-        password2: ''
-      }
-    }
-  },
-  methods: {
-    handleOpen(key, keyPath) {
-      console.log(key, keyPath)
-      console.log(key)
-      console.log(keyPath)
-    },
-    handleClose(key, keyPath) {
-      // console.log(key, keyPath);
-    },
-
-    infomationClick() {
-      // 个人信息事件
-      this.infomationShow = true
-      this.passwordShow = false
-    },
-
-    passwordClick() {
-      // 密码事件
-      this.infomationShow = false
-      this.passwordShow = true
-    },
-    sendMsg() {
-      // 时间按钮
-      const me = this
-      me.isDisabled = true
-      const interval = window.setInterval(function() {
-        me.buttonName = '(' + me.time + ')秒'
-        --me.time
-        if (me.time < 0) {
-          me.buttonName = '重新发送'
-          me.time = 60
-          me.isDisabled = false
-          window.clearInterval(interval)
-        }
-      }, 1000)
-      // 获取短信验证码
-      // this.$http.get('/?phone_num=' + this.personalForm.phone_num).then(res => {
-      //     this.$message.success("短信已发送,请查收")
-      // })
-    },
-    submit() {
-      // 提交
-      if (this.personalForm.account === '') {
-        this.$message.warning('账号不能为空')
-      } else if (this.personalForm.phone_num === '') {
-        this.$message.warning('工号不能为空')
-      } else if (this.personalForm.password1 === '') {
-        this.$message.warning('密码不能为空')
-      } else if (this.personalForm.password2 === '') {
-        this.$message.warning('密码不能为空')
-      } else if (this.personalForm.verification === '') {
-        this.$message.warning('验证码不能为空')
-      } else {
-        if (this.personalForm.password1 === this.personalForm.password2) {
-          this.$message.success('修改成功')
-          // const params = {
-          //     account:this.personalForm.account,
-          //     phone_num:this.personalForm.phone_num,
-          //     password1:this.personalForm.password1,
-          //     password2:this.personalForm.password2,
-          //     verification:this.personalForm.verification,
-          // }
-          // console.log(params)
-          // this.$http.post('',params).then(res => {
-          //     console.log(res)
-          // })
-        } else {
-          this.$message.warning('两次输入的密码不一致,请重新输入')
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.name {
-  text-align: right;
-}
-.value {
-  text-align: left;
-}
-</style>

src/views/login/register.vue

@@ -1,88 +1,352 @@
 <template>
-  <el-container>
-    <el-main>
-      <el-card class="box-card" shadow="always">
-        <div slot="header" class="card-header">
-          <p>力山特起重机智能运维系统</p>
-        </div>
-
-        <div>
-          <el-form
-            ref="registerForm"
-            :model="registerForm"
-            :rules="registerFormRules"
-            :status-icon="true"
-            label-width="100px"
-          >
-            <el-form-item prop="username">
-              <el-input v-model="registerForm.username" prefix-icon="el-icon-user" placeholder="账号" />
-            </el-form-item>
-
-            <el-form-item prop="trueName">
-              <el-input v-model="registerForm.trueName" prefix-icon="el-icon-s-check" placeholder="姓名" />
-            </el-form-item>
-
-            <el-form-item prop="password">
+  <div class="register-container">
+    <article class="header">
+      <header>
+        <el-avatar icon="el-icon-user-solid" shape="circle" />
+        <span class="login">
+          <em class="bold">已有账号？</em>
+          <a href="/login">
+            <el-button type="primary" size="mini">登录</el-button>
+          </a>
+        </span>
+      </header>
+    </article>
+    <section>
+      <el-form
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="100px"
+        autocomplete="off"
+        :hide-required-asterisk="true"
+        size="medium"
+      >
+        <div style="padding-top: 10px">
+          <el-form-item label="用户名" prop="username">
+            <el-col :span="10">
+              <el-input
+                v-model="ruleForm.username"
+                placeholder="请输入用户名"
+              />
+            </el-col>
+          </el-form-item>
+          <el-form-item label="姓名" prop="name">
+            <el-col :span="10">
+              <el-input v-model="ruleForm.name" placeholder="请输入姓名" />
+            </el-col>
+          </el-form-item>
+          <el-form-item label="身份证号" prop="IdCard">
+            <el-col :span="10">
               <el-input
-                v-model="registerForm.password"
-                prefix-icon="el-icon-lock"
-                placeholder="密码"
-                show-password
+                v-model="ruleForm.IdCard"
+                placeholder="身份证号"
+                maxlength="16"
+                minlength="16"
               />
-            </el-form-item>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="部门" prop="department">
+            <el-col :span="10">
+              <el-input v-model="ruleForm.IdCard" placeholder="部门" />
+            </el-col>
+          </el-form-item>
+          <el-form-item label="职位" prop="position">
+            <el-col :span="10">
+              <el-input v-model="ruleForm.position" placeholder="职位" />
+            </el-col>
+          </el-form-item>
 
-            <el-form-item prop="code">
+          <el-form-item label="密码" prop="pwd">
+            <el-col :span="10">
+              <el-input
+                v-model="ruleForm.pwd"
+                placeholder="密码必须是数字、字母组合,长度8~20位"
+                type="password"
+                maxlength="8"
+                minlength="20"
+              />
+            </el-col>
+          </el-form-item>
+          <el-form-item label="确认密码" prop="cpwd">
+            <el-col :span="10">
               <el-input
-                v-model="registerForm.code"
-                class="code"
-                prefix-icon="el-icon-chat-line-round"
-                placeholder="验证码"
+                v-model="ruleForm.cpwd"
+                placeholder="请再次输入密码"
+                type="password"
               />
-              <img
-                id="code"
-                :src="`${captchaUrl}/util/getCodeImg`"
-                style="float: right;margin-top: 4px;cursor: pointer"
-                title="看不清,点击刷新"
-                alt="验证码"
-                @click="changeCode"
-              >
-            </el-form-item>
-
-            <el-form-item>
-              <el-button type="warning" icon="el-icon el-icon-circle-plus" @click="register($refs['registerForm'])">注册
-              </el-button>
-              <el-button icon="el-icon el-icon-s-promotion" @click="toLoginPage">去登陆</el-button>
-            </el-form-item>
-          </el-form>
+            </el-col>
+          </el-form-item>
+          <el-form-item label="手机号" prop="phoneId">
+            <el-col :span="10">
+              <el-input
+                v-model="ruleForm.phoneId"
+                placeholder="输入手机号并点击发送验证码"
+              />
+            </el-col>
+            <el-button
+              :loading="codeLoading"
+              :disabled="isDisable"
+              size="small"
+              round
+              @click="sendMsg"
+            >发送验证码不可用</el-button>
+
+            <span class="status">{{ statusMsg }}</span>
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="primary"
+              style="width: 40%"
+              @click="register"
+            >注册</el-button>
+          </el-form-item>
         </div>
-      </el-card>
-    </el-main>
+      </el-form>
+    </section>
 
-    <Footer />
-  </el-container>
+    <div class="error">{{ error }}</div>
+  </div>
 </template>
 
 <script>
-import Footer from '@/components/Footer'
-import RegisterFunc from '@/function-namespace/auth/RegisterFunc'
-
 export default {
   name: 'Register',
-  components: { Footer },
   data() {
     return {
-      ...RegisterFunc,
-      captchaUrl: process.env.VUE_APP_CAPTCHA_URL
+      statusMsg: '',
+      error: '',
+      isDisable: false,
+      codeLoading: false,
+      ruleForm: {
+        username: '',
+        name: '',
+        IdCard: '',
+        department: '',
+        position: '',
+        phoneId: '',
+        code: '',
+        pwd: '',
+        cpwd: ''
+      },
+      rules: {
+        username: [
+          { required: true, message: '用户名不能为空', trigger: 'blur' }
+        ],
+        name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+        IdCard: [
+          { required: true, message: '身份证号不能为空', trigger: 'blur' }
+        ],
+        department: [
+          { required: true, message: '部门不能为空', trigger: 'blur' }
+        ],
+        position: [
+          { required: true, message: '职位不能为空', trigger: 'blur' }
+        ],
+        phoneId: [
+          {
+            required: true,
+            type: 'phoneId',
+            message: '请输入手机号',
+            trigger: 'blur'
+          }
+        ],
+        code: [
+          {
+            required: true,
+            type: 'string',
+            message: '请输入验证码',
+            trigger: 'blur'
+          }
+        ],
+        pwd: [
+          {
+            required: true,
+            message: '创建密码',
+            trigger: 'blur'
+          },
+          {
+            pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,20}$/,
+            message: '密码必须同时包含数字与字母,且长度为 8-20位'
+          }
+        ],
+        cpwd: [
+          {
+            required: true,
+            message: '确认密码',
+            trigger: 'blur'
+          },
+          {
+            validator: (rule, value, callback) => {
+              if (value === '') {
+                callback(new Error('请再次输入密码'))
+              } else if (value !== this.ruleForm.pwd) {
+                callback(new Error('两次输入密码不一致'))
+              } else {
+                callback()
+              }
+            },
+            trigger: 'blur'
+          }
+        ]
+      }
     }
   },
-  mounted() {
-    RegisterFunc.changeCode()
+  methods: {
+    // 用户注册
+    register: function() {
+      this.$refs['ruleForm'].validate((valid) => {
+        if (valid) {
+          const user = {
+            // code: this.ruleForm.code,
+            // phoneId: this.ruleForm.phoneId
+            // password: encrypt(this.ruleForm.pwd)
+          }
+          // eslint-disable-next-line no-undef
+          register(user)
+            .then((res) => {
+              console.log(res)
+              this.$message({
+                showClose: true,
+                message: '注册成功，正在跳转到登录界面...',
+                type: 'success'
+              })
+              setTimeout(() => {
+                this.$router.push('/')
+              }, 2000)
+            })
+            .catch((err) => {
+              console.log(err.response.data.message)
+            })
+        }
+      })
+    }
   }
 }
 </script>
 
-  <style scoped lang="scss">
-  @import "../../assets/css/auth/register";
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg: #283443;
+$light_gray: #fff;
+$cursor: #fff;
 
-  </style>
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .register-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.register-container {
+  .el-input {
+    display: inline-block;
+    height: 47px;
+    width: 95%;
+
+    input {
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 5px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      -webkit-appearance: none;
+      padding: 12px 5px 12px 15px;
+      color: $light_gray;
+      height: 47px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    label {
+      font-style: normal;
+      font-size: 12px;
+      color: $light_gray;
+    }
+  }
+}
+</style>
 
+<style lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
+
+.register-container {
+  min-height: 100%;
+  width: 100%;
+  background-color: $bg;
+  overflow: hidden;
+
+  .header {
+    border-bottom: 2px solid rgb(235, 232, 232);
+    min-width: 980px;
+    color: #666;
+
+    header {
+      margin: 0 auto;
+      padding: 10px 0;
+      width: 980px;
+
+      .login {
+        float: right;
+      }
+
+      .bold {
+        font-style: normal;
+        color: $light_gray;
+      }
+    }
+  }
+
+  > section {
+    margin: 0 auto 30px;
+    padding-top: 30px;
+    width: 980px;
+    min-height: 300px;
+    padding-right: 100px;
+    box-sizing: border-box;
+
+    .status {
+      font-size: 12px;
+      margin-left: 20px;
+      color: #e6a23c;
+    }
+
+    .error {
+      color: red;
+    }
+  }
+
+  .tips {
+    float: right;
+    font-size: 14px;
+    color: #fff;
+    margin-bottom: 10px;
+
+    span {
+      &:first-of-type {
+        margin-right: 16px;
+      }
+    }
+  }
+}
+</style>
+
+<style scoped>
+/* 修改验证器样式 */
+::v-deep .el-form-item.is-error .el-input__inner {
+  border-color: #889aa4;
+}
+::v-deep .el-form-item.is-error .el-input__validateIcon {
+  color: #889aa4;
+}
+::v-deep .el-form-item__error {
+  color: #e6a23c;
+}
+</style>