feat: 注册

2022-02-24 19:53:36 +08:00 · 2022-02-24 19:53:36 +08:00 · dff16ba630
parent 3e5831c095
commit dff16ba630
2 changed files with 220 additions and 90 deletions
--- a/src/api/login.js
+++ b/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,
--- a/src/views/user/Register.vue
+++ b/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"
-        v-model="state.passwordLevelChecked">
+        :getPopupContainer="trigger => trigger.parentElement"
+        v-model="state.passwordLevelChecked"
+      >
        <template slot="content">
          <div :style="{ width: '240px' }">
-            <div :class="['user-register', passwordLevelClass]">强度：<span>{{ passwordLevelName }}</span></div>
-            <a-progress :percent="state.percent" :showInfo="false" :strokeColor=" passwordLevelColor " />
+            <div :class="['user-register', passwordLevelClass]">
+              强度：
+              <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,17 +80,46 @@
        <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
+              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>
@ -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,21 +283,45 @@ 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 },
-        (err, values) => {
+      validateFields(['mobile'], { force: true }, (err, values) => {
        if (!err) {
          state.smsSendBtn = true

@ -228,14 +335,16 @@ export default {

          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
@ -243,8 +352,18 @@ export default {
              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,16 +374,11 @@ export default {
      this.registerBtn = false
    }
  },
-  watch: {
-    'state.passwordLevel' (val) {
-      console.log(val)
-    }
-  }
+  watch: {}
 }
 </script>
 <style lang="less">
 .user-register {
-
  &.error {
    color: #ff0000;
  }
@ -276,7 +390,6 @@ export default {
  &.success {
    color: #52c41a;
  }
-
 }

 .user-layout-register {
@ -287,7 +400,6 @@ export default {
 </style>
 <style lang="less" scoped>
 .user-layout-register {
-
  & > h3 {
    font-size: 16px;
    margin-bottom: 20px;