virtualSimulation/src/layout/spacePage.vue

<template>
  <div class="login_container">
    <div class="top">
      <div class="loginBtn">
        <p @click="loginFn">{{ user.token ? "已登录" : "登录/注册" }}</p>
      </div>
      <div class="title">{{ setting.title }}</div>
    </div>

    <div class="main-content">
      <div class="personal-center">
        <div class="leftBox">
          <h2>个人中心</h2>
          <p>学生8527</p>
          <button class="btn1" @click="handleHomeClick">返回首页</button>
          <button class="btn2" disabled>个人中心</button>
          <button class="btn3" @click="handlePasswordClick">重置密码</button>
          <button class="btn4" @click="logoutEvent">退出登录</button>
        </div>
        <div class="rightBoxes">
          <div class="topBox">
            <el-form
              style="margin: 30px 0 0 200px"
              :model="formModel"
              size="large"
              autocomplete="off"
            >
              <el-form-item>
                <div class="left" style="width: 60px; color: #fbfdfd">
                  用户账号
                </div>
                <div class="right">
                  <el-input disabled v-model="formModel.username"></el-input>
                </div>
              </el-form-item>
              <el-form-item>
                <div style="display: flex; align-items: center; color: pink">
                  <div class="left" style="width: 60px; color: #fbfdfd">
                    姓名
                  </div>
                  <div class="right">
                    <el-input disabled v-model="formModel.realname"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item prop="clssid">
                <div class="left" style="width: 60px; color: #fbfdfd">班级</div>
                <div class="right">
                  <el-input disabled v-model="formModel.className"></el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="bottomBox">
            <el-form
              size="large"
              style="margin: 30px 0 0 265px"
              :model="formModel"
            >
              <el-form-item>
                <div style="display: flex; align-items: center">
                  <div class="left" style="width: 60px; color: #fbfdfd">
                    学号
                  </div>
                  <div class="right">
                    <el-input disabled v-model="formModel.workNo"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div style="display: flex; align-items: center">
                  <div class="left" style="width: 60px; color: #fbfdfd">
                    手机号
                  </div>
                  <div class="right">
                    <el-input disabled v-model="formModel.phone"></el-input>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <div style="display: flex; align-items: center">
                  <div class="left" style="width: 60px; color: #fbfdfd">
                    成绩
                  </div>
                  <div class="right">
                    <el-input-number
                      disabled
                      v-model="formModel.score"
                    ></el-input-number>
                  </div>
                  <el-button
                    style="
                      color: #333333;
                      margin: 5px 3px 0 83px;
                      font-size: 15px;
                      font-weight: 700;
                      background-color: #e9ddab;
                    "
                    size="large"
                    @click="openDialog"
                    >更改个人信息</el-button
                  >
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 弹框 -->
  <el-dialog v-model="dialog" title="更改个人信息" width="500">
    <el-form :model="dialogForm" :rules="rules" ref="formRef">
      <el-form-item prop="username" label="用户账号" style="margin-top: 30px">
        <el-input v-model="dialogForm.username" disabled></el-input>
      </el-form-item>
      <el-form-item prop="name" label="姓名" label-width="58px">
        <el-input v-model="dialogForm.name"></el-input>
      </el-form-item>
      <el-form-item prop="phone" label="手机号" label-width="58px">
        <el-input v-model="dialogForm.phone"></el-input>
      </el-form-item>
      <!-- <el-form-item prop="clssid" label="班级" label-width="58px">
                <el-cascader placeholder="请选择所属班级" :props="props" style="width: 142%; height: 0.2344rem"
                    v-model="dialogForm.clssid" @change="handleChange" />
            </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="changeInformation">
          确认修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="spacePage">
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import settingStore from "@/store/modules/setting";
const setting = settingStore();
import userStore from "@/store/modules/user";
import { getUserInfoService, userChangeService, logout } from "@/api/user";
// import {getFaculties } from '@/api/user'

import { clearLocalStorage } from "@/utils/auth";
const router = useRouter();
const user = userStore();
const loginFn = () => {
  router.push("/login");
};
const handleHomeClick = () => {
  router.push("/studyPage");
};
const handlePasswordClick = () => {
  console.log("密码管理");
  router.push("/passwordPage");
};

const formRef = ref();
const formModel = ref({
  username: "",
  realname: "",
  className: "",
  workNo: "",
  phone: "",
  score: "",
});
const dialogForm = ref({
  username: "",
  name: "",
  phone: "",
});
const getUser = async () => {
  const res: any = await getUserInfoService();
  // console.log(res.result,'aaaaa');
  formModel.value = res.result;
  // console.log(formModel, 'formModel');
  dialogForm.value.username = res.result.username;
};

const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    {
      min: 5,
      max: 30,
      message: "用户名长度最小五位最大三十位",
      trigger: ["change", "blur"],
    },
  ],
  // workNo: [
  //     { required: true, message: "请输入学号", trigger: "blur" },
  //     {
  //         min: 5,
  //         max: 11,
  //         message: "学号长度最小五位最大十一位",
  //         trigger: ["change", "blur"],
  //     },
  // ],
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
  // clssid: [
  //     { required: true, message: "请选择所属班级", trigger: "blur" },
  // ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    // {
    //     pattern: /^1[3-9]\d{9}$/,
    //     message: "手机号格式不正确",
    //     trigger: ["change", "blur"],
    // },
  ],
};
onMounted(() => {
  getUser();
});

