内容提交

longyvfengyun

2023-12-25 d8d792a6842832e8f6af6604274c438b25053afe

 src/pages/login.vue

@@ -1,20 +1,30 @@
<template>
  <div class="login-wrapper">
    <div class="login_container">
  <div class="auto-login-loading" v-if="isAutoLogin">
    <img src="../assets/images/login_loading.gif" />
  </div>
  <div class="login-wrapper" v-else>
    <div
      class="login_container"
      :style="{
        background: 'url(' + backgroundImg + ') 0 0 no-repeat',
        backgroundSize: '100% 100%',
      }"
    >
      <div class="sliderCon">
        <div class="logo">
          <img :src="logoUrl" class="logoImg" />
          {{ platformName }}
        </div>
        <img src="../assets/images/login-img.png" class="picImg" />
        <img :src="loginImg" class="picImg" />
      </div>
      <div class="login_box">
        <div class="login-tools">
          <el-tooltip
              effect="dark"
              :content="loginType.text"
              placement="top">
            <i v-if="showPhoneLogin" :class="loginType.icon" @click="showPsdLogin"></i>
          <el-tooltip effect="dark" :content="loginType.text" placement="top">
            <i
              v-if="showPhoneLogin"
              :class="loginType.icon"
              @click="showPsdLogin"
            ></i>
          </el-tooltip>
        </div>
        <div class="title">{{ loginType.title }}</div>
@@ -45,13 +55,21 @@
              @keyup.enter.native.stop="onSubmit"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="sysConfig.verifyCode.value">
          <el-form-item v-if="sysConfig.verifyCode.value && !$CFG.uKey.value">
            <el-row :gutter="8">
              <el-col :span="14">
                <el-input class="input" placeholder="验证码" v-model="loginForm.verify" @keyup.enter.native.stop="onSubmit"></el-input>
                <el-input
                  class="input"
                  placeholder="验证码"
                  v-model="loginForm.verify"
                  @keyup.enter.native.stop="onSubmit"
                ></el-input>
              </el-col>
              <el-col :span="8">
                <v-sidentify :identifyCode="verifyCode" @click="changeVerifyCode"></v-sidentify>
                <v-sidentify
                  :identifyCode="verifyCode"
                  @click="changeVerifyCode"
                ></v-sidentify>
              </el-col>
            </el-row>
          </el-form-item>
@@ -64,26 +82,39 @@
              >登录</el-button
            >
          </el-form-item>
          <el-form-item v-if="!register">
            <a href="javascript:;" @click="license.show = true" class="regBtn"
              >平台注册</a
            >
          </el-form-item>
          <el-form-item v-else>
            <a href="javascript:;" class="regBtn">已激活</a>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item v-if="!register">
                <a
                  href="javascript:;"
                  @click="license.show = true"
                  class="regBtn"
                  >平台注册</a
                >
              </el-form-item>
              <el-form-item v-else>
                <a href="javascript:;" class="regBtn">已激活</a>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div class="text-right">
                  <a href="javascript:;" class="regBtn" @click="pwd.show = true"
                    >密码修改>></a
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-form
            label-width="0px"
            class="login_from"
            :model="loginForm"
            v-else>
        <el-form label-width="0px" class="login_from" :model="loginForm" v-else>
          <!-- 手机号 -->
          <el-form-item>
            <el-input
              class="input"
              v-model="phoneInfo.phoneNum"
              prefix-icon="el-icon-phone">
              prefix-icon="el-icon-phone"
            >
            </el-input>
          </el-form-item>
          <div class="flex-row">
@@ -94,7 +125,12 @@
              </el-form-item>
            </div>
            <div class="flex-footer">
              <el-button type="primary" @click="getVerifyCode" :disabled="codeBtn.disabled">{{codeBtn.text}}</el-button>
              <el-button
                type="primary"
                @click="getVerifyCode"
                :disabled="codeBtn.disabled"
                >{{ codeBtn.text }}</el-button
              >
            </div>
          </div>
          <el-form-item class="btns">
