vue-insagent-pc/src/views/Login.vue

<template>
  <div class="wavy-line">
    <div id="content" style="height: 100%">
      <div id="Login">
        <div class="log_on">
          <div class="left_content"></div>
          <div class="right_content">
            <img
              v-if="toggleQrCode"
              class="img1"
              src="../assets//image/log_code.png"
              alt=""
              @click="switchLogin"
            />
            <img
              v-else
              class="img1"
              src="../assets//image/QR_code.png"
              alt=""
              @click="switchCode"
            />
            <div style="padding: 15% 20%">
              <img class="img2" src="../assets//image/logo_img.png" alt="" />
              <div v-show="toggleQrCode" style="text-align: center">
                <div
                  class="img3"
                  v-loading="loadingCode"
                  id="qrcode"
                  ref="qrcode"
                >
                  <transition name="el-fade-in">
                    <el-result
                      v-if="tipVisibility"
                      class="scanSuccess"
                      icon="success"
                      title="扫码成功"
                    ></el-result>
                  </transition>
                </div>
                <el-button
                  icon="el-icon-refresh-right"
                  size="small"
                  style="margin-top: 10px"
                  @click="refresh"
                  >刷新二维码</el-button
                >
                <p class="code_word">打开<b>客户端APP</b>扫描二维码</p>
              </div>
              <el-form
                v-show="!toggleQrCode"
                size="medium"
                :model="loginForm"
                :rules="fieldRules"
                ref="loginForm"
                label-position="left"
                label-width="0"
              >
                <el-form-item prop="account" label="">
                  <el-input
                    type="text"
                    prefix-icon="el-icon-user"
                    v-model="loginForm.account"
                    auto-complete="off"
                    placeholder="账号"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="password" label="">
                  <el-input
                    type="password"
                    prefix-icon="el-icon-lock"
                    v-model="loginForm.password"
                    auto-complete="off"
                    placeholder="密码"
                  ></el-input>
                </el-form-item>
                <el-row>
                  <el-col :span="14">
                    <el-form-item prop="captcha" label="">
                      <el-input
                        type="test"
                        prefix-icon="el-icon-success"
                        v-model="loginForm.captcha"
                        auto-complete="off"
                        placeholder="验证码"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="1">&nbsp;</el-col>
                  <el-col :span="9">
                    <img
                      style="width: 100%; height: 32px; margin: 2px"
                      class="pointer"
                      :src="loginForm.src"
                      @click="refreshCaptcha"
                    />
                  </el-col>
                  <el-col :span="14">
                    <el-form-item prop="captcha" label="">
                      <el-select v-model="sysId">
                        <el-option
                          v-for="item in optionList"
                          :key="item.id"
                          :value="item.id"
                          :label="item.systemName"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row style="width: 100%; margin-top: 15px">
                  <el-button
                    size="medium"
                    type="primary"
                    plain
                    style="width: 48%; float: left"
                    @click.native.prevent="reset"
                    >重 置</el-button
                  >
                  <el-button
                    size="medium"
                    type="primary"
                    style="width: 48%; float: right"
                    @click.native.prevent="login('loginForm')"
                    :loading="loading"
                    >登 录</el-button
                  >
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <div class="L_footer">
          <div class="w1100" style="padding-top: 15px">
            <p style="font-weight: bold">
              版权所有©1994-2014山西掌柜科技有限公司
              未经许可不得复制转载或者摘编
            </p>
            <p style="font-weight: bold">
              copyright 1994-2014 ZhangGui Property Insurance Co.Lid All rights
              reserved
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Cookies from "js-cookie";
import QRCode from "qrcodejs2";
import { md5 } from "@/utils/md5";
import ThemePicker from "@/components/ThemePicker";
import LangSelector from "@/components/LangSelector";
import { login } from "@/api/user";
import CryptoJS from "crypto-js";
// import { getSysList } from "../http/moudules/sys";

