Yi.Vue3.x.Vant/src/view/login.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
  <div class="div-top">
    <span class="title">大白荟</span>
    <br />
    <span class="subtitle">有幸相遇、不负未来</span>
  </div>
  <div class="div-bottom">
    <h5>密码登录</h5>
    <van-field
      class="van-field-username"
      v-model="loginForm.username"
      label="用户"
      placeholder="请输入用户名"
    />
    <van-field
      class="van-field-password"
      v-model="loginForm.password"
      label="密码"
      type="password"
      placeholder="请输入密码"
    />
    <van-button type="primary" @click="login">进入大白荟</van-button>
    <p>其他方式登录<van-icon name="arrow" /></p>

    <van-row class="row-bottom" style="margin-top: 6rem">
      <van-col span="24"><p>第三方登录</p></van-col>
      <van-col span="2"></van-col>
      <van-col span="5"><van-icon name="smile-o" size="2rem" /></van-col>
      <van-col span="5"><van-icon name="smile-o" size="2rem" /></van-col>
      <van-col span="5"><van-icon name="smile-o" size="2rem" /></van-col>
      <van-col span="5"><van-icon name="smile-o" size="2rem" /></van-col>
      <van-col span="2"></van-col>
    </van-row>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
import { Toast } from "vant";

const router = useRouter();
const redirect = ref(undefined);
const loginForm = ref({
  username: "",
  password: "",
  rememberMe: false,
  code: "",
  uuid: "",
});
const userStore = useUserStore();
const login = () => {
  // 调用action的登录方法
  userStore
    .login(loginForm.value)
    .then((response: any) => {
      Toast({
        message: response.message,
        position: "bottom",
      });