@@ -102,16 +138,34 @@
              :loading="loading"
              type="primary"
              class="loginBtn"
              @click="phoneVerifyCodeLogin">登录</el-button>
          </el-form-item>
          <el-form-item v-if="!register">
            <a href="javascript:;" @click="license.show = true" class="regBtn"
            >平台注册</a
              @click="phoneVerifyCodeLogin"
              >登录</el-button
            >
          </el-form-item>
          <el-form-item v-else>
            <a href="javascript:;" class="regBtn">已激活</a>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item v-if="!register">
                <a
                  href="javascript:;"
                  @click="license.show = true"
                  class="regBtn"
                  >平台注册</a
                >
              </el-form-item>
              <el-form-item v-else>
                <a href="javascript:;" class="regBtn">已激活</a>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div class="text-right">
                  <a href="javascript:;" class="regBtn" @click="pwd.show = true"
                    >密码修改>></a
                  >
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- license弹框输入面板 -->
@@ -143,6 +197,7 @@
          v-if="face.show"
          :visible.sync="face.show"
          @success="checkServeLicense"
          @successLogin="faceSuccessLogin"
        ></face-login>
      </el-dialog>
      <!-- 功能描述 -->
@@ -171,19 +226,21 @@
      </el-dialog>
      <!-- 密码修改 -->
      <el-dialog
          title="密码修改"
          width="400px"
          :visible.sync="pwd.show"
          :close-on-click-modal="false"
          top="0"
          class="dialog-center"
          :modal-append-to-body="false"
        title="密码修改"
        width="400px"
        :visible.sync="pwd.show"
        :close-on-click-modal="false"
        top="0"
        class="dialog-center"
        :modal-append-to-body="false"
      >
        <pwd-change
          v-if="pwd.show"
          :show-name="showName"
          :visible.sync="pwd.show"
          :name="loginForm.username"
          :first-change="true"></pwd-change>
          :first-change="true"
        ></pwd-change>
      </el-dialog>
      <div class="tools-container">
        <div
@@ -215,7 +272,7 @@
<script>
import AddLicense from "@/pages/AddLicense";
import FaceLogin from "@/components/face/FaceLogin";
import sysConfig from "@/assets/js/config"
import sysConfig from "@/assets/js/config";
import {
  login,
  initDBPool,
@@ -224,7 +281,7 @@
  getRandomFromServer,
  loginSignVerity,
  phoneVerifyCodeLogin,
  getLoginVerity
  getLoginVerity,
} from "@/assets/js/api";
import ConfigInfo from "@/pages/configInfo";
import UkeyBind from "@/components/UKeyBind";
@@ -232,7 +289,12 @@
import gjdw from "@/assets/images/gjdw-log.png";
import gjdx from "@/assets/images/gjdx-log.png";
import qwh from "@/assets/images/qwh-logo.png";
import yuanchange from "@/assets/images/yuanchang_logo2.png";
import yuanchange0 from "@/assets/images/yuanchang_logo0.png";
import yuanchange1 from "@/assets/images/yuanchang_logo1.png";
import yuanchange2 from "@/assets/images/yuanchang_logo2.png";
import yuanchange3 from "@/assets/images/yuanchang_logo3.png";
import yuanchange4 from "@/assets/images/yuanchang_logo4.png";
import yuanchange5 from "@/assets/images/yuanchang_logo4.png";
import platform from "@/assets/js/config";
import SoftUKey from "@/assets/js/tools/SoftUKey";
import SoftKey3W from "@/assets/js/Syunew3";
@@ -243,10 +305,24 @@
import AES from "@/common/AES";
import md5 from "js-md5";

import {
  getVerifyCode
} from "@/assets/js/api";
import {formatSeconds} from "@/assets/js/tools";
import blueBg from "@/assets/images/login-bg-blue.jpg";
import blueImg from "@/assets/images/login-img-blue.png";
import greenBg from "@/assets/images/login-bg-green.jpg";
import greenImg from "@/assets/images/login-img-green.png";
import blackBg from "@/assets/images/login-bg-black.jpg";
import blackImg from "@/assets/images/login-img-black.png";
import purpleBg from "@/assets/images/login-bg-purple.jpg";
import purpImg from "@/assets/images/login-img-purple.png";
import ziluolanBg from "@/assets/images/login-bg-ziluolan.jpg";
import ziluolanImg from "@/assets/images/login-img-ziluolan.png";
import skyBlueBg from "@/assets/images/login-bg-skyBlue.jpg";
import skyBlueImg from "@/assets/images/login-img-skyBlue.png";

