sx_yjb_vue/src/views/login/index.vue

<template>
  <div class="login">
    <div class="login_main">
      <div class="title"><img src="../../assets/images/logo.png" alt="" /></div>

      <div class="form">
        <el-form
          ref="formRef"
          :model="data.form"
          :rules="data.rules"
          @submit.prevent="fnLogin"
        >
          <el-form-item prop="username">
            <el-input
              v-model="data.form.username"
              placeholder="请输入用户名"
              tabindex="1"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="data.form.password"
              type="password"
              placeholder="请输入密码"
              tabindex="2"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <verification v-model:verification-pass="verificationPass" />
          </el-form-item>
          <el-form-item class="button">
            <el-button native-type="submit">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="qrcode">
        <div v-if="data.lgAppSrc">
          <el-popover placement="bottom" :width="125" trigger="hover">
            <template #reference>
              <span style="cursor: pointer; color: #666666; font-size: 14px"
                >新泰安全App</span
              ></template
            >
            <div class="qrcode_main">
              <div class="qrcode_list">
                <img :src="data.lgAppSrc" alt="" width="125" height="125" />
                <div>扫码下载</div>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>

    <!--    <div class="qrCode">-->
    <!--      <div v-if="data.qyAppSrc">-->
    <!--        <el-popover placement="bottom" :width="100" trigger="click">-->
    <!--          <template #reference> 新泰安全APP</template>-->
    <!--          <img :src="data.qyAppSrc" alt="" width="125" height="125" />-->
    <!--        </el-popover>-->
    <!--      </div>-->
    <!--      <div v-if="data.qyAppSrc">|</div>-->
    <!--      <div v-if="data.zdgcAppSrc">-->
    <!--        <el-popover placement="bottom" :width="100" trigger="click">-->
    <!--          <template #reference> 重点工程APP</template>-->
    <!--          <img :src="data.zdgcAppSrc" alt="" width="125" height="125" />-->
    <!--        </el-popover>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
  <div class="foot">
    北京得瑞紫蜂科技有限公司 版权所有 Copy right 2013-2020-v7
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import Verification from "@/components/verification/index";
import { useUserStore } from "@/pinia/user";
import { getAllAppVersion, Login } from "@/request/api";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import { useQRCode } from "@vueuse/integrations/useQRCode";

const router = useRouter();
const formRef = ref(null);
const verificationPass = ref(false);
const userStore = useUserStore();
// const src = useQRCode(() => "http://47.92.102.56:7811/file/app/qy.apk", {
//   width: 125,
//   height: 125,
//   margin: 1,
//   correctLevel: "H",
// });
// const src1 = useQRCode(() => "http://47.92.102.56:7811/file/app/zdgc.apk", {
//   width: 125,
//   height: 125,
//   margin: 1,
//   correctLevel: "H",
// });
const data = reactive({
  form: {
    username: "",
    password: "",
  },
  // zdgcAppSrc: "",
  hlwAppSrc: "",
  lgAppSrc: "",
  rules: {
    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  },
});
const getAppVersion = async () => {
  const resData = await getAllAppVersion();
  data.lgAppSrc = useQRCode(() => resData.data[0]?.FILEURL, {
    width: 125,
    height: 125,
    margin: 1,
    correctLevel: "H",
  });
  // const bgwSrc = resData.data[0]?.FILEURL.replace(
  //   "183.251.104.38:10110",
  //   "10.199.64.27:7811"
  // );
  // data.hlwAppSrc = useQRCode(() => bgwSrc, {
  //   width: 125,
  //   height: 125,
  //   margin: 1,
  //   correctLevel: "H",
  // });
  // data.zdgcAppSrc = useQRCode(() => resData.data[1]?.FILEURL, {
  //   width: 125,
  //   height: 125,
  //   margin: 1,
  //   correctLevel: "H",
  // });
};
await getAppVersion();
const fnLogin = debounce(
  1000,
  () => {
    if (import.meta.env.DEV) {
      fnSubmitLogin();
      return;
    }
    if (verificationPass.value) {
      fnSubmitLogin();
    } else {
      ElMessage.warning("请进行登录验证");
    }
  },
  { atBegin: true }
);
const fnSubmitLogin = async () => {
  await useFormValidate(formRef, "请输入用户名密码");
  // eslint-disable-next-line no-undef
  const jsencrypt = new JSEncrypt();
  jsencrypt.setPublicKey(
    "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDUoHAavCikaZxjlDM6Km8cX+ye78F4oF39AcEfnE1p2Yn9pJ9WFxYZ4Vkh6F8SKMi7k4nYsKceqB1RwG996SvHQ5C3pM3nbXCP4K15ad6QhN4a7lzlbLhiJcyIKszvvK8ncUDw8mVQ0j/2mwxv05yH6LN9OKU6Hzm1ninpWeE+awIDAQAB"
  );
  const KEYDATA = jsencrypt.encrypt(
    "zcloudchina" + data.form.username + ",zy," + data.form.password
  );
  const resData = await Login({
    KEYDATA,
    SOURCE: 1,
  });
  await userStore.setUserInfo({
    ...userStore.getUserInfo,
    ...resData,
  });
  // 定位系统宕机的话 跳转到首页 否则 地图页
  // await router.replace(resData.webSiteStatus ? "/BI" : "/index");
  await router.replace("/index");
};
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: 100vh;
  position: relative;
  background: #1e4294 url("../../assets/images/loginbg.png") no-repeat top
    center;
  display: flex;

  .login_main {
    width: 470px;
    background: #ffffff;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 2px;
    padding-bottom: 40px;
    .title {
      margin: 0 auto;
      text-align: center;
      img {
        width: 462px;
        height: 121px;
      }
    }

    .form {
      width: 100%;
      padding: 0 30px;
      .el-form-item {
        width: 100%;
        margin: 30px auto;

        .el-input {
          height: 40px;
        }
      }

      .button {
        .el-button {
          background: #3071ff;
          border: 1px solid #008aff;
          height: 40px;
          width: 100%;
          color: #ffffff;
        }
      }
    }
  }
}
.qrcode {
  display: flex;
  justify-content: flex-end;
  padding: 0 30px;
}

.foot {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 14px;
  font-weight: normal;
}

:deep {
  .el-input__wrapper {
    padding: 16px 10px;
    border: none;
  }
  .el-input-group__prepend {
    padding-top: 5px !important;
  }
  .el-form-item__error {
    padding-top: 12px;
  }
  .el-popover.el-popper {
    background: #ffffff !important;
  }
  .el-input {
    --el-input-bg-color: #f9f9f9;
    --el-input-text-color: #000;
    --el-fill-color-light: #222;
    --el-input-border-color: #dde0eb;
  }
}
.qrcode_main {
  display: flex;
  text-align: center;
  .qrcode_list {
    width: 125px;
    margin-right: 20px;
    text-align: center;

    img {
      border-radius: 4px;
    }
  }
}
</style>