saas_pc/src/pages/home2/top.vue

<template>
  <div id="top">
    <div class="n_box">
      <div class="left">
        <div class="tab_main">
          <header>
            <div :class="active == 1 ? 'active_tab' : ''">课程导航</div>
            <!-- <div :class="active == 2 ? 'active_tab' : ''">报考指导</div> -->
          </header>
          <div class="content_tab scroll_style">
            <div
              class="tab_li"
              v-for="(item, index) in typeList"
              :key="index"
              @mouseenter="handleMouseEnter(index)"
            >
              <div class="tops">
                <span>{{ item.educationName }}</span>
                <i class="el-icon-arrow-right"></i>
              </div>
              <ul>
                <li
                  v-for="(items, indexs) in item.businessList"
                  :key="indexs"
                  v-show="indexs < 4"
                >
                  {{ items.aliasName }}
                </li>
                <div style="clear:both;"></div>
              </ul>
              <div class="ri_p">
                <h4>{{ typeList[eduIndex].educationName }}</h4>
                <div class="fgx"></div>
                <ul class="scroll_style">
                  <li
                    v-for="(it, ix) in typeList[eduIndex].businessList"
                    :key="ix"
                    @click="goCourse(it)"
                  >
                    {{ it.aliasName }}
                  </li>
                  <div style="clear:both;"></div>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper">
          <swiper
            v-if="swiperOptions.bannerList.length > 0"
            :options="swiperOptions"
          >
            <swiper-slide
              v-for="(item, index) in swiperOptions.bannerList"
              v-bind:key="index"
              @click.native="swiperJump(item)"
            >
              <img
                :src="$tools.splitImgHost(item.adverUrl, true, 880)"
                alt=""
              />
            </swiper-slide>

            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
      <div class="login">
        <template v-if="!userInfo">
          <h2 class="title">账号登录注册</h2>
          <p class="value">获取海量优质课程</p>
          <img class="ggImg" src="@/assets/new1/专属好课推荐.png" alt="" />
          <div class="btn" @click="$refs.login.openBox()">登录/注册</div>
        </template>
        <template v-else>
          <header class="header_user">
            <div>
              <img :src="$tools.splitImgHost(userInfo.avatar)" alt="" />
              <span>{{ userInfo.realname }}</span>
            </div>
            <div>
              <span
                @click="go('/person-center/my-info')"
                style="cursor: pointer;"
                >个人中心</span
              >
              <i class="el-icon-arrow-right"></i>
            </div>
          </header>
          <div class="header_li">
            <div
              @click="go('/person-center/my-course')"
              style="cursor: pointer;"
            >
              <img src="@/assets/kc.png" alt="" />
              <p>课程</p>
            </div>
            <div @click="go('/person-center/my-bank')" style="cursor: pointer;">
              <img src="@/assets/tk.png" alt="" />
              <p>题库</p>
            </div>
            <div
              @click="go('/person-center/my-order')"
              style="cursor: pointer;"
            >
              <img src="@/assets/dd.png" alt="" />
              <p>订单</p>
            </div>
          </div>
          <div class="fgx" style="width: 100%;opacity: 0.5;"></div>
          <div class="f_box" v-if="recordList.goodsId">
            <div class="btnsy">上次播放</div>
            <div class="title" @click="goLast">{{ recordList.goodsName }}</div>
            <div class="remark">
              <span
                >已学{{
                  toFixed(
                    (recordList.videoCurrentTime / recordList.durationTime) *
                      100
                  )
                }}%</span
              >
              <span>{{ recordList.date }}</span>
            </div>
          </div>
        </template>
      </div>
    </div>
    <login ref="login"></login>
  </div>
</template>

