PanoramicBallControl360/src/views/system/Login/index.vue

<template>
  <div class="login-container relative h-full overflow-hidden">
    <Bg>
      <template #header>
        <div class="login-h w-full absolute left-0 top-0 flex justify-between">
          <h2
            class="text-4xl tracking-2 font-[yb-font] text-#8ac5ff opacity-10"
          >
            全景布控球
          </h2>
          <h2
            class="text-4xl tracking-2 font-[yb-font] text-#8ac5ff opacity-10"
          >
            欢迎回来
          </h2>
        </div>
      </template>
      <div
        class="flex flex-col items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-14"
      >
        <van-form @submit="onSubmit" class="login-form w-80">
          <van-cell-group inset>
            <van-field
              v-model="form.user"
              name="user"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
              :disabled="loading"
            />
            <van-field
              v-model="form.password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
              :disabled="loading"
            />
          </van-cell-group>
          <div class="my-4">
            <van-checkbox
              class="text-12px"
              v-model="checked"
              :disabled="loading"
            >
              <!-- 我已阅读并同意<span class="text-blue">《用户使用条款》</span
              >和<span class="text-blue">《隐私政策》</span> -->
              记住密码
            </van-checkbox>
          </div>
          <van-button
            block
            type="primary"
            native-type="submit"
            :loading="loading"
            loading-text="登录中，请等待..."
          >
            登录
          </van-button>
        </van-form>
      </div>
    </Bg>
  </div>
</template>

<script setup>
import { getFingerprint, getENCPwd } from "@/utils";
import Bg from "./components/bg.vue";
import storage from "@/utils/storage";
import { msgE } from "@/utils";
import { useOutsideSystemStore } from "@/stores/modules/system.js";

const useSystem = useOutsideSystemStore();
const { API_LOGIN_POST } = useRequest();
const router = useRouter();

const form = ref({
  user: "",
  password: "",
  // key: ''
});
const loading = ref(false);
const checked = ref(true);
const onSubmit = (values) => {
  // if (!checked.value) {
  //   msgE("请阅读并同意用户使用条款和隐私政策");
  //   return;
  // }
  loading.value = true;
  if (checked.value) {
    // 记住密码，存7天
    storage.cookie.set("mp", `${form.value.user}:${form.value.password}`, {
      expires: 7,
    });
  } else {
    storage.cookie.remove("mp");
  }
  getENCPwd(form.value.password).then((pwd) => {
    getFingerprint().then(({ fingerprint, components }) => {
      const params = {
        User: form.value.user,
        Password: pwd,
        Fingerprint: fingerprint,
        components,
      };

      API_LOGIN_POST(params)
        .then((res) => {
          useSystem.token = res.Token;
          storage.local.set("t", res.Token);
          loading.value = false;
          router.replace({ name: "Home" });
        })
        .catch(() => {
          loading.value = false;
        });
    });
  });
};

onMounted(() => {
  const mp = storage.cookie.get("mp");
  if (mp) {
    const [user, password] = mp.split(":");
    form.value.user = user;
    form.value.password = password;
  }
});
</script>