EXEED_manage/src/views/Login/index.vue

<template>
  <div class="page-container">
    
    <div class="page-outer">
      <div class="login-box" v-if="status == 1">
        <el-form>
          <el-form-item label="账号"><el-input v-model="form.name" placeholder="账号" /></el-form-item>
          <el-form-item label="密码"><el-input type="password" v-model="form.password" placeholder="密码" /></el-form-item>
          <el-form-item><el-button type="primary" style="width: 100%" @click="submit">登 录</el-button></el-form-item>
          <el-form-item><el-link @click="status = 2">注册账号</el-link></el-form-item>
        </el-form>
      </div>
      <div class="login-box"  v-if="status == 2">
        <el-form>
          <el-form-item label="账号"><el-input v-model="regForm.name" placeholder="请输入账号" /></el-form-item>
          <el-form-item label="密码"><el-input type="password" v-model="regForm.password" placeholder="请输入密码" /></el-form-item>
          <el-form-item label="手机号码"><el-input v-model="regForm.tel" placeholder="请输入手机号码" /></el-form-item>
          <el-form-item label="真实姓名"><el-input v-model="regForm.realName" placeholder="请输入真实姓名" /></el-form-item>
          <el-form-item><el-button type="primary" style="width: 100%" @click="registerSubmit">注 册</el-button></el-form-item>
          <el-form-item><el-link @click="status = 1">前往登录</el-link></el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { defineComponent, reactive, ref, getCurrentInstance } from "vue";
export default defineComponent({
  name: 'v-login',
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();
    const form = reactive({
      name: "",
      password: "",
    });
    const regForm = reactive({
      name: "",
      password: "",
      tel: "",
      realName: ''
    });
    const status = ref(1); //1登录 2注册
    return {
      form,regForm,
      status,
      proxy,
      store
    };
  },
  methods: {
    submit() {
      this.proxy.$post("/admin/login", this.form).then((res) => {
          const data = res.data;
          this.store.commit("setToken", data.token);
          this.store.commit("setUserInfo", data);
          this.$message.success("登录成功");
          this.$router.push('/');
      });
    },
    registerSubmit() {
      this.proxy.$post("/admin/register", this.regForm).then((res) => {
          const data = res.data;
          this.$message.success("注册成功");
          this.regForm.name = '';
          this.regForm.password = '';
          this.regForm.tel = '';
          this.regForm.realName = '';
          this.status = 1;
      });
    }
  },
});
</script>

<style lang="less" scoped>
.page-container {
  background: rgb(242, 242, 242);
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .page-outer {
    width: 400px;
    .login-box {
      background: #FFF;
      padding: 24px;
    }
  }
}
</style>