| | |
| | | <script setup> |
| | | import { ref, reactive, inject } from "vue"; |
| | | import { ref, reactive, inject, watch } from "vue"; |
| | | import { storeToRefs } from "pinia"; |
| | | import userName from "./userName.vue"; |
| | | import bgUrl from "@/assets/images/login-bg.jpg"; |
| | | // TODO |
| | | import logoUrl from "@/assets/images/batt-g.png"; |
| | |
| | | import { login } from "./api"; |
| | | import { useRouter, useRoute } from "vue-router"; |
| | | import { useUserStore } from "@/stores/user.js"; |
| | | import config from "@/assets/js/config.js"; |
| | | import formatPassword from "@/assets/js/tools/formatPassword.js"; |
| | | import decryptPassword from "@/assets/js/tools/decryptPassword.js"; |
| | | |
| | | import { ElMessage } from "element-plus"; |
| | | const $message = ElMessage; |
| | | |
| | | const userStore = useUserStore(); |
| | | // storeToRefs只会关注sotre中数据,不会对方法进行ref包裹 |
| | | // const { uid, uname } = storeToRefs(userStore); |
| | | const { setName, setId } = userStore; |
| | | |
| | | const { list } = storeToRefs(userStore); |
| | | const { setName, setId, addRemember, removeRemember } = userStore; |
| | | |
| | | const router = useRouter(); |
| | | const route = useRoute(); |
| | | const remember = ref(false); |
| | | const elusername = ref(); |
| | | const redirect = ref(); |
| | | |
| | | const loginForm = reactive({ |
| | | username: "", |
| | |
| | | // verify: "", |
| | | }); |
| | | const loading = ref(false); |
| | | const platformName = ref("锂电池监测维护一体化平台"); |
| | | |
| | | watch( |
| | | () => route, |
| | | (route) => { |
| | | redirect.value = route.query && route.query.redirect; |
| | | }, |
| | | { |
| | | immediate: true, |
| | | } |
| | | ); |
| | | |
| | | function add() { |
| | | addRemember(elusername.value.username, formatPassword(loginForm.password)); |
| | | // console.log("list", list, "============="); |
| | | } |
| | | function remove() { |
| | | removeRemember(elusername.value.username); |
| | | } |
| | | |
| | | function selectedRemember($ev) { |
| | | loginForm.password = decryptPassword($ev); |
| | | remember.value = true; |
| | | } |
| | | |
| | | function onSubmit(params) { |
| | | // TODO |
| | | setId(101); |
| | | setName('hw'); |
| | | router.push("/"); |
| | | return; |
| | | // 校验用户 |
| | | if (loginForm.username && loginForm.password) { |
| | | if (elusername.value.username && loginForm.password) { |
| | | // 开启等待框 |
| | | loading.value = true; |
| | | let username = loginForm.username, |
| | | let username = elusername.value.username, |
| | | password = loginForm.password; |
| | | // verity = loginForm.value.verify; |
| | | login(username, password) |
| | |
| | | //sessionStorage.setItem("useLoginState", "2"); |
| | | setId(res.data2.uid); |
| | | setName(res.data2.uname); |
| | | |
| | | // TODO 密码要加密 取出后再解密 |
| | | if (remember.value) { |
| | | add(); |
| | | } else { |
| | | remove(); |
| | | } |
| | | // 对结果进行处理 |
| | | $message.success("登录成功"); |
| | | router.push("/"); |
| | | router.push({ path: redirect.value || "/home" }); |
| | | // handleLogin({ data: res }); |
| | | } else { |
| | | // 关闭等待 |
| | |
| | | $message.error("网络异常"); |
| | | }); |
| | | } else { |
| | | // $message.error("用户名或密码不能为空"); |
| | | $message.error("用户名或密码不能为空"); |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <div class="sliderCon"> |
| | | <div class="logo"> |
| | | <img :src="logoUrl" class="logoImg" /> |
| | | {{ platformName }} |
| | | {{ config.title }} |
| | | </div> |
| | | <img :src="loginImg" class="picImg" /> |
| | | </div> |
| | |
| | | ref="loginFormRef" |
| | | > |
| | | <!-- 用户名 --> |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | <user-name |
| | | ref="elusername" |
| | | @ok="onSubmit" |
| | | @cancel-remember="remember = false" |
| | | @set-snid="selectedRemember" |
| | | ></user-name> |
| | | <!-- <el-form-item prop="username"> --> |
| | | <!-- <el-input |
| | | class="input" |
| | | v-model="loginForm.username" |
| | | placeholder="请输入用户名" |
| | |
| | | <template #prefix> |
| | | <el-icon class="el-input__icon"><User /></el-icon> |
| | | </template> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-input> --> |
| | | <!-- </el-form-item> --> |
| | | <!-- 密码 --> |
| | | <el-form-item prop="password"> |
| | | <el-input |
| | |
| | | </el-col> |
| | | </el-row> |
| | | </el-form-item> --> |
| | | <el-checkbox v-model="remember">记住密码</el-checkbox> |
| | | <el-form-item class="btns"> |
| | | <el-button |
| | | :loading="loading" |