<script>
import login from "@/components/login";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
import { mapGetters } from "vuex";
export default {
  components: {
    swiper,
    swiperSlide,
    login
  },
  data() {
    return {
      recordList: {},
      active: 1,
      eduIndex: 0,
      typeList: [],
      swiperOptions: {
        bannerList: [],
        loop: true,
        observer: true,
        observeParents: true,
        speed: 300,
        autoplayDisableOnInteraction: false,
        autoplayStopOnLast: false,
        autoplay: {
          delay: 1000,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      } //轮播
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),

    toFixed: function() {
      return function(num) {
        if (num) {
          let str = String(num).indexOf(".");

          if (str != -1) {
            return +num.toFixed(2);
          } else {
            return num;
          }
        } else {
          return 0;
        }
      };
    }
  },
  watch: {
    userInfo: {
      handler() {
        if ((newVal, oldVal)) {
          this.getRecord();
        }
      }
    }
  },
  mounted() {
    this.advertisingList();
    this.educationTypeList();
    if (this.userInfo) {
      this.getRecord();
    }
  },
  methods: {
    /**
     * 播放记录
     */
    getRecord() {
      this.$request
        .studRrecordListUserRecord({
          pageNum: 1,
          pageSize: 1
        })
        .then(res => {
          if (res.rows.length) {
            this.recordList = res.rows[0];
          }
        });
    },
    go(path, query) {
      this.$router.push({
        path,
        query
      });
    },
    goLast() {
      if (this.recordList.goodsType == 6) {
        this.go("/my-live-detail/" + this.recordList.goodsId, {
          gradeId: this.recordList.gradeId,
          orderGoodsId: this.recordList.orderGoodsId,
          courseId: this.recordList.courseId
        });
      } else if (this.recordList.goodsType == 1) {
        this.$router.push({
          path: `/my-course-detail/${this.recordList.goodsId}`,
          query: {
            gradeId: this.recordList.gradeId,
            orderGoodsId: this.recordList.orderGoodsId,
            courseId: this.recordList.courseId,
            chapterId: this.recordList.chapterId,
            moduleId: this.recordList.moduleId,
            sectionId: this.recordList.sectionId,
            recordingUrl: this.recordList.recordingUrl,
            liveUrl: this.recordList.liveUrl,
            sectionType: this.recordList.sectionType,
            liveStartTime: this.recordList.liveStartTime,
            liveEndTime: this.recordList.liveEndTime
          }
        });
      }
    },
    handleMouseEnter(index) {
      this.eduIndex = index;
    },
    handleMouseLeave(item) {
      console.log(item, "leave");
    },
    goCourse(item) {
      // if (item.topicId) {
      //   this.$router.push({
      //     path: "/goodsTopic",
      //     query: {
      //       topicId: item.topicId
      //     }
      //   });
      //   return;
      // }
      this.$router.push({
        path: "/course-list",
        query: {
          educationId: item.educationId ? item.educationId : item.id || "",
          projectId: item.projectId || "",
          businessId: item.educationId ? item.id : ""
        }
      });
    },
    educationTypeList() {
      this.$request.educationTypeList().then(res => {
        this.typeList = res.rows || [];
        this.typeList.forEach(async (item, index) => {
          const A = await this.$request.businessList({ educationId: item.id });
          item.businessList = A.rows.filter(items => items.aliasName);
        });
      });
    },
    swiperJump(swiper) {
      if (swiper.jumpType == 1) {
        //无跳转
        return;
      } else if (swiper.jumpType == 2) {
        //url
        window.open(swiper.jumpUrl, "_blank");
      } else if (swiper.jumpType == 3) {
        //内部接口
        this.$router.push({
          path: swiper.jumpUrl
        });
      }
    },
    advertisingList() {
      this.$request
        .advertisinghomeLocationList({
          platform: 2, //1小程序2PC网站
          status: 1,
          locationKey: "home-banner" //首页轮播KEY
        })
        .then(res => {
          /**
           * 如果存在-调用轮播图列表
           */
          if (res.data.length) {
            this.$request
              .advertisingList({ locationId: res.data[0].locationId })
              .then(result => {
                this.swiperOptions.autoplay.delay =
                  res.data[0].intervalTime * 1000;
                this.swiperOptions.bannerList = result.rows;
              });
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.scroll_style {
  &::-webkit-scrollbar {
    width: 5px;
    height: 9px;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    background-color: inherit;
    border: none;
    /* margin: 6px; */
    border-radius: 10px;
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background-color: #F5F5F5; */
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    position: relative;
    right: 2px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
    background-color: #c6c6cd;
    width: 6px;
  }
}
#top {
  height: 600px;
  background: url("../../assets/new1/banner.png");
  position: relative;
  .n_box {
    position: absolute;
    width: 1200px;
    height: 400px;
    top: 126px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    & > .left {
      flex: 1;
      background-color: #fff;
      border-radius: 4px;
      overflow: hidden;
      height: 100%;
      position: relative;
      .tab_main {
        backdrop-filter: blur(10px);
        width: 300px;
        height: 400px;
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.85);
        & > header {
          display: flex;
          align-items: center;
          height: 50px;
          color: #fff;
          user-select: none;
          & > div {
            font-size: 16px;
            flex: 1;
            text-align: center;
            height: 48px;
            line-height: 48px;
            cursor: pointer;
            font-weight: 400;
            border-bottom: 2px solid #eeeeee50;
            &:hover {
              border-color: rgb(0, 122, 255);
              font-weight: bold;
            }
            // border-bottom: 2px solid #eee;
          }
          & > .active_tab {
            border-color: rgb(0, 122, 255);
            font-weight: bold;
          }
        }
        & > .content_tab {
          height: 350px;
          overflow: auto;
          & > .tab_li {
            padding: 16px 0px;
            margin: 0px 20px;
            color: #fff;
            border-bottom: 1px solid rgb(86, 89, 92);
            &:hover {
              color: #007aff !important;
            }
            & > .ri_p {
              visibility: hidden;
              position: absolute;
              background-color: #fff;
              top: 0px;
              left: 300px;
              width: 580px;
              height: 400px;
              transition: all 0.3s;
              opacity: 0;
              padding: 15px 30px 0px;
              display: flex;
              flex-direction: column;
              h4 {
                font-weight: bold;
                color: #007aff;
                font-size: 16px;
              }
              ul {
                overflow: auto;
                > li {
                  user-select: none;
                  cursor: pointer;
                  float: left;
                  margin: 0px 20px 20px 0px;
                  color: #007aff;
                  &:hover {
                    font-weight: bold;
                  }
                }
              }
            }
            &:hover .ri_p {
              visibility: visible;
              opacity: 1;
            }

            &:last-child {
              border-bottom: none;
            }
            & > .tops {
              user-select: none;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 14px;
              font-weight: bold;
            }
            & > ul {
              & > li {
                margin: 0px 10px 6px 0px;
                float: left;
                user-select: none;
              }
            }
          }
        }
      }
    }
    & > .login {
      margin-left: 20px;
      border-radius: 4px;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      width: 300px;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      & > .title {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        margin-top: 50px;
        margin-bottom: 20px;
      }
      & > .value {
        font-size: 14px;
        color: #fff;
        margin-bottom: 20px;
      }
      & > .ggImg {
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 20px;
        width: 211px;
        height: 120px;
        background-color: #fff;
      }
      & > .btn {
        user-select: none;
        cursor: pointer;
        width: 211px;
        border-radius: 100px;
        color: #fff;
        background-color: rgb(0, 122, 255);
        text-align: center;
        height: 30px;
        line-height: 30px;
        transition: all 0.2s;
        &:hover {
          background-color: rgb(2, 106, 244);
        }
      }
      & > .header_user {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 30px;
        & > div {
          display: flex;
          align-items: center;
          & > img {
            width: 40px;
            height: 40px;
            margin-right: 6px;
            overflow: hidden;
            border-radius: 50%;
          }
          & > span {
            color: #fff;
            margin-right: 6px;
          }
          & > i {
            color: #fff;
          }
        }
      }
      & > .header_li {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 30px;
        & > div {
          color: #fff;
          & > img {
            width: 60px;
            height: 60px;
            overflow: hidden;
            border-radius: 50%;
            margin-bottom: 6px;
          }
          & > p {
            text-align: center;
          }
        }
      }
      & > .f_box {
        user-select: none;
        padding: 10px;
        color: #fff;
        width: 100%;
        & > .btnsy {
          display: inline-block;
          border-radius: 14px;
          padding: 4px 8px;
          border: 1px solid #fff;
          margin-bottom: 6px;
        }
        & > .title {
          margin-bottom: 6px;
          cursor: pointer;
          &:hover {
            color: #409eff;
          }
        }
        & > .remark {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 6px;
        }
      }
    }
  }
}
.swiper-slide {
  cursor: pointer;
  height: 400px;

  img {
    width: 100%;
    height: 100%;
  }
}

.swiper-pagination {
  text-align: right;
  padding-right: 24px;

  /deep/ .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.4);

    &-active {
      background: rgba(255, 255, 255, 1);
    }
  }
}
.fgx {
  margin: 15px 0px;
  height: 1px;
  background-color: #eee;
}
</style>