重新

Surpriseplus

2022-11-12 50f52beb0ed100105166f62027cd0b15e6b596dc

 src/components/login.vue

@@ -78,9 +78,9 @@
        ref="loginForm"
        class="loginForm"
      >
        <el-form-item prop="userName">
        <el-form-item prop="uid">
          <el-input
            v-model="loginForm.userName"
            v-model="loginForm.uid"
            placeholder="输入您的账号或手机号"
            class="nobr"
            size="meddle"
@@ -90,10 +90,10 @@
          ></el-input>
        </el-form-item>

        <el-form-item prop="password">
        <el-form-item prop="pwd">
          <el-input
            show-password
            v-model="loginForm.password"
            v-model="loginForm.pwd"
            placeholder="输入您的密码"
            class="nobr"
            autocomplete="off"
@@ -141,6 +141,7 @@
              background: #3b4d6e;
              border-radius: 5px;
            "
            :loading="loading"
            @click="submitForm('loginForm')"
            >登录</el-button
          >
@@ -152,14 +153,15 @@

<script>
// import { login } from '../utils/api'
import validCode from "./verificationCode.vue";
import validCode from './verificationCode.vue';
import { mapActions } from 'vuex';

export default {
  components: { validCode },
  data() {
    let validUserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
        return callback(new Error('用户名不能为空'));
      } else {
        callback();
      }
@@ -167,7 +169,7 @@

    let validPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
        return callback(new Error('密码不能为空'));
      } else {
        callback();
      }
@@ -175,43 +177,34 @@

    const checkValidCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入验证码"));
        callback(new Error('请输入验证码'));
      } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
        callback(new Error("验证码不正确"));
        callback(new Error('验证码不正确'));
      } else {
        callback();
      }
    };

    return {
      validCode: "",

      validCode: '',
      loading: false,
      loginForm: {
        userName: "admin",
        password: "terra2022",
        uid: 'admin',
        pwd: 'Admin@123',
      },
      rules: {
        userName: [{ validator: validUserName, trigger: "blur" }],
        password: [{ validator: validPassword, trigger: "blur" }],
        validCode: [{ validator: checkValidCode, trigger: "blur" }],
        uid: [{ validator: validUserName, trigger: 'blur' }],
        pwd: [{ validator: validPassword, trigger: 'blur' }],
        validCode: [{ validator: checkValidCode, trigger: 'blur' }],
      },
    };
    // return {
    //   validCode: "",
    //   form: {
    //     username: "",
    //     password: "",
    //   },
    //   rules: {
    //     username: [
    //       { required: true, message: "请输入用户名", trigger: "blur" },
    //     ],
    //     password: [{ required: true, message: "请填写密码", trigger: "blur" }],
    //   },
    // };
  },
  mounted() {},
  mounted() {
    this.getpublickey();
  },
  methods: {
    //   获取vuex中Actions里的方法
    ...mapActions(['login', 'getpublickey']),
    getCode(data) {
      console.log(data);
      this.validCode = data; //在data中定义一个 validCode:'',用来记录验证码。
@@ -219,32 +212,33 @@
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //调用录接口
          this.$router.push("/catalogueManage");
          this.loading = true;
          this.login(this.loginForm)
            .then((response) => {
              this.$router.push('/');

              this.loading = false;
              //调用录接口
            })
            .catch((response) => {
              this.loading = false;
            });
          //如果登录失败，需要刷新验证码的
          this.$refs.refresh.createdCode();
          this.validCode = ""; //清空验证码输入框的内容
          this.validCode = ''; //清空验证码输入框的内容
        } else {
          console.log("error submit!!");
          console.log('error submit!!');
          return false;
        }
      });
    },
    // onSubmit() {
    //   this.$refs.form.validate((valid) => {
    //     if (valid) {
    //       this.$router.push("/Home");
    //     } else {
    //       return false;
    //     }
    //   });
    // },
  },
  created() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
<style scoped>
.container {
  width: 100%;
  height: 100%;