qgb-process 0.2.3 → 0.2.7

package/src/views/Login/components/FormPassFind.vue

@@ -1,395 +1,395 @@
-<!-- /**
-* 忘记密码
-* 忘记密码-验证手机号页面
-* @authors zzt
-* @date 2019-02-18
-* @version 1.0.1
-*/ -->
-
-<template>
-  <div>
-    <div class="passfind-box-auto">
-      <div class="passfind-box">
-        <el-form
-          :rules="rules"
-          :model="findPassword"
-          ref="findPassword"
-        >
-          <div class="tc-20"></div>
-          <el-form-item>
-            <div style="font-size: 18px;color: #0286DF;font-weight: bold;float: left;">忘记密码</div>
-            <div style="float: right;">
-              已有账号，
-              <el-link
-                :underline="false"
-                style="color: #0286DF;"
-                @click="go()"
-              >去登录>></el-link>
-            </div>
-          </el-form-item>
-          <el-form-item
-            label=""
-            prop="hidden"
-            class="hidd"
-          >
-            <el-input placeholder="hidden"></el-input>
-          </el-form-item>
-          <el-form-item prop="tel">
-            <div class="passfind-input">
-              <div class="bg-img"></div>
-              <el-input
-                placeholder="请输入手机号码"
-                v-model.trim="findPassword.tel"
-                oninput="if(value.length>11)value=value.slice(0,11)"
-              ></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item prop="code">
-            <div class="passfind-code-box">
-              <div class="bg-img2"></div>
-              <el-input
-                v-model="findPassword.code"
-                style="width:218px"
-                placeholder="请输入验证码"
-                oninput="if(value.length>6)value=value.slice(0,6)"
-              ></el-input>
-              <el-button
-                :disabled="isDisabled"
-                @click="getVerificationCode"
-              >{{buttonName}}</el-button>
-            </div>
-          </el-form-item>
-          <el-form-item prop="newpassword">
-            <div class="passfind-input">
-              <div class="bg-img2"></div>
-              <input
-                type="text"
-                style="display: none;"
-              >
-              <el-input
-                type="password"
-                autocomplete="new-password"
-                onpaste="return false"
-                oncontextmenu="return false"
-                oncopy="return false"
-                oncut="return false"
-                v-model.trim="findPassword.newpassword"
-                placeholder="6-20个字符，字母和数字组合"
-                oninput="if(value.length>20)value=value.slice(0,20)"
-              ></el-input>
-            </div>
-          </el-form-item>
-          <el-form-item prop="newpassword_">
-            <div class="passfind-input">
-              <div class="bg-img2"></div>
-              <input
-                type="text"
-                style="display: none;"
-              >
-              <el-input
-                autocomplete="new-password"
-                type="password"
-                onpaste="return false"
-                oncontextmenu="return false"
-                oncopy="return false"
-                oncut="return false"
-                v-model.trim="findPassword.newpassword_"
-                placeholder="请再次输入新密码"
-                oninput="if(value.length>20)value=value.slice(0,20)"
-              ></el-input>
-            </div>
-
-          </el-form-item>
-          <el-form-item>
-            <div class="submit-button">
-              <el-button @click="next('findPassword')">完成</el-button>
-            </div>
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { isvalidPhone } from "@/components/form/validate"; // 电话号码
-import { Num } from "@/components/form/num"; // 数字
-import { apiLostPassword } from "@/api/apiLostPassword";
-import localStorage from "@/storage/localStorage";
-import { validatePasswordStrength } from "@/utils/passwordStrength";
-export default {
-  name: "Passfind",
-  data() {
-    return {
-      buttonName: "获取验证码",
-      isDisabled: false,
-      time: 60,
-      findPassword: {
-        tel: "",
-        code: "",
-        newpassword: "",
-        newpassword_: ""
-      },
-      disabled: true,
-      issend: false,
-      rules: {
-        tel: [
-          { required: true, validator: this.validTelPhone, trigger: "blur" }
-        ],
-        code: [{ required: true, validator: this.validCode, trigger: "blur" }],
-        newpassword: [
-          { required: true, validator: this.checkPassword, trigger: "blur" }
-        ],
-        newpassword_: [
-          {
-            required: true,
-            validator: this.checkConfirmPassword,
-            trigger: "blur"
-          }
-        ]
-      },
-      // onFocus () {
-      //   this.type = 'password'
-      // // console.log(this.$refs.password)
-      // },
-      isSend: true
-    };
-  },
-  components: {},
-  methods: {
-    go() {
-      this.$emit("goLogin");
-    },
-    isSends() {
-      // 判断15分钟内是否有发送过验证码
-      const time = localStorage.read("isLosePassword" + this.findPassword.tel);
-      const timeInitialize = 15 * 60;
-      const timeDifference = (Number(new Date()) - time) / 1000;
-      if (timeDifference < timeInitialize) {
-        this.isSend = false;
-      } else {
-        localStorage.clear("isLosePassword" + this.findPassword.tel);
-        this.isSend = true;
-      }
-    },
-    async getVerificationCode() {
-      if (this.findPassword.tel === "") {
-        this.$_toast({ type: "error", msg: "请输入手机号！" });
-        return;
-      }
-      if (this.findPassword.tel !== "" && this.findPassword.tel.length !== 11) {
-        this.$_toast({ type: "error", msg: "请输入正确手机号！" });
-        return;
-      }
-      this.isDisabled = true;
-      const result = await apiLostPassword.sendCodeOldTel({
-        tel: this.findPassword.tel
-      });
-      if (result.data.code === 200) {
-        const time = new Date();
-        localStorage.set(
-          "isLosePassword" + this.findPassword.tel,
-          Number(time)
-        );
-        this.issend = true;
-
-        this.$_toast({ msg: "验证码已发送到您的手机，请查收" });
-        const me = this;
-        const interval = window.setInterval(function() {
-          me.buttonName = "（" + me.time + "秒）";
-          --me.time;
-          if (me.time < 0) {
-            me.buttonName = "获取验证码";
-            me.time = 60;
-            me.isDisabled = false;
-            window.clearInterval(interval);
-          }
-        }, 1000);
-      } else {
-        this.$_toast({ type: "error", msg: result.data.msg });
-        this.isDisabled = false;
-      }
-    },
-    next(formName) {
-      this.isSends();
-      this.$refs[formName].validate(async valid => {
-        if (this.isSend) {
-          this.$message({
-            message: "请点击立即获取",
-            type: "warning"
-          });
-        } else {
-          if (valid) {
-            const form = {};
-            form.tel = this.findPassword.tel;
-            form.pwd = this.findPassword.newpassword;
-            form.tagCode = this.findPassword.code;
-            // 密码分数
-            const { score: passwordStrengthScore } = validatePasswordStrength(
-              this.findPassword.newpassword
-            );
-            form.passwordStrengthScore = passwordStrengthScore;
-            const res = await apiLostPassword.forget(form);
-            if (res.data.code === 200) {
-              this.$_toast({ msg: "密码找回成功，请重新登录！" });
-
-              this.go();
-              localStorage.clear("isLosePassword" + this.findPassword.tel);
-              return;
-            }
-            this.$_toast({ type: "error", msg: res.data.msg });
-          }
-        }
-      });
-    },
-
-    validTelPhone(rule, value, callback) {
-      // 电话号码
-      if (!value) {
-        callback(new Error("请输入电话号码"));
-      } else if (!isvalidPhone(value)) {
-        callback(new Error("请输入正确的11位手机号码"));
-      } else {
-        callback();
-      }
-    },
-    validCode(rule, value, callback) {
-      // 验证码
-      if (!value) {
-        callback(new Error("请输入验证码"));
-      } else if (!Num(value)) {
-        callback(new Error("请输入正确的6位数字验证码"));
-      } else if (!(value.length === 6)) {
-        callback(new Error("请输入正确的6位数字验证码"));
-      } else {
-        callback();
-      }
-    },
-    checkPassword(rule, value, callback) {
-      const Pass = /^(?!\d+$)(?![a-zA-Z]+$)[\da-zA-Z]+$/;
-      // /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
-      if (value === "") {
-        callback(new Error("密码不能为空"));
-      } else if (value.length < 6 || value.length > 18) {
-        callback(new Error("密码须由6-18位字母和数字组成"));
-      } else if (!Pass.test(value)) {
-        callback(new Error("密码只能由数字与字母组成且必须包含数字和字母"));
-      } else {
-        callback();
-      }
-    },
-    checkConfirmPassword(rule, value, callback) {
-      const Pass = /^(?!\d+$)(?![a-zA-Z]+$)[\da-zA-Z]+$/;
-      if (value.length < 6 || value.length > 18) {
-        callback(new Error("密码须由6-18位字母和数字组成"));
-      } else if (!Pass.test(value)) {
-        callback(new Error("密码只能由数字与字母组成且必须包含数字和字母"));
-      } else if (value === "") {
-        callback(new Error("确认密码不能为空"));
-      } else if (
-        !(this.findPassword.password === this.findPassword.confirmPassword)
-      ) {
-        const str = "确认密码和设置密码不一致";
-        callback(str);
-      } else {
-        callback();
-      }
-    }
-  }
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-.passfind-box-auto {
-  position: absolute;
-  top: 8px;
-  right: -30px;
-  width: 400px;
-  background: #fff;
-}
-.passfind-box {
-  width: 330px;
-  margin: 0 auto;
-  .passfind-input {
-    .passfind-input-bg-font {
-      z-index: 5;
-      color: #333333;
-      position: absolute;
-      left: 16px;
-      top: 0;
-      font-size: 14px;
-    }
-  }
-  .hidd {
-    display: none;
-  }
-  .el-button {
-    padding: 12px 20px;
-    margin: 0;
-  }
-  .logo {
-    margin-top: 22px;
-  }
-  .submit-button {
-    > button {
-      width: 100%;
-      height: 40px;
-      border: 1px solid rgba(2, 134, 223, 1);
-      border-radius: 4px;
-      background-color: #0286df;
-      color: #ffffff;
-    }
-  }
-  .bg-img {
-    position: absolute;
-    top: 0px;
-    z-index: 1;
-    border-right: 1px solid #e4e7ed;
-    width: 40px;
-    height: 40px;
-    background: url('../../../assets/login/login-tel.png') 12px 8px no-repeat;
-    background-size: 18px 26px;
-  }
-  .bg-img2 {
-    position: absolute;
-    top: 0px;
-    z-index: 1;
-    border-right: 1px solid #e4e7ed;
-    width: 40px;
-    height: 40px;
-    background: url('../../../assets/login/login-password.png') 12px 11px
-      no-repeat;
-    background-size: 17px 19px;
-  }
-}
-</style>
-
-<style lang="scss" rel="stylesheet/scss" >
-.passfind-box {
-  .passfind-code-box {
-    > button {
-      border: 1px solid rgba(2, 134, 223, 1);
-      border-radius: 4px;
-      background-color: #0286df;
-      color: #ffffff;
-      float: right;
-    }
-  }
-  button {
-    height: 40px;
-  }
-  .el-input__inner {
-    height: 40px;
-    line-height: 40px;
-    font-size: 14px;
-    text-indent: 34px;
-    // border-radius: 0;
-  }
-  .el-form-item {
-    margin-bottom: 20px;
-  }
-  // .el-form-item__content{
-  //   width: 300px;
-  // }
-}
-</style>
+<!-- /**
+* 忘记密码
+* 忘记密码-验证手机号页面
+* @authors zzt
+* @date 2019-02-18
+* @version 1.0.1
+*/ -->
+
+<template>
+  <div>
+    <div class="passfind-box-auto">
+      <div class="passfind-box">
+        <el-form
+          :rules="rules"
+          :model="findPassword"
+          ref="findPassword"
+        >
+          <div class="tc-20"></div>
+          <el-form-item>
+            <div style="font-size: 18px;color: #0286DF;font-weight: bold;float: left;">忘记密码</div>
+            <div style="float: right;">
+              已有账号，
+              <el-link
+                :underline="false"
+                style="color: #0286DF;"
+                @click="go()"
+              >去登录>></el-link>
+            </div>
+          </el-form-item>
+          <el-form-item
+            label=""
+            prop="hidden"
+            class="hidd"
+          >
+            <el-input placeholder="hidden"></el-input>
+          </el-form-item>
+          <el-form-item prop="tel">
+            <div class="passfind-input">
+              <div class="bg-img"></div>
+              <el-input
+                placeholder="请输入手机号码"
+                v-model.trim="findPassword.tel"
+                oninput="if(value.length>11)value=value.slice(0,11)"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item prop="code">
+            <div class="passfind-code-box">
+              <div class="bg-img2"></div>
+              <el-input
+                v-model="findPassword.code"
+                style="width:218px"
+                placeholder="请输入验证码"
+                oninput="if(value.length>6)value=value.slice(0,6)"
+              ></el-input>
+              <el-button
+                :disabled="isDisabled"
+                @click="getVerificationCode"
+              >{{buttonName}}</el-button>
+            </div>
+          </el-form-item>
+          <el-form-item prop="newpassword">
+            <div class="passfind-input">
+              <div class="bg-img2"></div>
+              <input
+                type="text"
+                style="display: none;"
+              >
+              <el-input
+                type="password"
+                autocomplete="new-password"
+                onpaste="return false"
+                oncontextmenu="return false"
+                oncopy="return false"
+                oncut="return false"
+                v-model.trim="findPassword.newpassword"
+                placeholder="6-20个字符，字母和数字组合"
+                oninput="if(value.length>20)value=value.slice(0,20)"
+              ></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item prop="newpassword_">
+            <div class="passfind-input">
+              <div class="bg-img2"></div>
+              <input
+                type="text"
+                style="display: none;"
+              >
+              <el-input
+                autocomplete="new-password"
+                type="password"
+                onpaste="return false"
+                oncontextmenu="return false"
+                oncopy="return false"
+                oncut="return false"
+                v-model.trim="findPassword.newpassword_"
+                placeholder="请再次输入新密码"
+                oninput="if(value.length>20)value=value.slice(0,20)"
+              ></el-input>
+            </div>
+
+          </el-form-item>
+          <el-form-item>
+            <div class="submit-button">
+              <el-button @click="next('findPassword')">完成</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isvalidPhone } from "@/components/form/validate"; // 电话号码
+import { Num } from "@/components/form/num"; // 数字
+import { apiLostPassword } from "@/api/apiLostPassword";
+import localStorage from "@/storage/localStorage";
+import { validatePasswordStrength } from "@/utils/passwordStrength";
+export default {
+  name: "Passfind",
+  data() {
+    return {
+      buttonName: "获取验证码",
+      isDisabled: false,
+      time: 60,
+      findPassword: {
+        tel: "",
+        code: "",
+        newpassword: "",
+        newpassword_: ""
+      },
+      disabled: true,
+      issend: false,
+      rules: {
+        tel: [
+          { required: true, validator: this.validTelPhone, trigger: "blur" }
+        ],
+        code: [{ required: true, validator: this.validCode, trigger: "blur" }],
+        newpassword: [
+          { required: true, validator: this.checkPassword, trigger: "blur" }
+        ],
+        newpassword_: [
+          {
+            required: true,
+            validator: this.checkConfirmPassword,
+            trigger: "blur"
+          }
+        ]
+      },
+      // onFocus () {
+      //   this.type = 'password'
+      // // console.log(this.$refs.password)
+      // },
+      isSend: true
+    };
+  },
+  components: {},
+  methods: {
+    go() {
+      this.$emit("goLogin");
+    },
+    isSends() {
+      // 判断15分钟内是否有发送过验证码
+      const time = localStorage.read("isLosePassword" + this.findPassword.tel);
+      const timeInitialize = 15 * 60;
+      const timeDifference = (Number(new Date()) - time) / 1000;
+      if (timeDifference < timeInitialize) {
+        this.isSend = false;
+      } else {
+        localStorage.clear("isLosePassword" + this.findPassword.tel);
+        this.isSend = true;
+      }
+    },
+    async getVerificationCode() {
+      if (this.findPassword.tel === "") {
+        this.$_toast({ type: "error", msg: "请输入手机号！" });
+        return;
+      }
+      if (this.findPassword.tel !== "" && this.findPassword.tel.length !== 11) {
+        this.$_toast({ type: "error", msg: "请输入正确手机号！" });
+        return;
+      }
+      this.isDisabled = true;
+      const result = await apiLostPassword.sendCodeOldTel({
+        tel: this.findPassword.tel
+      });
+      if (result.data.code === 200) {
+        const time = new Date();
+        localStorage.set(
+          "isLosePassword" + this.findPassword.tel,
+          Number(time)
+        );
+        this.issend = true;
+
+        this.$_toast({ msg: "验证码已发送到您的手机，请查收" });
+        const me = this;
+        const interval = window.setInterval(function() {
+          me.buttonName = "（" + me.time + "秒）";
+          --me.time;
+          if (me.time < 0) {
+            me.buttonName = "获取验证码";
+            me.time = 60;
+            me.isDisabled = false;
+            window.clearInterval(interval);
+          }
+        }, 1000);
+      } else {
+        this.$_toast({ type: "error", msg: result.data.msg });
+        this.isDisabled = false;
+      }
+    },
+    next(formName) {
+      this.isSends();
+      this.$refs[formName].validate(async valid => {
+        if (this.isSend) {
+          this.$message({
+            message: "请点击立即获取",
+            type: "warning"
+          });
+        } else {
+          if (valid) {
+            const form = {};
+            form.tel = this.findPassword.tel;
+            form.pwd = this.findPassword.newpassword;
+            form.tagCode = this.findPassword.code;
+            // 密码分数
+            const { score: passwordStrengthScore } = validatePasswordStrength(
+              this.findPassword.newpassword
+            );
+            form.passwordStrengthScore = passwordStrengthScore;
+            const res = await apiLostPassword.forget(form);
+            if (res.data.code === 200) {
+              this.$_toast({ msg: "密码找回成功，请重新登录！" });
+
+              this.go();
+              localStorage.clear("isLosePassword" + this.findPassword.tel);
+              return;
+            }
+            this.$_toast({ type: "error", msg: res.data.msg });
+          }
+        }
+      });
+    },
+
+    validTelPhone(rule, value, callback) {
+      // 电话号码
+      if (!value) {
+        callback(new Error("请输入电话号码"));
+      } else if (!isvalidPhone(value)) {
+        callback(new Error("请输入正确的11位手机号码"));
+      } else {
+        callback();
+      }
+    },
+    validCode(rule, value, callback) {
+      // 验证码
+      if (!value) {
+        callback(new Error("请输入验证码"));
+      } else if (!Num(value)) {
+        callback(new Error("请输入正确的6位数字验证码"));
+      } else if (!(value.length === 6)) {
+        callback(new Error("请输入正确的6位数字验证码"));
+      } else {
+        callback();
+      }
+    },
+    checkPassword(rule, value, callback) {
+      const Pass = /^(?!\d+$)(?![a-zA-Z]+$)[\da-zA-Z]+$/;
+      // /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/
+      if (value === "") {
+        callback(new Error("密码不能为空"));
+      } else if (value.length < 6 || value.length > 18) {
+        callback(new Error("密码须由6-18位字母和数字组成"));
+      } else if (!Pass.test(value)) {
+        callback(new Error("密码只能由数字与字母组成且必须包含数字和字母"));
+      } else {
+        callback();
+      }
+    },
+    checkConfirmPassword(rule, value, callback) {
+      const Pass = /^(?!\d+$)(?![a-zA-Z]+$)[\da-zA-Z]+$/;
+      if (value.length < 6 || value.length > 18) {
+        callback(new Error("密码须由6-18位字母和数字组成"));
+      } else if (!Pass.test(value)) {
+        callback(new Error("密码只能由数字与字母组成且必须包含数字和字母"));
+      } else if (value === "") {
+        callback(new Error("确认密码不能为空"));
+      } else if (
+        !(this.findPassword.password === this.findPassword.confirmPassword)
+      ) {
+        const str = "确认密码和设置密码不一致";
+        callback(str);
+      } else {
+        callback();
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.passfind-box-auto {
+  position: absolute;
+  top: 8px;
+  right: -30px;
+  width: 400px;
+  background: #fff;
+}
+.passfind-box {
+  width: 330px;
+  margin: 0 auto;
+  .passfind-input {
+    .passfind-input-bg-font {
+      z-index: 5;
+      color: #333333;
+      position: absolute;
+      left: 16px;
+      top: 0;
+      font-size: 14px;
+    }
+  }
+  .hidd {
+    display: none;
+  }
+  .el-button {
+    padding: 12px 20px;
+    margin: 0;
+  }
+  .logo {
+    margin-top: 22px;
+  }
+  .submit-button {
+    > button {
+      width: 100%;
+      height: 40px;
+      border: 1px solid rgba(2, 134, 223, 1);
+      border-radius: 4px;
+      background-color: #0286df;
+      color: #ffffff;
+    }
+  }
+  .bg-img {
+    position: absolute;
+    top: 0px;
+    z-index: 1;
+    border-right: 1px solid #e4e7ed;
+    width: 40px;
+    height: 40px;
+    background: url('../../../assets/login/login-tel.png') 12px 8px no-repeat;
+    background-size: 18px 26px;
+  }
+  .bg-img2 {
+    position: absolute;
+    top: 0px;
+    z-index: 1;
+    border-right: 1px solid #e4e7ed;
+    width: 40px;
+    height: 40px;
+    background: url('../../../assets/login/login-password.png') 12px 11px
+      no-repeat;
+    background-size: 17px 19px;
+  }
+}
+</style>
+
+<style lang="scss" rel="stylesheet/scss" >
+.passfind-box {
+  .passfind-code-box {
+    > button {
+      border: 1px solid rgba(2, 134, 223, 1);
+      border-radius: 4px;
+      background-color: #0286df;
+      color: #ffffff;
+      float: right;
+    }
+  }
+  button {
+    height: 40px;
+  }
+  .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    text-indent: 34px;
+    // border-radius: 0;
+  }
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+  // .el-form-item__content{
+  //   width: 300px;
+  // }
+}
+</style>