Vue/vant——验证登录页面跳转到个人中心

 

如果没有勾选协议，那么就提示先勾选协议，当协议被勾选成功后进入加载动画以及隐藏提交文字，然后判断正确的账号和密码 来获取请求，如果账号密码错误则不可获取请求，也会判定账号密码错误，只有输入成功后才能成功获取数据进入对应的页面里

 

  methods: {
    // 回退上个页面
    back(){
      this.$router.go(-1);
    },
    iconClick() {
      this.$router.push("/Myfile");
    },
    //   此处使用函数校验
    validator(val) {
      return /^.{5,20}$/.test(val);
    },
    sub() {
      if (!this.check) {
        Toast("请先同意协议");
      } else {
        this.pshow = false
        this.show = true
        setTimeout(() => {
          this.$axios
          .post("/login", {
            username: this.username,
            password: this.password,
          })
          .then((result) => {
            console.log(result);

            if (
              this.username === result.data.data.username ||
              this.password === result.data.data.password
            ) {
              Toast("登陆成功！");
              return this.$router.push("/Myfile");
            }else{
               Toast('账号或密码不正确，请重新输入')
                this.pshow = true
                return this.show= false
            }
          })
          .catch((err) => {
            console.log("数据请求错误，请联系工作人员");
            return Toast('账号或密码不正确，请重新输入')
          });
        }, 1000);
        setTimeout(() => {
           this.pshow = true
          return this.show= false
        }, 1500);
      }
    },

效果如下所示：