web-wap/src/pages/login.vue

<template>
  <div class="login">
    <div v-if="!appStore.globalConfig?.taskTitle" class="sys-disabled">
      <div class="text-center">
        <NoData>
          <template #img>
            <img src="../assets/imgs/sys_disabled.png" />
          </template>
          <template #title>{{ appStore.globalConfig?.orgTitle }}</template>
          当前预约系统未开放</NoData
        >
        <div class="cus-btn" @click="exit">退出</div>
      </div>
    </div>
    <template v-else>
      <div class="title">{{ appStore.globalConfig?.orgTitle }}</div>
      <div class="sub-title">{{ appStore.globalConfig?.taskTitle }}</div>
      <van-form @submit="onSubmit" class="login-form">
        <van-cell-group inset>
          <van-field
            v-model="account"
            name="学号"
            label=""
            placeholder="请输入学号"
            clearable
            label-width="0px"
            :rules="[{ required: true, message: '请输入学号' }]"
          />
          <van-field
            v-model="password"
            :type="passwordShow ? 'text' : 'password'"
            name="密码"
            label=""
            placeholder="请输入证件号后六位"
            :right-icon="passwordShow ? 'closed-eye' : 'eye-o'"
            @click-right-icon="passwordShow = !passwordShow"
            label-width="0px"
            :rules="[{ required: true, message: '请输入证件号后六位' }]"
          />
          <div style="margin: 16px">
            <van-button block type="success" native-type="submit">
              提交
            </van-button>
          </div>
        </van-cell-group>
      </van-form>
    </template>
  </div>
</template>
<script name="Login" setup>
import { ref } from "vue";
import { login } from "@/api/user";
import { useRouter } from "vue-router";
import { useUserStore, useAppStore } from "@/store";
const router = useRouter();
const appStore = useAppStore();
const userStore = useUserStore();
const account = ref("1509000120002");
const password = ref("123456");
const passwordShow = ref(false);
const onSubmit = () => {
  login({ account: account.value, password: password.value }).then((res) => {
    if (res?.id) {
      userStore.setLoginInfo(res);
      router.push("/index");
    }
  });
};
const exit = () => {
  window.location.href = "about:blank";
  window.close();
};
</script>
<style lang="less" scoped>
.login {
  background-color: #fff !important;
  height: 100vh;
  .sys-disabled {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0;
  }
  .title {
    font-size: 24px;
    font-weight: 600;
    color: #262626;
    padding-left: 24px;
    padding-top: 48px;
  }
  .sub-title {
    font-size: 16px;
    color: #8c8c8c;
    margin-top: 8px;
    padding-left: 24px;
  }
  .login-form {
    margin-top: 24px;
  }
}
</style>