管理中心添加分析

zhangzengfei

2022-08-05 1e4a3f702623a46bcd53dbc96e235d51e0edb155

 src/views/login/components/loginForm.vue

@@ -11,10 +11,7 @@
            class="demo-ruleForm"
          >
            <el-form-item prop="loginName">
              <el-input
                v-model.trim="user.loginName"
                placeholder="请输入手机号 / 用户名"
              >
              <el-input v-model.trim="user.loginName" placeholder="请输入手机号 / 用户名">
                <i slot="prefix" class="iconfont">&#xe603;</i>
              </el-input>
            </el-form-item>
@@ -42,9 +39,7 @@
              <el-link class="cursor-register" target="_blank">
                <router-link to="/Register">注册</router-link>
              </el-link>
              <el-link class="cursor-pointer" type="primary" @click="forget"
                >忘记密码</el-link
              >
              <el-link class="cursor-pointer" type="primary" @click="forget">忘记密码</el-link>
            </div>
          </el-form>
        </el-tab-pane>
@@ -72,12 +67,9 @@
              >
                <i slot="prefix" class="iconfont icon-yanzhengma"></i>
              </el-input>
              <el-button
                class="code-btn"
                :disabled="codeDisabled"
                @click="getCode('phoneLogin')"
                >{{ codeMsg }}</el-button
              >
              <el-button class="code-btn" :disabled="codeDisabled" @click="getCode('phoneLogin')">{{
                codeMsg
              }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
@@ -92,9 +84,7 @@
              <el-link class="cursor-register" target="_blank">
                <router-link to="/Register">注册</router-link>
              </el-link>
              <el-link class="cursor-pointer" type="primary" @click="forget"
                >忘记密码</el-link
              >
              <el-link class="cursor-pointer" type="primary" @click="forget">忘记密码</el-link>
            </div>
          </el-form>
        </el-tab-pane>
@@ -104,18 +94,13 @@
</template>

<script>
import {
  tologin,
  getLoginUserData,
  makeVerifyCode,
  getMenuPermission,
} from "@/api/login";
import { isPhone } from "@/scripts/validate";
import { tologin, getLoginUserData, makeVerifyCode, getMenuPermission } from "@/api/login"
import { isPhone } from "@/scripts/validate"

export default {
  name: "login-pgae",
  metaInfo: {
    title: "登录页",
    title: "登录页"
  },
  data: () => ({
    activeName: "first",
@@ -130,32 +115,28 @@
    user: {
      loginName: "",
      password: "",
      rememberMe: false,
      rememberMe: false
    },
    phone: {
      phoneNum: "",
      verifyCode: "",
      verifyCode: ""
    },
    nullRule: {},
    userRules: {
      loginName: [
        { required: true, message: "请输入用户名", trigger: "change" },
      ],
      password: [{ required: true, message: "请输入密码", trigger: "change" }],
      loginName: [{ required: true, message: "请输入用户名", trigger: "change" }],
      password: [{ required: true, message: "请输入密码", trigger: "change" }]
    },
    phoneCodeRule: {
      phoneNum: [{ validator: isPhone, trigger: "change" }],
      verifyCode: [
        { required: true, message: "请输入验证码", trigger: "change" },
      ],
      verifyCode: [{ required: true, message: "请输入验证码", trigger: "change" }]
    },
    loading: "",
    vLoading: false,
    vLoading: false
  }),

  methods: {
    phoneLogin() {
      this.nullRule = this.phoneCodeRule;
      this.nullRule = this.phoneCodeRule
      this.$nextTick(() => {
        this.$refs["phoneLogin"].validate((valid) => {
          if (valid) {
@@ -163,23 +144,23 @@
              //       lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
              background: "rgba(0, 0, 0, 0.7)"
            })
            let param = {
              phoneNum: this.phone.phoneNum,
              verifyCode: this.phone.verifyCode,
            };
            this.testLogin(param);
              verifyCode: this.phone.verifyCode
            }
            this.testLogin(param)
            // return false
          } else {
            this.nullRule = {};
            this.nullRule = {}
          }
        });
        this.nullRule = {};
      });
        })
        this.nullRule = {}
      })
    },
    userLogin() {
      this.nullRule = this.userRules;
      this.nullRule = this.userRules
      this.$nextTick(() => {
        this.$refs["userLogin"].validate((valid) => {
          if (valid) {
@@ -187,32 +168,32 @@
              //     lock: true,
              text: "Loading",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
              background: "rgba(0, 0, 0, 0.7)"
            })
            let param = {
              username: this.user.loginName,
              password: this.user.password,
            };
            this.testLogin(param);
              password: this.user.password
            }
            this.testLogin(param)
            // return false
          } else {
            this.nullRule = {};
            this.nullRule = {}
          }
        });
        this.nullRule = {};
      });
        })
        this.nullRule = {}
      })
    },
    getValidStr() {
      if (this.countdown > 0 && this.countdown <= 60) {
        this.countdown--;
        this.countdown--
        if (this.countdown !== 0) {
          this.codeMsg = `${this.countdown}s`;
          this.codeMsg = `${this.countdown}s`
        } else {
          clearInterval(this.timer);
          this.codeMsg = "获取验证码";
          this.countdown = 60;
          this.timer = null;
          this.codeDisabled = false;
          clearInterval(this.timer)
          this.codeMsg = "获取验证码"
          this.countdown = 60
          this.timer = null
          this.codeDisabled = false
        }
      }
    },