// // 班级
// const FacultiesList = ref([])
// const getFacultiesList = async (data: any) => {
//     const res: any = await getFaculties(data)
//     console.log(res, 'res11')
//     FacultiesList.value = res.result
// }
// const deepValues = ref([])
// // 配置部门级联选择器
// const props = {
//     lazy: true,
//     checkStrictly: true,
//     emitPath: false,
//     async lazyLoad(node: any, resolve: any) {
//         console.log(node);
//         deepValues.value = node.pathValues
//         await getFacultiesList({
//             primaryType: node.level + 1,
//             pid: node.value,
//         })
//         const nodes = FacultiesList.value.map((item: any) => ({
//             value: item.id,
//             label: item.name,
//         }))
//         resolve(nodes)
//     },
// }
// const handleChange = (e: any) => {
//     console.log(e);
//     dialogForm.value.clssid = e
// }

const loading = ref(false);
const dialog = ref(false);
const changeInformation = async () => {
  await formRef.value.validate();
  await userChangeService({
    realname: dialogForm.value.name,
    phone: dialogForm.value.phone,
  })
    .then(() => {
      ElMessage.success("修改成功");
    })
    .catch((error) => {
      // console.log(error, 'error')
      ElMessage.error(error.response.data.message);
    });
  loading.value = true;
  setTimeout(() => {
    dialog.value = false;
  }, 400);
  getUser();
};
const openDialog = () => {
  dialog.value = true;
  dialogForm.value.name = formModel.value.realname;
  dialogForm.value.phone = formModel.value.phone;
};
const handleClose = () => {
  dialog.value = false;
};

// 退出登录
const logoutEvent = async () => {
  await logout();
  clearLocalStorage();
  router.push("/login");

};
</script>

<style lang="less" scoped>
.login_container {
  position: relative;
  width: 100%;
  // height: 1080px;
  min-height: 100vh;
  background-color: #091d22;
  background: url("../assets//images/bg3.png") no-repeat;
  background-size: cover;

  .top {
    width: 100%;
    height: 75px;
    text-align: center;
    font-size: 42px;
    line-height: 75px;
    font-style: italic;
    background: url("../assets/images/topbgc.png") no-repeat;
    // background-position: center bottom -10px;
    background-size: cover;

    .title {
      color: #fff;
    }

    .loginBtn {
      position: absolute;
      /* 清除浮动影响 */
      float: left;
      /* 向左浮动 */
      top: 10px;
      left: 230px;
      border: 1px solid #33fefe;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      width: 142px;
      height: 40px;
      line-height: 37px;
      background: linear-gradient(to bottom, #08b9c1, #0758b8);
      transform: skew(-30deg);
      cursor: pointer;
      /* 在X轴方向倾斜 -30 度 */
      border-radius: 5%;

      p {
        transform: skew(30deg);
        /* 反向倾斜，抵消父元素的变形 */
        font-size: 18px;
        color: #fff;
      }
    }
  }
}

.main-content {
  display: flex;
  justify-content: center;
  align-items: center;

  .personal-center {
    display: flex;
    width: 1800px;
    height: 600px;
    margin-top: 150px;
    justify-content: space-evenly;

    .leftBox {
      position: relative;
      width: 550px;
      height: 600px;
      background: url("../assets/images/space1.png") no-repeat;
      transform: skewX(-5deg);
      margin-right: -150px;
      // flex-direction: column;
      background-size: 98%;

      h2 {
        position: absolute;
        top: 6px;
        left: 60%;
        transform: translateX(-50%);
        color: #ededd8;
        font-size: 16px;
        font-weight: 700;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
      }

      p {
        position: absolute;
        top: 28%;
        left: 55%;
        transform: translateX(-50%);
        color: #fdeda0;
        font-size: 20px;
        font-weight: 700;
        height: 40px;
        line-height: 40px;
      }

      .btn1,
      .btn2,
      .btn3,
      .btn4 {
        display: block;
        width: 200px;
        height: 55px;
        background-color: #e9ddab;
        margin: 25px auto;
        border: none;
        border-radius: 5px;
        color: #333;
        font-size: 20px;
        font-weight: 700;
        transform: skewX(-17deg);
      }

      .btn1 {
        position: absolute;
        top: 238px;
        left: 31%;
      }

      .btn2 {
        position: absolute;
        left: 26%;
        top: 320px;
        background-color: #e2c04f;
      }

      .btn3 {
        position: absolute;
        left: 22%;
        top: 403px;
      }
      .btn4 {
        position: absolute;
        left: 18%;
        top: 483px;
      }
    }

    .rightBoxes {
      width: 1200px;
      height: 600px;
      // background-color: skyblue;
      // flex: 1;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      transform: skewX(-17deg);

      .topBox {
        // width: 800px;
        //     height: 300px;
        flex: 1;
        background-color: lightgreen;
        background: url("../assets/images/space2.png") no-repeat;
        background-size: 98%;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        transform: skewX(15deg);

        .el-input {
          width: 450px;
          height: 50px;
        }

        :deep(.el-form-item__error) {
          left: 90px;
        }
      }

      .bottomBox {
        margin-top: 36px;
        flex: 1;
        // width: 800px;
        //     height: 200px;
        background-color: lightcoral;
        background: url("../assets/images/space3.png") no-repeat;
        background-size: 98%;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        transform: skewX(15deg);

        .el-input {
          width: 450px;
          height: 50px;
        }

        :deep(.el-form-item__error) {
          left: 90px;
        }
      }
    }
  }
}

// .personal-center {
//     background-color: #003366;
//     padding: 20px;
//     color: white;
//     border-radius: 10px;
//     transform: skewX(-15deg);
//     display: flex;

// }
</style>