feat: 注册

src/api/login.js

@@ -3,7 +3,9 @@ import request from '@/utils/request'
 const userApi = {
   login: '/login',
   logout: '/logout',
-  getLoginUser: '/getLoginUser'
+  getLoginUser: '/getLoginUser',
+  getUnitNameByInvitationCode: '/person/register/invitation',
+  register: '/person/register/add'
 }
 
 export function login (parameter) {
@@ -14,6 +16,22 @@ export function login (parameter) {
   })
 }
 
+export function getUnitNameByInvitationCode (parameter) {
+  return request({
+    url: userApi.getUnitNameByInvitationCode,
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function reqRegister (parameter) {
+  return request({
+    url: userApi.register,
+    method: 'post',
+    data: parameter
+  })
+}
+
 export function getLoginUser (parameter) {
   return request({
     url: userApi.getLoginUser,

src/views/user/Register.vue

@@ -7,19 +7,47 @@
           size="large"
           type="text"
           placeholder="用户名"
-          v-decorator="['username', {rules: [{ required: true, message: '请输入用户名' }], validateTrigger: ['change', 'blur']}]"
+          v-decorator="[
+            'username',
+            {
+              rules: [{ required: true, message: '请输入用户名' }],
+              validateTrigger: ['change', 'blur'],
+            },
+          ]"
+        ></a-input>
+      </a-form-item>
+      <a-form-item>
+        <a-input
+          size="large"
+          type="text"
+          placeholder="姓名"
+          v-decorator="[
+            'name',
+            {
+              rules: [{ required: true, message: '请输入姓名' }],
+              validateTrigger: ['change', 'blur'],
+            },
+          ]"
         ></a-input>
       </a-form-item>
 
       <a-popover
         placement="rightTop"
         :trigger="['focus', 'click']"
-        :getPopupContainer="(trigger) => trigger.parentElement"
+        :getPopupContainer="trigger => trigger.parentElement"
-        v-model="state.passwordLevelChecked">
+        v-model="state.passwordLevelChecked"
+      >
         <template slot="content">
-          <div :style="{ width: '240px' }" >
+          <div :style="{ width: '240px' }">
-            <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
+            <div :class="['user-register', passwordLevelClass]">
-            <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
+              强度：
+              <span>{{ passwordLevelName }}</span>
+            </div>
+            <a-progress
+              :percent="state.percent"
+              :showInfo="false"
+              :strokeColor="passwordLevelColor"
+            />
             <div style="margin-top: 10px;">
               <span>请输入至少包括大写、小写、数字、特殊符号中的三种，密码长度至少为8位。</span>
             </div>
@@ -30,7 +58,20 @@
             size="large"
             @click="handlePasswordInputClick"
             placeholder="请输入至少包括大写、小写、数字、特殊符号中的三种，密码长度至少为8位。"
-            v-decorator="['password', {rules: [{ required: true, message: '请输入至少包括大写、小写、数字、特殊符号中的三种，密码长度至少为8位。'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
+            v-decorator="[
+              'password',
+              {
+                rules: [
+                  {
+                    required: true,
+                    message:
+                      '请输入至少包括大写、小写、数字、特殊符号中的三种，密码长度至少为8位。',
+                  },
+                  { validator: this.handlePasswordLevel },
+                ],
+                validateTrigger: ['change', 'blur'],
+              },
+            ]"
           ></a-input-password>
         </a-form-item>
       </a-popover>
@@ -39,18 +80,47 @@
         <a-input-password
           size="large"
           placeholder="确认密码"
-          v-decorator="['password2', {rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
+          v-decorator="[
+            'password2',
+            {
+              rules: [
+                { required: true, message: '至少6位密码，区分大小写' },
+                { validator: this.handlePasswordCheck },
+              ],
+              validateTrigger: ['change', 'blur'],
+            },
+          ]"
         ></a-input-password>
       </a-form-item>
       <a-form-item>
-        <a-input size="large" placeholder="11 位手机号" v-decorator="['mobile', {rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }]">
+        <a-input
-        </a-input>
+          size="large"
+          placeholder="11 位手机号"
+          v-decorator="[
+            'mobile',
+            {
+              rules: [
+                { required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ },
+                { validator: this.handlePhoneCheck },
+              ],
+              validateTrigger: ['change', 'blur'],
+            },
+          ]"
+        ></a-input>
       </a-form-item>
       <a-row :gutter="16">
         <a-col class="gutter-row" :span="16">
           <a-form-item>
-            <a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
+            <a-input
-              <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
+              size="large"
+              type="text"
+              placeholder="验证码"
+              v-decorator="[
+                'captcha',
+                { rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur' },
+              ]"
+            >
+              <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
             </a-input>
           </a-form-item>
         </a-col>
@@ -60,14 +130,31 @@
             size="large"
             :disabled="state.smsSendBtn"
             @click.stop.prevent="getCaptcha"
-            v-text="!state.smsSendBtn && '获取验证码'||(state.time+' s')"></a-button>
+            v-text="(!state.smsSendBtn && '获取验证码') || state.time + ' s'"
+          ></a-button>
         </a-col>
       </a-row>
       <a-form-item>
-        <a-input size="large" placeholder="请您输入单位邀请码" v-decorator="['code', {rules: [{ required: true, message: '请输入正确的邀请码' }], validateTrigger: ['blur'] }]"></a-input>
+        <a-input
+          size="large"
+          placeholder="请您输入单位邀请码"
+          @change="invitationCodeChange"
+          v-decorator="[
+            'invitationCode',
+            {
+              rules: [{ required: true, message: '请输入正确的邀请码' }],
+              validateTrigger: ['blur'],
+            },
+          ]"
+        ></a-input>
       </a-form-item>
       <a-form-item>