@@ -233,86 +214,82 @@

      this.$refs[formName].validateField("phoneNum", (res) => {
        if (res) {
          document.querySelector(".phoneNum .el-input__inner").focus();
          document.querySelector(".phoneNum .el-input__inner").focus()
        }
        if (!this.timer && !res) {
          this.codeDisabled = true;
          this.getValidStr();
          this.timer = setInterval(this.getValidStr, 1000);
          this.codeDisabled = true
          this.getValidStr()
          this.timer = setInterval(this.getValidStr, 1000)
          makeVerifyCode({ phoneNum: this.phone.phoneNum, type: 0 })
            .then(() => {
              this.gotCode = true;
              this.gotCode = true
            })
            .catch((err) => {
              console.log(this.$refs[formName].fields);
              this.$refs[formName].fields[0].validateState = "error";
              console.log(this.$refs[formName].fields)
              this.$refs[formName].fields[0].validateState = "error"
              setTimeout(() => {
                if (document.querySelector(".el-form-item__error")) {
                  document.querySelector(".el-form-item__error").innerHTML =
                    '<span class="iconfont error">&#xe600;</span>手机号未注册,您可以<span class="colorBlue toRegister">去注册</span>';
                    '<span class="iconfont error">&#xe600;</span>手机号未注册,您可以<span class="colorBlue toRegister">去注册</span>'
                  this.$nextTick(() => {
                    document
                      .querySelector(".toRegister")
                      .addEventListener("click", () => {
                        this.$router.push("/register");
                      });
                  });
                    document.querySelector(".toRegister").addEventListener("click", () => {
                      this.$router.push("/register")
                    })
                  })
                } else {
                  this.$refs[formName].fields[0].validateMessage = err.data.msg;
                  this.$refs[formName].fields[0].validateMessage = err.data.msg
                }
                document.querySelector(".phoneNum .el-input__inner").focus();
              }, 100);
            });
                document.querySelector(".phoneNum .el-input__inner").focus()
              }, 100)
            })
        }
      });
      })
    },
    async testLogin(param) {
      tologin(param)
        .then((res) => {
          const data = res.data;
          const data = res.data
          const loginedInfo = {
            access_token: data.token_type + " " + data.access_token,
            refresh_token: data.refresh_token,
          };
          sessionStorage.setItem("expires_in", data.expires_in);
          sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo));
            refresh_token: data.refresh_token
          }
          sessionStorage.setItem("expires_in", data.expires_in)
          sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo))

          getMenuPermission().then((rep) => {
            data.userInfo.permissions = rep.data.permissions;
            sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo));
            this.$router.push("/");
          });
          this.loading.close();
            data.userInfo.permissions = rep.data.permissions
            sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo))
            this.$router.push("/manageCenter")
          })
          this.loading.close()
        })
        .catch((err) => {
          this.loading.close();
          this.loading.close()

          if (err.data && err.data.msg == "验证码有误") {
            this.$refs["phoneLogin"].fields[1].validateState = "error";
            this.$refs["phoneLogin"].fields[1].validateState = "error"

            setTimeout(() => {
              if (document.querySelector(".el-form-item__error")) {
                document.querySelector(".el-form-item__error").innerHTML =
                  '<span class="iconfont error">&#xe600;</span>验证码不正确，请重新输入';
                  '<span class="iconfont error">&#xe600;</span>验证码不正确，请重新输入'
              } else {
                this.$refs["phoneLogin"].fields[1].validateMessage =
                  err.data.msg;
                this.$refs["phoneLogin"].fields[1].validateMessage = err.data.msg
              }
              document.querySelector(".phoneNum .el-input__inner").focus();
            }, 100);
              document.querySelector(".phoneNum .el-input__inner").focus()
            }, 100)
          } else if (err.data.msg == "用户名或密码有误") {
            this.$refs["userLogin"].fields[1].validateState = "error";
            this.$refs["userLogin"].fields[1].validateState = "error"

            setTimeout(() => {
              if (document.querySelector(".el-form-item__error")) {
                document.querySelector(".el-form-item__error").innerHTML =
                  '<span class="iconfont error">&#xe600;</span>用户名或密码有误';
                  '<span class="iconfont error">&#xe600;</span>用户名或密码有误'
              } else {
                this.$refs["userLogin"].fields[1].validateMessage =
                  err.data.msg;
                this.$refs["userLogin"].fields[1].validateMessage = err.data.msg
              }
              document.querySelector(".phoneNum .el-input__inner").focus();
            }, 100);
              document.querySelector(".phoneNum .el-input__inner").focus()
            }, 100)
          }

          //   this.$notify({
@@ -323,29 +300,29 @@
          //     offset: 57,
          //   });
          // this.$refs.pwd.focus();
        });
        })
      // this.loading = false
    },
    forget() {
      this.$router.push({
        path: "/Register",
        query: {
          isReset: true,
        },
      });
          isReset: true
        }
      })
    },
    async getLoginUserData() {
      let json = await getLoginUserData();
      let json = await getLoginUserData()
      if (!json.error) {
        // this.loading.close()
        sessionStorage.setItem("userInfo", JSON.stringify(json));
        sessionStorage.setItem("userInfo", JSON.stringify(json))
        this.$notify({
          title: "提示",
          type: "success",
          message: "登录成功！",
          duration: 2500,
          offset: 57,
        });
          offset: 57
        })
        /* 判断当前是否在登录页，如果在登录页 */
        // if (window.location.href.indexOf('/login') !== -1) {
        //   router.push({
@@ -356,21 +333,21 @@
        //   })
        // }
        // await this.getMenuList();
        this.$router.push("/Layout/ProductCenter");
        return json;
        this.$router.push("/Layout/ProductCenter")
        return json
      } else {
        this.$notify({
          title: "提示",
          type: "error",
          message: "登录失败！",
          duration: 2500,
          offset: 57,
        });
          offset: 57
        })
        // this.loading.close()
      }
    },
  },
};
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -548,4 +525,4 @@
    }
  }
}
</style>
</style>