11

WX

2023-07-14 23aac3cf9903d404eb86310d502a0eeb5a68b407

 src/views/login.vue

@@ -30,52 +30,56 @@
    </div>
    <div class="zz">
      <div class="title_img">
        <div class="titleLogo"></div>
        <h3>月球大数据地理空间分析展示平台</h3>
      </div>
      <div class="loginMenu">
        <div class="login_title">
          <span>用户登录</span>
        </div>
        <el-form ref="loginForm" class="loginForm">
          <el-form-item prop="uid">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          class="loginForm"
        >
          <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-form-item>
          <el-form-item prop="verify">
            <div
              style="display: flex; justify-content: space-between; width: 100%"
            >
            </el-input>
              <el-input
                placeholder="请输入验证码（忽略大小写）"
                v-model="ruleForm.verify"
                style="width: 68%"
              />
              <valid-code style="width: 27%"></valid-code>
            </div>
          </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>

          <el-form-item>
            <el-button
              type="primary"
              class="nobr loginbtn btnbox"
              @click="setLogin()"
              @click="submitForm(ruleFormRef)"
              >登录</el-button
            >
          </el-form-item>
@@ -85,8 +89,6 @@
  </div>
</template>
<script setup lang="ts">
import router from "@/router";
import { User, Lock } from "@element-plus/icons-vue";
import {
  ref,
  onMounted,
@@ -95,16 +97,103 @@
  defineProps,
  defineEmits,
} from "vue";
import config from "@/assets/js/Map/config";
//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) {
      console.log("submit!");
      setLogin();
    } else {
      emitter.emit("handleDraw", true);
      console.log("erro submit!");
      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);
    }
  });
};
onMounted(() => {
  removeToken();
  //显示月球页面
  startURL();
  //
  getPublicKey();
});
</script>
<style lang="less" scoped>
@@ -112,7 +201,7 @@
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../assets/img/moon-bg.png") no-repeat;
  background: url("../assets/img/背景.png") no-repeat;
  background-size: 100% 100%;
  .zz {
    position: absolute;
@@ -154,9 +243,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 {
@@ -170,14 +260,22 @@
  }
  .title_img {
    position: absolute;
    left: 15%;
    left: 12%;
    top: 8%;
    width: 20%;
    /* transform: translateX(-50%); */

    display: flex;
    align-items: center;
    .titleLogo {
      width: 80px;
      height: 80px;
      background: url("../assets/img/logo.png") no-repeat;
      background-size: 100% 100%;
    }
    h3 {
      color: #fff;
      font-size: 40px;
      white-space: nowrap;
      margin-left: 10px;
    }
  }
}