he wei
2024-11-08 106374208e6e7265db3c00ddfa948c39b7c252ea
src/views/login/index.vue
@@ -1,6 +1,7 @@
<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";
@@ -8,17 +9,23 @@
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: "",
@@ -26,19 +33,36 @@
  // 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)
@@ -54,9 +78,16 @@
          //sessionStorage.setItem("useLoginState", "2");
          setId(res.data2.uid);
          setName(res.data2.uname);
          // 是否记住密码
          if (remember.value) {
            add();
          } else {
            remove();
          }
          // 对结果进行处理
          $message.success("登录成功");
          router.push("/");
          router.push({ path: redirect.value || "/home" });
          // handleLogin({ data: res });
        } else {
          // 关闭等待
@@ -71,7 +102,7 @@
        $message.error("网络异常");
      });
  } else {
    // $message.error("用户名或密码不能为空");
    $message.error("用户名或密码不能为空");
  }
}
</script>
@@ -98,7 +129,7 @@
      <div class="sliderCon">
        <div class="logo">
          <img :src="logoUrl" class="logoImg" />
          {{ platformName }}
          {{ config.title }}
        </div>
        <img :src="loginImg" class="picImg" />
      </div>
@@ -112,8 +143,14 @@
          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="请输入用户名"
@@ -122,8 +159,8 @@
              <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
@@ -156,6 +193,7 @@
              </el-col>
            </el-row>
          </el-form-item> -->
          <el-checkbox v-model="remember">记住密码</el-checkbox>
          <el-form-item class="btns">
            <el-button
              :loading="loading"