qgb-process 0.2.3 → 0.2.7

package/src/views/Login/Passfind.vue

@@ -1,347 +1,347 @@
-<!-- /**
-* 忘记密码
-* 忘记密码-验证手机号页面
-* @authors zzt
-* @date 2019-02-18
-* @version 1.0.1
-*/ -->
-
-<template>
-  <div>
-    <Title name="找回密码"></Title>
-	<Background>
-		<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="$router.push('/login')">去登录>></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:200px" 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>
-	</Background>
-	<Bottom></Bottom>
-  </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: {
-    Title: () => import("@/views/Login/components/Title.vue"),
-    Background: () => import("@/views/Login/components/Background.vue"),
-    Bottom: () => import("@/components/public/Bottom")
-  },
-  methods: {
-    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.$router.push({ path: "/login" })
-              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: 60px;
-   right: 0;
-   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__content{
-  //   width: 300px;
-  // }
-}
-
-</style>
+<!-- /**
+* 忘记密码
+* 忘记密码-验证手机号页面
+* @authors zzt
+* @date 2019-02-18
+* @version 1.0.1
+*/ -->
+
+<template>
+  <div>
+    <Title name="找回密码"></Title>
+	<Background>
+		<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="$router.push('/login')">去登录>></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:200px" 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>
+	</Background>
+	<Bottom></Bottom>
+  </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: {
+    Title: () => import("@/views/Login/components/Title.vue"),
+    Background: () => import("@/views/Login/components/Background.vue"),
+    Bottom: () => import("@/components/public/Bottom")
+  },
+  methods: {
+    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.$router.push({ path: "/login" })
+              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: 60px;
+   right: 0;
+   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__content{
+  //   width: 300px;
+  // }
+}
+
+</style>