页面修改

surprise

2023-12-19 fd73e99196e00c82885c83ee2f1253c2fc343756

 src/components/login.vue

@@ -1,271 +1,384 @@
<template>
  <div class="login-wrap">
    <div class="ms-login">
      <el-tabs v-model="loginType" class="ms-title">
        <el-tab-pane label="密码登录" name="usecode" v-if="usecode">
          <el-form
            :model="param"
            :rules="rules"
            ref="login"
            label-width="0px"
            class="ms-content"
  <div class="container">
    <vue-particles
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="80"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="false"
      clickMode="bubble"
    >
    </vue-particles>
    <div class="MapMenu">
      <iframe
        id="ifream"
        style="border: none"
        width="100%"
        height="100%"
        v-bind:src="reportUrl"
      ></iframe>
    </div>
    <div class="title_img">
      <img
        src="../assets/img/lg_03.png"
        alt=""
      />
    </div>
    <div class="login">
      <div class="login_title">
        <span>用户登录</span>
      </div>
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        class="loginForm"
      >
        <el-form-item prop="uid">
          <el-input
            v-model="loginForm.uid"
            placeholder="输入登录账号"
            class="nobr"
            size="meddle"
            autocomplete="off"
          >
            <el-form-item prop="phone">
              <el-input v-model="param.phone" placeholder="请输入手机号码">
                <el-button slot="prepend" icon="el-icon-phone"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item prop="password" v-if="loginType === 'usecode'">
            <i
              slot="prefix"
              class="el-icon-user"
            ></i>
          </el-input>
        </el-form-item>

        <el-form-item prop="pwd">
          <el-input
            show-password
            v-model="loginForm.pwd"
            placeholder="请输入登录密码"
            class="nobr"
            autocomplete="off"
          >
            <i
              slot="prefix"
              class="el-icon-lock"
            ></i>
          </el-input>
        </el-form-item>

        <el-form-item required>
          <el-col :span="18">
            <el-form-item prop="validCode">
              <el-input
                v-model="param.password"
                :show-password="true"
                placeholder="请输入密码"
              >
              </el-input>
                v-model="loginForm.validCode"
                placeholder="请输入验证码（忽略大小写）"
                class="nobr"
              ></el-input>
            </el-form-item>
            <div class="login-btn">
              <el-button type="primary" @click="submitForm()">登录</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="短信登录" name="unusecode" v-if="unusecode">
          <el-form
            :model="param"
            :rules="rules"
            ref="login"
            label-width="0px"
            class="ms-content"
          </el-col>

          <el-col
            :span="6"
            align="right"
          >
            <el-form-item prop="phone">
              <el-input v-model="param.phone" placeholder="请输入手机号码">
                <el-button slot="prepend" icon="el-icon-phone"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item prop="code" v-if="loginType === 'unusecode'">
              <el-input v-model="param.code" placeholder="请输入验证码">
                <template slot="append">
                  <el-button
                    :disabled="disabled"
                    class="send"
                    @click="sendhandle"
                    >{{ sendTxt }}</el-button
                  ></template
                ></el-input
              >
            </el-form-item>
            <div class="login-btn">
              <el-button type="primary" @click="submitForm()">登录</el-button>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
            <validCode
              v-model="validCode"
              ref="refresh"
              @sendData="getCode"
            ></validCode>
          </el-col>
        </el-form-item>
        <el-form-item>
          <img
            src="../assets/img/zhengshu.png"
            alt=""
          /><span style="color: black">证书安装与添加信任站点</span>
        </el-form-item>
        <el-form-item>
          <img
            src="../assets/img/document.png"
            alt=""
          /><span style="color: black">使用帮助文档</span>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="nobr loginbtn"
            style=""
            :loading="loading"
            @click="submitForm('loginForm')"
          >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import baseVuex from "@mixin/baseVuex";
import { sendSms, verifyCode, isAdmin } from "@api/index";
let ms = 0;
import { getPerms } from "../api/api";
import validCode from "./verificationCode.vue";
import { mapActions } from "vuex";
import moment from "moment";

