25.找回密码

配置路由并新建相识的文件

{
    path: "/recovery",
    name: "Recovery",
    children: [
      {
        path: "/",
        name: "index",
        component: () => import("../views/recovery/RecoveryIndex.vue"),
      },
      {
        path: "btn",
        name: "Btn",
        component: () => import("../views/recovery/RecoveryBtn.vue"),
      },
    ],
    component: () => import("../views/Search.vue"),
  },

 recoveryBtn.vue

<template>
  <div class="login container">
    <header>
      <ul>
        <li @click="goback"><i class="iconfont icon-fanhui"></i></li>
        <li><span>更改密码</span></li>
        <li><i class="iconfont icon-RectangleCopy"></i></li>
      </ul>
    </header>
    <section>
      <img src="../../assets/images/6363865086124566984782551.jpg" alt="" />
      <div class="inp">
        <div class="tel">
          <input type="text" v-model="userPwd" placeholder="请输入新的密码" />
        </div>
        <!-- <div class="pwd">
          <input type="text" v-model="userCode" placeholder="请输入验证码" />
          <button :disabled="disabled" @click="sendCode">{{ codeMsg }}</button>
        </div> -->

        <div class="login-btn" @click="submitBtn">
          <button>确认修改</button>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import http from "@/common/api/request.js";
export default {
  data() {
    return {
      userPwd: "", //用户输入的密码

      // 验证规则
      rules: {
        //密码的验证规则
        userPwd: {
          rule: /^\w{6,12}$/,
          msg: "密码不能为空,并且6-12位",
        },
      },
    };
  },
  methods: {
    //点击下一步
    submitBtn() {
      if (!this.validate("userPwd")) return;
      //确认修改
      http
        .$axios({
          url: "/api/recovery",
          method: "POST",
          data: {
              phone:this.$route.phones,
            userPwd: this.userPwd,
          },
        })
        .then((res) => {
          console.log(res);
        
        });
    },

    goback() {
      this.$router.back();
    },
    // 验证信息提示
    validate(key) {
      let bool = true;
      if (!this.rules[key].rule.test(this[key])) {
        // 提示信息
        Toast(this.rules[key].msg);
        bool = false;
        return false;
      }
      return bool;
    },
  },
};
</script>

<style scoped lang="less">
header ul {
  display: flex;
  width: 100%;
  height: 1.2867rem;
  justify-content: space-between;
  background-color: green;

  li i {
    padding: 0 0.4rem;
    font-size: 0.5333rem;
  }
  span {
    font-size: 18px;
  }
}
section {
  display: flex;
  background-color: #f5f5f5;
  flex-direction: column;
  align-items: center;

  img {
    width: 2.1333rem;
    height: 2.1333rem;
    border-radius: 50%;
    margin: 1.3333rem auto;
  }
  .inp {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    div {
      margin: 0.2666rem 0;
      width: 8.93333rem;
      height: 1.17333rem;
    }

    .tel input {
      width: 100%;
    }
    input {
      box-sizing: border-box;

      background-color: #fff;
      line-height: 1.17333rem;
      padding: 0 0.32rem;
      border: 1px solid green;
      border-radius: 0.32rem;
    }
    .pwd {
      display: flex;
      input {
        flex: 1;
      }
      //
      button {
        line-height: 1.17333rem;
        color: #fff;
        background-color: green;
        border: 0;
        border-radius: 0.16rem;
      }
    }
    .login-btn {
      text-align: center;
      button {
        width: 7.8rem;
        background-color: rgb(16, 163, 53);
        color: #fff;
        font-size: 0.5867rem;
        border: 0;
        padding: 0.1333rem;
        border-radius: 0.4rem;
      }
    }
  }
  .two {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 0.48rem;
      padding: 0 0.4rem;
    }
  }
}
.message {
  font-size: 0.48rem;
}
</style>

recoveryIndex.vue

<template>
  <div class="login container">
    <header>
      <ul>
        <li @click="goback"><i class="iconfont icon-fanhui"></i></li>
        <li><span>找回密码</span></li>
        <li><i class="iconfont icon-RectangleCopy"></i></li>
      </ul>
    </header>
    <section>
      <img src="../../assets/images/s4.jpeg" alt="" />
      <div class="inp">
        <div class="tel">
          <input
            type="text"
            v-model="userTel"
            placeholder="请输入手机号码"
            pattern="[0-9]*"
          />
        </div>
        <!-- <div class="pwd">
          <input type="text" v-model="userCode" placeholder="请输入验证码" />
          <button :disabled="disabled" @click="sendCode">{{ codeMsg }}</button>
        </div> -->

        <div class="login-btn" @click="next"><button>下一步</button></div>
      </div>
    </section>
    <div class="message">
      <input type="rideo" />
      <h5>已阅读以下协议：《服务协议》和《隐私政策》</h5>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import http from "@/common/api/request.js";