import { getVerifyCode } from "@/assets/js/api";
import { formatSeconds } from "@/assets/js/tools";
import RSA from "@/assets/js/tools/RSA";
import const_num from "@/assets/js/const/const_num";
import formatPassword from "@/assets/js/tools/formatPassword";

export default {
  components: {
@@ -254,7 +330,7 @@
    ConfigInfo,
    AddLicense,
    FaceLogin,
    'v-sidentify': verifyComponent,
    "v-sidentify": verifyComponent,
    pwdChange,
  },
  data() {
@@ -273,7 +349,7 @@
      loginForm: {
        username: "",
        password: "",
        verify: ""
        verify: "",
      },
      verifyCode: "",
      license: {
@@ -301,10 +377,12 @@
      psdLogin: true,
      phoneInfo: {
        phoneNum: "",
        code: ""
        code: "",
      },
      readSeconds: readSeconds?readSeconds:0,
      readSeconds: readSeconds ? readSeconds : 0,
      codeBtnLoading: false,
      showName: true,
      isAutoLogin: true,
    };
  },
  created() {
@@ -340,7 +418,11 @@
      if (this.loginForm.username && this.loginForm.password) {
        // 开启等待框
        this.loading = true;
        login(this.loginForm.username, this.loginForm.password, this.loginForm.verify)
        login(
          this.loginForm.username,
          this.loginForm.password,
          this.loginForm.verify
        )
          .then((res) => {
            // 对结果进行处理
            this.handleLogin(res);
@@ -428,25 +510,27 @@
        this.$layer.msg("平台未注册，请先注册平台！");
        return;
      }
      if(num.trim() == "") {
      if (num.trim() == "") {
        this.$message.error("手机号不能为空");
        return;
      }
      this.codeBtnLoading = true;
      getVerifyCode(num).then(res=>{
        let rs = JSON.parse(res.data.result);
        this.codeBtnLoading = false;
        if(rs.code==1) {
          this.$message.success("发送成功！");
          this.readSeconds = 360;
          this.startReadSeconds();
        }else {
          this.$message.error(rs.msg);
        }
      }).catch(error=>{
        this.codeBtnLoading = false;
        console.log(error);
      });
      getVerifyCode(num)
        .then((res) => {
          let rs = JSON.parse(res.data.result);
          this.codeBtnLoading = false;
          if (rs.code == 1) {
            this.$message.success("发送成功！");
            this.readSeconds = 360;
            this.startReadSeconds();
          } else {
            this.$message.error(rs.msg);
          }
        })
        .catch((error) => {
          this.codeBtnLoading = false;
          console.log(error);
        });
    },
    phoneVerifyCodeLogin() {
      let num = this.phoneInfo.phoneNum;
@@ -455,37 +539,47 @@
        this.$layer.msg("平台未注册，请先注册平台！");
        return;
      }
      if(num.trim() == "") {
      if (num.trim() == "") {
        this.$message.error("手机号不能为空");
        return;
      }
      if(code.trim() == "") {
      if (code.trim() == "") {
        this.$message.error("验证码不能为空");
        return;
      }
      this.loading = true;
      phoneVerifyCodeLogin(num, code).then(res=>{
        this.handleLogin(res, true)
      }).catch(error => {
        // 关闭等待
        this.loading = false;
        console.log(error);
        this.$message.error("网络异常");
      });
      phoneVerifyCodeLogin(num, code)
        .then((res) => {
          this.handleLogin(res, true);
        })
        .catch((error) => {
          // 关闭等待
          this.loading = false;
          console.log(error);
          this.$message.error("网络异常");
        });
    },
    handleLogin(res, phoneLogin) {
      // 关闭等待
      this.loading = false;
      let rs = JSON.parse(res.data.result);
      if (rs.code == 1) {
        this.$message.success("登录成功");
        if(phoneLogin) {
        this.initPageConfig();
        // 非自动登录提示登录成功
        if (!this.isAutoLogin) {
          this.$message.success("登录成功");
        }
        // 重置登录时间
        this.readSeconds = 0;
        sessionStorage.setItem("readSeconds", "0");
        if (phoneLogin) {
          sessionStorage.setItem("username", rs.msgN);
        }else {
        } else {
          sessionStorage.setItem("username", this.loginForm.username);
        }
        sessionStorage.setItem("userId", rs.data);
        sessionStorage.setItem("userPower", rs.data2);
        sessionStorage.setItem("userPowerGroup", rs.sum);
        // 自动登录无法返回登录页
        if (this.$store.state.user.autoLogin) {
          this.$router.replace("/home");
@@ -495,9 +589,9 @@

        // 设置用户的权限
        this.$store.dispatch("user/getPermits");
      }else if(rs.code == 3) {
      } else if (rs.code == 3) {
        this.pwd.show = true;
        this.$nextTick(()=>{
        this.$nextTick(() => {
          this.$message.error(rs.msg);
        });
      } else {
@@ -544,17 +638,9 @@
        this.$apis.userMager.userInfo
          .getUserLoginInfo(uid)
          .then((res) => {
            let rs = JSON.parse(res.data.result);
            if (rs.code == 1) {
              let data = rs.data;
              this.$store.dispatch("user/changeAutoLogin", 1);
              this.$store.dispatch("user/changePage", pageName);
              this.loginForm.username = data.UName;
              this.loginForm.password = data.USnId;
              this.normalLogin();
            } else {
              this.init();
            }
            this.$store.dispatch("user/changeAutoLogin", 1);
            this.$store.dispatch("user/changePage", pageName);
            this.handleLogin(res, true);
          })
          .catch((error) => {
            this.$notify.error({
@@ -563,6 +649,7 @@
            });
            this.init();
            console.log(error);
            this.isAutoLogin = true;
          });
      }
      // let pattern = /(localhost)|(www\.sw-ht\.com)/;
@@ -600,59 +687,127 @@
      // 初始化登录状态
      sessionStorage.setItem("username", "");
      this.checkServeLicense();
      if(this.readSeconds > 0) {
      if (this.readSeconds > 0) {
        this.startReadSeconds();
      }

      // 查询密码规则
      this.searchPasswordRules();
      // 初始化置动
      this.$store.dispatch("user/changeAutoLogin", 0);
      this.$store.dispatch("user/changePage", "m1c0");
    },
    changeVerifyCode() {
      let loading = this.$layer.loading();
      getLoginVerity().then(res=>{
        this.$layer.close(loading);
        let rs = JSON.parse(res.data.result);
        if(rs.code == 1) {
          this.verifyCode = rs.data+"";
        }else{
      getLoginVerity()
        .then((res) => {
          this.$layer.close(loading);
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1) {
            this.verifyCode = rs.data + "";
          } else {
            this.verifyCode = "";
          }
          this.loginForm.verify = "";
        })
        .catch((error) => {
          this.$layer.close(loading);
          this.verifyCode = "";
        }
        this.loginForm.verify = "";
      }).catch(error=>{
        this.$layer.close(loading);
        this.verifyCode = "";
        this.loginForm.verify = "";
      });
          this.loginForm.verify = "";
        });
    },
    showPsdLogin() {
      this.psdLogin = this.psdLogin?false:true;
      this.psdLogin = this.psdLogin ? false : true;
    },
    startReadSeconds() {
      let timer = "";
      timer = setInterval(()=>{
        if(this.readSeconds == 0) {
      timer = setInterval(() => {
        if (this.readSeconds == 0) {
          clearInterval(timer);
        }else {
        } else {
          this.readSeconds--;
          sessionStorage.setItem("readSeconds", this.readSeconds);
        }
      }, 1000);
    },
    getServerTime(callback) {
      this.$apis.login.getServerTime().then(res=>{
        let rs = JSON.parse(res.data.result);
        if(rs.code == 1) {
          sessionStorage.setItem("serverStamp", rs.data);
        }else {
          sessionStorage.setItem("serverStamp", new Date().getTime());
        }
        callback();
      }).catch(error => {
        sessionStorage.setItem("serverStamp", new Date().getTime());
        callback();
        console.log(error);
      this.$apis.login
        .getServerTime()
        .then((res) => {
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1) {
            sessionStorage.setItem("serverStamp", rs.data);
          } else {
            sessionStorage.setItem("serverStamp", new Date().getTime() + "");
          }
          setTimeout(() => {
            callback();
          }, 500);
        })
        .catch((error) => {
          sessionStorage.setItem("serverStamp", new Date().getTime() + "");
          callback();
          console.log(error);
        });
    },
    closeBrowser() {
      this.$apis.login
        .closeBrowser()
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    searchPasswordRules() {
      this.$apis.pageSetting.realTime
        .searchParam({
          categoryId: 10,
        })
        .then((res) => {
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1 && rs.data.length != 0) {
            let data = rs.data;
            // 读取字符长度
            sessionStorage.setItem("passwordNum", data[0].status);
            // 读取密码类型
            sessionStorage.setItem("passwordType", data[1].status);
          } else {
            // 读取字符长度
            sessionStorage.setItem("passwordNum", "8");
            // 读取密码类型
            sessionStorage.setItem("passwordType", "4");
          }
        })
        .catch((error) => {
          // 读取字符长度
          sessionStorage.setItem("passwordNum", "8");
          // 读取密码类型
          sessionStorage.setItem("passwordType", "4");
        });
    },
    faceSuccessLogin(info) {
      this.face.show = false;
      this.loginForm.username = info.username;
      this.loginForm.password = info.password;
      this.loginForm.verify = this.verifyCode;
      this.$nextTick(() => {
        this.normalLogin();
      });
    },
    initPageConfig() {
      this.$apis.pageSetting.realTime
          .getRealTabsConfig()
          .then((res) => {
            let rs = JSON.parse(res.data.result);
            // 设置pageConfig
            this.$store.dispatch("user/changeRealTabsConfig", rs.data);
          })
          .catch((error) => {
            // 设置pageConfig
            this.$store.dispatch("user/changeRealTabsConfig", []);
          });
    },
  },
  computed: {
@@ -686,8 +841,20 @@
    },
    logoUrl() {
      let logoConfig = this.logoConfig;
      let image = yuanchange;

      let image = yuanchange1;
      if (this.$store.state.theme.activeSkin == "science-blue") {
        image = yuanchange0;
      } else if (this.$store.state.theme.activeSkin == "science-green") {
        image = yuanchange1;
      } else if (this.$store.state.theme.activeSkin == "science-black") {
        image = yuanchange2;
      } else if (this.$store.state.theme.activeSkin == "science-purple") {
        image = yuanchange3;
      } else if (this.$store.state.theme.activeSkin == "science-ziluolan") {
        image = yuanchange4;
      } else if (this.$store.state.theme.activeSkin == "science-skyBlue") {
        image = yuanchange5;
      }
      if (!logoConfig.value) {
        return image;
      }
@@ -708,58 +875,107 @@
      }
      return image;
    },
    backgroundImg() {
      let image = blueBg;
      if (this.$store.state.theme.activeSkin == "science-blue") {
        image = blueBg;
      } else if (this.$store.state.theme.activeSkin == "science-green") {
        image = greenBg;
      } else if (this.$store.state.theme.activeSkin == "science-black") {
        image = blackBg;
      } else if (this.$store.state.theme.activeSkin == "science-purple") {
        image = purpleBg;
      } else if (this.$store.state.theme.activeSkin == "science-ziluolan") {
        image = ziluolanBg;
      } else if (this.$store.state.theme.activeSkin == "science-skyBlue") {
        image = skyBlueBg;
      }
      return image;
    },
    loginImg() {
      let image = blueImg;
      if (this.$store.state.theme.activeSkin == "science-blue") {
        image = blueImg;
      } else if (this.$store.state.theme.activeSkin == "science-green") {
        image = greenImg;
      } else if (this.$store.state.theme.activeSkin == "science-black") {
        image = blackImg;
      } else if (this.$store.state.theme.activeSkin == "science-purple") {
        image = purpImg;
      } else if (this.$store.state.theme.activeSkin == "science-ziluolan") {
        image = ziluolanImg;
      } else if (this.$store.state.theme.activeSkin == "science-skyBlue") {
        image = skyBlueImg;
      }
      return image;
    },
    loginType() {
      if(this.psdLogin) {
      if (this.psdLogin) {
        return {
          text: "手机号登录",
          title: "账号密码登录",
          icon: "el-icon-mobile-phone"
        }
      }else {
          icon: "el-icon-mobile-phone",
        };
      } else {
        return {
          text: "账号密码登录",
          title: "手机号登录",
          icon: "el-icon-lock"
        }
          icon: "el-icon-lock",
        };
      }
    },
    codeBtn() {
      let seconds = this.readSeconds;
      if(seconds<=0) {
      if (seconds <= 0) {
        return {
          text: "获取验证码",
          disabled: false
        }
      }else {
          disabled: false,
        };
      } else {
        return {
          text: formatSeconds(seconds),
          disabled: true,
        }
        };
      }
    }
    },
  },
  mounted() {
    this.getServerTime(()=>{
    this.getServerTime(() => {
      this.changeVerifyCode();
      let autoLogin = this.$route.query.autoLogin;
      if (autoLogin) {
        this.isAutoLogin = true;
        // 自动登录
        this.autoLogin();
      } else {
        this.isAutoLogin = false;
        // 初始化
        this.init();
      }
    });

    // console.log(AES.encrypt("huo1234567"));
    // console.log(AES.decrypt("8tg9f0/tX7/EHYXqLWqvxA=="));
    // console.log(md5("a123456"));
    // console.log(JSON.stringify("5OUaEnC33sVNY+jeXlx3Qg=="));
    //console.log(formatPassword("123"));
    //console.log(AES.encrypt("123456"));
    //console.log(encodeURIComponent("B17jjjYoBkbfZChw/fHzcA=="));
    //console.log(decodeURIComponent("B17jjjYoBkbfZChw%2FfHzcA%3D%3D"))
    //console.log(AES.decrypt("FCGylc7v1wXzmTqpRXPPGA=="));
    //console.log(md5("a123456"));
    //console.log(JSON.stringify("5OUaEnC33sVNY+jeXlx3Qg=="));
    let rsaWord = RSA.encrypt("123456");
    console.log(rsaWord);
    // console.log(RSA.decrypt("MoRg8hhjrvdWQ2YeQiyscX8ycqPQJbGz1n1iRfLCA9qszFRxW9zcRpD10rsUmvdxLmpXp2s5RZW6Mc9B9M6THEGVuWRwkPnPIE3X5xUSeIxCfSW1ksibd0t+mAgWDhz7gnDjUGUKof/kmNmaC65uC2bW4+hMmuyyP1YTHjeNpL0=", const_num.privateKey));
  },
};
</script>

<style>
.auto-login-loading {
  display: flex;
  height: 100%;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #e7ebef;
}
.login_from .el-input__inner {
  height: 48px;
  line-height: 48px;
@@ -790,7 +1006,6 @@
.login_container {
  width: 100%;
  height: 100%;
  background: url(../assets/images/login-bg.jpg) 0 0 no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
@@ -857,7 +1072,7 @@
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  outline: 8px solid hsla(0,0%,100%,.4);
  outline: 8px solid hsla(0, 0%, 100%, 0.4);
  .title {
    font-size: 20px;
    color: #007fe1;
@@ -959,4 +1174,7 @@
.flex-row .flex-footer {
  margin-left: 8px;
}
.text-right {
  text-align: right;
}
</style>