export default {
  mixins: [baseVuex],
  data: function () {
    let phoneReg = /^1[3-9]\d{9}$/;
    let validatePhone = (rule, value, callback) => {
  components: { validCode },
  data() {
    let validUserName = (rule, value, callback) => {
      if (!value) {
        this.isPhone = false;
        return callback(new Error("号码不能为空!"));
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
      setTimeout(() => {
        if (!phoneReg.test(value)) {
          this.isPhone = false;
          callback(new Error("请输入正确手机格式!"));
        } else {
          this.isPhone = true;
          callback();
        }
      }, 100);
    };

    let validPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    };

    const checkValidCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入验证码"));
      } else if (value.toUpperCase() !== this.validCode.toUpperCase()) {
        callback(new Error("验证码不正确"));
      } else {
        callback();
      }
    };
    // loginForm: {
    //     uid: "admin",
    //     pwd: "Admin@1234_lf",
    //   }
    return {
      login: "all",
      loginType: "usecode",
      param: {
        password: "",
        code: "",
        phone: "",
      validCode: "",
      loading: false,
      loginForm: {
        uid: "",
        pwd: "",
      },
      disabled: false,
      isPhone: "",
      rules: {
        phone: [{ required: true, trigger: "blur", validator: validatePhone }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        uid: [{ validator: validUserName, trigger: "blur" }],
        pwd: [{ validator: validPassword, trigger: "blur" }],
        validCode: [{ validator: checkValidCode, trigger: "blur" }],
        showSessionId: "",
        reportUrl: "",
      },
      sendTxt: "点击发送",
      time: 120,
      interval: null,
    };
  },
  mounted() {
    if (window.sceneConfig && sceneConfig.login) {
      this.login = sceneConfig.login;
      if (this.login === "onlySMS") {
        this.loginType = "unusecode";
      }
    }
  },
  computed: {
    usecode: function () {
      return this.login === "all" || this.login === "onlyPassword";
    },
    unusecode: function () {
      return this.login === "all" || this.login === "onlySMS";
    },
    this.getpublickey();
  },
  methods: {
    submitForm() {
      this.$refs.login.validate((valid) => {
        if (valid) {
          verifyCode(this.loginType, this.param).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "登录成功",
              });
              this.setTreeData([]);
              this.changeUserData({ type: "phone", value: this.param.phone });
              this.checkAdminAndLogin();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        }
      });
    handlePaste(e) {
      e.preventDefault();
    },
    sendhandle() {
      this.$refs.login.validateField(["phone"], (valid) => {
        if (this.isPhone) {
          sendSms({
            phone: this.param.phone,
          }).then((res) => {
            if (res.code === 200) {
              if (res.data.code === "OK") {
    //   获取vuex中Actions里的方法
    ...mapActions(["login", "getpublickey"]),
    getCode(data) {
      this.validCode = data; //在data中定义一个 validCode:'',用来记录验证码。
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.login(this.loginForm)
            .then((response) => {
              if (response.code != 200) {
                this.loading = false;
                this.$message({
                  type: "success",
                  message: "发送短信成功，请注意查收!",
                });
                this.disabled = true;
                ms = this.time;
                this.interval = setInterval(() => {
                  this.countDown();
                }, 1000);
              } else {
                this.$message({
                  message: response.msg,
                  type: "error",
                  message: res.data.message,
                });
                // Message({
                //   message: response.msg,
                //   type: "error",
                //   duration: 5 * 1000,
                // });
                return;
              }

              if (response.msg != "") {
                this.$message({
                  message: response.msg,
                  type: "warning",
                });
              }
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              this.setCookies(response);

              getPerms().then((res) => {
                if (res.code == 200) {
                  this.$store.commit("getPermsEntity", res.result);

                  if (res.result.length != 0) {
                    sessionStorage.setItem("routerName", "/Synthesis");
                    sessionStorage.setItem("changeSelectStyle", 0);
                    this.$router.push("/");
                  } else {
                    this.$message({
                      message: "请您联系管理员分配角色菜单",
                      type: "error",
                    });
                  }
                  this.loading = false;
                } else {
                  this.loading = false;
                  console.log("error submit!!");
                }
              });
            }
          });

              this.loading = false;
              //调用录接口
            })
            .catch((response) => {
              this.loading = false;
            });
          //如果登录失败，需要刷新验证码的
          this.$refs.refresh.createdCode();
          this.validCode = ""; //清空验证码输入框的内容
        } else {
          this.loading = false;
          console.log("error submit!!");
          return false;
        }
      });
    },
    countDown() {
      if (!ms) {
        this.sendTxt = "重新发送";
        clearInterval(this.interval);
        this.interval = null;
        this.disabled = false;
      } else {
        this.sendTxt = `${ms} 秒后重新发送`;
        ms--;
      }
    setCookies(res) {
      var timeData = moment(res.result.expire).format("YYYY-MM-DD HH:mm:ss");
      var LfPrems = {
        token: res.result.token,
        uname: res.result.uname,
        time: timeData,
        userid: res.result.createUser,
        expire: res.result.expire,
        autoLogOut: res.result.autoLogOut,
      };
      LfPrems = JSON.stringify(LfPrems);
      localStorage.setItem("LFToken", LfPrems);
    },
    checkAdminAndLogin() {
      // 管理员验证
      isAdmin({
        phone: this.param.phone,
      }).then((data) => {
        this.changeUserData({
          type: "admin",
          value: data && data.data ? true : false,
        });
      });
    enterLogin() {
      document.onkeydown = (e) => {
        e = window.event || e;

      localStorage.setItem("loginscene", 1);
      this.$router.push({
        path: "/index",
      });
        if (
          this.$route.path == "/login" &&
          (e.code == "Enter" || e.code == "enter" || e.code == "NumpadEnter")
        ) {
          //最重要最后调用1.登录校验方法
          //this.login();
          this.submitForm("loginForm");
        }
      };
    },
    startURL() {
      var url = window.location.href;
      var testurl = "";
      if (url.indexOf("web") != -1) {
        testurl = "/web";
      }
      this.reportUrl =
        window.location.origin + testurl + "/mapscreen/index.html";
    },
  },
  created() {
    this.startURL();
    this.enterLogin();
  },
};
</script>

<style scoped>
.login-wrap {
  position: relative;
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background-image: url(~@/assets/login.png);
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;

  background: url("../assets/img/login.jpg") no-repeat center;
  background-size: 100% 100%;
  .MapMenu {
    width: 100%;
    height: 100%;
    top: 5%;
    left: 1%;
    position: absolute;
  }
}
.login-wrap /deep/ .el-input__inner {
  height: 45px;
.title_img {
  position: absolute;
  left: 20%;
  top: 8%;
  width: 20%;
  /* transform: translateX(-50%); */
}
.login-wrap /deep/ .el-form-item {
  margin-bottom: 30px;
}

.login-wrap /deep/ .el-tabs__nav {
  margin-left: 30px;
  /* left: 50%; */
}

.login-wrap /deep/ .el-tabs__nav-wrap::after {
  height: 0;
}

button {
  height: 45px !important;
  font-size: 15px;
}
.ms-title {
.title_img img {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  border-bottom: 1px solid #ddd;
}
.ms-login {
.main_img {
  position: absolute;
  left: 17%;
  top: 12%;
  /* transform: translateX(-50%); */
}
.main_img img {
  width: 100%;
}
.login {
  width: 472px;
  height: 571px;
  position: absolute;
  left: 75%;
  top: 50%;
  width: 450px;
  margin: -190px 0 0 -175px;
  top: 45%;
  transform: translate(-50%, -40%);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
}

.login_title {
  margin-top: 47px;
  margin-left: 48px;
  font-size: 25px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #3b4d6e;
  /* background-color: #bfa; */
}
.loginForm {
  margin-top: 61px;
  margin-left: 48px;
  /* background-color: #bfa; */
  width: 385px;
}
.el-form-item {
  /* margin-bottom: 12px; */
  height: 41px;
}
.el-input /deep/ .el-input__inner {
  /* background: rgba(80, 152, 255, 0.24); */
  border-color: rgba(0, 0, 0, 0.1);
  color: #000;
}

.el-input /deep/ .el-input-group__prepend {
  border: 0;
  padding: 0 !important;
}
.loginbtn {
  width: 384px;
  height: 50px;
  background: #3b4d6e;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.send {
  cursor: pointer;
}
</style>
</style>