管道基础大数据平台系统开发-【前端】-新系統界面
Surpriseplus
2023-01-16 21ddc9ec1b1b76d2ce20e512328e65acaf1af2bf
src/components/login.vue
@@ -1,10 +1,16 @@
<template>
  <div class="container">
    <div class="title_img">
      <img src="../assets/img/loginLogo.png" alt="" />
      <img
        src="../assets/img/loginLogo.png"
        alt=""
      />
    </div>
    <div class="main_img">
      <img src="../assets/img/loginMain.png" alt="" />
      <img
        src="../assets/img/loginMain.png"
        alt=""
      />
    </div>
    <div class="login">
      <div class="login_title">
@@ -86,8 +92,11 @@
            size="meddle"
            autocomplete="off"
          >
            <i slot="prefix" class="el-icon-user"></i
          ></el-input>
            <i
              slot="prefix"
              class="el-icon-user"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="pwd">
@@ -98,8 +107,11 @@
            class="nobr"
            autocomplete="off"
          >
            <i slot="prefix" class="el-icon-lock"></i
          ></el-input>
            <i
              slot="prefix"
              class="el-icon-lock"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item required>
@@ -113,7 +125,10 @@
            </el-form-item>
          </el-col>
          <el-col :span="6" align="right">
          <el-col
            :span="6"
            align="right"
          >
            <validCode
              v-model="validCode"
              ref="refresh"
@@ -122,14 +137,16 @@
          </el-col>
        </el-form-item>
        <el-form-item>
          <img src="../assets/img/zhengshu.png" alt="" /><span
            >证书安装与添加信任站点</span
          >
          <img
            src="../assets/img/zhengshu.png"
            alt=""
          /><span>证书安装与添加信任站点</span>
        </el-form-item>
        <el-form-item>
          <img src="../assets/img/document.png" alt="" /><span
            >使用帮助文档</span
          >
          <img
            src="../assets/img/document.png"
            alt=""
          /><span>使用帮助文档</span>
        </el-form-item>
        <el-form-item>
          <el-button
@@ -143,8 +160,7 @@
            "
            :loading="loading"
            @click="submitForm('loginForm')"
            >登录</el-button
          >
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
@@ -177,6 +193,7 @@
    };
    const checkValidCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入验证码'));
      } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
@@ -207,6 +224,7 @@
    //   获取vuex中Actions里的方法
    ...mapActions(['login', 'getpublickey']),
    getCode(data) {
      this.validCode = data; //在data中定义一个 validCode:'',用来记录验证码。
    },
@@ -216,6 +234,15 @@
          this.loading = true;
          this.login(this.loginForm)
            .then((response) => {
              if (response.code != 200) {
                this.loading = false
                Message({
                  message: response.msg,
                  type: 'error',
                  duration: 5 * 1000,
                });
                return
              }
              this.setCookies(response);
              getPerms().then((res) => {
                if (res.code == 200) {
@@ -224,7 +251,9 @@
                  if (res.result.length != 0) {
                    this.$router.push('/');
                  }
                  this.loading = false
                } else {
                  this.loading = false
                  console.log('error submit!!');
                }
              });
@@ -239,6 +268,7 @@
          this.$refs.refresh.createdCode();
          this.validCode = ''; //清空验证码输入框的内容
        } else {
          this.loading = false
          console.log('error submit!!');
          return false;
        }
@@ -255,7 +285,7 @@
      localStorage.setItem('LFToken', LfPrems);
    },
  },
  created() {},
  created() { },
};
</script>