代码更新

surprise

2024-03-01 12075d0fa73d963ff5d6dbc4727fb95fb6084961

 src/views/login.vue

@@ -38,51 +38,46 @@
          <span>用户登录</span>
        </div>
        <el-form
          ref="loginForm"
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          class="loginForm"
        >
          <el-form-item prop="uid">
          <el-form-item prop="user">
            <el-input
              placeholder="输入登录账号"
              class="nobr"
              autocomplete="off"
              :prefix-icon="User"
            >
            </el-input>
              v-model="ruleForm.user"
            />
          </el-form-item>

          <el-form-item prop="pwd">
          <el-form-item prop="passWorld">
            <el-input
              show-password
              v-model="ruleForm.passWorld"
              placeholder="请输入登录密码"
              class="nobr"
              type="password"
              show-password
              autocomplete="off"
              :prefix-icon="Lock"
            >
            </el-input>
            />
          </el-form-item>

          <el-form-item required>
            <el-col :span="18">
              <el-form-item prop="validCode">
                <el-input
                  placeholder="请输入验证码（忽略大小写）"
                  class="nobr"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col
              :span="6"
              align="right"
            > </el-col>
          <el-form-item prop="verify">
            <div style="display: flex; justify-content: space-between; width: 100%">
              <el-input
                placeholder="请输入验证码（忽略大小写）"
                v-model="ruleForm.verify"
                style="width: 68%"
              />
              <valid-code style="width: 27%"></valid-code>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              class="nobr loginbtn btnbox"
              @click="setLogin()"
              @click="submitForm(ruleFormRef)"
            >登录</el-button>
          </el-form-item>
        </el-form>
@@ -91,8 +86,6 @@
  </div>
</template>
<script setup lang="ts">
import router from "@/router";
import { User, Lock } from "@element-plus/icons-vue";
import {
  ref,
  onMounted,
@@ -100,17 +93,114 @@
  reactive,
  defineProps,
  defineEmits,
  onUnmounted,
} from "vue";
// import config from "../../public/config/config.js";
//Router
import router from "@/router";
//图标
import { ElMessage } from "element-plus";
import { User, Lock } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";
import validCode from "@/components/validCode.vue";
import { sign_getPublicKey, sign_login } from "@/api/api";
import { useStore } from "vuex"; // 引入useStore 方法
import JSEncrypt from "jsencrypt";
import emitter from "@/utils/bus";
import { removeToken, getToken } from "@/utils/auth";
const store = useStore(); // 该方法用于返回store 实例
const ruleFormRef = ref<FormInstance>();
var encrypt = new JSEncrypt();
const reportUrl = ref("");
const startURL = () => {
  reportUrl.value = "/mapscreen/index.html";
};
const setLogin = () => {
  router.push("/");

const ruleForm = reactive({
  user: "admin",
  passWorld: "Admin@1234_lf",
  verify: "",
});
const validateVerify = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入验证码"));
  } else if (value.toLowerCase() != store.state.loginCode.toLowerCase()) {
    callback(new Error("验证码错误，请重新输入"));
  } else {
    callback();
  }
};

const validateUser = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入登录用户"));
  } else {
    callback();
  }
};
const validatePass = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error("请输入登录密码"));
  } else {
    callback();
  }
};

const rules = reactive<FormRules<typeof ruleForm>>({
  user: [{ validator: validateUser, trigger: "blur" }],
  passWorld: [{ validator: validatePass, trigger: "blur" }],
  verify: [{ validator: validateVerify, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  formEl.validate((valid) => {
    if (valid) {
      setLogin();
    } else {
      emitter.emit("handleDraw", true);
      return false;
    }
  });
};
const setLogin = () => {
  var data = {
    uid: encrypt.encrypt(ruleForm.user),
    pwd: encrypt.encrypt(ruleForm.passWorld),
  };
  sign_login(data).then((res) => {
    if (res.code != 200) return;

    store.commit("SET_UNAME", res.result.uname);
    store.commit("SET_TOKEN", res.result.token);
    router.push("/");
  });
};
const startURL = () => {
  reportUrl.value = config.mapMoon;
};
const getPublicKey = () => {
  sign_getPublicKey(ruleForm).then((res) => {
    if (res.code == 200 && res.result) {
      store.commit("SET_KEY", res.result);
      encrypt.setPublicKey(res.result);
    }
  });
};
const keyDown = (e) => {
  //如果是回车则执行登录方法
  if (e.keyCode == 13) {
    submitForm(ruleFormRef.value);
  }
};
onMounted(() => {
  removeToken();
  //显示月球页面
  startURL();
  //
  getPublicKey();
  window.addEventListener("keydown", keyDown);
});
onUnmounted(() => {
  window.removeEventListener("keydown", keyDown, false);
});
</script>
<style lang="less" scoped>
@@ -160,9 +250,10 @@
      height: 41px;
    }
    /deep/ .el-input .el-input__inner {
      /* background: rgba(80, 152, 255, 0.24); */
      border-color: rgba(0, 0, 0, 0.1);
      color: #000;
      // background: rgba(80, 152, 255, 0.24);
      background: transparent !important;
      // border-color: rgba(0, 0, 0, 0.1);
      // color: #000;
    }

    /deep/ .el-input .el-input-group__prepend {