web-wap/src/pages/login.vue

<template>
  <div class="login">
    <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>
  </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");
    }
  });
};
</script>
<style lang="less" scoped>
.login {
  background-color: #fff !important;
  height: 100vh;
  padding-top: 48px;
  .title {
    font-size: 24px;
    font-weight: 600;
    color: #262626;
    padding-left: 24px;
  }
  .sub-title {
    font-size: 16px;
    color: #8c8c8c;
    margin-top: 8px;
    padding-left: 24px;
  }
  .login-form {
    margin-top: 24px;
  }
}
</style>