@lambo-design/login-form 1.0.0-beta.12 → 1.0.0-beta.13

package/package.json

@@ -1,17 +1,24 @@
-{
-  "name": "@lambo-design/login-form",
-  "version": "1.0.0-beta.12",
-  "description": "",
-  "main": "index.js",
-  "scripts": {},
-  "author": "lambo",
-  "license": "ISC",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "devDependencies": {
-    "@lambo-design/core": "workspace:^",
-    "@lambo-design/shared": "workspace:^"
-  }
+{
+  "name": "@lambo-design/login-form",
+  "version": "1.0.0-beta.13",
+  "description": "",
+  "main": "index.js",
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@lambo-design/core": "^4.7.1-beta.147",
+    "@lambo-design/shared": "^1.0.0-beta.233"
+  },
+  "scripts": {
+    "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
+    "release-major": "standard-version --release-as major",
+    "release-minor": "standard-version --release-as minor",
+    "release-patch": "standard-version --release-as patch",
+    "release-beta": "standard-version --prerelease beta",
+    "re-publish": "pnpm publish --access public --no-git-checks"
+  }
 }

package/src/login-form.vue

@@ -16,16 +16,44 @@
         </span>
       </Input>
     </FormItem>
-    <FormItem prop="validCode">
+    <FormItem prop="validCode" v-if="captchaMethod === '图片'">
       <Input v-model="form.validCode" class="captcha" placeholder="请输入验证码">
         <template slot="prepend">
-          <img class="prefix" src="./styles/images/captcha.svg">
+          <img class="prefix" src="@/assets/images/captcha.svg">
         </template>
       </Input>
       <div class="Imgbox"><img :src="captchaUrl" class="captchaImg" @click="getCaptcha"></div>
     </FormItem>
+    <FormItem prop="validCode" v-if="captchaMethod === '短信'">
+      <Input
+          search
+          :enter-button="ValidNumText"
+          placeholder="请查收短信并输入验证码"
+          v-model="form.validCode"
+          @on-search="getVaildCode">
+        <template slot="prepend">
+          <img class="prefix" src="@/assets/images/captcha.svg">
+        </template>
+      </Input>
+    </FormItem>
+    <FormItem prop="validCode" v-if="captchaMethod === '邮箱'">
+      <Input
+          search
+          :enter-button="ValidNumText"
+          placeholder="请查收邮件并输入验证码"
+          v-model="form.validCode"
+          @on-search="getVaildCode">
+        <template slot="prepend">
+          <img class="prefix" src="@/assets/images/captcha.svg">
+        </template>
+      </Input>
+    </FormItem>
+    <FormItem v-if="captchaMethod === '滑动图片'">
+      <Button long :disabled="isDisabled" @click="showSlideVerify">{{ buttonText }}</Button>
+    </FormItem>
     <FormItem>
       <Checkbox v-model="rememberMe"><span class="remember">记住用户名</span></Checkbox>
+      <label v-if="showForgetPassword==='1'" style="float: right;"><router-link to="/forgetPasswordForget">忘记密码？</router-link></label>
     </FormItem>
     <FormItem>
       <Button :loading="loading" long type="primary" @click="handleSubmit">登录</Button>
@@ -37,9 +65,14 @@ import config from "@lambo-design/shared/config/config";
 import {getLocalStorage, removeLocalStorage, setLocalStorage} from "@lambo-design/shared/utils/platform";
 import {guid} from "@lambo-design/shared/utils/number";
 import crypto from "@lambo-design/shared/utils/crypto"
