| | |
| | | <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> |
| | |
| | | </div> |
| | | </template> |
| | | <script setup lang="ts"> |
| | | import router from "@/router"; |
| | | import { User, Lock } from "@element-plus/icons-vue"; |
| | | import { |
| | | ref, |
| | | onMounted, |
| | |
| | | defineProps, |
| | | defineEmits, |
| | | } 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); |
| | | } |
| | | }); |
| | | }; |
| | | onMounted(() => { |
| | | removeToken(); |
| | | //显示月球页面 |
| | | startURL(); |
| | | // |
| | | getPublicKey(); |
| | | }); |
| | | </script> |
| | | <style lang="less" scoped> |
| | |
| | | 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 { |