-        <a-input size="large" disabled placeholder="输入邀请码以后自动绑定" v-decorator="['unit']"></a-input>
+        <a-input
+          size="large"
+          disabled
+          placeholder="输入邀请码以后自动绑定"
+          :value="unitInfo.name"
+        ></a-input>
       </a-form-item>
       <a-form-item>
         <a-button
@@ -77,17 +164,18 @@
           class="register-button"
           :loading="registerBtn"
           @click.stop.prevent="handleSubmit"
-          :disabled="registerBtn">立即注册
+          :disabled="registerBtn"
+        >
+          立即注册
         </a-button>
         <router-link class="login" :to="{ name: 'login' }">使用已有账户登录</router-link>
       </a-form-item>
-
     </a-form>
   </div>
 </template>
 
 <script>
-import { getSmsCaptcha } from '@/api/login'
+import { getSmsCaptcha, getUnitNameByInvitationCode, reqRegister } from '@/api/login'
 
 const levelNames = {
   0: '低',
@@ -110,11 +198,11 @@ const levelColor = {
 }
 export default {
   name: 'Register',
-  components: {
+  components: {},
-  },
   mixins: [],
   data () {
     return {
+      unitInfo: {},
       form: this.$form.createForm(this),
       state: {
         time: 60,
@@ -173,7 +261,6 @@ export default {
 
     handlePasswordCheck (rule, value, callback) {
       const password = this.form.getFieldValue('password')
-      console.log('value', value)
       if (value === undefined) {
         callback(new Error('请输入密码'))
       }
@@ -184,10 +271,6 @@ export default {
     },
 
     handlePhoneCheck (rule, value, callback) {
-      console.log('handlePhoneCheck, rule:', rule)
-      console.log('handlePhoneCheck, value', value)
-      console.log('handlePhoneCheck, callback', callback)
-
       callback()
     },
 
@@ -200,51 +283,87 @@ export default {
     },
 
     handleSubmit () {
-      const { form: { validateFields }, state, $router } = this
+      const {
+        form: { validateFields },
+        state
+      } = this
       validateFields({ force: true }, (err, values) => {
         if (!err) {
           state.passwordLevelChecked = false
-          $router.push({ name: 'registerResult', query: { ...values } })
+          this.setRegister(values)
         }
       })
     },
-
+    // 注册
+    setRegister (data) {
+      if (!this.uniInfo.id) {
+        this.$message.warning('请输入正确的邀请码~')
+        return
+      }
+      const params = {
+        name: data.name,
+        userName: data.username,
+        password: data.password,
+        phone: data.mobile,
+        orgId: this.unitInfo.id
+      }
+      reqRegister(params).then(res => {
+        this.$message.success('注册成功!')
+        this.$router.push({ name: 'registerResult', query: data })
+      })
+    },
     getCaptcha (e) {
       e.preventDefault()
-      const { form: { validateFields }, state, $message, $notification } = this
+      const {
+        form: { validateFields },
+        state,
+        $message,
+        $notification
+      } = this
 
-      validateFields(['mobile'], { force: true },
+      validateFields(['mobile'], { force: true }, (err, values) => {
-        (err, values) => {
+        if (!err) {
-          if (!err) {
+          state.smsSendBtn = true
-            state.smsSendBtn = true
 
-            const interval = window.setInterval(() => {
+          const interval = window.setInterval(() => {
-              if (state.time-- <= 0) {
+            if (state.time-- <= 0) {
-                state.time = 60
+              state.time = 60
-                state.smsSendBtn = false
+              state.smsSendBtn = false
-                window.clearInterval(interval)
+              window.clearInterval(interval)
-              }
+            }
-            }, 1000)
+          }, 1000)
 
-            const hide = $message.loading('验证码发送中..', 0)
+          const hide = $message.loading('验证码发送中..', 0)
 
-            getSmsCaptcha({ mobile: values.mobile }).then(res => {
+          getSmsCaptcha({ mobile: values.mobile })
+            .then(res => {
               setTimeout(hide, 2500)
               $notification['success']({
                 message: '提示',
                 description: '验证码获取成功，您的验证码为：' + res.result.captcha,
                 duration: 8
               })
-            }).catch(err => {
+            })
+            .catch(err => {
               setTimeout(hide, 1)
               clearInterval(interval)
               state.time = 60
               state.smsSendBtn = false
               this.requestFailed(err)
             })
-          }
         }
-      )
+      })
+    },
+    // 邀请码发生变化
+    invitationCodeChange (e) {
+      const { value } = e.target
+      if (value && value.length === 6) {
+        getUnitNameByInvitationCode({ invitationCode: value }).then(res => {
+          this.unitInfo = res.data
+        })
+      } else {
+        this.unitInfo = {}
+      }
     },
     requestFailed (err) {
       this.$notification['error']({
@@ -255,57 +374,50 @@ export default {
       this.registerBtn = false
     }
   },
-  watch: {
+  watch: {}
-    'state.passwordLevel' (val) {
-      console.log(val)
-    }
-  }
 }
 </script>
 <style lang="less">
-  .user-register {
+.user-register {
-
+  &.error {
-    &.error {
+    color: #ff0000;
-      color: #ff0000;
-    }
-
-    &.warning {
-      color: #ff7e05;
-    }
-
-    &.success {
-      color: #52c41a;
-    }
-
   }
 
-  .user-layout-register {
+  &.warning {
-    .ant-input-group-addon:first-child {
+    color: #ff7e05;
-      background-color: #fff;
-    }
   }
+
+  &.success {
+    color: #52c41a;
+  }
+}
+
+.user-layout-register {
+  .ant-input-group-addon:first-child {
+    background-color: #fff;
+  }
+}
 </style>
 <style lang="less" scoped>
-  .user-layout-register {
+.user-layout-register {
-
+  & > h3 {
-    & > h3 {
+    font-size: 16px;
-      font-size: 16px;
+    margin-bottom: 20px;
-      margin-bottom: 20px;
-    }
-
-    .getCaptcha {
-      display: block;
-      width: 100%;
-      height: 40px;
-    }
-
-    .register-button {
-      width: 50%;
-    }
-
-    .login {
-      float: right;
-      line-height: 40px;
-    }
   }
+
+  .getCaptcha {
+    display: block;
+    width: 100%;
+    height: 40px;
+  }
+
+  .register-button {
+    width: 50%;
+  }
+
+  .login {
+    float: right;
+    line-height: 40px;
+  }
+}
 </style>