feat(@rbc/rbc-login): add verificationCode

develop/@rbc/rbc-login/src/views/login/index.vue

@@ -22,10 +22,15 @@
             :model="userData"
             :rules="ruleInline"
           >
-            <div class="input-field">
+            <div
+              class="input-field"
+              :class="{ 'with-verificationCode-code': withVerificationCode }"
+            >
               <div 
                 class="input-label" 
-                :class="{ inputLabelFocus: signUserName === true || userData.username.length !== 0}"
+                :class="{
+                  inputLabelFocus: signUserName === true || userData.username.length !== 0
+                }"
               >用户名</div>
               <FormItem prop="username">
                 <Input
@@ -49,8 +54,11 @@
                 />
               </FormItem>
             </div>
-            <div class="height2"></div>
-              <div class="input-field">
+            <div class="height2">
+              <div
+                class="input-field"
+                :class="{ 'with-verificationCode-code': withVerificationCode }"
+              >
                 <div class="input-label" :class="{ inputLabelFocus: signPassword === true || userData.password.length !== 0}">密码</div>
 
                 <FormItem prop="password">
@@ -80,7 +88,29 @@
                   />
                 </FormItem>
               </div>
-            <div class="height2"></div>
+            </div>
+
+            
+            <div class="height2" v-if="withVerificationCode">
+              <div class="input-field verificationCode-code-field">
+                <div 
+                  class="input-label" 
+                >验证码</div>
+                <FormItem prop="verificationCode">
+                  <Input
+                    style="width: calc(100% - 90px)"
+                    v-model="userData.verificationCode"
+                    size="default"
+                  />
+                  <img
+                    :src="verifyCodeImg"
+                    style="width: 80px;height: 32px;"
+                    @click="getVerificationCode"
+                  />
+                </FormItem>
+              </div>
+            </div>
+
           </Form>
         </div>
         <div class="login-btn">
@@ -91,8 +121,9 @@
             style="height: 40px"
             @click="submit"
             :loading="loginLoading"
-            >登录</Button
           >
+            登录
+          </Button>
         </div>
       </div>
     </div>
@@ -120,23 +151,23 @@ export default {
       userData: {
         username: "",
         password: "",
-        verification: "",
+        verificationCode: "",
       },
       ruleInline: {
         username: [
           {
             required: true,
-            message: "用户名不能为空",
-            trigger: "blur",
+            message: '用户名不能为空',
+            trigger: 'blur',
           },
         ],
         password: [
           {
             required: true,
-            message: "密码不能为空",
-            trigger: "blur",
+            message: '密码不能为空',
+            trigger: 'blur',
           },
-        ]
+        ],
       },
       loginLoading: false,
       bgimg: null,
