11

src/store/time.js

@@ -23,6 +23,7 @@ export function formatTime(data) {
 export function intervalTime(startTime, endTime) {
   var stime = new Date(startTime);
   var etime = new Date(endTime);
+  // console.log(stime,etime)
   if(stime > etime){
     return add0(0)+':'+add0(0)
   }

src/views/index/login/Reset.vue

@@ -29,10 +29,10 @@
             ></el-input>
             <!-- 短信验证码 -->
             <div class="phoneCode">
-              <span class="code" v-show="show" @click="getCode"
+              <span class="code" v-show="showCode" @click="getCode"
                 >获取验证码</span
               >
-              <span v-show="!show" class="count">{{ codeTime }} s</span>
+              <span v-show="!showCode" class="count">{{ count }} s</span>
             </div>
           </el-form-item>
           <el-form-item prop="password">
@@ -86,7 +86,9 @@
 import { passwordCode } from "r/index/register";
 import { changePassCode } from "r/index/login";
 import { mobileCheck } from "@/common/utils.js";
-import  {parseTime}  from "common/utils";
+import { parseTime } from "common/utils";
+import { intervalTime } from "store/time";
+import { timeSpan } from "common/utils";
 
 export default {
   name: "index-reset",
@@ -100,11 +102,11 @@ export default {
     };
     return {
       // 手机验证短信
-      show: true,
+      showCode: true,
       count: "",
       timer: null,
       isShowPwd: true, // 控制密码显示隐藏
-      codeTime:'',//手机验证码倒计时时间
+      codeTime: "", //手机验证码倒计时时间
       resetForm: {
         phone: "",
         code: "",
@@ -155,12 +157,10 @@ export default {
           {
             trigger: "blur",
             validator: (rule, value, callback) => {
-              var passwordreg =/^[a-zA-Z0-9]{6,12}$/
+              var passwordreg = /^[a-zA-Z0-9]{6,12}$/;
               // /(?=.*\d)(?=.*[a-zA-Z]).{6,12}/;
               if (!passwordreg.test(value)) {
-                callback(
-                  new Error("请输入6-12位，包含数字/字母,")
-                );
+                callback(new Error("请输入6-12位，包含数字/字母,"));
               } else {
                 callback();
               }
@@ -193,34 +193,56 @@ export default {
       if (!this.resetForm.phone) {
         return this.$message.error("请输入手机号");
       }
+
+      // 接口获得验证码
+      passwordCode({
+        phone: this.resetForm.phone,
+      }).then((res) => {
+        console.log(res, "passwordCode");
+        if (res.data.code != 200) {
+          return this.$message.error(res.data.message);
+        }
+        this.$message.success(res.data.message);
+        // this.codeTime = parseTime(res.data.data.now);
+        this.codeTime = res.data.data.now * 1000;
+        window.localStorage.setItem("codeTime", this.codeTime);
+        this.time(this.codeTime);
+      });
+    },
+    time(code) {
+      let nowdata = new Date().getTime();
+      // console.log(nowdata);
+      let codeTime = code;
+      // console.log(codeTime);
+      let time = intervalTime(nowdata, codeTime);
+      console.log(time, "time");
+    //   var min = time.split(":")[1];
+    //   var sec = time.split(":")[2];
+    //  let s = Number(min * 60) + Number(sec);
+    //   console.log(s); //130
+      // let aa = timeSpan(nowdata, codeTime);
+      
       // 倒计时60s
       const TIME_COUNT = 60;
       if (!this.timer) {
         this.count = TIME_COUNT;
-        this.show = false;
+        this.showCode = false;
         this.timer = setInterval(() => {
-          if (this.count > 0 && this.count <= TIME_COUNT) {
+          if (
+            this.count > 0 &&
+            this.count <= TIME_COUNT &&
+            nowdata < codeTime&&
+            codeTime
+          ) {
             this.count--;
           } else {
-            this.show = true;
+            this.showCode = true;
             clearInterval(this.timer);
             this.timer = null;
           }
         }, 1000);
       }
-      // 接口获得验证码
-      passwordCode({
-        phone: this.resetForm.phone,
-      }).then((res) => {
-        console.log(res,'passwordCode');
-        if (res.data.code != 200) {
-          return this.$message.error(res.data.message);
-        }
-        this.$message.success(res.data.message);
-        this.codeTime=parseTime(res.data.data.now)
-      });
     },
-
     // 表单验证
     submitForm() {
       this.$refs["resetFormRef"].validate((valid) => {
@@ -371,14 +393,14 @@ export default {
     height: 20px;
     font-size: 22px;
     font-weight: 500;
-    color:var(--color);
+    color: var(--color);
     line-height: 20px;
   }
 
   .line {
     width: 83px;
     height: 3px;
-    background:var(--color);
+    background: var(--color);
     border-radius: 2px;
   }
 
@@ -407,7 +429,7 @@ export default {
           .code {
             font-size: 14px;
             font-weight: 600;
-            color:var(--color);
+            color: var(--color);
           }
         }
 
@@ -448,7 +470,7 @@ export default {
         .el-button {
           width: 100%;
           height: 60px;
-          background:var(--color);
+          background: var(--color);
           border-radius: 4px;
           opacity: 0.8;
           line-height: 50px;

vue.config.js

@@ -16,7 +16,6 @@ module.exports = {
       .set('r', resolve('src/request'))
       .set('config', resolve('src/config'))
       .set('common', resolve('src/common'))
-
       .set('store', resolve('src/store'))
   },
   // devServer: {