python_93040206/ClientPlatform/src 2/components/login.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="550px"
    :before-close="handleClose"
  >
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      v-if="useType === 'login'"
    >
      <el-form-item label="邮箱">
        <el-input type="email" v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="form" label-width="80px" v-else>
      <el-form-item label="登陆邮箱">
        <el-input type="email" v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="输入密码">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input type="password" v-model="form.password2"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button v-if="useType === 'register'" type="text" @click="toLogin"
        >取消</el-button
      >
      <el-button
        v-if="useType === 'register'"
        type="primary"
        @click="toRegisterFn"
        >注册</el-button
      >
      <el-button v-if="useType === 'login'" type="text" @click="toRegister"
        >注册</el-button
      >
      <el-button v-if="useType === 'login'" type="primary" @click="toLoginFn"
        >登陆</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { login, register } from "@/api";

export default {
  name: "login",
  data() {
    return {
      useType: "login",
      title: "登陆",
      dialogVisible: false,
      form: {
        name: "",
        password: "",
      },
    };
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    toRegister() {
      this.useType = "register";
      this.title = "注册";
    },
    handleClose() {
      this.dialogVisible = false;
    },
    toLogin() {
      this.useType = "login";
      this.title = "登陆";
    },
    async toLoginFn() {
      if (!this.form.email) {
        this.$message.error("请输入邮箱!");
        return;
      }
      if (!this.form.password) {
        this.$message.error("请输入密码!");
        return;
      }

      const res = await login({
        email: this.form.email,
        password: this.form.password,
      });
      if (res.code === 300) {
        this.$message.error(res.msg);
        return
      }
      console.log("loginOrRegister", res);
      // window.localStorage.setItem("userInfo", JSON.stringify(res.data));
      window.localStorage.setItem("token", res.data.token);
      window.location.reload();
    },
    async toRegisterFn() {
      if (!this.form.email) {
        this.$message.error("请输入登陆邮箱!");
        return;
      }
      if (!this.form.password) {
        this.$message.error("请输入用户密码!");
        return
      }
      if (this.form.password !== this.form.password2) {
        this.$message.error("2次输入密码不一致!");
        return
      }
      const res = await register({
        email: this.form.email,
        password: this.form.password,
      });
      if (res.code === 300) {
        this.$message.error(res.msg);
        return
      }
      if (res.data) {
        this.$alert("注册成功是否现在登陆！", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            if (action === "confirm") {
              this.toLogin();
            }
          },
        });
      }
    },
  },
};
</script>