@@ -145,6 +176,9 @@ export default {
       signPassword: false,
       verificationImg: null,
       verifyuuid: "",
+      withVerificationCode: false,
+      sessionId: null,
+      verifyCodeImg: null,
     };
   },
   computed: {
@@ -172,7 +206,6 @@ export default {
     }
     
     document.addEventListener('keyup', this.onKeyUp)
-    this.getVerificationCode();
   },
   methods: {
     onKeyUp(event) {
@@ -192,7 +225,26 @@ export default {
       })
     },
     getLoginAssetsInfo() {
-      this.imgLoading = 3
+      this.imgLoading = 4
+
+      this.getVerificationCode().then((res) => {
+        this.withVerificationCode = res.verifyOptionState === '1'
+        if (this.withVerificationCode) {
+          this.ruleInline['verificationCode'] = [
+              {
+                required: true,
+                message: '验证码不能为空',
+                trigger: 'blur',
+              },
+            ]
+        }
+        this.$nextTick(() => {
+          this.$refs["userData"].resetFields()
+          this.imgLoading -= 1
+        })
+      }).catch(() => {
+        this.imgLoading -= 1
+      })
       window.GMS.$http.post('/homepage/query', { pageType: '1' }).then((res) => {
         const obj = res.data && res.data.data || [{}, {}]
         const bgImgCode = obj[0] && obj[0].ext3
@@ -201,13 +253,13 @@ export default {
         bgImgCode
           ? this.getImgUrl(bgImgCode).then((url) => {
             this.loginImageBg = url
-            ;--this.imgLoading
+            this.imgLoading -= 1
           })
           : this.imgLoading -= 1
         iconCode
           ? this.getImgUrl(iconCode).then((url) => {
             this.loginIcon = url
-            ;--this.imgLoading
+            this.imgLoading -= 1
           })
           : this.imgLoading -= 1
         const boxImgCode = obj[1] && obj[1].icon
@@ -215,7 +267,7 @@ export default {
         boxImgCode
           ? this.getImgUrl(boxImgCode).then((url) => {
             this.boxImgUrl = url
-            ;--this.imgLoading
+            this.imgLoading -= 1
           })
           : this.imgLoading -= 1
       }).catch(() => {
@@ -223,16 +275,6 @@ export default {
       })
     },
 
-    // setBackground(imgUrl) {
-    //   document.querySelector("#bgMB").animate(
-    //     {
-    //       zIndex: 2,
-    //       opacity: 0,
-    //     },
-    //     1000
-    //   );
-    // },
-
     enterkeydown($event) {
       if ($event.keyCode === 13) {
         this.submit();
@@ -245,18 +287,25 @@ export default {
           this.loginLoading = true;
           const name = this.userData.username;
           const pwd = this.userData.password;
-          this.loginVerification(name, pwd);
+          const verifyCode = this.userData.verificationCode
+          this.loginVerification(name, pwd, verifyCode);
         }
       });
     },
 
-    loginVerification(name, pwd) {
-      //@king 20200801 vpn连不上，暂时去掉
+    loginVerification(name, pwd, verifyCode) {
+      let param = {
+        username: name,
+        password: pwd,
+      }
+      if (this.withVerificationCode) {
+        param['extInfo'] = {
+          verifyId: this.sessionId,
+          verifyCode: verifyCode,
+        }
+      }
       GMS.util.nvwa
-        .login({
-          username: name,
-          password: pwd,
-        })
+        .login(param)
         .then(res => {
           this.loginLoading = false;
           GMS.routerManager.afterLogin().then(() => {
@@ -270,6 +319,7 @@ export default {
           });
           if(res.data.code!=0 && res.data && res.data.msg){
             this.$Message.error(res.data.msg);
+            this.getVerificationCode();
           }
         })
         .catch((error) => {
@@ -279,27 +329,27 @@ export default {
           this.$Message.error(res.data.msg);
           this.userData.username = "";
           this.userData.password = "";
-          this.userData.verification = "";
+          this.userData.verificationCode = "";
         });
     },
 
     getVerificationCode() {
-      try {
-        this.verifyuuid = GMS.util.generateUUID();
-        GMS.$http.get(
-          `/captcha/getCaptcha?clientId=${this.verifyuuid}`,
-          {
-            responseType: "blob",
+      return GMS.$http.get(
+        `/rbc/verify-code/get?verifyId=${this.sessionId ? this.sessionId:''}`
+      ).then((resp) => {
+        if(!("data" in resp && 'success' in resp && 'error' in resp)){
+          resp = {
+            "data":resp.data.data ? resp.data.data : resp.data,
+            "success":true,
+            'error':null
           }
-        ).then((res) => {
-          if (res.data) {
-            this.verificationImg = window.URL.createObjectURL(res.data);
-          }
-        })
-        
-      } catch (err) {
-        console.log(err);
-      }
+        }
+        if (resp.success) {
+          this.verifyCodeImg = resp.data.verifyText
+          this.sessionId = resp.data.verifyId
+          return resp.data
+        }
+      })
     },
   },
 };
@@ -440,6 +490,19 @@ export default {
   }
 }
 
+.with-verificationCode-code {
+  margin-bottom: 0;
+}
+
+.verificationCode-code-field {
+  margin-bottom: 5px;
+  /deep/ .ivu-form-item-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
 .login-btn {
   padding-left: 50px;
   width: 370px;