zc_saas_pc/src/pages/person-center/index.vue

<template>
  <div class="person-center">
    <Header></Header>
    <section class="section">
      <div class="container">
        <div class="section__header">
          <img
            :src="
              userInfo
                ? userInfo.avatar
                  ? $tools.splitImgHost(userInfo.avatar, true)
                  : '@/assets/qrcode.png'
                : ''
            "
            class="img"
            alt=""
          />
          <div class="text">
            <div class="title">{{ userInfo && userInfo.realname }}</div>
            <div class="desc">你好</div>
          </div>
        </div>

        <el-tabs class="tabs" :value="activeName" @tab-click="handleClick">
          <el-tab-pane name="1">
            <div class="label" slot="label">
              <img src="@/assets/study-center.png" alt="" />
              学习中心
            </div>
          </el-tab-pane>
          <el-tab-pane name="2">
            <div class="label" slot="label">
              <img src="@/assets/person-center.png" alt="" />
              个人中心
            </div>
          </el-tab-pane>
        </el-tabs>

        <div class="swiper">
          <swiper
            v-if="businessList.length > 0"
            ref="mySwiper"
            v-bind:options="swiperOptions"
          >
            <swiper-slide
              class="swiper-item"
              v-for="(item, index) in businessList"
              v-bind:key="index"
              :class="{ active: item == businessItem }"
              @click.native="swiperClick(item)"
            >
              {{ item.educationName }} - {{ item.aliasName }}
            </swiper-slide>
          </swiper>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>

        <div class="section__body clearfix">
          <div class="nav">
            <div class="nav__section">
              <div class="title">我的课程</div>
              <div class="list">
                <router-link to="/person-center/my-course">
                  <div class="item">我的网课</div>
                </router-link>

                <router-link to="/person-center/play-record">
                  <div class="item">播放记录</div>
                </router-link>
              </div>
            </div>
            <div class="nav__section">
              <div class="title">我的直播课</div>
              <div class="list">
                <router-link to="/person-center/my-live">
                  <div class="item">学习列表</div>
                </router-link>
              </div>
            </div>
            <div class="nav__section">
              <div class="title">我的题库</div>
              <div class="list">
                <router-link to="/person-center/my-bank">
                  <div class="item">自购题卷</div>
                </router-link>
                <router-link to="/person-center/free-bank">
                  <div class="item">赠送题卷</div>
                </router-link>
                <router-link to="/person-center/bank-record">
                  <div class="item">做题记录</div>
                </router-link>
                <router-link to="/person-center/my-collect">
                  <div class="item">收藏集</div>
                </router-link>
                <router-link to="/person-center/my-wrong">
                  <div class="item">错题集</div>
                </router-link>
              </div>
            </div>
            <div class="nav__section">
              <div class="title">个人管理</div>
              <div class="list">
                <router-link to="/person-center/my-order">
                  <div class="item">我的订单</div>
                </router-link>
                <router-link to="/person-center/my-invoice">
                  <div class="item">我的发票</div>
                </router-link>
                <router-link to="/person-center/my-classhour">
                  <div class="item">我的学时</div>
                </router-link>
                <router-link to="/person-center/my-examination">
                  <div class="item">我的考试</div>
                </router-link>
                <router-link to="/person-center/my-mock">
                  <div class="item">我的模考</div>
                </router-link>
                <router-link to="/person-center/mock-record">
                  <div class="item">模考记录</div>
                </router-link>
                <router-link to="/person-center/my-message">
                  <div class="item">我的消息</div>
                </router-link>
                <router-link to="/person-center/my-info">
                  <div class="item">我的资料</div>
                </router-link>
                <!-- <router-link to="/">
                  <div class="item">学习计划</div>
                </router-link> -->
              </div>
            </div>
          </div>
          <div class="content">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </section>
    <ToolBar></ToolBar>
    <Footer></Footer>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import "swiper/swiper-bundle.css";
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "PersonCenter",
  components: {
    swiper,
    swiperSlide,
    Footer,
    Header,
    ToolBar,
  },
  data() {
    return {
      activeName: "1",
      swiperOptions: {
        freeMode: false,
        observer: true,
        slidesPerView: "auto",
        observeParents: true,
        speed: 300,
        autoplayDisableOnInteraction: false,
        autoplayStopOnLast: false,
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo", "businessList", "businessItem"]),
  },
  mounted() {},
  methods: {
    ...mapMutations(["setBusinessItem"]),
    handleClick(e) {
      if (this.activeName == e.name) {
        return;
      }

      this.activeName = e.name;
    },
    swiperClick(item) {
      this.setBusinessItem(item);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.person-center {
  .section {
    &__header {
      padding-left: 28px;
      display: flex;
      align-items: center;
      width: 100%;
      height: 138px;
      background: #ebf3ff;

      .img {
        width: 90px;
        height: 90px;
        border-radius: 50%;
      }

      .text {
        margin-left: 24px;
        .title {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }

        .desc {
          margin-top: 10px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }
      }
    }

    .tabs {
      /deep/ .el-tabs__item {
        height: 64px;
        line-height: 64px;
      }
      .label {
        width: 138px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      img {
        margin-right: 10px;
      }
    }

    .swiper {
      position: relative;
      padding: 0 40px;
      .swiper-slide {
        cursor: pointer;
        width: auto !important;
        height: 40px;
        line-height: 40px;
        border-radius: 8px;
        padding: 0 24px;
        background: #eeeeee;
        color: #333333;
        margin-right: 24px;
        font-size: 16px;

        &.active {
          color: #fff;
          background: #3f8dfd;
        }
      }

      .swiper-button-prev,
      .swiper-button-next {
        &::after {
          font-size: 30px;
        }
      }
    }

    &__body {
      margin: 20px 0;
      .nav {
        float: left;
        width: 138px;
        background: #f8f8fc;
        padding: 0 4px;

        &__section {
          .title {
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #333333;
          }

          .list {
            .router-link-active {
              .item {
                color: #3f8dfd;
                background: #e4e4e6;
              }
            }
            .item {
              margin-top: 4px;
              text-align: center;
              display: block;
              height: 40px;
              border-radius: 8px;
              line-height: 40px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
            }
          }
        }
      }

      .content {
        margin-left: 138px;
        padding-left: 24px;
      }
    }
  }
}
</style>