export default {
  data() {
    return {
      userTel: "", //用户输入的手机号
      userPwd: "", //用户输入的密码
      userCode: "", //用户输入的验证码
      disabled: false,
      codeNum: 8,
      codeMsg: "获取短信验证码",
      code: "",
      // 验证规则
      rules: {
        //手机号验证
        userTel: {
          rule: /^1[23456879]\d{9}$/,
          msg: "手机号不能为空,并且为11位",
        },
        //密码的验证规则
        userPwd: {
          rule: /^\w{6,12}$/,
          msg: "密码不能为空,并且6-12位",
        },
      },
    };
  },
  methods: {
    //点击获取短信验证码
    // sendCode() {
    //   //验证
    //   if (!this.validate("userTel")) return;

    //   //请求短信验证码接口
    //   http
    //     .$axios({
    //       url: "/api/code",
    //       method: "POST",
    //       data: {
    //         phone: this.userTel,
    //       },
    //     })
    //     .then((res) => {
    //       console.log(res);
    //       if (res.success) {
    //         this.code = res.data;
    //       }
    //     });

    //   //禁用按钮
    //   this.disabled = true;
    //   //倒计时
    //   let timer = setInterval(() => {
    //     --this.codeNum;
    //     this.codeMsg = ` 重  新  发  送  ${this.codeNum} `;
    //   }, 1000);
    //   //判断什么时候停止定时器
    //   setTimeout(() => {
    //     clearInterval(timer);
    //     this.codeNum = 8;
    //     this.disabled = false;
    //     this.codeMsg = "获取短信验证码";
    //   }, 8000);
    // },
    //点击下一步
    next() {
      //如果验证码不正确
      //   if (this.code != this.userCode) {
      //     Toast("验证码不对");
      //     return;
      //   }

      http
        .$axios({
          url: "/api/selectUser",
          method: "POST",
          data: {
            phone: this.userTel,
          },
        })
        .then((res) => {
          // console.log(res);
          if (!res.success) {
            Toast(res.msg);
          }
          this.$router.push({
            name: "Btn",
            query:{
              phone:this.userTel
            }
          });
        });
    },

    goback() {
      this.$router.back();
    },
    // 验证信息提示
    validate(key) {
      let bool = true;
      if (!this.rules[key].rule.test(this[key])) {
        // 提示信息
        Toast(this.rules[key].msg);
        bool = false;
        return false;
      }
      return bool;
    },
  },
};
</script>

<style scoped lang="less">
header ul {
  display: flex;
  width: 100%;
  height: 1.2867rem;
  justify-content: space-between;
  background-color: green;

  li i {
    padding: 0 0.4rem;
    font-size: 0.5333rem;
  }
  span {
    font-size: 18px;
  }
}
section {
  display: flex;
  background-color: #f5f5f5;
  flex-direction: column;
  align-items: center;

  img {
    width: 2.1333rem;
    height: 2.1333rem;
    border-radius: 50%;
    margin: 1.3333rem auto;
  }
  .inp {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    div {
      margin: 0.2666rem 0;
      width: 8.93333rem;
      height: 1.17333rem;
    }

    .tel input {
      width: 100%;
    }
    input {
      box-sizing: border-box;

      background-color: #fff;
      line-height: 1.17333rem;
      padding: 0 0.32rem;
      border: 1px solid green;
      border-radius: 0.32rem;
    }
    .pwd {
      display: flex;
      input {
        flex: 1;
      }
      //
      button {
        line-height: 1.17333rem;
        color: #fff;
        background-color: green;
        border: 0;
        border-radius: 0.16rem;
      }
    }
    .login-btn {
      text-align: center;
      button {
        width: 7.8rem;
        background-color: rgb(16, 163, 53);
        color: #fff;
        font-size: 0.5867rem;
        border: 0;
        padding: 0.1333rem;
        border-radius: 0.4rem;
      }
    }
  }
  .two {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 0.48rem;
      padding: 0 0.4rem;
    }
  }
}
.message {
  font-size: 0.48rem;
}
</style>