+import ajax from "@lambo-design/shared/utils/ajax";
+import slideVerify from '@/view/login/slide-verify/src/slide-verify';
 
 export default {
   name: 'LoginForm',
+  components:{
+    slideVerify,
+  },
   props: {
     userNameRules: {
       type: Array,
@@ -76,17 +109,29 @@ export default {
     pasCryptor: {
       type: String,
       default: 'sm3'
-    }
+    },
+    captchaMethod:{type: String},
+    showForgetPassword:{type: String},
+    passwordRetrievalMethod:{type: Array},
+    smConfigId:{type: String},
+    templateId:{type: String},
+    mailConfigId:{type: String},
+    isSlideVerify:{type: Boolean},
+    buttonText: {type:String}, // 初始按钮文本
+    isDisabled: {type:Boolean},
   },
   data() {
     return {
+      ValidNumText: "获取验证码",
       form: {
         userName: '',
         password: '',
         validCode: ''
       },
       rememberMe: false,
-      validCodeId: ''
+      validCodeId: '',
+      countDown: 60,
+      countDownNum: 60,
     }
   },
   computed: {
@@ -119,9 +164,89 @@ export default {
           false
       )
     },
+    getVaildCode() {
+      let self = this;
+      if (self.ValidNumText == "获取验证码") {
+        self.ValidNumText = self.countDown + "s后再次获取";
+        self.clock = window.setInterval(() => {
+          self.countDown--;
+          self.ValidNumText = self.countDown + "s后再次获取";
+          if (self.countDown <= 0) {
+            window.clearInterval(self.clock);
+            self.ValidNumText = "获取验证码";
+            self.countDown = self.countDownNum;
+          }
+        }, 1000);
+        let param
+        let url
+        if(self.captchaMethod === '邮箱'){
+          url = config.upmsServerContext + "/anon/user/sendMailForLogin"
+          param = {
+            userId: self.form.userName,
+            //mailAddress: self.form.mailAddress
+            validCodeId: self.validCodeId,
+            mailConfigId: self.mailConfigId
+          };
+        }
+        if(self.captchaMethod === '短信'){
+          url = config.upmsServerContext + "/anon/user/sendSmsForLogin"
+          param = {
+            userId: self.form.userName,
+            //phoneNumber: self.form.phoneNumber
+            validCodeId: self.validCodeId,
+            smConfigId: self.smConfigId,
+            templateId: self.templateId
+          }
+        }
+        if (self.form.userName && self.form.userName.trim().length > 0){
+          ajax
+              .post(url, param)
+              .then(function(resp) {
+                    if (resp.data.code == 200) {
+                      self.$Message.success({
+                        content: "发送成功",})
+                    } else {
+                      self.$Message.error(resp.data.data);
+                      window.clearInterval(self.clock);
+                      self.ValidNumText = "获取验证码";
+                      self.countDown = self.countDownNum;
+                    }
+                  }
+              );
+        }else{
+          self.$Message.error("请输入用户名");
+          window.clearInterval(self.clock);
+          self.ValidNumText = "获取验证码";
+          self.countDown = self.countDownNum;
+        }
+      }
+    },
+    showSlideVerify(){
+      if (this.form.userName && this.form.userName.trim().length > 0){
+        let params = {
+          userName: this.form.userName,
+          password: this.form.password,
+          validCodeInput: this.form.validCode,
+          validCodeId: this.validCodeId
+        }
+        if (this.pasCryptor) {
+          params.pasCryptor = this.pasCryptor;
+          params.pasEncode = this.getCryptorPassword(this.form.password,this.form.validCode,this.pasCryptor);
+        } else {
+          params.pasMd5 = this.getCryptorPassword(this.form.password,this.form.validCode,'md5');
+          params.pasSm3 = this.getCryptorPassword(this.form.password,this.form.validCode,'sm3');
+        }
+        this.$emit('show-slide-verify', true,params)
+      }else{
+        this.$Message.error("请输入用户名");
+      }
+    },
     handleSubmit() {
       this.$refs.loginForm.validate((valid) => {
-        if (valid) {
+        if(valid && this.captchaMethod == '滑动图片' && !this.isSlideVerify){
+          this.$Message.error("请点击验证进行登录验证");
+        }
+        if (valid && ((this.captchaMethod == '滑动图片' && this.isSlideVerify) || this.captchaMethod != '滑动图片')) {
           let params = {
             userName: this.form.userName,
             password: this.form.password,
@@ -169,5 +294,5 @@ export default {
 }
 </script>
 <style lang="less">
-@import 'styles/css/login-form';
+ @import 'styles/css/login-form';
 </style>