EXEED_manage/src/views/Login/index.vue

<template>
  <div class="page-container">
    <div class="page-outer">
      <div class="big-title">
        星途内容数字化管理后台
      </div>
      <div class="login-box" v-if="status == 1">
        <div class="login-title">
          <span class="login-title-item">账户登录</span>
        </div>
        <el-form>
          <el-form-item size="default" label="账号"><el-input v-model="form.name" placeholder="账号" /></el-form-item>
          <el-form-item size="default" label="密码"><el-input type="password" v-model="form.password" placeholder="密码" /></el-form-item>
          <el-form-item><el-button size="default" type="primary" style="width: 100%;margin-top: 24px" @click="submit">登 录</el-button></el-form-item>
        </el-form>
      </div>
      <div class="footer">
        <el-link href="https://beian.miit.gov.cn" target="_blank">京ICP备13018361号-1</el-link>
      </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;
          if(res.code == 200) {
            this.store.commit("setToken", data.token);
            this.store.commit("setUserInfo", data);
            this.$message.success("登录成功");
            this.$router.push('/');
          } else {
            this.$message.error(res.msg);
          }
      }).catch(() => {});
    },
  },
});
</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;
    padding-top: 72px;
    .big-title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 32px;
      line-height: 22px;
      padding-bottom: 72px;
    }
    .login-box {
      background: #FFF;
      padding: 36px;
      .login-title {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 36px;
        .login-title-item {
          font-weight: 500;
          font-size: 16px;
          line-height: 22px;
        }
      }
    };
    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 180px
    }
  }
}
</style>