txyx_pc/src/pages/personal/index.vue

<template>
  <div v-loading="loading" class="" style="position: relative">
    <common-header />

    <div class="bg absolute">
      <img src="/images/personal/bg.png" />
    </div>

    <div class="personalMain">
      <famous-teacher v-if="isFamous" :userInfo="userInfo" :proData="proData" />

      <el-card style="margin: 15px 0">
        <ordinary-teacher v-if="!isFamous" :userInfo="userInfo" :proData="proData" />

        <div class="menuDiv" v-if="!isStudent">
          <div class="list pointer font-size-16" :class="activeMenu == item.url ? 'active' : ''" v-for="item in menuData" :key="item.name" @click="goToPage(item.url, item.type)">
            {{ item.name }}
          </div>
        </div>
        <div class="menuDiv" v-if="isStudent">
          <div class="list pointer font-size-16" :class="activeMenu == item.url ? 'active' : ''" v-for="item in menuData1" :key="item.name" @click="goToPage(item.url, item.type)">
            {{ item.name }}
          </div>
        </div>
      </el-card>

      <router-view />
    </div>
  </div>
</template>

<script>
import CommonHeader from "@/components/CommonHeader/index.vue";
import OrdinaryTeacher from "./components/main/OrdinaryTeacher.vue";
import FamousTeacher from "./components/main/FamousTeacher.vue";
import { user_info } from "./components/MyCourse/api";
export default {
  components: { CommonHeader, OrdinaryTeacher, FamousTeacher },
  data() {
    return {
      userInfo: {},
      isFamous: false,
      isStudent: true,
      proData: [],
      proData1: [
        {
          name: "我的课程",
          key: "kc_num",
          value: "",
        },
        {
          name: "观看数量",
          key: "watch_num",
          value: "2698",
        },
        {
          name: "被关注数",
          key: "followed",
          value: "2021",
        },
        {
          name: "总积分",
          key: "user_score",
          value: "2021",
        },
      ],
      proData2: [
        {
          name: "优秀作业",
          key: "kc_num",
          value: "20",
        },
        {
          name: "被关注数",
          key: "watch_num",
          value: "2698",
        },
        {
          name: "总积分",
          key: "followed",
          value: "2021",
        },
      ],
      activeMenu: "",
      menuData: [
        {
          name: "我的课程",
          url: "mycourse",
        },
        {
          name: "我参与的组",
          url: "participate",
        },
        // {
        //   name: "赞与收藏",
        //   url: "collection",
        // },
        {
          name: "我关注的人",
          url: "attention",
        },
        {
          name: "作业",
          url: "homework",
        },
        {
          name: "互评记录",
          url: "mutualRecord",
        },
        {
          name: "我的积分",
          url: "credits",
        },
        {
          name: "申请成为名师",
          url: "masterTeacher",
        },
        {
          name: "约课",
          url: "personal_yk",
        },
        {
          name: "同步课堂",
          url: "http://www.txhlwxx.com/index.php?mod=txwx&action=hdhy&do=index&api=html",
          type: 1
        },
      ],
      menuData1: [
        {
          name: "我的足迹",
          url: "xs-track",
        },
        {
          name: "我的作业",
          url: "xs-homework",
        },
        {
          name: "我的积分",
          url: "xs-credits",
        },
        {
          name: "我关注的人",
          url: "xs-attention",
        },
      ],
      loading: true,
    };
  },
  methods: {
    goToPage(url, type) {
      if (type == 1) {
        window.open(url);
      } else {
        this.activeMenu = url;
        this.$router.push({ name: url });
      }
    },
    initUserInfo() {
      user_info().then((res) => {
        if (res.code == 1) {
          this.userInfo = res.data;
          this.isStudent = this.userInfo.user_role_id == 76 ? true : false;
          if (!this.isStudent) {
            this.proData = this.proData1;
          } else {
            this.proData = this.proData2;
          }
          this.isFamous = this.userInfo.ext.ue_is_ms == 1 ? true : false;
          this.proData.map((item) => {
            for (let key in this.userInfo) {
              if (item.key == key) {
                item.value = this.userInfo[key];
              }
            }
          });
          this.loading = false;
        }
      });
    },
  },
  created() {
    this.activeMenu = this.$route.name.indexOf("course") != -1 ? "mycourse" : this.$route.name;
    this.initUserInfo();
  },
};
</script>

<style lang="scss" scoped>
.personalMain {
  width: 1440px;
  margin: auto;
  position: relative;
  z-index: 10;
  .pointer {
    cursor: pointer;
  }

  .el-card {
    border-radius: 12px;
    .menuDiv {
      display: flex;
      margin-bottom: -10px;
      .list {
        margin: 0 20px;
        color: #949494;
        position: relative;
        line-height: 40px;
        &::after {
          content: "";
          width: 0;
          height: 2px;
          background: rgba(0, 131, 197, 0.8);
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          transition: width linear 0.1s;
        }
        &:hover {
          color: rgba(0, 131, 197, 0.8);
        }
        &.active {
          color: rgba(0, 131, 197, 0.8);
          &::after {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>