open_platform/src/views/LoginView.vue

<script setup lang="ts">
import CommonView from "@/components/CommonView.vue"
import { ref } from "vue"
import { Lock, User } from "@element-plus/icons-vue"
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus"
// @ts-ignore
import API from "@/api/index.js"

const router = useRouter()

const Api = API

const email = ref("")
const pwd = ref("")

const register = () => {
  router.push("/register")
}

const login = () => {
  if (email.value.length === 0) {
    ElMessage.error("请输入正确的邮箱地址")
    return
  }
  if (pwd.value.length === 0) {
    ElMessage.error("请输入密码")
    return
  }
  Api.login({
    email: email.value,
    password: pwd.value
  }).then((res) => {
    ElMessage.success("登录成功")
    console.log(">>>>", JSON.stringify(res))
    sessionStorage.setItem("szyxToken", res)
    router.push("/main")
  })
}
</script>

<template>
  <CommonView title="登录">
    <div style="display: flex; place-content: center">
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header" style="display: flex; flex-direction: row-reverse">
            <el-button type="primary" @click="register">注册</el-button>
          </div>
        </template>
        <div class="flex gap-4 mb-4">
          <el-input
            class="text item"
            v-model="email"
            style="width: 440px"
            placeholder="请输入邮箱地址"
            :prefix-icon="User"
            :clearable="true"
          />
          <el-input
            v-model="pwd"
            style="width: 440px; margin-top: 18px"
            placeholder="请输入密码"
            :prefix-icon="Lock"
            :clearable="true"
            :show-password="true"
          />
          <el-button style="width: 440px; margin-top: 28px" type="primary" @click="login"
            >登录
          </el-button>
        </div>
      </el-card>
    </div>
  </CommonView>
</template>

<style scoped></style>