import { sendWebsocket, closeWebsocket } from "@/utils/websocket.js";
import {
  getUserIP,
  getUserLocation,
  getAddressLocation,
} from "@/utils/ipAndAddress.js";
export default {
  name: "Login",
  inject: ["reload"],
  components: {
    ThemePicker,
    LangSelector,
  },
  data() {
    return {
      loadingCode: false,
      qrcode: null,
      rememberPassword: false,
      loading: false,
      loginForm: {
        account: "",
        password: "",
        captcha: "",
        src: "",
      },
      fieldRules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      checked: true,
      toggleQrCode: false,
      uuid: "",
      polling: null,
      tipVisibility: false,
      optionList: [],
      sysId: null,
      systemType: "1", //系统类型
      addressInfo: {}, //当前登录信息
      locationIp:'',//当前ip
    };
  },
  created() {
    // 记住密码
    if (Cookies.get("accountInfo")) {
      const accountInfo = JSON.parse(Cookies.get("accountInfo"));
      this.loginForm.account = accountInfo.account;
      this.loginForm.password = accountInfo.password;
      this.rememberPassword = true;
    }
    this.enterEvent(); //初始化回车事件
    this.getSysList();
  },
  methods: {
    getSysList() {
      this.$api.sys.sysDictList().then((res) => {
        if (res.code === 200) {
          this.optionList = [...res.data];
          this.sysId = res.data && res.data.length > 0 && res.data[0].id;
        }
      });
    },
    enterEvent() {
      if (this.$route.name === "登录") {
        document.onkeydown = (e) => {
          const url = e.target.baseURI.match(/login/);
          if (e.keyCode == 13 && url.includes("login")) {
            this.login();
          }
        };
      }
    },
    login(formName) {
      // let token = CryptoJS.AES.encrypt(
      //   "2856c49f-7b34-4e83-b3c8-2c37dba7cb3b",
      //   "token"
      // ).toString();
      // console.log(token);
      // window.location.href =
      //   "http://localhost:8080/#/form/agreement?token=" + token;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let userInfo = {
            account: this.loginForm.account,
            password: this.loginForm.password,
            captcha: this.loginForm.captcha.toLowerCase(),
            captchaId: this.loginForm.captchaId,
            sysId: this.sysId,
            // systemType: this.systemType
          };

          // this.$store
          //   .dispatch("login", userInfo)
          //   .then(() => {
          //     if (this.rememberPassword) {
          //       //是否保存密码
          //       Cookies.set("accountInfo", {
          //         account: this.loginForm.account,
          //         password: this.loginForm.password,
          //       });
          //     } else {
          //       Cookies.remove("accountInfo");
          //     }
          //     Cookies.set("user", userInfo.account) /
          //       sessionStorage.setItem("user", userInfo.account); // 保存用户到本地会话
          //     this.$store.commit("menuRouteLoaded", false); // 要求重新加载导航菜单
          //     this.$router.push("/");
          //     this.loading = false;
          //   })
          //   .catch(() => {
          //     this.loading = false;
          //   });

          this.$api.login
            .login2(userInfo)
            .then((res) => {
              if (res.code != 200) {
                this.$message({
                  message: res.msg,
                  type: "error",
                  duration: 2000,
                });
                if (res.code == 500 && res.msg == "验证码不正确") {
                  this.refreshCaptcha();
                }
              } else {
                if (this.rememberPassword) {
                  //是否保存密码
                  Cookies.set("accountInfo", {
                    account: this.loginForm.account,
                    password: this.loginForm.password,
                  });
                } else {
                  Cookies.remove("accountInfo");
                }
                if (this.sysId === 2) {
                  let token = CryptoJS.AES.encrypt(
                    res.data,
                    "token"
                  ).toString();

                  window.location.href =
                    process.env.CONSOLE_BASE_URL + "/#/index?token=" + token;
                  // alert(res.data);
                }else if (this.sysId === 3) {
                  Cookies.set("user", this.loginForm.account);
                  let userId = this.loginForm.account;
                  let  data ={
                    userId: userId,
                    token: res.data
                  }
                  let jsonStr = JSON.stringify(data);
                  let token = CryptoJS.AES.encrypt(
                    jsonStr,
                    "token"
                  ).toString();
                  window.location.href =process.env.CONSOLE_KHGX_URL + "?token=" + token;

                }
                else {
                  this.getUser();
                  Cookies.set("token", res.data); // 放置token到Cookie
                  // this.submitLocation();
                  this.getDictItems();
                  setTimeout(() => {
                    let userId = sessionStorage.getItem("user");
                    let data = {
                      // ...this.addressInfo,
                      ip:this.locationIp,
                      userId,
                      systemType: this.systemType,
                    };
                    sendWebsocket(
                      `${process.env.SOCKET_Url}/pcWebsocket/${userId}`,
                      data
                    );
                    // sendWebsocket(`/pcWebsocket/${userId}`,data)
                  }, 1000);
                }
              }
              this.loading = false;
            })
            .catch((res) => {
              this.$message({
                message: res.message,
                type: "error",
                duration: 2000,
              });
            });
        } else {
          return false;
        }
      });
    },
    /**提交当前位置信息 */
    submitLocation() {
      let location = {
        systemType: this.systemType,
        ...this.addressInfo,
      };
      this.$api.login.uploadLocationInfo(location).then((res) => {
        if (res.code !== 200) {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },

    getDictItems() {
      //--数据字典--
      // 性别
      this.$api.dict.findByLableName("sex").then((response) => {
        localStorage.setItem("sexOptions", JSON.stringify(response.data)); // 保存用户到本地会话
      });
      // 状态
      this.$api.dict.findByLableName("user_status").then((response) => {
        localStorage.setItem(
          "user_statusoptions",
          JSON.stringify(response.data)
        ); // 保存用户到本地会话
      });
    },
    // 用户信息
    getUser() {
      this.$api.user.getLoginUser().then((response) => {
        if (response.code == 200) {
          //头像地址拼接
          if (
            response.data.headSculpture != "" &&
            response.data.headSculpture != null &&
            response.data.headSculpture != undefined
          ) {
            response.data.headSculpture =
              process.env.BASE_URL + response.data.headSculpture;
          }
          localStorage.setItem("user_data", JSON.stringify(response.data));
          this.$store.commit("SET_USER", response.data);
          sessionStorage.setItem("user", response.data.id);
          Cookies.set("user", response.data.id);
          localStorage.setItem("routerId", "420");
          this.$store.commit("menuRouteLoaded", false);
          this.$router.push("/");
          this.loadingCode = false;
        } else {
          this.$message.error(response.msg);
        }
      });
      this.$api.role.findAll().then((res) => {
        localStorage.setItem("find_all", JSON.stringify(res.data));
      });
    },
    refreshCaptcha() {
      let randnum = Math.floor(Math.random() * (1000000 - 1 + 1)) + 1;
      this.loginForm.src =
        process.env.BASE_URL +
        "/captchaById?t=" +
        new Date().getTime() +
        "&captchaId=" +
        randnum;
      this.loginForm.captchaId = randnum;
    },
    reset() {
      this.$refs.loginForm.resetFields();
    },
    // 切换主题
    onThemeChange: function (themeColor) {
      this.$store.commit("setThemeColor", themeColor);
    },
    switchLogin() {
      this.toggleQrCode = !this.toggleQrCode;
      this.stopPolling();
    },
    switchCode() {
      this.toggleQrCode = !this.toggleQrCode;
      this.generateQrCode(); //获取二维码
    },
    generateQrCode() {
      let randnum = new Date().getTime();
      let uuid = md5(randnum);
      let url = process.env.BASE_URL + "/scanQrCode?uuid=" + uuid;
      this.$nextTick(() => {
        this.creatQrCode(url);
        this.$api.login.getQRCode(uuid).then((res) => {
          this.uuid = res.data.uuid;
          this.startPolling();
        });
      });
    },
    checkScanStatus() {
      this.$api.login.QrCodeStatusQuery(this.uuid).then((res) => {
        if (res.data.statusCode == 20000) {
          this.tipVisibility = true;
          this.loadingCode = true;
          setTimeout(() => {
            this.CodeLoginSuccess(res.data.token);
          }, 1500);
        }
      });
    },
    startPolling() {
      if (this.polling) {
        this.stopPolling();
      }
      this.polling = setInterval(this.checkScanStatus, 1000);
    },
    stopPolling() {
      clearInterval(this.polling);
      this.polling = null;
    },
    CodeLoginSuccess(token) {
      Cookies.set("token", token); // 放置token到Cookie
      this.getDictItems(); //获取字典
      this.getUser();
    },

    refresh() {
      this.generateQrCode();
    },
    //生成二维码
    creatQrCode(text) {
      if (this.qrcode) {
        this.qrcode.clear();
        this.qrcode.makeCode(text);
      } else {
        this.qrcode = new QRCode("qrcode", {
          text: text,
          width: 200,
          height: 200,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      }
    },
  },

  beforeDestroy() {
    // 组件销毁前确保轮询被清除
    this.stopPolling();
  },
  mounted() {
    clearInterval(this.$store.state.user.myTimer)
    this.refreshCaptcha();
    /**获取当前登录的ip地址 */
    getUserIP((ip) => {
      this.locationIp=ip
      // getAddressLocation(ip, (info) => {
      //   this.addressInfo = info;
      // });
    });
  },
  computed: {
    ...mapState({
      themeColor: (state) => state.app.themeColor,
    }),
  },
  //销毁函数
  destroyed() {
    document.onkeydown = null;
  },
};
</script>

<style lang="scss" scoped>
.wavy-line {
  font: 13px/150% Arial, Verdana, "\5B8B\4F53";
  color: #666;
  background: #fff;
  height: 100%;
}

#content {
  overflow: auto;
}

.ORcode {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;

  & > div {
    width: 176px;
    height: 176px;
    border: 1px solid var(--themeColor);
    border-radius: 5px;
  }
}

#qrCode {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  top: 15%;

  img {
    width: 200px;
    height: 200px;
    background-color: #fff;
    padding: 6px;
  }
}

#Login {
  width: 100%;
  height: 100%;
  background-image: url(../assets/image/bgImg.png) !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  display: flex;
  align-items: center;
  flex-direction: column;

  .log_on {
    width: 70%;
    height: 80%;
    margin: 80px 0 30px 0;

    .left_content {
      float: left;
      width: 50%;
      height: 100%;
      background: url(../assets/image/leftImg.png);
      background-size: 100% 100%;
    }

    .right_content {
      float: right;
      width: 50%;
      height: 100%;
      position: relative;
      // display: flex;
      // align-items: center;
      // flex-direction: column;
      // background: url(../assets/image/QR_code.png) top right  no-repeat #fff;
      background-color: #fff;

      .img1 {
        position: absolute;
        right: 0;
      }

      .img2 {
        margin-bottom: 50px;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

      .img3 {
        width: 200px;
        height: 200px;
        padding: 15px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #eaedf1;
        position: relative;
      }

      .el-form-item {
        margin-bottom: 30px;
      }

      .code_word {
        font-size: 16px;
        font-weight: bold;
        margin-top: 20px;

        b {
          color: #b20404;
        }
      }
    }
  }

  .L_footer {
    height: 64px;
    bottom: 0;
    color: #eaedf1;
    font-size: 12px;

    p {
      margin: 0;
    }
  }
}

.scanSuccess {
  position: absolute;
  background: #ffffffef;
  font-weight: bold;
  width: 200px;
  height: 200px;
}
</style>