fix: login, register form

Author: sendya

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.10.1",
-    "ant-design-vue": "~1.3.7",
+    "ant-design-vue": "~1.3.8",
     "axios": "^0.18.0",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",

src/utils/auth.js

@@ -17,7 +17,7 @@
             <a-input
               size="large"
               type="text"
-              placeholder="帐户名或邮箱地址 / admin"
+              placeholder="账户: admin"
               v-decorator="[
                 'username',
                 {rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
@@ -32,7 +32,7 @@
               size="large"
               type="password"
               autocomplete="false"
-              placeholder="密码 / admin"
+              placeholder="密码: admin or ant.design"
               v-decorator="[
                 'password',
                 {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}

src/views/user/Login.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="main user-layout-register">
     <h3><span>注册</span></h3>
-    <a-form ref="formRegister" :autoFormCreate="(form)=>{this.form = form}" id="formRegister">
-      <a-form-item
-        fieldDecoratorId="email"
-        :fieldDecoratorOptions="{rules: [{ required: true, type: 'email', message: '请输入邮箱地址' }], validateTrigger: ['change', 'blur']}">
-
-        <a-input size="large" type="text" placeholder="邮箱"></a-input>
+    <a-form ref="formRegister" :form="form" id="formRegister">
+      <a-form-item>
+        <a-input
+          size="large"
+          type="text"
+          placeholder="邮箱"
+          v-decorator="['email', {rules: [{ required: true, type: 'email', message: '请输入邮箱地址' }], validateTrigger: ['change', 'blur']}]"
+        ></a-input>
       </a-form-item>
 
       <a-popover placement="rightTop" trigger="click" :visible="state.passwordLevelChecked">
@@ -19,24 +21,30 @@
             </div>
           </div>
         </template>
-        <a-form-item
-          fieldDecoratorId="password"
-          :fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}">
-          <a-input size="large" type="password" @click="handlePasswordInputClick" autocomplete="false" placeholder="至少6位密码，区分大小写"></a-input>
+        <a-form-item>
+          <a-input
+            size="large"
+            type="password"
+            @click="handlePasswordInputClick"
+            autocomplete="false"
+            placeholder="至少6位密码，区分大小写"
+            v-decorator="['password', {rules: [{ required: true, message: '至少6位密码，区分大小写'}, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
+          ></a-input>
         </a-form-item>
       </a-popover>
 
-      <a-form-item
-        fieldDecoratorId="password2"
-        :fieldDecoratorOptions="{rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}">
-
-        <a-input size="large" type="password" autocomplete="false" placeholder="确认密码"></a-input>
+      <a-form-item>
+        <a-input
+          size="large"
+          type="password"
+          autocomplete="false"
+          placeholder="确认密码"
+          v-decorator="['password2', {rules: [{ required: true, message: '至少6位密码，区分大小写' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
+        ></a-input>
       </a-form-item>
 
-      <a-form-item
-        fieldDecoratorId="mobile"
-        :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }, { validator: this.handlePhoneCheck } ], validateTrigger: ['change', 'blur'] }">
-        <a-input size="large" placeholder="11 位手机号">
+      <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-select slot="addonBefore" size="large" defaultValue="+86">
             <a-select-option value="+86">+86</a-select-option>
             <a-select-option value="+87">+87</a-select-option>
@@ -53,10 +61,8 @@
 
       <a-row :gutter="16">
         <a-col class="gutter-row" :span="16">
-          <a-form-item
-            fieldDecoratorId="captcha"
-            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}">
-            <a-input size="large" type="text" placeholder="验证码">
+          <a-form-item>
+            <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>
@@ -117,7 +123,7 @@ export default {
   mixins: [mixinDevice],
   data () {
     return {
-      form: null,
+      form: this.$form.createForm(this),
 
       state: {
         time: 60,
@@ -143,7 +149,7 @@ export default {
   },
   methods: {
 
-    handlePasswordLevel (rule, value, callback) {
+    handlePasswordLevel (rule, value, callback) {
       let level = 0
 
       // 判断这个字符串中有没有数字
@@ -202,44 +208,45 @@ export default {
     },
 
     handleSubmit () {
-      this.form.validateFields((err, values) => {
+      const { form: { validateFields }, $router } = this
+      validateFields((err, values) => {
         if (!err) {
-          this.$router.push({ name: 'registerResult', params: { ...values } })
+          $router.push({ name: 'registerResult', params: { ...values } })
         }
       })
     },
 
     getCaptcha (e) {
       e.preventDefault()
-      const that = this
+      const { form: { validateFields }, state, $message, $notification } = this
 
-      this.form.validateFields(['mobile'], { force: true },
+      validateFields(['mobile'], { force: true },
         (err, values) => {
           if (!err) {
-            this.state.smsSendBtn = true
+            state.smsSendBtn = true
 
             const interval = window.setInterval(() => {
-              if (that.state.time-- <= 0) {
-                that.state.time = 60
-                that.state.smsSendBtn = false
+              if (state.time-- <= 0) {
+                state.time = 60
+                state.smsSendBtn = false
                 window.clearInterval(interval)
               }
             }, 1000)
 
-            const hide = this.$message.loading('验证码发送中..', 0)
+            const hide = $message.loading('验证码发送中..', 0)
 
             getSmsCaptcha({ mobile: values.mobile }).then(res => {
               setTimeout(hide, 2500)
-              this.$notification['success']({
+              $notification['success']({
                 message: '提示',
                 description: '验证码获取成功，您的验证码为：' + res.result.captcha,
                 duration: 8
               })
             }).catch(err => {
               setTimeout(hide, 1)
               clearInterval(interval)
-              that.state.time = 60
-              that.state.smsSendBtn = false
+              state.time = 60
+              state.smsSendBtn = false
               this.requestFailed(err)
             })
           }
@@ -257,7 +264,7 @@ export default {
   },
   watch: {
     'state.passwordLevel' (val) {
-      console.log(val)
+      console.log(val)
     }
   }
 }
@@ -308,4 +315,4 @@ export default {
       line-height: 40px;
     }
   }
-</style>
+</style>

src/views/user/Register.vue

@@ -1666,10 +1666,10 @@ ant-design-palettes@^1.1.3:
   dependencies:
     tinycolor2 "^1.4.1"
 
-ant-design-vue@~1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/ant-design-vue/-/ant-design-vue-1.3.7.tgz#5e26c875ac636df1c20f076baa142aca62f97f14"
-  integrity sha512-PAbQrIrpmnonQohismGPxhSvwDmi2HKTfWjBpAItWsTEnXYqFzGHA7aytlutGTBRJjpyhlD6jpoiAnk/ocn4cw==
+ant-design-vue@~1.3.8:
+  version "1.3.8"
+  resolved "http://registry.npm.taobao.org/ant-design-vue/download/ant-design-vue-1.3.8.tgz#b8c9fc30fd658f134c09d7698f2825a342cfef5f"
+  integrity sha1-uMn8MP1ljxNMCddpjyglo0LP718=
   dependencies:
     "@ant-design/icons" "^1.1.15"
     "@ant-design/icons-vue" "^1.0.1"